@esri/solutions-components 0.8.6-6.3 → 0.8.6

package/dist/components/layer-table2.js

@@ -6,8 +6,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { b as goToSelection, c as getFeatureLayerView, g as getLayerOrTable } from './mapViewUtils.js';
-import { b as queryAllIds, c as queryAllOidsWithQueryFeatures, d as queryFeaturesByGlobalID } from './queryUtils.js';
+import { b as goToSelection, g as getLayerOrTable } from './mapViewUtils.js';
+import { b as queryAllIds, c as queryFeatureIds, d as queryFeaturesByGlobalID } from './queryUtils.js';
 import { d as downloadCSV } from './downloadUtils.js';
 import { d as defineCustomElement$D } from './action.js';
 import { d as defineCustomElement$C } from './action-bar.js';
@@ -49,8 +49,7 @@ import { d as defineCustomElement$3 } from './instant-apps-filter-list2.js';
 import { d as defineCustomElement$2 } from './instant-apps-social-share2.js';
 import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
-const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.height-50-px{height:50px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{font-size:14px !important;color:var(--calcite-color-text-3) !important}.share-action{position:absolute;right:0}html[dir=\"rtl\"] .share-action{left:0}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.instant-app-share{height:50px !important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-modal-content-padding:0}.esri-feature-table__table-container{height:100%}";
-const LayerTableStyle0 = layerTableCss;
+const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.height-50-px{height:50px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{font-size:14px !important;color:var(--calcite-color-text-3) !important}.share-action{position:absolute;right:0}html[dir=\"rtl\"] .share-action{left:0}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.instant-app-share{height:50px !important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-modal-content-padding:0}";
 
 const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTMLElement {
     constructor() {
@@ -73,18 +72,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
          * boolean: When true the default OID provided via url param has been honored and should now be ignored
          */
         this._defaultOidHonored = false;
-        /**
-         * boolean: When true the table has been successfully loaded
-         */
-        this._loaded = false;
         /**
          * boolean: When true the observer has been set and we don't need to set it again
          */
         this._observerSet = false;
-        /**
-         * boolean: When true the current selection was done via the map and we will ignore shift->Select
-         */
-        this._selectionFromMap = false;
         /**
          * boolean: When true the shift key is currently pressed
          */
@@ -111,7 +102,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this.enableInlineEdit = undefined;
         this.enableShare = undefined;
         this.isMobile = undefined;
-        this.mapHidden = undefined;
         this.mapInfo = undefined;
         this.mapView = undefined;
         this.onlyShowUpdatableLayers = undefined;
@@ -120,7 +110,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this.shareIncludeSocial = undefined;
         this.showNewestFirst = undefined;
         this.zoomAndScrollToSelected = undefined;
-        this.zoomToScale = undefined;
         this._allIds = [];
         this._controlsThatFit = undefined;
         this._csvExporting = false;
@@ -195,15 +184,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             }
         });
     }
-    /**
-     * Reset the toolInfos when mapHidden prop changes so we can show/hide any map dependant tool(s)
-     */
-    mapHiddenWatchHandler() {
-        var _a;
-        if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            this._initToolInfos();
-        }
-    }
     /**
      * When isMobile is false we need to init the tool infos for the dynamic toolbar
      */
@@ -220,7 +200,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this._initLayerExpressions();
         this._initToolInfos();
         this._updateToolbar();
-        await this._sortTable();
     }
     /**
      * watch for changes in map view and get the first layer
@@ -263,10 +242,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         if (this._selectAllActive && this.selectedIds.length !== this._allIds.length) {
             this._selectAllActive = false;
         }
-        if (this.selectedIds.length > 0) {
-            this._table.rowHighlightIds.removeAll();
-            this._table.rowHighlightIds.add(this.selectedIds[0]);
-        }
     }
     /**
      * Scroll and zoom to the selected feature from the Features widget.
@@ -274,14 +249,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @param evt CustomEvent the graphic for the current selection
      */
     async selectionChanged(evt) {
-        const g = evt.detail.selectedFeature[0];
+        const g = evt.detail[0];
         const oid = g.getObjectId();
-        //Highlight the current selected feature in the table using rowHighlightIds
-        const table = this._table;
-        if (table.rowHighlightIds.length) {
-            table.rowHighlightIds.removeAll();
-        }
-        table.rowHighlightIds.add(oid);
         if (this.zoomAndScrollToSelected) {
             const i = this._table.viewModel.getObjectIdIndex(oid);
             this._table.scrollToIndex(i);
@@ -295,7 +264,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                 }
             });
             if (layerView) {
-                await goToSelection([oid], layerView, this.mapView, true, undefined, this.zoomToScale);
+                await goToSelection([oid], layerView, this.mapView, true);
             }
         }
     }
