@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
66 lines (65 loc) • 4.42 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 { html } from "lit-html";
import { keyed } from "lit-html/directives/keyed.js";
import { LitElement, safeClassMap } from "@arcgis/lumina";
import { a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
import { S as SLOTS, C as CSS } from "../../chunks/resources.js";
import { css } from "@lit/reactive-element/css-tag.js";
const styles = css`:host([disabled]) .content{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) .content *,:host([disabled]) .content ::slotted(*){pointer-events:none}:host{display:flex;flex:1 1 0%;flex-direction:column}.container{display:flex;flex:1 1 auto;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;padding-inline:var(--calcite-stack-padding-inline, .75rem);padding-block:var(--calcite-stack-padding-block, .5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:.75rem;align-self:center}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}:host([hidden]){display:none}[hidden]{display:none}`;
class Stack extends LitElement {
constructor() {
super(...arguments);
this.hasActionsEnd = false;
this.hasActionsStart = false;
this.hasContentEnd = false;
this.hasContentStart = false;
this.disabled = false;
}
static {
this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }] };
}
static {
this.styles = styles;
}
handleActionsStartSlotChange(event) {
this.hasActionsStart = slotChangeHasAssignedElement(event);
}
handleActionsEndSlotChange(event) {
this.hasActionsEnd = slotChangeHasAssignedElement(event);
}
handleContentStartSlotChange(event) {
this.hasContentStart = slotChangeHasAssignedElement(event);
}
handleContentEndSlotChange(event) {
this.hasContentEnd = slotChangeHasAssignedElement(event);
}
renderActionsStart() {
const { hasActionsStart } = this;
return keyed("actions-start-container", html`<div class=${safeClassMap(CSS.actionsStart)} .hidden=${!hasActionsStart}><slot name=${SLOTS.actionsStart} @slotchange=${this.handleActionsStartSlotChange}></slot></div>`);
}
renderActionsEnd() {
const { hasActionsEnd } = this;
return keyed("actions-end-container", html`<div class=${safeClassMap(CSS.actionsEnd)} .hidden=${!hasActionsEnd}><slot name=${SLOTS.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot></div>`);
}
renderContentStart() {
const { hasContentStart } = this;
return html`<div class=${safeClassMap(CSS.contentStart)} .hidden=${!hasContentStart}><slot name=${SLOTS.contentStart} @slotchange=${this.handleContentStartSlotChange}></slot></div>`;
}
renderDefaultContent() {
return html`<div class=${safeClassMap(CSS.content)}><slot></slot></div>`;
}
renderContentEnd() {
const { hasContentEnd } = this;
return html`<div class=${safeClassMap(CSS.contentEnd)} .hidden=${!hasContentEnd}><slot name=${SLOTS.contentEnd} @slotchange=${this.handleContentEndSlotChange}></slot></div>`;
}
render() {
return html`<div class=${safeClassMap(CSS.container)}>${this.renderActionsStart()}${this.renderContentStart()}${this.renderDefaultContent()}${this.renderContentEnd()}${this.renderActionsEnd()}</div>`;
}
}
customElement("calcite-stack", Stack);
export {
Stack
};