@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
78 lines (77 loc) • 3.16 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 { c as customElement } from "../../chunks/runtime.js";
import { ref } from "lit-html/directives/ref.js";
import { html } from "lit-html";
import { LitElement, safeClassMap } from "@arcgis/lumina";
import { c as createObserver } from "../../chunks/observers.js";
import { r as slotChangeHasContent } from "../../chunks/dom.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
scrim: "scrim",
content: "content"
};
const BREAKPOINTS = {
s: 72,
// Less than 72px.
// medium is assumed default.
l: 480
// Greater than or equal to 480px.
};
const styles = css`: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}@keyframes 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}`;
class Scrim extends LitElement {
constructor() {
super(...arguments);
this.resizeObserver = createObserver("resize", () => this.handleResize());
this.messages = useT9n();
this.hasContent = false;
this.loading = false;
}
static {
this.properties = { hasContent: [16, {}, { state: true }], loaderScale: [16, {}, { state: true }], loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }] };
}
static {
this.styles = styles;
}
connectedCallback() {
super.connectedCallback();
this.resizeObserver?.observe(this.el);
}
disconnectedCallback() {
super.disconnectedCallback();
this.resizeObserver?.disconnect();
}
handleDefaultSlotChange(event) {
this.hasContent = slotChangeHasContent(event);
}
storeLoaderEl(el) {
this.loaderEl = el;
this.handleResize();
}
getScale(size) {
if (size < BREAKPOINTS.s) {
return "s";
} else if (size >= BREAKPOINTS.l) {
return "l";
} else {
return "m";
}
}
handleResize() {
const { loaderEl, el } = this;
if (!loaderEl) {
return;
}
this.loaderScale = this.getScale(Math.min(el.clientHeight, el.clientWidth) ?? 0);
}
render() {
const { hasContent, loading, messages } = this;
return html`<div class=${safeClassMap(CSS.scrim)}>${loading ? html`<calcite-loader .label=${messages.loading} .scale=${this.loaderScale} ${ref(this.storeLoaderEl)}></calcite-loader>` : null}<div class=${safeClassMap(CSS.content)} .hidden=${!hasContent}><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></div>`;
}
}
customElement("calcite-scrim", Scrim);
export {
Scrim
};