@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
111 lines (110 loc) • 4.17 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { h, Host } from "@stencil/core";
import { slotChangeHasAssignedElement } from "../../utils/dom";
import { CSS, SLOTS } from "./resources";
/**
* @slot - A slot for adding content.
* @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the component.
* @slot content-start - A slot for adding non-actionable elements before content of the component.
* @slot content-end - A slot for adding non-actionable elements after content of the component.
* @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component.
*/
export class Stack {
constructor() {
// --------------------------------------------------------------------------
//
// Private Methods
//
// --------------------------------------------------------------------------
this.handleActionsStartSlotChange = (event) => {
this.hasActionsStart = slotChangeHasAssignedElement(event);
};
this.handleActionsEndSlotChange = (event) => {
this.hasActionsEnd = slotChangeHasAssignedElement(event);
};
this.handleContentStartSlotChange = (event) => {
this.hasContentStart = slotChangeHasAssignedElement(event);
};
this.handleContentEndSlotChange = (event) => {
this.hasContentEnd = slotChangeHasAssignedElement(event);
};
this.disabled = false;
this.hasActionsStart = false;
this.hasActionsEnd = false;
this.hasContentStart = false;
this.hasContentEnd = false;
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
renderActionsStart() {
const { hasActionsStart } = this;
return (h("div", { class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
}
renderActionsEnd() {
const { hasActionsEnd } = this;
return (h("div", { class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
}
renderContentStart() {
const { hasContentStart } = this;
return (h("div", { class: CSS.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
}
renderDefaultContent() {
return (h("div", { class: CSS.content }, h("slot", null)));
}
renderContentEnd() {
const { hasContentEnd } = this;
return (h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
}
render() {
return (h(Host, null, h("div", { class: CSS.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
}
static get is() { return "calcite-stack"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["stack.scss"]
};
}
static get styleUrls() {
return {
"$": ["stack.css"]
};
}
static get properties() {
return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, content interaction is prevented and displayed with lower opacity."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
}
};
}
static get states() {
return {
"hasActionsStart": {},
"hasActionsEnd": {},
"hasContentStart": {},
"hasContentEnd": {}
};
}
}