@esri/solutions-components 0.8.1 → 0.8.3

package/dist/solutions-components/calcite-sortable-list.entry.js

@@ -0,0 +1,166 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-bdfaac50.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-71585ecc.js';
+import { c as createObserver } from './observers-5ba39eee.js';
+import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-e715a3dd.js';
+import { e as focusElement } from './dom-b91aa537.js';
+import './browser-b8d08bed.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const CSS = {
+    sortItem: "sort-item",
+    container: "container",
+    containerHorizontal: "container--horizontal",
+    containerVertical: "container--vertical",
+};
+
+const sortableListCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;flex:1 1 auto}.container--vertical{flex-direction:column}.container--horizontal{flex-direction:row}:host([hidden]){display:none}[hidden]{display:none}";
+
+const SortableList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
+        this.items = [];
+        this.mutationObserver = createObserver("mutation", () => {
+            this.setUpSorting();
+        });
+        this.dragEnabled = true;
+        this.canPull = undefined;
+        this.canPut = undefined;
+        this.dragSelector = undefined;
+        this.group = undefined;
+        this.handleSelector = "calcite-handle";
+        this.layout = "vertical";
+        this.disabled = false;
+        this.loading = false;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    connectedCallback() {
+        if (dragActive(this)) {
+            return;
+        }
+        this.setUpSorting();
+        this.beginObserving();
+        connectInteractive(this);
+    }
+    disconnectedCallback() {
+        if (dragActive(this)) {
+            return;
+        }
+        disconnectInteractive(this);
+        disconnectSortableComponent(this);
+        this.endObserving();
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    calciteHandleNudgeNextHandler(event) {
+        this.handleNudgeEvent(event);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    onGlobalDragStart() {
+        this.endObserving();
+    }
+    onGlobalDragEnd() {
+        this.beginObserving();
+    }
+    onDragEnd() { }
+    onDragStart() { }
+    onDragSort() {
+        this.items = Array.from(this.el.children);
+        this.calciteListOrderChange.emit();
+    }
+    handleNudgeEvent(event) {
+        const { direction } = event.detail;
+        const handle = event
+            .composedPath()
+            .find((el) => el.matches(this.handleSelector));
+        const sortItem = this.items.find((item) => {
+            return item.contains(handle) || event.composedPath().includes(item);
+        });
+        const lastIndex = this.items.length - 1;
+        const startingIndex = this.items.indexOf(sortItem);
+        let appendInstead = false;
+        let buddyIndex;
+        if (direction === "up") {
+            if (startingIndex === 0) {
+                appendInstead = true;
+            }
+            else {
+                buddyIndex = startingIndex - 1;
+            }
+        }
+        else {
+            if (startingIndex === lastIndex) {
+                buddyIndex = 0;
+            }
+            else if (startingIndex === lastIndex - 1) {
+                appendInstead = true;
+            }
+            else {
+                buddyIndex = startingIndex + 2;
+            }
+        }
+        this.endObserving();
+        if (appendInstead) {
+            sortItem.parentElement.appendChild(sortItem);
+        }
+        else {
+            sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
+        }
+        this.items = Array.from(this.el.children);
+        this.beginObserving();
+        requestAnimationFrame(() => focusElement(handle));
+        if ("selected" in handle) {
+            handle.selected = true;
+        }
+    }
+    setUpSorting() {
+        this.items = Array.from(this.el.children);
+        connectSortableComponent(this);
+    }
+    beginObserving() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    }
+    endObserving() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    render() {
+        const { disabled, layout } = this;
+        const horizontal = layout === "horizontal" || false;
+        return (h(InteractiveContainer, { disabled: disabled }, h("div", { class: {
+                [CSS.container]: true,
+                [CSS.containerVertical]: !horizontal,
+                [CSS.containerHorizontal]: horizontal,
+            } }, h("slot", null))));
+    }
+    get el() { return getElement(this); }
+};
+SortableList.style = sortableListCss;
+
+export { SortableList as calcite_sortable_list };

package/dist/solutions-components/calcite-split-button.entry.js

@@ -0,0 +1,112 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-bdfaac50.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-71585ecc.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-aea90723.js';
+import './browser-b8d08bed.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const CSS = {
+    container: "container",
+    dividerContainer: "divider-container",
+    divider: "divider",
+    widthAuto: "width-auto",
+    widthHalf: "width-half",
+    widthFull: "width-full",
+};
+
+const splitButtonCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}:host:host([kind=brand]){--calcite-split-button-background:var(--calcite-color-brand);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host:host([kind=danger]){--calcite-split-button-background:var(--calcite-color-status-danger);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host:host([kind=neutral]){--calcite-split-button-background:var(--calcite-color-foreground-3);--calcite-split-button-divider:var(--calcite-color-text-1)}:host:host([kind=inverse]){--calcite-split-button-background:var(--calcite-color-inverse);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host([appearance=transparent]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-color-text-1);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-color-foreground-1);--calcite-split-button-background:transparent}:host([appearance=outline]){--calcite-split-button-background:transparent}:host([appearance=outline-fill]){--calcite-split-button-background:var(--calcite-color-foreground-1)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand)}:host([appearance=outline]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger)}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-color-border-1);--calcite-split-button-background:var(--calcite-color-border-1)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-color-inverse)}.container{display:flex;align-items:stretch}.container>calcite-dropdown>calcite-button{block-size:100%;vertical-align:top}.divider-container{display:flex;inline-size:1px;align-items:stretch;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-split-button-background)}.divider{margin-block:0.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]) .divider-container,:host([appearance=outline]) .divider-container{border-block:1px solid var(--calcite-split-button-divider)}:host([appearance=outline-fill]):hover .divider-container,:host([appearance=outline]):hover .divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:hover) .divider-container,:host([appearance=outline]:hover) .divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:focus-within):host([kind=brand]),:host([appearance=outline]:focus-within):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand-press)}:host([appearance=outline-fill]:focus-within):host([kind=danger]),:host([appearance=outline]:focus-within):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger-press)}:host([appearance=outline-fill]:focus-within) .divider-container,:host([appearance=outline]:focus-within) .divider-container{background-color:var(--calcite-split-button-divider)}:host([disabled]) .divider-container{opacity:var(--calcite-opacity-disabled)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+
+const SplitButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteSplitButtonPrimaryClick = createEvent(this, "calciteSplitButtonPrimaryClick", 6);
+        this.calciteSplitButtonSecondaryClick = createEvent(this, "calciteSplitButtonSecondaryClick", 6);
+        this.calciteSplitButtonPrimaryClickHandler = () => this.calciteSplitButtonPrimaryClick.emit();
+        this.calciteSplitButtonSecondaryClickHandler = () => this.calciteSplitButtonSecondaryClick.emit();
+        this.appearance = "solid";
+        this.kind = "brand";
+        this.disabled = false;
+        this.active = false;
+        this.dropdownIconType = "chevron";
+        this.dropdownLabel = undefined;
+        this.loading = false;
+        this.overlayPositioning = "absolute";
+        this.primaryIconEnd = undefined;
+        this.primaryIconFlipRtl = undefined;
+        this.primaryIconStart = undefined;
+        this.primaryLabel = undefined;
+        this.primaryText = undefined;
+        this.scale = "m";
+        this.width = "auto";
+    }
+    handleDisabledChange(value) {
+        if (!value) {
+            this.active = false;
+        }
+    }
+    activeHandler() {
+        if (this.disabled) {
+            this.active = false;
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /** Sets focus on the component's first focusable element. */
+    async setFocus() {
+        await componentFocusable(this);
+        this.el.focus();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        connectInteractive(this);
+    }
+    componentWillLoad() {
+        setUpLoadableComponent(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    disconnectedCallback() {
+        disconnectInteractive(this);
+    }
+    render() {
+        const buttonWidth = this.width === "auto" ? "auto" : "full";
+        return (h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: CSS.container }, h("calcite-button", { appearance: this.appearance, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, kind: this.kind, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", type: "button", width: buttonWidth }, this.primaryText), h("div", { class: CSS.dividerContainer }, h("div", { class: CSS.divider })), h("calcite-dropdown", { disabled: this.disabled, onClick: this.calciteSplitButtonSecondaryClickHandler, open: this.active, overlayPositioning: this.overlayPositioning, placement: "bottom-end", scale: this.scale, "width-scale": this.scale }, h("calcite-button", { appearance: this.appearance, disabled: this.disabled, "icon-start": this.dropdownIcon, kind: this.kind, label: this.dropdownLabel, scale: this.scale, slot: "trigger", splitChild: "secondary", type: "button" }), h("slot", null)))));
+    }
+    get dropdownIcon() {
+        return this.dropdownIconType === "chevron"
+            ? "chevronDown"
+            : this.dropdownIconType === "caret"
+                ? "caretDown"
+                : this.dropdownIconType === "ellipsis"
+                    ? "ellipsis"
+                    : "handle-vertical";
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["handleDisabledChange"],
+        "active": ["activeHandler"]
+    }; }
+};
+SplitButton.style = splitButtonCss;
+
+export { SplitButton as calcite_split_button };

package/dist/solutions-components/calcite-stack.entry.js

@@ -0,0 +1,70 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, a as Host } from './index-bdfaac50.js';
+import { u as slotChangeHasAssignedElement } from './dom-b91aa537.js';
+import { C as CSS, S as SLOTS } from './resources-3c6947d3.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.js';
+
+const stackCss = ":host([disabled]) .content{cursor:default;-webkit-user-select:none;-moz-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-family:var(--calcite-sans-family);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, 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-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}";
+
+const Stack = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // --------------------------------------------------------------------------
+        //
+        //  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())));
+    }
+};
+Stack.style = stackCss;
+
+export { Stack as calcite_stack };

package/dist/solutions-components/calcite-stepper-item.entry.js

@@ -0,0 +1,238 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-71585ecc.js';
+import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-b39c5433.js';
+import './browser-b8d08bed.js';
+import './dom-b91aa537.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.js';
+import './key-9a10d862.js';
+import './observers-5ba39eee.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const CSS = {
+    container: "container",
+    stepperItemContent: "stepper-item-content",
+    stepperItemDescription: "stepper-item-description",
+    stepperItemHeader: "stepper-item-header",
+    stepperItemHeading: "stepper-item-heading",
+    stepperItemHeaderText: "stepper-item-header-text",
+    stepperItemNumber: "stepper-item-number",
+    visuallyHidden: "visually-hidden",
+};
+
+const stepperItemCss = ":host([layout=horizontal][disabled]) .stepper-item-header,:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal][disabled]) .stepper-item-header *,:host([disabled]) *,:host([layout=horizontal][disabled]) .stepper-item-header ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-stepper-item-spacing-unit-s:0.25rem;--calcite-stepper-item-spacing-unit-m:0.75rem;--calcite-stepper-item-spacing-unit-l:1rem;--calcite-internal-stepper-action-inline-size:2rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-inline-end:0.25rem}:host([scale=s]) .stepper-item-description{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-stepper-item-spacing-unit-s:0.5rem;--calcite-stepper-item-spacing-unit-m:1rem;--calcite-stepper-item-spacing-unit-l:1.25rem;--calcite-internal-stepper-action-inline-size:2.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-inline-end:0.5rem}:host([scale=m]) .stepper-item-description{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-stepper-item-spacing-unit-s:0.75rem;--calcite-stepper-item-spacing-unit-m:1.25rem;--calcite-stepper-item-spacing-unit-l:1.5rem;--calcite-internal-stepper-action-inline-size:3rem;font-size:var(--calcite-font-size-1);line-height:1.5rem;margin-inline-end:0.75rem}:host([scale=l]) .stepper-item-description{font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:flex;flex-grow:1;flex-direction:column;align-self:flex-start;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host .container{position:relative;display:flex;flex-grow:1;cursor:pointer;flex-direction:column;border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);color:var(--calcite-color-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host .stepper-item-header{display:flex;cursor:pointer;align-items:flex-start}:host .stepper-item-content,:host .stepper-item-header{transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:var(--calcite-stepper-item-spacing-unit-l);padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host .stepper-item-header *{display:inline-flex;align-items:center;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-content{display:none;inline-size:100%;flex-direction:column;font-size:var(--calcite-font-size--2);line-height:1.375}:host .stepper-item-icon{margin-inline-end:var(--calcite-stepper-item-spacing-unit-m);margin-block-start:1px;display:inline-flex;block-size:0.75rem;flex-shrink:0;align-self:flex-start;color:var(--calcite-color-text-3);opacity:var(--calcite-opacity-disabled);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-header-text{flex-direction:column;text-align:initial;margin-inline-end:auto}:host .stepper-item-heading,:host .stepper-item-description{display:flex;inline-size:100%}:host .stepper-item-heading{margin-block-end:0.25rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}:host .stepper-item-description{color:var(--calcite-color-text-3)}:host .stepper-item-number{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-stepper-item-spacing-unit-m)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([complete]) .container .stepper-item-icon{color:var(--calcite-color-brand)}:host([error]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host(:hover:not([disabled]):not([selected])) .container,:host(:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-brand)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-heading,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-description,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([error]:hover:not([disabled]):not([selected])) .container,:host([error]:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-status-danger-hover)}:host([selected]) .container{border-block-start-color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-heading{color:var(--calcite-color-text-1)}:host([selected]) .container .stepper-item-description{color:var(--calcite-color-text-2)}:host([selected]) .container .stepper-item-number{color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-icon{color:var(--calcite-color-brand);opacity:1}:host([selected]) .container .stepper-item-content{display:flex}:host([layout=vertical]) .container{margin-inline:0px;margin-block-start:0px;flex:1 1 auto;border-block-start-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;border-inline-start-width:2px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .container .stepper-item-icon{order:3;margin-block:1px 0px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-s);margin-inline-start:auto}:host([layout=vertical]) .container .stepper-item-header{padding-inline-end:0px}:host([layout=vertical]) .container .stepper-item-content{padding:0px}:host([layout=vertical][complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][complete]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][complete]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][error]) .container{border-color:var(--calcite-color-status-danger)}:host([layout=vertical][selected]) .container{border-color:var(--calcite-color-brand)}:host([layout=vertical][selected]) .container .stepper-item-content:not(:empty){margin-block-end:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical]:focus:not([disabled]):not([selected])) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][error]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][error]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-color-status-danger-hover)}:host([layout=horizontal]){display:contents}:host([layout=horizontal]) .container{display:contents}:host([layout=horizontal]) .stepper-item-header{border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);outline-color:transparent;grid-row:items}:host([layout=horizontal]) .stepper-item-header:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([layout=horizontal]) .stepper-item-content{cursor:auto;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:0;padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host([layout=horizontal][selected]) .stepper-item-content{grid-area:2/1/2/-1}:host([layout=horizontal][complete]) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][complete]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal][error]) .stepper-item-header{border-color:var(--calcite-color-status-danger)}:host([layout=horizontal][selected][multiple-view-mode]) .stepper-item-header{border-color:var(--calcite-color-brand)}:host([layout=horizontal]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][error]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-color-status-danger-hover)}@media (forced-colors: active){:host .container{outline-width:0;outline-offset:0}:host(:focus),:host(:focus-visible){outline-color:canvasText}:host([selected]) .container{border-block-start-color:highlight}:host([selected]) .container .stepper-item-number{color:highlight}:host([selected]) .container .stepper-item-icon{color:highlight}:host([layout=vertical][selected]) .container{border-color:highlight}}:host([layout=horizontal]:not([multiple-view-mode])) .stepper-item-header{margin-inline-end:0px;border-style:none;inline-size:100%;padding-inline:calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem)}:host([layout=horizontal][error]:not([multiple-view-mode])) .container .stepper-item-number{color:var(--calcite-color-status-danger)}:host([layout=horizontal][error]:not([multiple-view-mode])) .container .stepper-item-icon{opacity:1;color:var(--calcite-color-status-danger)}:host([layout=horizontal][error][selected]:not([multiple-view-mode])),:host([layout=horizontal][complete][selected]:not([multiple-view-mode])) .container{color:var(--calcite-color-text-3)}:host([layout=horizontal][error][selected]:not([multiple-view-mode])) .stepper-item-heading,:host([layout=horizontal][complete][selected]:not([multiple-view-mode])) .container .stepper-item-heading{color:var(--calcite-color-text-2)}:host([layout=horizontal][complete][selected]:not([multiple-view-mode])) .container .stepper-item-icon{opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal][complete][selected]:not([multiple-view-mode])) .container .stepper-item-number{color:var(--calcite-color-text-3)}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
+
+const StepperItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteInternalStepperItemKeyEvent = createEvent(this, "calciteInternalStepperItemKeyEvent", 6);
+        this.calciteInternalStepperItemSelect = createEvent(this, "calciteInternalStepperItemSelect", 6);
+        this.calciteInternalUserRequestedStepperItemSelect = createEvent(this, "calciteInternalUserRequestedStepperItemSelect", 6);
+        this.calciteInternalStepperItemRegister = createEvent(this, "calciteInternalStepperItemRegister", 6);
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
+        this.keyDownHandler = (event) => {
+            if (!this.disabled && event.target === this.el) {
+                switch (event.key) {
+                    case " ":
+                    case "Enter":
+                        this.emitUserRequestedItem();
+                        event.preventDefault();
+                        break;
+                    case "ArrowUp":
+                    case "ArrowDown":
+                    case "ArrowLeft":
+                    case "ArrowRight":
+                    case "Home":
+                    case "End":
+                        this.calciteInternalStepperItemKeyEvent.emit({ item: event });
+                        event.preventDefault();
+                        break;
+                }
+            }
+        };
+        this.handleItemClick = (event) => {
+            if (this.disabled ||
+                (this.layout === "horizontal" &&
+                    event
+                        .composedPath()
+                        .some((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains("stepper-item-content"); }))) {
+                return;
+            }
+            this.emitUserRequestedItem();
+        };
+        this.emitUserRequestedItem = () => {
+            this.emitRequestedItem();
+            if (!this.disabled) {
+                const position = this.itemPosition;
+                this.calciteInternalUserRequestedStepperItemSelect.emit({
+                    position,
+                });
+            }
+        };
+        this.emitRequestedItem = () => {
+            if (!this.disabled) {
+                const position = this.itemPosition;
+                this.calciteInternalStepperItemSelect.emit({
+                    position,
+                });
+            }
+        };
+        this.selected = false;
+        this.complete = false;
+        this.error = false;
+        this.disabled = false;
+        this.heading = undefined;
+        this.description = undefined;
+        this.iconFlipRtl = false;
+        this.numberingSystem = undefined;
+        this.icon = false;
+        this.layout = undefined;
+        this.messages = undefined;
+        this.numbered = false;
+        this.scale = "m";
+        this.multipleViewMode = false;
+        this.messageOverrides = undefined;
+        this.defaultMessages = undefined;
+        this.effectiveLocale = "";
+    }
+    selectedHandler() {
+        if (this.selected) {
+            this.emitRequestedItem();
+        }
+    }
+    // watch for removal of disabled to register step
+    disabledWatcher() {
+        this.registerStepperItem();
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    effectiveLocaleWatcher(locale) {
+        numberStringFormatter.numberFormatOptions = {
+            locale,
+            numberingSystem: this.numberingSystem,
+            useGrouping: false,
+        };
+        updateMessages(this, this.effectiveLocale);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        connectInteractive(this);
+        connectLocalized(this);
+        connectMessages(this);
+    }
+    async componentWillLoad() {
+        setUpLoadableComponent(this);
+        this.parentStepperEl = this.el.parentElement;
+        this.itemPosition = this.getItemPosition();
+        this.registerStepperItem();
+        if (this.selected) {
+            this.emitRequestedItem();
+        }
+        await setUpMessages(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    disconnectedCallback() {
+        disconnectInteractive(this);
+        disconnectLocalized(this);
+        disconnectMessages(this);
+    }
+    render() {
+        return (h(Host, { "aria-current": this.selected ? "step" : "false", onClick: this.handleItemClick, onKeyDown: this.keyDownHandler, tabIndex: this.disabled ? -1 : 0 }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: CSS.container }, this.complete && (h("span", { "aria-live": "polite", class: CSS.visuallyHidden }, this.messages.complete)), h("div", { class: CSS.stepperItemHeader, tabIndex: 
+            /* additional tab index logic needed because of display: contents */
+            this.layout === "horizontal" && !this.disabled && this.multipleViewMode ? 0 : null,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: (el) => (this.headerEl = el) }, this.icon ? this.renderIcon() : null, this.numbered ? (h("div", { class: CSS.stepperItemNumber }, this.renderNumbers(), ".")) : null, h("div", { class: CSS.stepperItemHeaderText }, h("span", { class: CSS.stepperItemHeading }, this.heading), h("span", { class: CSS.stepperItemDescription }, this.description))), h("div", { class: CSS.stepperItemContent }, h("slot", null))))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    updateActiveItemOnChange(event) {
+        if (event.target === this.parentStepperEl ||
+            event.composedPath().includes(this.parentStepperEl)) {
+            this.selectedPosition = event.detail.position;
+            this.determineSelectedItem();
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        var _a;
+        await componentFocusable(this);
+        (_a = (this.layout === "vertical" ? this.el : this.headerEl)) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    renderIcon() {
+        let path = "circle";
+        if (this.selected && (this.multipleViewMode || (!this.error && !this.complete))) {
+            path = "circleF";
+        }
+        else if (this.error) {
+            path = "exclamationMarkCircleF";
+        }
+        else if (this.complete) {
+            path = "checkCircleF";
+        }
+        return (h("calcite-icon", { class: "stepper-item-icon", flipRtl: this.iconFlipRtl, icon: path, scale: "s" }));
+    }
+    determineSelectedItem() {
+        this.selected = !this.disabled && this.itemPosition === this.selectedPosition;
+    }
+    registerStepperItem() {
+        this.calciteInternalStepperItemRegister.emit({
+            position: this.itemPosition,
+        });
+    }
+    getItemPosition() {
+        var _a;
+        return Array.from((_a = this.parentStepperEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll("calcite-stepper-item")).indexOf(this.el);
+    }
+    renderNumbers() {
+        numberStringFormatter.numberFormatOptions = {
+            locale: this.effectiveLocale,
+            numberingSystem: this.numberingSystem,
+            useGrouping: false,
+        };
+        return numberStringFormatter.numberFormatter.format(this.itemPosition + 1);
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "selected": ["selectedHandler"],
+        "disabled": ["disabledWatcher"],
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleWatcher"]
+    }; }
+};
+StepperItem.style = stepperItemCss;
+
+export { StepperItem as calcite_stepper_item };