@@ -366,7 +335,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, { key: '547a08c45cc3a0b0bdb5ab841ee202d2d43018dc' }, h("calcite-shell", { key: '7ac39e863586727df7685eb5c3faffd87c46bf9d' }, this._getTableControlRow("header"), h("div", { key: '322dc4820b17365f3f202ce43d85330d25081eb5', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '764955f3cf9371a5ff554821613fffbc9e0bd705', class: "height-full width-full" }, h("calcite-loader", { key: '031fc6520de11b166111626501f0208f1b69c9ff', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '8d62258ee356fdf6bc6c03f88848a32270ce5eed', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: `width-full ${tableHeightClass}` }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
     }
@@ -437,7 +406,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     _getActionBar() {
         const containerClass = this.isMobile ? "width-full" : "";
         const mobileClass = this.isMobile ? "border-top" : "";
-        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onLayerSelectionChange: (evt) => void this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
+        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -529,8 +498,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         const featuresEmpty = this._featuresEmpty();
         const hasFilterExpressions = this._hasFilterExpressions();
         if (this._translations) {
-            this._toolInfos = [
-                !this.mapHidden ? {
+            this._toolInfos = [{
                     active: false,
                     icon: "zoom-to-object",
                     indicator: false,
@@ -538,7 +506,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                     func: () => this._zoom(),
                     disabled: !featuresSelected,
                     isOverflow: false
-                } : undefined,
+                },
                 hasFilterExpressions ? {
                     active: false,
                     icon: "filter",
@@ -616,8 +584,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                     disabled: false,
                     isOverflow: false,
                     isSublist: true
-                }
-            ];
+                }];
             this._defaultVisibleToolSizeInfos = undefined;
         }
     }
@@ -943,7 +910,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     async _handleOnChange(evt) {
         const ids = [...this._table.highlightIds.toArray()];
         if (!this._skipOnChange) {
-            if ((!this._ctrlIsPressed && !this._shiftIsPressed) || (this._selectionFromMap && this._shiftIsPressed)) {
+            if (!this._ctrlIsPressed && !this._shiftIsPressed) {
                 if (this.selectedIds.length > 0) {
                     this._skipOnChange = true;
                     // only readd in specific case where we have multiple selected and then click one of the currently selected
@@ -966,41 +933,46 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             else if (this._ctrlIsPressed) {
                 this.selectedIds = ids.reverse();
             }
-            else if (this._shiftIsPressed && (ids === null || ids === void 0 ? void 0 : ids.length) > 0) {
+            else if (this._shiftIsPressed) {
                 this._skipOnChange = true;
                 this._previousCurrentId = this._currentId;
-                this._currentId = [...ids].reverse()[0];
-                if (ids.length === 1) {
-                    this._skipOnChange = false;
-                }
-                else if (this._previousCurrentId !== this._currentId) {
+                this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
+                if (this._previousCurrentId !== this._currentId) {
                     // query the layer based on current sort and filters then grab between the current id and previous id
                     const orderBy = this._table.activeSortOrders.reduce((prev, cur) => {
                         prev.push(`${cur.fieldName} ${cur.direction}`);
                         return prev;
                     }, []);
-                    const oids = await queryAllOidsWithQueryFeatures(0, this._layer, [], orderBy);
+                    const oids = await queryFeatureIds(this._layer, this._layer.definitionExpression, orderBy);
                     let isBetween = false;
                     const _start = this._table.viewModel.getObjectIdIndex(this._previousCurrentId);
                     const _end = this._table.viewModel.getObjectIdIndex(this._currentId);
                     const startIndex = _start < _end ? _start : _end;
                     const endIndex = _end > _start ? _end : _start;
                     this._skipOnChange = startIndex + 1 !== endIndex;
-                    const idsInRange = oids.reduce((prev, cur) => {
+                    const selectedIds = oids.reduce((prev, cur) => {
                         const id = cur;
+                        const index = this._table.viewModel.getObjectIdIndex(id);
                         if ((id === this._currentId || id === this._previousCurrentId)) {
                             isBetween = !isBetween;
                             if (prev.indexOf(id) < 0) {
                                 prev.push(id);
                             }
                         }
-                        else if (isBetween && prev.indexOf(id) < 0) {
+                        // The oids are sorted so after we have reached the start or end oid add all ids even if the index is -1.
+                        // Index of -1 will occur for features between the start and and oid if
+                        // you select a row then scroll faster than the FeatureTable loads the data to select the next id
+                        if (isBetween && prev.indexOf(id) < 0) {
+                            prev.push(id);
+                        }
+                        // Also add index based check.
+                        // In some cases the FeatureTable and Layer query will have differences in how null/undefined field values are sorted
+                        if ((this.selectedIds.indexOf(id) > -1 || (index >= startIndex && index <= endIndex)) && prev.indexOf(id) < 0 && index > -1) {
                             prev.push(id);
                         }
                         return prev;
                     }, []);
-                    const selectedIds = _start < _end ? idsInRange.reverse() : idsInRange;
-                    this.selectedIds = [...new Set([...selectedIds, ...this.selectedIds])];
+                    this.selectedIds = _start < _end ? selectedIds.reverse() : selectedIds;
                     this._table.highlightIds.addMany(this.selectedIds.filter(i => ids.indexOf(i) < 0));
                 }
             }
@@ -1010,7 +982,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             this._skipOnChange = false;
         }
         this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
-        this._selectionFromMap = false;
     }
     /**
      * Handle any updates after a selection change has occured and emit the results
@@ -1049,7 +1020,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      */
     async _resetTable() {
         var _a;
-        this._loaded = false;
         this._clearSelection();
         this._allIds = await queryAllIds(this._layer);
         if (!this._table) {
@@ -1063,27 +1033,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         await this._initLayerRefresh();
         this._checkEditEnabled();
         this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
-        await this._table.when();
-        // This is a workaround.
-        // In some cases the first time the app is loaded this._table.state === "loaded" is not being hit.
-        // When this issue occurs we will wait for 1 second and attempt to finish the loading process
-        setTimeout(() => {
-            if (!this._loaded) {
-                console.log(`table.state: ${this._table.state}`);
-                void this.finishLoading();
-            }
-        }, 1000);
         await this.reactiveUtils.once(() => this._table.state === "loaded")
             .then(async () => {
-            await this.finishLoading();
-        });
-    }
-    /**
-     * Finish the table loading tasks
-     */
-    async finishLoading() {
-        try {
-            this._loaded = true;
             this._table.highlightIds.removeAll();
             this._table.clearSelectionFilter();
             this._resetColumnTemplates();
@@ -1092,10 +1043,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             await this._sortTable();
             this._initToolInfos();
             this._updateToolbar();
-        }
-        catch (e) {
-            console.log(e);
-        }
+        });
     }
     /**
      * Update the current IDs when that layers data is modified
@@ -1187,31 +1135,13 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
     }
     /**
-     * Sort the table with the configured field and the sort order
+     * Sort the objectid field in descending order
      */
     async _sortTable() {
-        var _a, _b, _c, _d, _e, _f;
-        //By default sort the table using objectIdField and in descending order
-        let sortField = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.objectIdField;
-        let sortOrder = 'desc';
-        let configuredLayer;
-        //get the sortField and sortOrder from the configuration
-        if (((_d = (_c = (_b = this.mapInfo) === null || _b === void 0 ? void 0 : _b.layerOptions) === null || _c === void 0 ? void 0 : _c.layers) === null || _d === void 0 ? void 0 : _d.length) > 0 && ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.id)) {
-            configuredLayer = this.mapInfo.layerOptions.layers.filter((layer) => layer.id === this._layer.id);
-            if (configuredLayer && configuredLayer.length > 0) {
-                configuredLayer = configuredLayer[0];
-                //if sort field is defined and sortField is available in the fields then use it
-                if (configuredLayer.sortField && ((_f = configuredLayer.fields) === null || _f === void 0 ? void 0 : _f.includes(configuredLayer.sortField))) {
-                    sortField = configuredLayer.sortField;
-                }
-                //use sort order if configured
-                sortOrder = (configuredLayer === null || configuredLayer === void 0 ? void 0 : configuredLayer.sortOrder) ? configuredLayer.sortOrder : "desc";
-            }
-        }
-        if (this._table && this._layer) {
+        if (this._table && this._layer && this.showNewestFirst) {
             await this._table.when();
             await this._layer.when(() => {
-                this._table.sortColumn(sortField, sortOrder);
+                this._table.sortColumn(this._layer.objectIdField, "desc");
             });
         }
     }
@@ -1324,7 +1254,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                 const id = result.graphic.getObjectId();
                 const index = this._table.highlightIds.indexOf(id);
                 if (index < 0) {
-                    this._selectionFromMap = true;
                     this._table.highlightIds.add(id);
                 }
             });
@@ -1365,10 +1294,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * Clears the selected indexes
      */
     _clearSelection() {
-        var _a, _b;
+        var _a;
         this.selectedIds = [];
         (_a = this._table) === null || _a === void 0 ? void 0 : _a.highlightIds.removeAll();
-        (_b = this._table) === null || _b === void 0 ? void 0 : _b.rowHighlightIds.removeAll();
         this._finishOnChange();
     }
     /**
@@ -1459,11 +1387,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      *
      * @returns a promise that will resolve when the operation is complete
      */
-    async _zoom() {
-        if (this._layer) {
-            const selectedLayerView = await getFeatureLayerView(this.mapView, this._layer.id);
-            await goToSelection(this.selectedIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
-        }
+    _zoom() {
+        this._table.zoomToSelection();
     }
     /**
      * Handles layer selection change to show new table
@@ -1542,7 +1467,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             items: [
                 {
                     label: this._translations.hideField,
-                    icon: "view-hide",
+                    iconClass: "esri-icon-non-visible",
                     autoCloseMenu: true,
                     clickFunction: () => {
                         this._handleHideClick(name);
@@ -1581,14 +1506,13 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "enableInlineEdit": ["enableInlineEditWatchHandler"],
         "enableShare": ["enableShareWatchHandler"],
         "_controlsThatFit": ["_controlsThatFitWatchHandler"],
-        "mapHidden": ["mapHiddenWatchHandler"],
         "isMobile": ["isMobileWatchHandler"],
         "mapInfo": ["mapInfoWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "_layer": ["_layerWatchHandler"],
         "selectedIds": ["selectedIdsWatchHandler"]
     }; }
-    static get style() { return LayerTableStyle0; }
+    static get style() { return layerTableCss; }
 }, [0, "layer-table", {
         "defaultGlobalId": [16],
         "defaultLayerId": [1, "default-layer-id"],
@@ -1599,7 +1523,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "enableInlineEdit": [4, "enable-inline-edit"],
         "enableShare": [4, "enable-share"],
         "isMobile": [4, "is-mobile"],
-        "mapHidden": [4, "map-hidden"],
         "mapInfo": [16],
         "mapView": [16],
         "onlyShowUpdatableLayers": [4, "only-show-updatable-layers"],
@@ -1608,7 +1531,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "shareIncludeSocial": [4, "share-include-social"],
         "showNewestFirst": [4, "show-newest-first"],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
-        "zoomToScale": [2, "zoom-to-scale"],
         "_allIds": [32],
         "_controlsThatFit": [32],
         "_csvExporting": [32],
@@ -1628,7 +1550,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "enableInlineEdit": ["enableInlineEditWatchHandler"],
         "enableShare": ["enableShareWatchHandler"],
         "_controlsThatFit": ["_controlsThatFitWatchHandler"],
-        "mapHidden": ["mapHiddenWatchHandler"],
         "isMobile": ["isMobileWatchHandler"],
         "mapInfo": ["mapInfoWatchHandler"],
         "mapView": ["mapViewWatchHandler"],

package/dist/components/layout-manager.js

@@ -13,7 +13,6 @@ import { d as defineCustomElement$3 } from './popover.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
 const layoutManagerCss = ":host{display:block}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.display-flex{display:flex}.icon-color{--calcite-color-icon-color:var(--calcite-color-brand)}.icon{cursor:pointer}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.header-text{font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);padding-inline:0.75rem;padding-block:0.875rem;line-height:1.25rem}.img-background{background-repeat:no-repeat;background-size:100% 100%;width:38px;height:26px}.grid-background{background-image:url('../../assets/data/images/grid.png')}.horizontal-background{background-image:url('../../assets/data/images/horizontal.png')}.vertical-background{background-image:url('../../assets/data/images/vertical.png')}";
-const LayoutManagerStyle0 = layoutManagerCss;
 
 const LayoutManager$1 = /*@__PURE__*/ proxyCustomElement(class LayoutManager extends HTMLElement {
     constructor() {
@@ -49,7 +48,7 @@ const LayoutManager$1 = /*@__PURE__*/ proxyCustomElement(class LayoutManager ext
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '10b8c1f7ee9503c4bd7cb1bbbd8b58cb5009336f' }, h("div", { key: '39ae898c19e24746bfa5f7510006e368f37fe7d5', class: "display-flex" }, h("div", { key: '0080f9562ab26665e26a8447e4484d76e4861f9f', class: "display-flex action-center" }, h("calcite-icon", { key: 'cc941eede331c518fe0944e2bf4b46b0c9799f0c', class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { key: 'd92ccbe95f58f15964fd8b5d0d1446216ef780a7', closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { key: '37d306563b80589652c25809233063c60035397b', class: "tooltip-message" }, this._translations.appInfo))), h("div", { key: 'e33a33071990cd0edb32e1c76505ddcc834ae932', class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal))));
+        return (h(Host, null, h("div", { class: "display-flex" }, h("div", { class: "display-flex action-center" }, h("calcite-icon", { class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { class: "tooltip-message" }, this._translations.appInfo))), h("div", { class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal))));
     }
     //--------------------------------------------------------------------------
     //
@@ -90,7 +89,7 @@ const LayoutManager$1 = /*@__PURE__*/ proxyCustomElement(class LayoutManager ext
         this._translations = messages[0];
     }
     get el() { return this; }
-    static get style() { return LayoutManagerStyle0; }
+    static get style() { return layoutManagerCss; }
 }, [1, "layout-manager", {
         "_translations": [32]
     }]);

package/dist/components/link.js

@@ -10,8 +10,7 @@ import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFoc
 import { C as CSS_UTILITY } from './resources.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const linkCss = ":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}:host a,:host span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0px;border-style:none;font-family:inherit;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-color:transparent}:host a:focus,:host span:focus{outline:2px solid var(--calcite-ui-focus-color, 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          )}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-block-start:-0.25em}:host .calcite-link--icon.icon-start{margin-inline-end:0.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:0.5rem}:host span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0px;color:var(--calcite-color-text-link);transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor, currentColor), linear-gradient(var(--calcite-color-brand-underline), var(--calcite-color-brand-underline));background-position-x:0%, 100%;background-position-y:min(1.5em, 100%);background-repeat:no-repeat, no-repeat;background-size:0% 1px, 100% 1px}:host span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px, 100% 1px}:host span:active,:host a:active{background-size:100% 2px, 100% 2px}:host span.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%, 100% 100%}: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 CalciteLinkStyle0 = linkCss;
+const linkCss = ":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}:host a,:host span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0px;border-style:none;font-family:inherit;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-color:transparent}:host a:focus,:host span: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          )}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-block-start:-0.25em}:host .calcite-link--icon.icon-start{margin-inline-end:0.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:0.5rem}:host span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0px;color:var(--calcite-color-text-link);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor, currentColor), linear-gradient(var(--calcite-color-brand-underline), var(--calcite-color-brand-underline));background-position-x:0%, 100%;background-position-y:min(1.5em, 100%);background-repeat:no-repeat, no-repeat;background-size:0% 1px, 100% 1px}:host span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px, 100% 1px}:host span:active,:host a:active{background-size:100% 2px, 100% 2px}:host span.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%, 100% 100%}: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 Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
     constructor() {
@@ -65,19 +64,19 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
         const { download, el } = this;
         const dir = getElementDir(el);
         const childElType = this.href ? "a" : "span";
-        const iconStartEl = (h("calcite-icon", { key: 'f3c88f34e5fddf3cb7779cabbac20ecd7fc62be1', class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
-        const iconEndEl = (h("calcite-icon", { key: '684df779ad349e596dbe9f128c035077d0c75d93', class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+        const iconStartEl = (h("calcite-icon", { class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+        const iconEndEl = (h("calcite-icon", { class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
         const Tag = childElType;
         const role = childElType === "span" ? "link" : null;
         const tabIndex = childElType === "span" ? 0 : null;
-        return (h(Host, { key: 'b8bf6a472945947d6bac9853d2322f8fedca5102', role: "presentation" }, h(InteractiveContainer, { key: 'e410a5b86b4d11dc12dbc4f60f8eae6e315f3b7d', disabled: this.disabled }, h(Tag, { key: '4e22e764e60b0446f4840ba745dba9eae90a7809', class: { [CSS_UTILITY.rtl]: dir === "rtl" },
+        return (h(Host, { role: "presentation" }, h(InteractiveContainer, { disabled: this.disabled }, h(Tag, { class: { [CSS_UTILITY.rtl]: dir === "rtl" },
             /*
           When the 'download' property of type 'boolean | string' is set to true, the value is "".
           This works around that issue for now.
           */
             download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target,
             // 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: this.storeTagRef }, this.iconStart ? iconStartEl : null, h("slot", { key: 'eb1700118698d9c0a7dc5863bbe6bb7c03daa61b' }), this.iconEnd ? iconEndEl : null))));
+            ref: this.storeTagRef }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null))));
     }
     //--------------------------------------------------------------------------
     //
@@ -104,7 +103,7 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
         focusElement(this.childEl);
     }
     get el() { return this; }
-    static get style() { return CalciteLinkStyle0; }
+    static get style() { return linkCss; }
 }, [1, "calcite-link", {
         "disabled": [516],
         "download": [520],

package/dist/components/list-flow-item.js

@@ -6,7 +6,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const listFlowItemCss = ":host{display:block}";
-const ListFlowItemStyle0 = listFlowItemCss;
 
 const ListFlowItem$1 = /*@__PURE__*/ proxyCustomElement(class ListFlowItem extends HTMLElement {
     constructor() {
@@ -50,10 +49,10 @@ const ListFlowItem$1 = /*@__PURE__*/ proxyCustomElement(class ListFlowItem exten
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '6691ddbcebb6a78570c1a7d1317aadcccf51c6e3' }, h("slot", { key: 'bca9498b533fa13dfc5d85b690a0cc0d80fef1b8' })));
+        return (h(Host, null, h("slot", null)));
     }
     get el() { return this; }
-    static get style() { return ListFlowItemStyle0; }
+    static get style() { return listFlowItemCss; }
 }, [1, "list-flow-item"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {