@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
168 lines (167 loc) • 10.8 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 { keyed } from "lit-html/directives/keyed.js";
import { html } from "lit";
import { LitElement, safeClassMap } from "@arcgis/lumina";
import { a as slotChangeHasAssignedElement, s as slotChangeGetAssignedElements } from "../../chunks/dom.js";
import { css } from "@lit/reactive-element/css-tag.js";
const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{position:absolute;inset:0;display:flex;block-size:100%;inline-size:100%;flex-direction:column;overflow:hidden}.main{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;flex-direction:row;justify-content:space-between;overflow:hidden}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;overflow:auto;justify-content:space-between}.content ::slotted(calcite-shell-center-row),.content ::slotted(calcite-panel),.content ::slotted(calcite-flow){flex:1 1 auto;align-self:stretch;max-block-size:unset}.content--behind{position:absolute;inset:0;border-width:0px;z-index:calc(var(--calcite-z-index) - 1);display:initial}.content--non-interactive{pointer-events:none;display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap}::slotted(calcite-shell-center-row){inline-size:unset}::slotted(.header .heading){font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal)}slot[name=panel-start]::slotted(calcite-shell-panel),slot[name=panel-end]::slotted(calcite-shell-panel){position:relative;z-index:calc(var(--calcite-z-index) + 1)}slot[name=panel-end]::slotted(calcite-shell-panel){margin-inline-start:auto}::slotted(calcite-panel),::slotted(calcite-flow){border-width:var(--calcite-border-width-sm);border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-none);border-inline-end-width:var(--calcite-border-width-none);border-style:solid}slot[name=center-row]::slotted(calcite-shell-center-row:not([detached])),slot[name=panel-top]::slotted(calcite-shell-center-row:not([detached])),slot[name=panel-bottom]::slotted(calcite-shell-center-row:not([detached])){border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:var(--calcite-border-width-sm)}.center-content{display:flex;flex-direction:column;justify-content:space-between;block-size:100%;inline-size:100%;min-inline-size:0}.content-bottom{justify-content:flex-end}::slotted(calcite-shell-center-row){flex:none;align-self:stretch}::slotted(calcite-tip-manager){position:absolute;z-index:var(--calcite-z-index-toast);box-sizing:border-box}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}::slotted(calcite-tip-manager){animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:.25rem;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);inset-block-end:.5rem;inset-inline:var(--calcite-shell-tip-spacing, 26vw)}slot[name=center-row]::slotted(calcite-shell-center-row),slot[name=panel-bottom]::slotted(calcite-shell-center-row){margin-block-start:auto}slot[name=panel-top]::slotted(calcite-shell-center-row){margin-block-end:auto}.position-wrapper{position:absolute;pointer-events:none;inset:0}slot[name=modals]::slotted(calcite-modal){position:absolute}:host([hidden]){display:none}[hidden]{display:none}`;
const CSS = {
main: "main",
content: "content",
contentBehind: "content--behind",
contentBottom: "content-bottom",
contentNonInteractive: "content--non-interactive",
footer: "footer",
positionedSlotWrapper: "positioned-slot-wrapper",
contentBehindCenterContent: "center-content"
};
const SLOTS = {
centerRow: "center-row",
panelStart: "panel-start",
panelEnd: "panel-end",
panelTop: "panel-top",
panelBottom: "panel-bottom",
header: "header",
footer: "footer",
alerts: "alerts",
sheets: "sheets",
modals: "modals",
dialogs: "dialogs"
};
class Shell extends LitElement {
constructor() {
super();
this.hasAlerts = false;
this.hasDialogs = false;
this.hasFooter = false;
this.hasHeader = false;
this.hasModals = false;
this.hasOnlyPanelBottom = false;
this.hasPanelBottom = false;
this.hasPanelTop = false;
this.hasSheets = false;
this.panelIsResizing = false;
this.contentBehind = false;
this.listen("calciteInternalShellPanelResizeStart", this.handleCalciteInternalShellPanelResizeStart);
this.listen("calciteInternalShellPanelResizeEnd", this.handleCalciteInternalShellPanelResizeEnd);
}
static {
this.properties = { hasAlerts: [16, {}, { state: true }], hasDialogs: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], hasHeader: [16, {}, { state: true }], hasModals: [16, {}, { state: true }], hasOnlyPanelBottom: [16, {}, { state: true }], hasPanelBottom: [16, {}, { state: true }], hasPanelTop: [16, {}, { state: true }], hasSheets: [16, {}, { state: true }], panelIsResizing: [16, {}, { state: true }], contentBehind: [7, {}, { reflect: true, type: Boolean }] };
}
static {
this.styles = styles;
}
willUpdate(changes) {
if (changes.has("hasPanelTop") && (this.hasUpdated || this.hasPanelTop !== false) || changes.has("hasPanelBottom") && (this.hasUpdated || this.hasPanelBottom !== false)) {
this.hasOnlyPanelBottom = !this.hasPanelTop && this.hasPanelBottom;
}
}
handleCalciteInternalShellPanelResizeStart(event) {
this.panelIsResizing = true;
event.stopPropagation();
}
handleCalciteInternalShellPanelResizeEnd(event) {
this.panelIsResizing = false;
event.stopPropagation();
}
handleHeaderSlotChange(event) {
this.hasHeader = !!slotChangeHasAssignedElement(event);
}
handleFooterSlotChange(event) {
this.hasFooter = !!slotChangeHasAssignedElement(event);
}
handleAlertsSlotChange(event) {
this.hasAlerts = !!slotChangeHasAssignedElement(event);
slotChangeGetAssignedElements(event)?.map((el) => {
if (el.tagName === "CALCITE-ALERT") {
el.embedded = true;
}
});
}
handleSheetsSlotChange(event) {
this.hasSheets = !!slotChangeHasAssignedElement(event);
slotChangeGetAssignedElements(event)?.map((el) => {
if (el.tagName === "CALCITE-SHEET") {
el.embedded = true;
}
});
}
handleModalsSlotChange(event) {
this.hasModals = !!slotChangeHasAssignedElement(event);
slotChangeGetAssignedElements(event)?.map((el) => {
if (el.tagName === "CALCITE-MODAL") {
el.embedded = true;
}
});
}
handlePanelTopChange(event) {
this.hasPanelTop = slotChangeHasAssignedElement(event);
}
handlePanelBottomChange(event) {
this.hasPanelBottom = slotChangeHasAssignedElement(event);
}
handleDialogsSlotChange(event) {
this.hasDialogs = !!slotChangeHasAssignedElement(event);
slotChangeGetAssignedElements(event)?.map((el) => {
if (el.tagName === "CALCITE-DIALOG") {
el.embedded = true;
}
});
}
renderHeader() {
return html`<div .hidden=${!this.hasHeader}>${keyed("header", html`<slot name=${SLOTS.header} @slotchange=${this.handleHeaderSlotChange}></slot>`)}</div>`;
}
renderFooter() {
return keyed("footer", html`<div class=${safeClassMap(CSS.footer)} .hidden=${!this.hasFooter}><slot name=${SLOTS.footer} @slotchange=${this.handleFooterSlotChange}></slot></div>`);
}
renderAlerts() {
return html`<div .hidden=${!this.hasAlerts}>${keyed("alerts", html`<slot name=${SLOTS.alerts} @slotchange=${this.handleAlertsSlotChange}></slot>`)}</div>`;
}
renderSheets() {
return html`<div .hidden=${!this.hasSheets}>${keyed("sheets", html`<slot name=${SLOTS.sheets} @slotchange=${this.handleSheetsSlotChange}></slot>`)}</div>`;
}
renderModals() {
return html`<div .hidden=${!this.hasModals}>${keyed("modals", html`<slot name=${SLOTS.modals} @slotchange=${this.handleModalsSlotChange}></slot>`)}</div>`;
}
renderDialogs() {
return html`<div .hidden=${!this.hasDialogs}>${keyed("dialogs", html`<slot name=${SLOTS.dialogs} @slotchange=${this.handleDialogsSlotChange}></slot>`)}</div>`;
}
renderContent() {
const { panelIsResizing } = this;
const defaultSlotNode = keyed("default-slot", html`<slot></slot>`);
const defaultSlotContainerNode = panelIsResizing ? html`<div class=${safeClassMap(CSS.contentNonInteractive)}>${defaultSlotNode}</div>` : defaultSlotNode;
const deprecatedCenterRowSlotNode = keyed("center-row-slot", html`<slot name=${SLOTS.centerRow}></slot>`);
const panelBottomSlotNode = keyed("panel-bottom-slot", html`<slot name=${SLOTS.panelBottom} @slotchange=${this.handlePanelBottomChange}></slot>`);
const panelTopSlotNode = keyed("panel-top-slot", html`<slot name=${SLOTS.panelTop} @slotchange=${this.handlePanelTopChange}></slot>`);
const contentContainerKey = "content-container";
const content = this.contentBehind ? [
keyed(contentContainerKey, html`<div class=${safeClassMap({
[CSS.content]: true,
[CSS.contentBehind]: true
})}>${defaultSlotContainerNode}</div>`),
html`<div class=${safeClassMap({
[CSS.contentBehindCenterContent]: true,
[CSS.contentBottom]: this.hasOnlyPanelBottom
})}>${panelTopSlotNode}${panelBottomSlotNode}${deprecatedCenterRowSlotNode}</div>`
] : [
keyed(contentContainerKey, html`<div class=${safeClassMap({ [CSS.content]: true, [CSS.contentBottom]: this.hasOnlyPanelBottom })}>${panelTopSlotNode}${defaultSlotContainerNode}${panelBottomSlotNode}${deprecatedCenterRowSlotNode}</div>`)
];
return content;
}
renderMain() {
return html`<div class=${safeClassMap(CSS.main)}><slot name=${SLOTS.panelStart}></slot>${this.renderContent()}<slot name=${SLOTS.panelEnd}></slot></div>`;
}
renderPositionedSlots() {
return html`<div class=${safeClassMap(CSS.positionedSlotWrapper)}>${this.renderAlerts()}${this.renderModals()}${this.renderDialogs()}${this.renderSheets()}</div>`;
}
render() {
return html`${this.renderHeader()}${this.renderMain()}${this.renderFooter()}${this.renderPositionedSlots()}`;
}
}
customElement("calcite-shell", Shell);
export {
Shell
};