@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
108 lines (102 loc) • 6.74 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 { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { f as slotChangeHasAssignedElement } from './dom.js';
const CSS = {
container: "container",
actionsStart: "actions-start",
contentStart: "content-start",
content: "content",
contentEnd: "content-end",
actionsEnd: "actions-end"
};
const SLOTS = {
actionsStart: "actions-start",
contentStart: "content-start",
contentEnd: "content-end",
actionsEnd: "actions-end"
};
const stackCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]) .content{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-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-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-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, 0.75rem);padding-block:var(--calcite-stack-padding-block, 0.5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-end ::slotted(calcite-action){align-self:stretch;color:inherit}[hidden]{display:none}";
const Stack = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
// --------------------------------------------------------------------------
//
// 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 style() { return stackCss; }
}, [1, "calcite-stack", {
"disabled": [516],
"hasActionsStart": [32],
"hasActionsEnd": [32],
"hasContentStart": [32],
"hasContentEnd": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["calcite-stack"];
components.forEach(tagName => { switch (tagName) {
case "calcite-stack":
if (!customElements.get(tagName)) {
customElements.define(tagName, Stack);
}
break;
} });
}
defineCustomElement$1();
const CalciteStack = Stack;
const defineCustomElement = defineCustomElement$1;
export { CalciteStack, defineCustomElement };