@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
3 lines (2 loc) • 2.1 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import{a as d}from"./WAA77FNZ.js";import{a as h}from"./SQ6RHDDF.js";import"./QUTTHRH3.js";import"./MNIRD7Q7.js";import{r as m}from"./ZQBZ5QPB.js";import"./CIYXQ5G6.js";import{C as l,D as r,E as o,F as s,Q as c,g as a,h as t}from"./G7AHLVJ5.js";var f={scrim:"scrim",content:"content"},u={s:72,l:480},b=a`: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}`,i=class extends o{constructor(){super(...arguments),this.loaderRef=l(),this.resizeObserver=d("resize",()=>this.handleResize()),this.messages=h(),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=b}connectedCallback(){super.connectedCallback(),this.resizeObserver?.observe(this.el)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect()}handleDefaultSlotChange(e){this.hasContent=m(e)}getScale(e){return e<u.s?"s":e>=u.l?"l":"m"}handleResize(){let{el:e}=this;this.loaderScale=this.getScale(Math.min(e.clientHeight,e.clientWidth)??0)}render(){let{hasContent:e,loading:p,loaderScale:n,messages:g}=this;return t`<div class=${s(f.scrim)}>${p&&n?t`<calcite-loader .label=${g.loading} .scale=${n} ${r(this.loaderRef)}></calcite-loader>`:null}<div class=${s(f.content)} .hidden=${!e}><slot =${this.handleDefaultSlotChange}></slot></div></div>`}};c("calcite-scrim",i);export{i as Scrim};