@esri/solutions-components 0.10.10 → 0.10.11

package/dist/cjs/calcite-flow_6.cjs.entry.js

@@ -7,28 +7,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-696e53e6.js');
-const observers = require('./observers-3440c668.js');
-const loadable = require('./loadable-ef8f0acf.js');
-const dom = require('./dom-63b93b3b.js');
-const interactive = require('./interactive-272b8484.js');
-const locale = require('./locale-428354f0.js');
-const t9n = require('./t9n-e5fb720b.js');
-const resources = require('./resources-cb7b739c.js');
-const locale$1 = require('./locale-2dc1252d.js');
+const index = require('./index-5a0af791.js');
+const observers = require('./observers-8fed90f3.js');
+const loadable = require('./loadable-2e2626dc.js');
+const dom = require('./dom-6a9b6275.js');
+const interactive = require('./interactive-89f913ba.js');
+const locale = require('./locale-42c21404.js');
+const t9n = require('./t9n-42ba6ea3.js');
+const resources = require('./resources-9fb1bc89.js');
+const locale$1 = require('./locale-a09603ee.js');
 const mapViewUtils = require('./mapViewUtils-8d4da732.js');
-require('./browser-02cbd1d9.js');
-require('./guid-4bc1bc0f.js');
-require('./resources-8556a9ce.js');
-require('./key-e4dd32ff.js');
-require('./esri-loader-a56cbcbe.js');
+require('./browser-69696af0.js');
+require('./guid-02e5380f.js');
+require('./resources-dfe71ff2.js');
+require('./key-d6da79d8.js');
+require('./esri-loader-08dc41bd.js');
 require('./_commonjsHelpers-baf43783.js');
 require('./interfaces-09c4c40e.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS$1 = {
     frame: "frame",
@@ -157,7 +157,7 @@ const Flow = class {
             [CSS$1.frameAdvancing]: flowDirection === "advancing",
             [CSS$1.frameRetreating]: flowDirection === "retreating",
         };
-        return (index.h("div", { key: '3d91e0e8d0ffb94e3e8d563e3b34b47b23b3987b', class: frameDirectionClasses }, index.h("slot", { key: 'fb32070e340ba86196b5150d2bcc884ac2d94901' })));
+        return (index.h("div", { key: '93590e2eec869cef65a59c01aa2c6001b431da9a', class: frameDirectionClasses }, index.h("slot", { key: '5b97e4147abb053391f170f5e36bac4670934072' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -166,7 +166,7 @@ Flow.style = CalciteFlowStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     backButton: "back-button",
@@ -206,16 +206,25 @@ const FlowItem = class {
         //  Private Methods
         //
         // --------------------------------------------------------------------------
-        this.handlePanelScroll = (event) => {
+        this.handleInternalPanelScroll = (event) => {
+            if (event.target !== this.containerEl) {
+                return;
+            }
             event.stopPropagation();
             this.calciteFlowItemScroll.emit();
         };
-        this.handlePanelClose = (event) => {
+        this.handleInternalPanelClose = (event) => {
+            if (event.target !== this.containerEl) {
+                return;
+            }
             event.stopPropagation();
             this.closed = true;
             this.calciteFlowItemClose.emit();
         };
-        this.handlePanelToggle = (event) => {
+        this.handleInternalPanelToggle = (event) => {
+            if (event.target !== this.containerEl) {
+                return;
+            }
             event.stopPropagation();
             this.collapsed = event.target.collapsed;
             this.calciteFlowItemToggle.emit();
@@ -331,7 +340,7 @@ const FlowItem = class {
     }
     render() {
         const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, beforeClose, } = this;
-        return (index.h(index.Host, { key: '10a182247900f88d506ad09184e6ece24f432286' }, index.h(interactive.InteractiveContainer, { key: '457baca75f34051cbeb62b40f770d81c6e2b6565', disabled: disabled }, index.h("calcite-panel", { key: 'f3ac8082ae34e8fb99c0384c75de1075a8630115', beforeClose: beforeClose, closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle, overlayPositioning: overlayPositioning, ref: this.setContainerRef, scale: this.scale }, this.renderBackButton(), index.h("slot", { key: '86e59d53193c52fa13f3b15edd422f6dccebce08', name: SLOTS.actionBar, slot: resources.SLOTS.actionBar }), index.h("slot", { key: '016695b76033387057b952da658a19fa961e3038', name: SLOTS.alerts, slot: resources.SLOTS.alerts }), index.h("slot", { key: '0a937c9ee0e192e24ef199c3d7f072628b6b687c', name: SLOTS.headerActionsStart, slot: resources.SLOTS.headerActionsStart }), index.h("slot", { key: 'ce0b888b00b9c5ced046bb23fb4ea47230e24455', name: SLOTS.headerActionsEnd, slot: resources.SLOTS.headerActionsEnd }), index.h("slot", { key: '7af455d66b2fe6d3a55dd54543d1e96e584eb7ca', name: SLOTS.headerContent, slot: resources.SLOTS.headerContent }), index.h("slot", { key: 'f101ed5cc74987b375f22f3f9313fe68b3adb39b', name: SLOTS.headerMenuActions, slot: resources.SLOTS.headerMenuActions }), index.h("slot", { key: '5a923bbbbeb67a69053145c36c0fd03dbb82c048', name: SLOTS.fab, slot: resources.SLOTS.fab }), index.h("slot", { key: 'db2116031a390dfcb0c772a5b69b29caf11c61b2', name: SLOTS.contentTop, slot: resources.SLOTS.contentTop }), index.h("slot", { key: '77d01f9d1be7cc5fbcecc694fca82616eaec4251', name: SLOTS.contentBottom, slot: resources.SLOTS.contentBottom }), index.h("slot", { key: 'ed461c9b6efb646147a54a56238e0d5259505e60', name: SLOTS.footerStart, slot: resources.SLOTS.footerStart }), index.h("slot", { key: 'f00171d0b49f373bb5f705b1f51b08a783a2081a', name: SLOTS.footer, slot: resources.SLOTS.footer }), index.h("slot", { key: '0a62333c3642433517f42852c900b4e33d64df10', name: SLOTS.footerEnd, slot: resources.SLOTS.footerEnd }), index.h("slot", { key: '2bc94a266a195140c504e8de5eb60b2860bcd1e2', name: SLOTS.footerActions, slot: resources.SLOTS.footerActions }), index.h("slot", { key: 'dc6f25a4107d0bc8e0fa1cb3a4103f44717aacdd' })))));
+        return (index.h(index.Host, { key: '166a2f53829cecc09019a7fa3fe670b5e4e42146' }, index.h(interactive.InteractiveContainer, { key: '53f00fb0e5ec53b8a19efde1592e1bff176302d1', disabled: disabled }, index.h("calcite-panel", { key: 'a24ff76af240b1403ebfa5810bc8fe0443901040', beforeClose: beforeClose, closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handleInternalPanelClose, onCalcitePanelScroll: this.handleInternalPanelScroll, onCalcitePanelToggle: this.handleInternalPanelToggle, overlayPositioning: overlayPositioning, ref: this.setContainerRef, scale: this.scale }, this.renderBackButton(), index.h("slot", { key: '9051287e5b89eaca28b440816cbcddc03cefed73', name: SLOTS.actionBar, slot: resources.SLOTS.actionBar }), index.h("slot", { key: '566fb396078d3eac17fbff69e0cd43fb5b8ca13e', name: SLOTS.alerts, slot: resources.SLOTS.alerts }), index.h("slot", { key: '88ced257238e369cd99250c9d5a93fa03746fbd5', name: SLOTS.headerActionsStart, slot: resources.SLOTS.headerActionsStart }), index.h("slot", { key: 'beab9f93af9deed383adc8250ec943b883e058b8', name: SLOTS.headerActionsEnd, slot: resources.SLOTS.headerActionsEnd }), index.h("slot", { key: '1f1c7579d1ac1085004b08d2f57ec8b9e0641e35', name: SLOTS.headerContent, slot: resources.SLOTS.headerContent }), index.h("slot", { key: '3696e4a7e80db48581f438336007a1b63a201040', name: SLOTS.headerMenuActions, slot: resources.SLOTS.headerMenuActions }), index.h("slot", { key: '370e0817cbc13d7cf4c8adaccff8fe9d7c91c859', name: SLOTS.fab, slot: resources.SLOTS.fab }), index.h("slot", { key: 'd55cc859cb1c9c6cc80a63521aad955f6e23d31c', name: SLOTS.contentTop, slot: resources.SLOTS.contentTop }), index.h("slot", { key: '7cea1750cd59d1fdda66516c9b4c78884127dde5', name: SLOTS.contentBottom, slot: resources.SLOTS.contentBottom }), index.h("slot", { key: 'd07ed2f97623023312cdb0a5a01b909286f34373', name: SLOTS.footerStart, slot: resources.SLOTS.footerStart }), index.h("slot", { key: 'fdc209c1e77fd62cadaaad0ee576e71a1f0419d8', name: SLOTS.footer, slot: resources.SLOTS.footer }), index.h("slot", { key: '5348d32cc42b7fa3b07e4b5ef711863f6ce812bc', name: SLOTS.footerEnd, slot: resources.SLOTS.footerEnd }), index.h("slot", { key: 'bad7644787a3ad19ef40931fb38cfe9c18962b27', name: SLOTS.footerActions, slot: resources.SLOTS.footerActions }), index.h("slot", { key: '97675398537cc86f41a219126e17bcf24cf4682b' })))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -342,7 +351,7 @@ const FlowItem = class {
 };
 FlowItem.style = CalciteFlowItemStyle0;
 
-const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__update-actions{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px !important;padding-inline:10px !important}.search-widget{width:92% !important;margin:5px 0 20px 14px}.display-none{display:none !important}";
+const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__update-actions{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px !important;padding-inline:10px !important}.search-widget{width:92% !important;margin:5px 0 20px 14px}.display-none{display:none !important}.hide-map{height:1%;visibility:hidden}.show-map{padding:10px !important;position:absolute;bottom:0;width:calc(100% - 22px);height:50%}";
 const CreateFeatureStyle0 = createFeatureCss;
 
 const CreateFeature = class {
@@ -353,10 +362,12 @@ const CreateFeature = class {
         this.drawComplete = index.createEvent(this, "drawComplete", 7);
         this.editingAttachment = index.createEvent(this, "editingAttachment", 7);
         this.progressStatus = index.createEvent(this, "progressStatus", 7);
+        this.modeChanged = index.createEvent(this, "modeChanged", 7);
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
         this.searchConfiguration = undefined;
+        this.isMobile = undefined;
         this._editorLoading = false;
         this._showSearchWidget = undefined;
     }
@@ -382,7 +393,17 @@ const CreateFeature = class {
      */
     FeatureLayer;
     /**
-     * "esri/widgets/Search": https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html
+     * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+     * The MapView instance
+     */
+    MapView;
+    /**
+     * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+     * Updated map view instance
+     */
+    _updatedMapView;
+    /**
+     * esri/widgets/Search: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html
      * The Search instance
      */
     Search;
@@ -403,6 +424,10 @@ const CreateFeature = class {
      * HTMLDivElement: The node the editor will be added to
      */
     _container;
+    /**
+     * HTMLDivElement: The node for the map view
+     */
+    _mapViewContainer;
     /**
      * boolean: Flag to maintain form submission using submit button
      */
@@ -420,6 +445,13 @@ const CreateFeature = class {
             await this.init();
         });
     }
+    /**
+     * Called each time when isMobile prop is changed.
+     */
+    async isMobileHandler() {
+        // emit an event when mode is changed to back to the feature selection panel (to avoid multiple maps conflict)
+        this.modeChanged.emit();
+    }
     /**
      * When _editorLoading is true the container node will be hidden while starting the create workflow
      */
@@ -480,6 +512,10 @@ const CreateFeature = class {
      * Emitted on demand when editor panel changes
      */
     progressStatus;
+    /**
+     * Emitted on switched form mobile to desktop or vice versa
+     */
+    modeChanged;
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -505,7 +541,8 @@ const CreateFeature = class {
         const showSearchWidget = this._showSearchWidget ? '' : 'display-none';
         const loaderClass = this._editorLoading ? "" : "display-none";
         const featureFormClass = this._editorLoading ? "display-none" : "";
-        return (index.h(index.Fragment, { key: 'a4ccd565a52a4cde4e76439629425f19bd4c222e' }, index.h("calcite-loader", { key: '30e8a3753985a734dd7cba461f26691b51f49ab9', class: loaderClass, label: "", scale: "s" }), index.h("div", { key: '0845f1fa85a21b578fd18200b43d4a77c34e6808', class: featureFormClass, id: "feature-form" }), index.h("div", { key: 'af74b6337f5a0dcfdbd552145c88eae5282a3307', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" })));
+        const mobileMapClass = this.isMobile ? "show-map" : "display-none";
+        return (index.h(index.Fragment, { key: '8adaa70257dfef9632f82be75dbdff572e2c39b3' }, index.h("calcite-loader", { key: 'e1a1aba8613d9cea1033513748dd21b7f27f9806', class: loaderClass, label: "", scale: "s" }), index.h("div", { key: 'e1089ffe60d079f345d358aac7ae1a6bd59a55df', class: featureFormClass, id: "feature-form" }), index.h("div", { key: '52274b6cd4c9f6886293f858caac9e572697da25', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), index.h("div", { key: '64108cfa3bb57f9739bfb4951352c5523c194761', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -517,8 +554,9 @@ const CreateFeature = class {
      */
     async init() {
         if (this.mapView && this.selectedLayerId) {
-            await this.createEditorWidget();
-            await this.createSearchWidget();
+            this._updatedMapView = this.mapView;
+            // In mobile mode show the map in panel
+            await (this.isMobile ? this.createMobileMapView() : this._loadWidgets());
         }
     }
     /**
@@ -527,14 +565,41 @@ const CreateFeature = class {
      * @protected
      */
     async initModules() {
-        const [Editor, reactiveUtils, Search] = await locale$1.loadModules([
+        const [Editor, reactiveUtils, Search, MapView] = await locale$1.loadModules([
             "esri/widgets/Editor",
             "esri/core/reactiveUtils",
-            "esri/widgets/Search"
+            "esri/widgets/Search",
+            "esri/views/MapView"
         ]);
         this.Editor = Editor;
         this.reactiveUtils = reactiveUtils;
         this.Search = Search;
+        this.MapView = MapView;
+    }
+    /**
+     * updates the map view (in case of mobile)
+     * @protected
+     */
+    async createMobileMapView() {
+        this._mapViewContainer.classList.add('hide-map');
+        await new this.MapView({
+            map: this.mapView.map,
+            container: this._mapViewContainer
+        }).when((view) => {
+            // update the mapView and load all widgets
+            this._updatedMapView = view;
+            void this._loadWidgets();
+        }, (e) => {
+            console.log(e);
+        });
+    }
+    /**
+     * Loads the Editor and Search widgets
+     * @protected
+     */
+    async _loadWidgets() {
+        await this.createEditorWidget();
+        await this.createSearchWidget();
     }
     /**
      * Display editor widget to create the new feature
@@ -547,7 +612,7 @@ const CreateFeature = class {
         const layerInfos = [];
         this._container = document.createElement("div");
         this._container?.classList.add("display-none");
-        const allMapLayers = await mapViewUtils.getAllLayers(this.mapView);
+        const allMapLayers = await mapViewUtils.getAllLayers(this._updatedMapView);
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         allMapLayers.forEach(async (eachLayer) => {
             layerInfos.push({
@@ -560,14 +625,19 @@ const CreateFeature = class {
         });
         this._editor = new this.Editor({
             allowedWorkflows: "create-features",
-            view: this.mapView,
+            view: this._updatedMapView,
             layerInfos: layerInfos,
             visibleElements: {
                 snappingControls: false
             },
             container: this._container
         });
-        this.el.appendChild(this._container);
+        if (this._mapViewContainer) {
+            this.el.insertBefore(this._container, this._mapViewContainer);
+        }
+        else {
+            this.el.appendChild(this._container);
+        }
         //Add handle to watch if attachments are added/edited
         const attachmentHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'adding-attachment' || state === 'editing-attachment') {
@@ -593,6 +663,7 @@ const CreateFeature = class {
         //Add handle to watch featureFormViewModel ready state
         const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.featureFormViewModel?.state, (state) => {
             if (state === 'ready') {
+                this._mapViewContainer?.classList?.replace("show-map", "hide-map");
                 this._showSearchWidget = false;
                 this.progressStatus.emit(1);
                 this.drawComplete.emit();
@@ -602,6 +673,7 @@ const CreateFeature = class {
         //Add handle to watch editor viewmodel state and then show the search widget
         const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'creating-features') {
+                this._mapViewContainer?.classList?.replace("hide-map", "show-map");
                 this._editorLoading = true;
                 this._showSearchWidget = true;
             }
@@ -613,6 +685,8 @@ const CreateFeature = class {
      * @protected
      */
     async startCreate() {
+        // hides the header elements on template picker page 
+        await this.hideEditorsElements();
         return new Promise((resolve, reject) => {
             if (this._editor.viewModel.featureTemplatesViewModel.items?.length) {
                 const items = this._editor.viewModel.featureTemplatesViewModel.items[0].get("items");
@@ -649,10 +723,10 @@ const CreateFeature = class {
      */
     async createSearchWidget() {
         let searchOptions = {
-            view: this.mapView,
+            view: this._updatedMapView,
         };
         if (this.searchConfiguration) {
-            const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
+            const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this._updatedMapView);
             searchOptions = {
                 ...searchConfiguration
             };
@@ -661,11 +735,11 @@ const CreateFeature = class {
         this._search.container = 'search-widget-ref';
         this._search.popupEnabled = false;
         this._search.resultGraphicEnabled = false;
-        const layer = await mapViewUtils.getLayerOrTable(this.mapView, this.selectedLayerId);
+        const layer = await mapViewUtils.getLayerOrTable(this._updatedMapView, this.selectedLayerId);
         let pointGeometry = null;
         // on search get the geometry of the searched location and pass it in sketchViewModel and go to featureForm page
         this._search.on('search-complete', (e) => {
-            void this.mapView.goTo(e.results[0].results[0].extent);
+            void this._updatedMapView.goTo(e.results[0].results[0].extent);
             if (layer.geometryType === 'point') {
                 pointGeometry = e.results[0].results[0]?.feature.geometry;
             }
@@ -795,6 +869,7 @@ const CreateFeature = class {
     }
     static get watchers() { return {
         "mapView": ["mapViewWatchHandler"],
+        "isMobile": ["isMobileHandler"],
         "_editorLoading": ["_editorLoadingWatchHandler"]
     }; }
 };
@@ -950,7 +1025,7 @@ const CreateRelatedFeature = class {
     }
     render() {
         const loaderClass = this._editorLoading ? "" : "display-none";
-        return (index.h("calcite-loader", { key: '5302b1166a175b0605604792cd40b9d3fbfabd02', class: loaderClass, label: "", scale: "s" }));
+        return (index.h("calcite-loader", { key: 'f78b296f74ee01aadc0443abd0bb78b68a7d9f3e', class: loaderClass, label: "", scale: "s" }));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -1059,7 +1134,16 @@ const CreateRelatedFeature = class {
      */
     makeAttributesForRelatedFeature(parentFeature, parentRelationship, childRelationship) {
         const parentKeyField = parentRelationship.keyField;
-        const parentKeyValue = parentFeature.getAttribute(parentKeyField);
+        let parentKeyValue;
+        if (parentFeature.attributes.hasOwnProperty(parentKeyField)) {
+            parentKeyValue = parentFeature.getAttribute(parentKeyField);
+        }
+        else if (parentFeature.attributes.hasOwnProperty(parentKeyField.toLowerCase())) {
+            parentKeyValue = parentFeature.getAttribute(parentKeyField.toLowerCase());
+        }
+        else if (parentFeature.attributes.hasOwnProperty(parentKeyField.toUpperCase())) {
+            parentKeyValue = parentFeature.getAttribute(parentKeyField.toUpperCase());
+        }
         let childKeyField = childRelationship.keyField;
         // get the field from table which name is same as childKeyField and use that field name as childKeyField
         const field = this.table.fields.find((field) => field.name.toLocaleLowerCase() === childKeyField.toLocaleLowerCase());
@@ -1130,6 +1214,7 @@ const FeatureDetails = class {
         this.graphics = undefined;
         this.reportingOptions = undefined;
         this.layerItemsHash = undefined;
+        this.showUserImageInCommentsList = false;
         this._likeFieldAvailable = false;
         this._likeCount = 0;
         this._disLikeCount = 0;
@@ -1269,12 +1354,12 @@ const FeatureDetails = class {
     render() {
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (index.h("calcite-panel", { key: '7f1fa230117891c11ff6747b7d3c5d6c8771c998', "full-height": true }, index.h("info-card", { key: '2b9119b5a0533d2ed8136149dd322aa9211f503b', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
-            index.h("div", { key: '85974c4ff61890dc43c02b84b9c6622e83039cdd', class: "buttons-container" }, this._commentsAvailable &&
-                index.h("div", { key: '8b905e1ee273103247f6cab2c598b03f1f733396', class: "comment-btn" }, index.h("span", { key: '05439cbc1e6080006479ce3694f4d1f81684a9d7' }, this._relatedFeaturesOIDs.length), index.h("calcite-icon", { key: '0e7062d1bc383c2f2fdd50ff003ea6a854e1a121', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
-                index.h("calcite-button", { key: '26a024436a8e0c4251c200f112e6cc687795c85a', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
-                index.h("calcite-button", { key: '67d1ebe6b0ba1893aac9f26e4cebfe30569115d5', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
-            index.h("feature-list", { key: '7ed006e8be5f7280fdd260102111aad4656526f6', class: "height-full", mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showInitialLoading: false, textSize: "small", whereClause: commentsListWhereClause })));
+        return (index.h("calcite-panel", { key: 'a2d31f643b1a361343eb502ede98a35ea954f244', "full-height": true }, index.h("info-card", { key: '4ba44decfa3f155034d3edfdf8ab3e7df5f1ea8a', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
+            index.h("div", { key: '0f7af99fd964da408f3131385cfd617138f40151', class: "buttons-container" }, this._commentsAvailable &&
+                index.h("div", { key: '6ce7b090a07db23c542fc7aaacf9cc8a39987483', class: "comment-btn" }, index.h("span", { key: 'fcce9266efa253c679dcb69f308c07950f5e2693' }, this._relatedFeaturesOIDs.length), index.h("calcite-icon", { key: '25355a5c195824e473a390f196d28c909c1348eb', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
+                index.h("calcite-button", { key: '6dca1c0f2ca14f662de98362cbe7ef0993fad6b8', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
+                index.h("calcite-button", { key: '9d1c0a5938806645a24a757f06e31b13587912dc', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
+            index.h("feature-list", { key: '73f81c666a054b2c9f02246fcc7ea4811494c106', class: "height-full", mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showInitialLoading: false, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules
@@ -1316,8 +1401,9 @@ const FeatureDetails = class {
             //Get comments table id from map
             const relatedTableIdFromRelnship = selectedLayer.relationships[0].relatedTableId;
             const allTables = await mapViewUtils.getAllTables(this.mapView);
-            const relatedTable = allTables.filter((table) => selectedLayer.url === table.url && relatedTableIdFromRelnship === table.layerId);
-            this.relatedTableId = relatedTable?.length > 0 ? relatedTable[0].id : '';
+            const allRelatedTables = allTables.filter((table) => selectedLayer.url === table.url && relatedTableIdFromRelnship === table.layerId);
+            const relatedTable = allRelatedTables?.length > 0 ? allRelatedTables[0] : null;
+            this.relatedTableId = relatedTable?.id ?? '';
             //**Get the related records for the current selected feature**
             if (this.relatedTableId) {
                 //current selected feature's objectId
@@ -1334,7 +1420,7 @@ const FeatureDetails = class {
                 const relatedOIDs = [];
                 if (result[objectId]) {
                     result[objectId].features.forEach((feature) => {
-                        relatedOIDs.push(feature.attributes.OBJECTID);
+                        relatedOIDs.push(feature.attributes[relatedTable.objectIdField]);
                     });
                 }
                 // Store the objectid's of the related features, this will be used to show the comments and its count

package/dist/cjs/calcite-graph_2.cjs.entry.js

@@ -7,25 +7,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-696e53e6.js');
-const guid = require('./guid-4bc1bc0f.js');
-const observers = require('./observers-3440c668.js');
-const dom = require('./dom-63b93b3b.js');
-const form = require('./form-4c0bbbe5.js');
-const interactive = require('./interactive-272b8484.js');
-const key = require('./key-e4dd32ff.js');
-const label = require('./label-afda7da7.js');
-const loadable = require('./loadable-ef8f0acf.js');
-const locale = require('./locale-428354f0.js');
-const math = require('./math-8677dfd7.js');
-require('./browser-02cbd1d9.js');
-require('./resources-8556a9ce.js');
-require('./component-9d0efa36.js');
+const index = require('./index-5a0af791.js');
+const guid = require('./guid-02e5380f.js');
+const observers = require('./observers-8fed90f3.js');
+const dom = require('./dom-6a9b6275.js');
+const form = require('./form-5229f1c8.js');
+const interactive = require('./interactive-89f913ba.js');
+const key = require('./key-d6da79d8.js');
+const label = require('./label-26ee0ddb.js');
+const loadable = require('./loadable-2e2626dc.js');
+const locale = require('./locale-42c21404.js');
+const math = require('./math-2911c0c9.js');
+require('./browser-69696af0.js');
+require('./resources-dfe71ff2.js');
+require('./component-a4c6a35d.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 /**
  * Calculate slope of the tangents
@@ -236,7 +236,7 @@ Graph.style = CalciteGraphStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     container: "container",
@@ -268,7 +268,7 @@ const CSS = {
 };
 const maxTickElementThreshold = 250;
 
-const sliderCss = "@charset \"UTF-8\";: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}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:1rem;--calcite-slider-handle-extension-height:0.65rem;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{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          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise::after,.thumb:focus.thumb--precise::after,.thumb--active.thumb--precise::after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range::after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const sliderCss = "@charset \"UTF-8\";: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}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:1rem;--calcite-slider-handle-extension-height:0.65rem;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{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          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise::after,.thumb:focus.thumb--precise::after,.thumb--active.thumb--precise::after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range::after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteSliderStyle0 = sliderCss;
 
 function isRange(value) {
@@ -552,11 +552,11 @@ const Slider = class {
                         left: `${mirror ? 100 - maxInterval : minInterval}%`,
                         right: `${mirror ? minInterval : 100 - maxInterval}%`,
                     };
-        return (index.h(index.Host, { key: '345553b84f2336fe5a98bb2b3050d137130c41ef', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, index.h(interactive.InteractiveContainer, { key: '0d9db31db94152095071d9ff40dbf3cf8ba685d6', disabled: this.disabled }, index.h("div", { key: '767ab1401000b02717013231c935fe1747def1b3', "aria-label": label.getLabelText(this), class: {
+        return (index.h(index.Host, { key: 'c0ebc9073b3609d1d47379b5efccbe31c68915ed', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, index.h(interactive.InteractiveContainer, { key: '1f6930631e4c83e5b47ae1d5c64c10dbe58ed8e7', disabled: this.disabled }, index.h("div", { key: '09a30ae372ca5e52fde36a0a85adc76d14ca1461', "aria-label": label.getLabelText(this), class: {
                 [CSS.container]: true,
                 [CSS.containerRange]: valueIsRange,
                 [`scale--${this.scale}`]: true,
-            } }, this.renderGraph(), index.h("div", { key: '1a104ad97079f71d37efea9d933f364520d49397', class: CSS.track, ref: this.storeTrackRef }, index.h("div", { key: '84f8033505dc0f373a0d19a641886e49ca4fe732', class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: trackRangePlacementStyles }), index.h("div", { key: '79f89b93a6acbb05ffce09bd2aa34ef134b3e219', class: CSS.ticks }, this.tickValues.map((tick) => {
+            } }, this.renderGraph(), index.h("div", { key: 'e996119bc9bba42340d24b2dc8b2ad7daaf02e6e', class: CSS.track, ref: this.storeTrackRef }, index.h("div", { key: 'fb768d8462137621d7a891d0767e2e27864307fc', class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: trackRangePlacementStyles }), index.h("div", { key: '408a0a05ef7503b1af724cfd95e3fb40f94bcbf8', class: CSS.ticks }, this.tickValues.map((tick) => {
             const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
             let activeTicks = false;
             if (fillPlacement === "start" || fillPlacement === "end") {
@@ -576,7 +576,7 @@ const Slider = class {
                     left: mirror ? "" : tickOffset,
                     right: mirror ? tickOffset : "",
                 } }, this.renderTickLabel(tick)));
-        }))), index.h("div", { key: '9bc6ea406e2036adb87da4a6053533283434864d', class: CSS.thumbContainer }, minThumb, thumb, index.h(form.HiddenFormInputSlot, { key: 'c13236898b527a1ffc058914fe87e6004b93aaf5', component: this }))))));
+        }))), index.h("div", { key: 'c511ee11206dadb2b23199708abf2d2703423559', class: CSS.thumbContainer }, minThumb, thumb, index.h(form.HiddenFormInputSlot, { key: 'f6684d5f25ade745730db775a5e51298b5eb8048', component: this }))))));
     }
     renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval, }) {
         const isLabeled = type.includes("labeled");
@@ -847,8 +847,12 @@ const Slider = class {
      */
     getClosestStep(value) {
         const { max, min, step } = this;
-        let snappedValue = Math.floor((value - min) / step) * step + min;
-        snappedValue = Math.min(Math.max(snappedValue, min), max);
+        // prevents floating point precision issues
+        const bigDecimalString = new locale.BigDecimal(`${Math.floor((value - min) / step)}`)
+            .multiply(`${step}`)
+            .add(`${min}`)
+            .toString();
+        let snappedValue = this.clamp(Number(bigDecimalString));
         if (snappedValue > max) {
             snappedValue -= step;
         }

package/dist/cjs/calcite-icon.cjs.entry.js

@@ -7,17 +7,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-696e53e6.js');
-const dom = require('./dom-63b93b3b.js');
-const observers = require('./observers-3440c668.js');
-const browser = require('./browser-02cbd1d9.js');
-require('./guid-4bc1bc0f.js');
-require('./resources-8556a9ce.js');
+const index = require('./index-5a0af791.js');
+const dom = require('./dom-6a9b6275.js');
+const observers = require('./observers-8fed90f3.js');
+const browser = require('./browser-69696af0.js');
+require('./guid-02e5380f.js');
+require('./resources-dfe71ff2.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     icon: "icon",
@@ -27,7 +27,7 @@ const CSS = {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 /**
  * Icon data cache.
@@ -112,7 +112,7 @@ function normalizeIconName(name) {
     return numberLeadingName ? `i${name}` : name;
 }
 
-const iconCss = ":host{display:inline-flex;color:var(--calcite-ui-icon-color)}:host([scale=s]){inline-size:16px;block-size:16px;min-inline-size:16px;min-block-size:16px}:host([scale=m]){inline-size:24px;block-size:24px;min-inline-size:24px;min-block-size:24px}:host([scale=l]){inline-size:32px;block-size:32px;min-inline-size:32px;min-block-size:32px}.flip-rtl{transform:scaleX(-1)}.svg{display:block}:host([hidden]){display:none}[hidden]{display:none}";
+const iconCss = ":host{display:inline-flex;color:var(--calcite-icon-color, var(--calcite-ui-icon-color, currentColor))}:host([scale=s]){inline-size:16px;block-size:16px;min-inline-size:16px;min-block-size:16px}:host([scale=m]){inline-size:24px;block-size:24px;min-inline-size:24px;min-block-size:24px}:host([scale=l]){inline-size:32px;block-size:32px;min-inline-size:32px;min-block-size:32px}.flip-rtl{transform:scaleX(-1)}.svg{display:block}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteIconStyle0 = iconCss;
 
 const Icon = class {
@@ -148,7 +148,7 @@ const Icon = class {
         const size = scaleToPx[scale];
         const semantic = !!textLabel;
         const paths = [].concat(pathData || "");
-        return (index.h(index.Host, { key: 'cc43afdebd39df596be0a30677a9be5ba0db4fe0', "aria-hidden": dom.toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, index.h("svg", { key: 'a40833fc10f8bb7f287eb0c75f7437cb18880603', "aria-hidden": "true", class: {
+        return (index.h(index.Host, { key: '41c9d3006a5887061fdb2144102447b2f490eb72', "aria-hidden": dom.toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, index.h("svg", { key: '9fc84ba4eac40fc822babbfe276b2add5ee1c952', "aria-hidden": "true", class: {
                 [CSS.flipRtl]: dir === "rtl" && flipRtl,
                 svg: true,
             }, fill: "currentColor", height: "100%", viewBox: `0 0 ${size} ${size}`, width: "100%", xmlns: "http://www.w3.org/2000/svg" }, paths.map((path) => typeof path === "string" ? (index.h("path", { d: path })) : (index.h("path", { d: path.d, opacity: "opacity" in path ? path.opacity : 1 }))))));