UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

168 lines (167 loc) • 10.8 kB
/*! 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 };