@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
63 lines (62 loc) • 4.29 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { keyed } from "lit/directives/keyed.js";
import { LitElement, safeClassMap } from "@arcgis/lumina";
import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
import { S as SLOTS, C as CSS } from "../../chunks/resources8.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-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);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
};