@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
5 lines (4 loc) • 2.24 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import{a as o}from"./M7EAHGE3.js";import{d as m}from"./CKRTMNFR.js";import{b as c}from"./5RDOSP2E.js";import{s as d}from"./3ADX47DD.js";import"./NNVH7JUI.js";import{E as l,F as i,R as r,c as n,d as s}from"./BJZTU5BQ.js";var h={scrim:"scrim",content:"content"},u={s:72,l:480},p=n`:host{position:absolute;inset:0;z-index:var(--calcite-z-index-overlay);display:flex;block-size:100%;inline-size:100%;flex-direction:column;align-items:stretch} calcite-scrim-fade-in{0%{--tw-bg-opacity: 0 }to{--tw-text-opacity: 1 }}.scrim{position:absolute;inset:0;display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background, var(--calcite-color-transparent-scrim))}.content{padding:1rem}:host([hidden]){display:none}[hidden]{display:none}`,a=class extends l{constructor(){super(...arguments),this.resizeObserver=o("resize",()=>this.handleResize()),this.messages=m(),this.hasContent=!1,this.loading=!1}static{this.properties={hasContent:[16,{},{state:!0}],loaderScale:[16,{},{state:!0}],loading:[7,{},{reflect:!0,type:Boolean}],messageOverrides:[0,{},{attribute:!1}]}}static{this.styles=p}connectedCallback(){super.connectedCallback(),this.resizeObserver?.observe(this.el)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect()}handleDefaultSlotChange(e){this.hasContent=d(e)}storeLoaderEl(e){this.loaderEl=e,this.handleResize()}getScale(e){return e<u.s?"s":e>=u.l?"l":"m"}handleResize(){let{loaderEl:e,el:t}=this;e&&(this.loaderScale=this.getScale(Math.min(t.clientHeight,t.clientWidth)??0))}render(){let{hasContent:e,loading:t,messages:f}=this;return s`<div class=${i(h.scrim)}>${t?s`<calcite-loader .label=${f.loading} .scale=${this.loaderScale} ${c(this.storeLoaderEl)}></calcite-loader>`:null}<div class=${i(h.content)} .hidden=${!e}><slot =${this.handleDefaultSlotChange}></slot></div></div>`}};r("calcite-scrim",a);export{a as Scrim};