@esri/solutions-components 0.7.23 → 0.7.24

package/dist/components/delete-button2.js

@@ -0,0 +1,209 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getLocaleComponentStrings } from './locale.js';
+import { d as defineCustomElement$6 } from './action.js';
+import { d as defineCustomElement$5 } from './button.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './loader.js';
+import { d as defineCustomElement$2 } from './modal.js';
+import { d as defineCustomElement$1 } from './scrim.js';
+
+const deleteButtonCss = ":host{display:block}";
+
+const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.editsComplete = createEvent(this, "editsComplete", 7);
+        this.buttonType = "button";
+        this.disabled = false;
+        this.icon = undefined;
+        this.ids = [];
+        this.layer = undefined;
+        this._confirmDelete = false;
+        this._deleteEndabled = false;
+        this._isDeleting = false;
+        this._supportsDelete = undefined;
+        this._translations = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * watch for changes in layer view and verify if it has editing enabled
+     */
+    async idsWatchHandler() {
+        this._setDeleteEnabled();
+    }
+    /**
+     * watch for changes in layer view and verify if it has editing enabled
+     */
+    async layerWatchHandler() {
+        this._setDeleteEnabled();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._getTranslations();
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        return (h(Host, null, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s" }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     */
+    async componentDidLoad() {
+        this._setDeleteEnabled();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Verify if the layer supports delete and that we have 1 or more ids
+     */
+    _setDeleteEnabled() {
+        var _a, _b, _c, _d;
+        this._supportsDelete = ((_a = this.layer) === null || _a === void 0 ? void 0 : _a.editingEnabled) && ((_d = (_c = (_b = this.layer) === null || _b === void 0 ? void 0 : _b.capabilities) === null || _c === void 0 ? void 0 : _c.operations) === null || _d === void 0 ? void 0 : _d.supportsDelete);
+        this._deleteEndabled = !this.disabled || this._supportsDelete && this.ids.length > 0;
+    }
+    /**
+     * Delete all selected records or shows an alert if the layer does not have editing enabled
+     *
+     * @returns a promise that will resolve when the operation is complete
+     */
+    _delete() {
+        this._confirmDelete = true;
+    }
+    /**
+     * Show delete confirmation message
+     *
+     * @returns node to confirm or deny the delete operation
+     */
+    _deleteMessage() {
+        const confirmMessage = this.ids.length === 1 ? this._translations.confirmSingle :
+            this._translations.confirmMultiple;
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "danger", onCalciteModalClose: () => this._deleteClosed(), open: this._confirmDelete }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations.deleteFeature), h("div", { slot: "content" }, confirmMessage), h("calcite-button", { appearance: "outline", kind: "danger", onClick: () => this._deleteClosed(), slot: "secondary", width: "full" }, this._translations.cancel), h("calcite-button", { kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations.delete)));
+    }
+    /**
+     * Delete the currently selected features
+     */
+    async _deleteFeatures() {
+        this._isDeleting = true;
+        const deleteFeatures = this.ids.map((objectId) => {
+            return { objectId };
+        });
+        await this.layer.applyEdits({
+            deleteFeatures
+        });
+        this._isDeleting = false;
+        this._deleteClosed();
+        this.editsComplete.emit("delete");
+    }
+    /**
+     * Set the alertOpen member to false when the alert is closed
+     */
+    _deleteClosed() {
+        this._confirmDelete = false;
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "ids": ["idsWatchHandler"],
+        "layer": ["layerWatchHandler"]
+    }; }
+    static get style() { return deleteButtonCss; }
+}, [1, "delete-button", {
+        "buttonType": [1, "button-type"],
+        "disabled": [4],
+        "icon": [1],
+        "ids": [16],
+        "layer": [16],
+        "_confirmDelete": [32],
+        "_deleteEndabled": [32],
+        "_isDeleting": [32],
+        "_supportsDelete": [32],
+        "_translations": [32]
+    }, undefined, {
+        "ids": ["idsWatchHandler"],
+        "layer": ["layerWatchHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["delete-button", "calcite-action", "calcite-button", "calcite-icon", "calcite-loader", "calcite-modal", "calcite-scrim"];
+    components.forEach(tagName => { switch (tagName) {
+        case "delete-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DeleteButton);
+            }
+            break;
+        case "calcite-action":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "calcite-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "calcite-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "calcite-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "calcite-scrim":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { DeleteButton as D, defineCustomElement as d };

package/dist/components/feature-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FeatureList extends Components.FeatureList, HTMLElement {}
+export const FeatureList: {
+    prototype: FeatureList;
+    new (): FeatureList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/feature-list.js

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { F as FeatureList$1, d as defineCustomElement$1 } from './feature-list2.js';
+
+const FeatureList = FeatureList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FeatureList, defineCustomElement };

package/dist/components/feature-list2.js

@@ -0,0 +1,281 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { P as PopupUtils } from './popupUtils.js';
+import { g as getLayerOrTable, e as getFeatureLayerView, h as highlightFeatures } from './mapViewUtils.js';
+import { g as getLocaleComponentStrings } from './locale.js';
+import { d as defineCustomElement$g } from './action.js';
+import { d as defineCustomElement$f } from './action-menu.js';
+import { d as defineCustomElement$e } from './filter2.js';
+import { d as defineCustomElement$d } from './handle.js';
+import { d as defineCustomElement$c } from './icon.js';
+import { d as defineCustomElement$b } from './input.js';
+import { d as defineCustomElement$a } from './list.js';
+import { d as defineCustomElement$9 } from './list-item.js';
+import { d as defineCustomElement$8 } from './loader.js';
+import { d as defineCustomElement$7 } from './notice.js';
+import { d as defineCustomElement$6 } from './pagination.js';
+import { d as defineCustomElement$5 } from './panel.js';
+import { d as defineCustomElement$4 } from './popover.js';
+import { d as defineCustomElement$3 } from './progress.js';
+import { d as defineCustomElement$2 } from './scrim.js';
+import { d as defineCustomElement$1 } from './stack.js';
+
+const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.popup-title{font-weight:500;padding:10px 12px}";
+
+const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.featureSelect = createEvent(this, "featureSelect", 7);
+        this.selectedLayerId = undefined;
+        this.mapView = undefined;
+        this.noFeaturesFoundMsg = undefined;
+        this.pageSize = 100;
+        this.highlightOnMap = false;
+        this._featureItems = [];
+        this._featuresCount = 0;
+        this._isLoading = false;
+        this._translations = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._getTranslations();
+        this._isLoading = true;
+        this._popupUtils = new PopupUtils();
+        this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     */
+    async componentDidLoad() {
+        if (this._selectedLayer) {
+            this._featureItems = await this.queryPage(0);
+            this._featuresCount = await this._selectedLayer.queryFeatureCount();
+            this._isLoading = false;
+        }
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        return (h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { scale: "m" }), this._featureItems.length === 0 && !this._isLoading && h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { "selection-appearance": "border", "selection-mode": "single" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { class: "width-full", slot: "footer" }, h("calcite-pagination", { class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * On page change get the next updated feature list
+     * @param event page change event
+     * @protected
+     */
+    async pageChanged(event) {
+        this._isLoading = true;
+        if (this._highlightHandle) {
+            this._highlightHandle.remove();
+            this._highlightHandle = null;
+        }
+        const page = event.target.startItem - 1;
+        this._featureItems = await this.queryPage(page);
+        this._isLoading = false;
+    }
+    /**
+     * On feature click in feature list highlight the feature on the map
+     * @param event feature clicked event
+     * @protected
+     */
+    async featureClicked(event, selectedFeature) {
+        //clear previous highlight and remove the highlightHandle
+        if (this.highlightOnMap && this._highlightHandle) {
+            this._highlightHandle.remove();
+            this._highlightHandle = null;
+        }
+        //highlight on map only if it is selected item
+        if (event.target.selected) {
+            if (this.highlightOnMap) {
+                const selectedFeatureObjectId = Number(event.target.value);
+                const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
+                this._highlightHandle = await highlightFeatures([selectedFeatureObjectId], selectedLayerView, this.mapView, true);
+            }
+            this.featureSelect.emit(selectedFeature);
+        }
+    }
+    /**
+     * Query the selected feature layer, in descending order of object id's
+     * @param page 0th page number in the pagination item
+     * @returns List of features items to be rendered
+     * @protected
+     */
+    async queryPage(page) {
+        const featureLayer = this._selectedLayer;
+        const query = {
+            start: page,
+            num: this.pageSize,
+            outFields: ["*"],
+            orderByFields: [featureLayer.objectIdField + " DESC"],
+            returnGeometry: true,
+            where: featureLayer.definitionExpression
+        };
+        const featureSet = await featureLayer.queryFeatures(query);
+        return await this.createFeatureItem(featureSet);
+    }
+    /**
+     * Creates list of items using the popup titles
+     * @param featureSet Queried FeatureSet
+     * @returns List of features items to be rendered
+     * @protected
+     */
+    async createFeatureItem(featureSet) {
+        const currentFeatures = featureSet === null || featureSet === void 0 ? void 0 : featureSet.features;
+        const items = currentFeatures.map(async (feature) => {
+            const popupTitle = await this._popupUtils.getPopupTitle(feature);
+            return this.getFeatureItem(feature, popupTitle);
+        });
+        return Promise.all(items);
+    }
+    /**
+     * Get each feature item
+     * @param selectedFeature Each individual feature instance to be listed
+     * @param popupTitle feature popup title
+     * @returns individual feature item to be rendered
+     * @protected
+     */
+    getFeatureItem(selectedFeature, popupTitle) {
+        //get the object id value of the feature
+        const oId = selectedFeature.attributes[this._selectedLayer.objectIdField].toString();
+        //use object id if popupTitle is null or undefined
+        popupTitle = popupTitle !== null && popupTitle !== void 0 ? popupTitle : oId;
+        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, value: oId }, h("div", { class: "popup-title", slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
+    }
+    /**
+     * Fetches the component's translations
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    get el() { return this; }
+    static get style() { return featureListCss; }
+}, [0, "feature-list", {
+        "selectedLayerId": [1, "selected-layer-id"],
+        "mapView": [16],
+        "noFeaturesFoundMsg": [1, "no-features-found-msg"],
+        "pageSize": [2, "page-size"],
+        "highlightOnMap": [4, "highlight-on-map"],
+        "_featureItems": [32],
+        "_featuresCount": [32],
+        "_isLoading": [32],
+        "_translations": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["feature-list", "calcite-action", "calcite-action-menu", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-stack"];
+    components.forEach(tagName => { switch (tagName) {
+        case "feature-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, FeatureList);
+            }
+            break;
+        case "calcite-action":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "calcite-action-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "calcite-filter":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "calcite-handle":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "calcite-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "calcite-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "calcite-list-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "calcite-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "calcite-notice":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "calcite-pagination":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "calcite-panel":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "calcite-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "calcite-progress":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "calcite-scrim":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "calcite-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { FeatureList as F, defineCustomElement as d };

package/dist/{esm/calcite-flow-item.entry.js → components/flow-item.js}

@@ -3,18 +3,19 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
-import { a as getElementDir } from './dom-492b1b24.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-20bb1dc4.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3685e51.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-8cfa3086.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-3c5e55ab.js';
-import { S as SLOTS$1 } from './resources-649a0f91.js';
-import './guid-36c6c6a5.js';
-import './resources-cdc36705.js';
-import './browser-b4c16201.js';
-import './key-af303047.js';
-import './observers-8ce200f2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getElementDir } from './dom.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
+import { S as SLOTS$1, d as defineCustomElement$3 } from './panel.js';
+import { d as defineCustomElement$7 } from './action.js';
+import { d as defineCustomElement$6 } from './action-menu.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './loader.js';
+import { d as defineCustomElement$2 } from './popover.js';
+import { d as defineCustomElement$1 } from './scrim.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
@@ -41,9 +42,11 @@ const SLOTS = {
 
 const flowItemCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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{position:relative;display:flex;inline-size:100%;flex:1 1 auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);border-inline-end-width:1px}calcite-panel{--calcite-panel-footer-padding:var(--calcite-flow-item-footer-padding);--calcite-panel-header-border-block-end:var(--calcite-flow-item-header-border-block-end)}:host([hidden]){display:none}[hidden]{display:none}";
 
-const FlowItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.calciteFlowItemBack = createEvent(this, "calciteFlowItemBack", 7);
         this.calciteFlowItemScroll = createEvent(this, "calciteFlowItemScroll", 6);
         this.calciteFlowItemClose = createEvent(this, "calciteFlowItemClose", 6);
@@ -182,12 +185,84 @@ const FlowItem = class {
             ref: this.setContainerRef }, this.renderBackButton(), h("slot", { name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", null))));
     }
     static get assetsDirs() { return ["assets"]; }
-    get el() { return getElement(this); }
+    get el() { return this; }
     static get watchers() { return {
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-};
-FlowItem.style = flowItemCss;
+    static get style() { return flowItemCss; }
+}, [1, "calcite-flow-item", {
+        "closable": [516],
+        "closed": [516],
+        "collapsed": [516],
+        "collapseDirection": [1, "collapse-direction"],
+        "collapsible": [516],
+        "beforeBack": [16],
+        "description": [1],
+        "disabled": [516],
+        "heading": [1],
+        "headingLevel": [514, "heading-level"],
+        "loading": [516],
+        "menuOpen": [516, "menu-open"],
+        "messageOverrides": [1040],
+        "messages": [1040],
+        "showBackButton": [4, "show-back-button"],
+        "defaultMessages": [32],
+        "effectiveLocale": [32],
+        "setFocus": [64],
+        "scrollContentTo": [64]
+    }, undefined, {
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["calcite-flow-item", "calcite-action", "calcite-action-menu", "calcite-icon", "calcite-loader", "calcite-panel", "calcite-popover", "calcite-scrim"];
+    components.forEach(tagName => { switch (tagName) {
+        case "calcite-flow-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, FlowItem);
+            }
+            break;
+        case "calcite-action":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "calcite-action-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "calcite-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "calcite-panel":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "calcite-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "calcite-scrim":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
 
-export { FlowItem as calcite_flow_item };
+export { FlowItem as F, defineCustomElement as d };