{"version":3,"names":["CSS","scrim","content","BREAKPOINTS","s","l","scrimCss","CalciteScrimStyle0","Scrim","this","resizeObserver","createObserver","handleResize","handleDefaultSlotChange","event","hasContent","slotChangeHasContent","storeLoaderEl","el","loaderEl","onMessagesChange","effectiveLocaleChange","updateMessages","effectiveLocale","connectedCallback","connectLocalized","connectMessages","observe","componentWillLoad","setUpMessages","disconnectedCallback","disconnectLocalized","disconnectMessages","disconnect","render","loading","messages","h","key","class","label","ref","scale","loaderScale","hidden","onSlotchange","getScale","size","Math","min","clientHeight","clientWidth"],"sources":["src/components/scrim/resources.ts","src/components/scrim/scrim.scss?tag=calcite-scrim&encapsulation=shadow","src/components/scrim/scrim.tsx"],"sourcesContent":["export const CSS = {\n  scrim: \"scrim\",\n  content: \"content\",\n};\n\nexport const BREAKPOINTS = {\n  s: 72, // Less than 72px.\n  // medium is assumed default.\n  l: 480, // Greater than or equal to 480px.\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-scrim-background: Specifies the background color of the scrim.\n */\n:host {\n  --calcite-scrim-background: var(--calcite-color-transparent-scrim);\n}\n\n:host {\n  @apply absolute\n  inset-0\n  z-overlay\n  flex\n  h-full\n  w-full\n  flex-col\n  items-stretch;\n}\n\n@keyframes calcite-scrim-fade-in {\n  0% {\n    @apply bg-opacity-0;\n  }\n  100% {\n    @apply text-opacity-100;\n  }\n}\n\n.scrim {\n  @apply absolute\n  inset-0\n  flex\n  flex-col\n  content-center\n  items-center\n  justify-center\n  overflow-hidden;\n  animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;\n  background-color: var(--calcite-scrim-background, var(--calcite-color-transparent-scrim));\n}\n\n.content {\n  @apply p-4;\n}\n\n@include base-component();\n","import { Component, Element, h, Prop, State, VNode, Watch } from \"@stencil/core\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { createObserver } from \"../../utils/observers\";\nimport { Scale } from \"../interfaces\";\nimport { slotChangeHasContent } from \"../../utils/dom\";\nimport { CSS, BREAKPOINTS } from \"./resources\";\nimport { ScrimMessages } from \"./assets/scrim/t9n\";\n\n/**\n * @slot - A slot for adding custom content, primarily loading information.\n */\n@Component({\n  tag: \"calcite-scrim\",\n  styleUrl: \"scrim.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Scrim implements LocalizedComponent, T9nComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ScrimMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<ScrimMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteScrimElement;\n\n  resizeObserver = createObserver(\"resize\", () => this.handleResize());\n\n  loaderEl: HTMLCalciteLoaderElement;\n\n  @State() loaderScale: Scale;\n\n  @State() defaultMessages: ScrimMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() hasContent = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n    this.resizeObserver?.observe(this.el);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.resizeObserver?.disconnect();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Method\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const { hasContent, loading, messages } = this;\n\n    return (\n      <div class={CSS.scrim}>\n        {loading ? (\n          <calcite-loader\n            label={messages.loading}\n            ref={this.storeLoaderEl}\n            scale={this.loaderScale}\n          />\n        ) : null}\n        <div class={CSS.content} hidden={!hasContent}>\n          <slot onSlotchange={this.handleDefaultSlotChange} />\n        </div>\n      </div>\n    );\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private handleDefaultSlotChange = (event: Event): void => {\n    this.hasContent = slotChangeHasContent(event);\n  };\n\n  private storeLoaderEl = (el: HTMLCalciteLoaderElement): void => {\n    this.loaderEl = el;\n    this.handleResize();\n  };\n\n  private getScale(size: number): Scale {\n    if (size < BREAKPOINTS.s) {\n      return \"s\";\n    } else if (size >= BREAKPOINTS.l) {\n      return \"l\";\n    } else {\n      return \"m\";\n    }\n  }\n\n  private handleResize(): void {\n    const { loaderEl, el } = this;\n\n    if (!loaderEl) {\n      return;\n    }\n\n    this.loaderScale = this.getScale(Math.min(el.clientHeight, el.clientWidth) ?? 0);\n  }\n}\n"],"mappings":";;;;;yTAAO,MAAMA,EAAM,CACjBC,MAAO,QACPC,QAAS,WAGJ,MAAMC,EAAc,CACzBC,EAAG,GAEHC,EAAG,KCRL,MAAMC,EAAW,ysBACjB,MAAAC,EAAeD,E,MCuBFE,EAAK,M,yBAuChBC,KAAAC,eAAiBC,EAAe,UAAU,IAAMF,KAAKG,iBAsE7CH,KAAAI,wBAA2BC,IACjCL,KAAKM,WAAaC,EAAqBF,EAAM,EAGvCL,KAAAQ,cAAiBC,IACvBT,KAAKU,SAAWD,EAChBT,KAAKG,cAAc,E,aAzGc,M,uIAqCR,G,gBAOL,K,CA3BtB,gBAAAQ,G,CAuBA,qBAAAC,GACEC,EAAeb,KAAMA,KAAKc,gB,CAW5B,iBAAAC,GACEC,EAAiBhB,MACjBiB,EAAgBjB,MAChBA,KAAKC,gBAAgBiB,QAAQlB,KAAKS,G,CAGpC,uBAAMU,SACEC,EAAcpB,K,CAGtB,oBAAAqB,GACEC,EAAoBtB,MACpBuB,EAAmBvB,MACnBA,KAAKC,gBAAgBuB,Y,CASvB,MAAAC,GACE,MAAMnB,WAAEA,EAAUoB,QAAEA,EAAOC,SAAEA,GAAa3B,KAE1C,OACE4B,EAAA,OAAAC,IAAA,2CAAKC,MAAOvC,EAAIC,OACbkC,EACCE,EAAA,kBACEG,MAAOJ,EAASD,QAChBM,IAAKhC,KAAKQ,cACVyB,MAAOjC,KAAKkC,cAEZ,KACJN,EAAA,OAAAC,IAAA,2CAAKC,MAAOvC,EAAIE,QAAS0C,QAAS7B,GAChCsB,EAAA,QAAAC,IAAA,2CAAMO,aAAcpC,KAAKI,2B,CAqBzB,QAAAiC,CAASC,GACf,GAAIA,EAAO5C,EAAYC,EAAG,CACxB,MAAO,G,MACF,GAAI2C,GAAQ5C,EAAYE,EAAG,CAChC,MAAO,G,KACF,CACL,MAAO,G,EAIH,YAAAO,GACN,MAAMO,SAAEA,EAAQD,GAAEA,GAAOT,KAEzB,IAAKU,EAAU,CACb,M,CAGFV,KAAKkC,YAAclC,KAAKqC,SAASE,KAAKC,IAAI/B,EAAGgC,aAAchC,EAAGiC,cAAgB,E","ignoreList":[]}