udp-stencil-component-library 26.6.0-beta.9 → 26.6.0

package/dist/cjs/add-map-feature-popup_4.cjs.entry.js

@@ -1,18 +1,18 @@
 'use strict';
 
 var index = require('./index-G1ccGqOs.js');
-var es = require('@carbon/icons/es');
 var udpMapUtils = require('./udp-map-utils-Ch4IzmO9.js');
 var common = require('./common-By_kzIQM.js');
 require('lodash-es');
 require('ol/proj');
 require('ol/format/GeoJSON');
 
-const mapPopupCss$2 = () => `.popoverContent{display:flex;flex-direction:column;column-gap:var(--spacing-04);padding:var(--spacing-04);z-index:1}.featureDetailsPopOverContent{min-width:300px;z-index:1}.data-row{display:flex;column-gap:var(--spacing-04)}.data-section{display:flex;flex-direction:column;column-gap:var(--spacing-02)}.key{font-weight:bold;color:var(--accent-color-two)}.header{display:flex;background-color:var(--accent-color-three);color:var(--accent-color-two);padding-left:var(--spacing-02);margin-bottom:var(--spacing-04)}.closeButton{display:flex;align-items:center;justify-content:flex-end}.options{display:flex;justify-content:flex-end;column-gap:var(--spacing-04)}.mapType{margin-bottom:var(--spacing-02)}`;
+const mapPopupCss$2 = () => `.featureDetailsPopOverContent{min-width:300px;z-index:1}.data-row{display:flex;column-gap:var(--spacing-04)}.data-section{display:flex;flex-direction:column;column-gap:var(--spacing-02)}.key{font-weight:bold;color:var(--accent-color-two)}.header{display:flex;background-color:var(--accent-color-three);color:var(--accent-color-two);padding-left:var(--spacing-02);margin-bottom:var(--spacing-04)}.closeButton{display:flex;align-items:center;justify-content:flex-end}.options{display:flex;justify-content:flex-end;column-gap:var(--spacing-04)}.mapType{margin-bottom:var(--spacing-02)}`;
 
 const AddMapFeaturePopUp = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** Geometry type options offered when drawing a new feature. */
         this.typeOptions = [
             {
                 label: 'Point',
@@ -27,17 +27,21 @@ const AddMapFeaturePopUp = class {
                 value: 'Polygon',
             },
         ];
+        /** Names of the vector layers a new feature can be drawn on. */
         this.vectorLayerOptions = [];
+        /** The currently selected layer name. */
         this.selectedLayer = null;
+        /** The currently selected geometry type. */
         this.selectedType = null;
+        /** Overrides the layer/type options and whether the layer selector is shown. */
         this.panelConfig = null;
         this.layerToAddOptions = [];
         this.drawingTypeOptions = null;
-        this.handleSetSelectedLayer = (e) => {
-            this.selectedLayer = e;
+        this.handleSetSelectedLayer = (layer) => {
+            this.selectedLayer = layer;
         };
-        this.handleSetSelectedType = (e) => {
-            this.selectedType = e;
+        this.handleSetSelectedType = (type) => {
+            this.selectedType = type;
         };
         this.getlayerOptions = () => {
             var _a, _b;
@@ -83,12 +87,12 @@ const AddMapFeaturePopUp = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h("div", { key: '52c66e78546256bd287b386074db085f03d0ede3', class: "popoverContent" }, !((_a = this.panelConfig) === null || _a === void 0 ? void 0 : _a.hideLayerSelector) && (index.h("udp-selector", { key: '77e9a5b19884153c25fde402150afc6bb9d43b24', id: 'layer', options: this.layerToAddOptions, initialValue: this.selectedLayer, label: 'Layer', onChange: (e) => {
+        return (index.h("div", { key: '92c7b6ebafb31c972a352d8378ff424a2164485c' }, !((_a = this.panelConfig) === null || _a === void 0 ? void 0 : _a.hideLayerSelector) && (index.h("udp-fluent-dropdown", { key: 'b71fa0a2136941962ce4f7e62340e595f242fe43', options: this.layerToAddOptions, value: this.selectedLayer, valueAs: "value", label: 'Layer', onValueChanged: (e) => {
                 this.handleSetSelectedLayer(e.detail);
-            }, large: false })), index.h("udp-selector", { key: '4d48e83c03bc9e7e14a7f49c82b9824d389e449d', id: 'type', options: (_b = this.drawingTypeOptions) !== null && _b !== void 0 ? _b : [], initialValue: this.selectedType, label: 'Type', onChange: (e) => {
+            } })), index.h("udp-fluent-dropdown", { key: '6dcffb3b7bb3bc33f83815eeff1be597ae880fc8', options: (_b = this.drawingTypeOptions) !== null && _b !== void 0 ? _b : [], value: this.selectedType, valueAs: "value", label: 'Type', onValueChanged: (e) => {
                 this.handleSetSelectedType(e.detail);
-            }, large: false }), index.h("div", { key: '0a62ab44f368bb22adad57a610b920550c2b8931', class: "formButton" }, index.h("custom-button", { key: '273a36314d6db3bf9e87d5e7839f984e8ad0de75', label: index.h("unity-typography", { variant: "button" }, 'Draw feature'), onClick: () => this.handleStartDrawingMapFeature(this.selectedLayer, this.selectedType), variant: 'outline', disabled: (this.selectedLayer === null && !((_c = this.panelConfig) === null || _c === void 0 ? void 0 : _c.hideLayerSelector)) ||
-                this.selectedType === null }))));
+            } }), index.h("div", { key: '188ee2f8d0ca51b2aea7565482d14135f75d3e1e', class: "formButton" }, index.h("udp-fluent-button", { key: '53e6224bfa75d51da6addc1e4b33f7dc2973637a', appearance: "outline", onClick: () => this.handleStartDrawingMapFeature(this.selectedLayer, this.selectedType), disabled: (this.selectedLayer === null && !((_c = this.panelConfig) === null || _c === void 0 ? void 0 : _c.hideLayerSelector)) ||
+                this.selectedType === null }, "Draw feature"))));
     }
     static get watchers() { return {
         "panelConfig": [{
@@ -104,7 +108,7 @@ const AddMapFeaturePopUp = class {
 };
 AddMapFeaturePopUp.style = mapPopupCss$2();
 
-const mapToolbarCss = () => `.toolbarContainer{display:flex;justify-content:space-between;align-items:center;background:var(--accent-color);padding-left:var(--spacing-05)}.buttonContainer{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.secondaryButtons{display:flex;justify-content:flex-end;column-gap:var(--spacing-04);margin-top:var(--spacing-04);margin-bottom:var(--spacing-04)}.selectedFeaturesButtons{display:flex;column-gap:var(--spacing-04)}#addOption{margin-left:var(--spacing-04)}.title{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.labelButtons{white-space:nowrap}@media (min-width: 300px){.labelButtons{white-space:nowrap}}.buttons{display:flex;flex-direction:column}.popOversListContainer{display:flex;justify-content:space-evenly;padding:0}#addOptionButton{width:fit-content}`;
+const mapToolbarCss = () => `.toolbarContainer{display:flex;justify-content:space-between;align-items:center;background:var(--accent-color);padding-left:var(--spacing-05)}.buttonContainer{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.secondaryButtons{display:flex;justify-content:flex-end;align-items:center;column-gap:var(--spacing-04);margin-top:var(--spacing-04);margin-bottom:var(--spacing-04)}.selectedFeaturesButtons{display:flex;column-gap:var(--spacing-04)}#addOption{margin-left:var(--spacing-04)}.title{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.labelButtons{white-space:nowrap}@media (min-width: 300px){.labelButtons{white-space:nowrap}}.buttons{display:flex;flex-direction:column}.popOversListContainer{display:flex;justify-content:space-evenly;padding:0}#addOptionButton{width:fit-content;margin-right:var(--spacing-04)}.layerButtonBadgeWrapper,.withSelectedButtonBadgeWrapper{position:relative;display:inline-flex}.layerCountBadge,.withSelectedCountBadge{position:absolute;top:-4px;right:-4px;pointer-events:none}`;
 
 const MapToolbar = class {
     constructor(hostRef) {
@@ -122,12 +126,12 @@ const MapToolbar = class {
         this.addMultipleFeatures = true;
         this.showSplitButton = false;
         this.readOnlyLayers = [];
-        this.filterAnchor = null;
-        this.layerAnchor = null;
-        this.bulkSelectionTypeAnchor = null;
-        this.selectionActionAnchor = null;
-        this.splitAnchor = null;
-        this.addFeatureAnchor = null;
+        this.filterOpen = false;
+        this.layerOpen = false;
+        this.bulkSelectionTypeOpen = false;
+        this.selectionActionOpen = false;
+        this.splitOpen = false;
+        this.addFeatureOpen = false;
         this.filteredOptions = [];
         this.withSelected = false;
         this.layerOptionsForPopup = [];
@@ -140,53 +144,51 @@ const MapToolbar = class {
             this.handleSelectLayers(value);
         };
         this.handleCloseFilterPopover = () => {
-            this.filterAnchor = null;
+            this.filterOpen = false;
         };
         this.handleCloseLayerPopover = () => {
-            this.layerAnchor = null;
+            this.layerOpen = false;
         };
         this.handleCloseBulkSelectionTypePopover = () => {
-            this.bulkSelectionTypeAnchor = null;
+            this.bulkSelectionTypeOpen = false;
         };
         this.handleCloseSplitPopover = () => {
-            this.splitAnchor = null;
+            this.splitOpen = false;
         };
         this.handleCloseSelectionActionPopover = () => {
-            this.selectionActionAnchor = null;
+            this.selectionActionOpen = false;
         };
         this.handleCloseAddMapFeature = () => {
-            this.addFeatureAnchor = null;
+            this.addFeatureOpen = false;
             this.selectedLayerToAddFeature = null;
             this.selectedTypeToAddFeature = null;
         };
         this.handleFilterOnclick = () => {
-            this.filterAnchor = this.mapToolbarElement.shadowRoot.querySelector('#filterOptionButton');
+            this.filterOpen = !this.filterOpen;
         };
         this.handleLayerOnclick = () => {
-            this.layerAnchor = this.mapToolbarElement.shadowRoot.querySelector('#layerOptionButton');
+            this.layerOpen = !this.layerOpen;
             this.filteredOptions = this.layerOptions;
         };
         this.handleSelectionActionOnclick = () => {
-            this.selectionActionAnchor = this.mapToolbarElement.shadowRoot.querySelector('#withSelectedOptionButton');
+            this.selectionActionOpen = !this.selectionActionOpen;
         };
         this.handleSelectionBtnOnclick = () => {
-            this.bulkSelectionTypeAnchor = this.mapToolbarElement.shadowRoot.querySelector('#bulkSelectOptionButton');
+            this.bulkSelectionTypeOpen = !this.bulkSelectionTypeOpen;
         };
         this.handleSplitBtnOnclick = () => {
-            this.splitAnchor = this.mapToolbarElement.shadowRoot.querySelector('#splitOptionButton');
+            this.splitOpen = !this.splitOpen;
         };
         this.handleAddOnclick = () => {
             this.selectedLayerToAddFeature = null;
             this.selectedTypeToAddFeature = null;
-            this.addFeatureAnchor = this.mapToolbarElement.shadowRoot.querySelector('#addOptionButton');
+            this.addFeatureOpen = !this.addFeatureOpen;
         };
         this.handleBulkSelectionTypeOnclick = (value) => {
-            this.bulkSelectionTypeAnchor = null;
+            this.bulkSelectionTypeOpen = false;
             this.handleBulkSelectionTypeOnChange(value, this.mapProjection);
         };
-        this.handleSearchLayers = (e) => {
-            var _a;
-            const searchString = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value;
+        this.handleSearchLayers = (searchString) => {
             if (!searchString || (searchString === null || searchString === void 0 ? void 0 : searchString.trim().length) === 0) {
                 this.filteredOptions = this.layerOptions;
                 return;
@@ -202,13 +204,13 @@ const MapToolbar = class {
             this.handleUnselectFeatures();
         };
         this.handleAddNewFeature = () => {
-            this.addFeatureAnchor = null;
+            this.addFeatureOpen = false;
             this.selectedLayerToAddFeature = null;
             this.selectedTypeToAddFeature = null;
             this.addNewFeature();
         };
         this.handleCancelAddNewFeature = () => {
-            this.addFeatureAnchor = null;
+            this.addFeatureOpen = false;
             this.selectedLayerToAddFeature = null;
             this.selectedTypeToAddFeature = null;
             this.cancelAddNewFeature();
@@ -224,12 +226,12 @@ const MapToolbar = class {
         };
         this.getButtonIcon = () => {
             if (this.enableDragBox) {
-                return es.Close16;
+                return 'dismiss';
             }
             if (this.enableAddNewFeature) {
-                return es.Checkmark16;
+                return 'checkmark';
             }
-            return es.Close16;
+            return 'dismiss';
         };
     }
     componentDidLoad() {
@@ -267,25 +269,16 @@ const MapToolbar = class {
         }
     }
     render() {
-        var _a, _b;
-        return (index.h("div", { key: 'e6c14f06623267cf30b490e9f586488178197ca0', class: "toolbarContainer" }, index.h("div", { key: 'c952a30f10c3c5013dc871f0bc1b4f13ffef7e10', class: "title" }, this.mapTitle && this.mapTitle.length > 0 && index.h("unity-typography", { key: 'df083a2a7673a6a4736f5cfdfc14935f872c911c', variant: "h4" }, this.mapTitle)), index.h("div", { key: 'c37f8bece500464d73a128a452146d249475c607', class: "buttons" }, index.h("div", { key: 'aa479c098df40f8f0c6011b403bcc865589e7293', class: "buttonContainer" }, index.h("div", { key: '158e8fcfcb68c7070b803f71f2d36cc4262b76ae', class: "secondaryButtons" }, this.filterPanel && (index.h("div", { key: '754b6f64bbb6766d710318feafd4de9c2f32c926', id: "filterOption" }, index.h("div", { key: '3e7d18019368d3c1dc7d88b4d9ecd1bef29ec152', id: "filterOptionButton" }, index.h("stencil-icon-button", { key: '2122edafd453ac48161f11e830dbfef7ac607281', iconName: 'filterButton', iconClassName: 'iconButtonWrapper', tooltip: 'Filter', icon: es.Filter16, buttonId: 'filterButton', onClick: () => this.handleFilterOnclick() })), this.filterAnchor && (index.h("div", { key: '2ffb814c1c1345d25000579ea10509feff2c06b4', id: "filterOptionDiv" }, index.h("udp-pop-over", { key: '72842c27b8e88b9c6078619e87f98e7de341fd8f', isOpen: this.filterAnchor ? true : false, anchorElement: this.filterAnchor, handleOnClose: () => this.handleCloseFilterPopover(), popoverPlacement: 'bottom-start', overflow: 'visible' }, index.h("div", { key: 'a5bc575d2381fdaadc0883e5a6c21706bdcf4c42', innerHTML: this.filterPanel })))))), this.layerOptions && (index.h("div", { key: '7ae03738852b7dc35ba859943a687a0b6ef837f8', id: "layerOption" }, index.h("div", { key: '423a0ad35d0d6469c90cf45be62e04de9e76217c', id: "layerOptionButton" }, index.h("stencil-icon-button", { key: '33a48c846b26560725b8912d4ac164f7a1d7de6b', iconName: 'layersButton', iconClassName: 'iconButtonWrapper', tooltip: 'Layers', icon: es.Layers16, buttonId: 'layersButton', onClick: () => this.handleLayerOnclick(), count: (_a = this.visibleLayers) === null || _a === void 0 ? void 0 : _a.length })), index.h("div", { key: '21808eaae482075fdc96ab713bcc3712d4d80b52', id: "layerOptionDiv" }, this.layerAnchor && (index.h("udp-pop-over", { key: 'fec6682a9cac50fe92a214f51fdb068993a32333', isOpen: this.layerAnchor ? true : false, anchorElement: this.layerAnchor, handleOnClose: () => this.handleCloseLayerPopover(), popoverPlacement: 'bottom-start', popoverMaxHeight: '500px' }, index.h("select-layer-popup", { key: '271ab19874f0d53141d7a4a4c9bfc914c2a6c1ce', enableTileSelection: this.enableTileSelection, tileOptions: this.tileOptions, handleMapTypeInputChange: this.handleMapTypeInputChange, handleSearchLayers: this.handleSearchLayers, filteredOptions: this.filteredOptions, visibleLayers: this.visibleLayers, updateSelectedLayers: this.updateSelectedLayers, selectedTile: this.selectedTile })))))), !this.readOnlyMap && this.selectedFeaturesActionPanel && (index.h("div", { key: '9f35245c35d9f6e212fe757ada0f1b560e4ea402', id: "bulkSelectOption" }, index.h("div", { key: 'ba34abbcbfa0b104b7da56bbcb4353a5a67fc4e9', id: "bulkSelectOptionButton" }, index.h("stencil-icon-button", { key: '2d28996072daf9e04c2a7337daa8147a4631edb4', iconName: 'selectButton', iconClassName: 'iconButtonWrapper', tooltip: 'Select', icon: es.Select_0116, buttonId: 'selectButton', onClick: () => this.handleSelectionBtnOnclick() })), index.h("div", { key: 'fbc638fbc385181b6a41a7083b55e771bb64ebdb', id: "bulkSelectOptionDiv" }, this.bulkSelectionTypeAnchor && (index.h("udp-pop-over", { key: 'ed98ebfa56a5206c224ae4a36deeea5be142679f', isOpen: this.bulkSelectionTypeAnchor ? true : false, anchorElement: this.bulkSelectionTypeAnchor, handleOnClose: () => this.handleCloseBulkSelectionTypePopover(), popoverPlacement: 'bottom-start', overflow: 'visible' }, index.h("udp-menu-item", { key: '2d500155c53e1fc1e90639a84a3b46d7740332db', label: 'Box', handleOnClick: () => {
-                this.handleBulkSelectionTypeOnclick('box');
-            } }), index.h("udp-menu-item", { key: '51bd43ab011a928e12e8b339f6bdc2e5c0f7ea4e', label: 'Circle', handleOnClick: () => {
-                this.handleBulkSelectionTypeOnclick('circle');
-            } }), index.h("udp-menu-item", { key: '0a5cefc44f962a9018961937587e7d147d859925', label: 'Polygon', handleOnClick: () => {
-                this.handleBulkSelectionTypeOnclick('polygon');
-            } }), index.h("udp-menu-item", { key: '963ad70c4d18a44fc1af95a749e369102a253630', label: 'Lasso', handleOnClick: () => {
-                this.handleBulkSelectionTypeOnclick('lasso');
-            } })))))), !this.readOnlyMap && this.enableSplit && (index.h("div", { key: '88330e8e1926c08c0c0f006f585d2940c7a3892d', id: "splitOption" }, index.h("div", { key: '601f2c5bd0565edb1ff9857281fa4ab5234248e2', id: "splitOptionButton" }, index.h("stencil-icon-button", { key: 'fdeb94ea93368470e218ce5a613540798b41248b', iconName: 'splitButton', iconClassName: 'splitButtonWrapper', tooltip: 'Split Linear Feature', icon: es.Scalpel16, buttonId: 'splitButton', onClick: () => this.handleSplitBtnOnclick() })), index.h("div", { key: '055b2c35991de795fcd1779fbdd9276434ec0a5b', id: "splitOptionDiv" }, this.splitAnchor && (index.h("udp-pop-over", { key: '4dad20f6da7326637c2b27c3f8628628f4245f43', isOpen: this.splitAnchor ? true : false, anchorElement: this.splitAnchor, handleOnClose: () => this.handleCloseSplitPopover(), popoverPlacement: 'bottom-start', overflow: 'visible' }, index.h("split-line-popup", { key: '3f6234b7527b897cf5b2dcbfa8150d8b5c164cb5', vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, handleStartSplitting: this.handleStartSplitting })))))), this.refreshEvent && (index.h("stencil-icon-button", { key: '219153da345b6a39a3828f9b181bdbeb70ff542c', iconName: 'refreshButton', iconClassName: 'iconButtonWrapper', tooltip: (_b = this.refreshButtonTooltip) !== null && _b !== void 0 ? _b : 'Refresh', icon: es.Renew16, buttonId: 'refreshButton', onClick: () => this.refreshEvent() })), !this.readOnlyMap && (this.enableDragBox || (this.addMultipleFeatures && this.enableAddNewFeature)) && (index.h("div", { key: 'bb170f5600c49641cf25942676b80926de2e86f3', class: "labelButtons" }, index.h("stencil-icon-button-grid-action-header", { key: '04c5c5dd66b24de81fac76067ca124c882751c8e', showLabel: true, icon: this.getButtonIcon(), onClick: () => {
+        var _a, _b, _c;
+        return (index.h("div", { key: '984461a3b08d1fb4a7f50ced9045c60a6fba3a4b', class: "toolbarContainer" }, index.h("div", { key: 'e290fd0e6af967c3b5766d0238dff34588551cc1', class: "title" }, this.mapTitle && this.mapTitle.length > 0 && index.h("unity-typography", { key: 'cdc452ac7541641d2c37c770198e6a04dc3b6ecd', variant: "h4" }, this.mapTitle)), index.h("div", { key: 'f879e28ea01fce32bdc77edaccd69eab5446a018', class: "buttons" }, index.h("div", { key: '3b42322127f7f7c6cab860ecf3427949922b33f8', class: "buttonContainer" }, index.h("div", { key: 'f6b77619fb3e451602af657b40fc258ea5d0f254', class: "secondaryButtons" }, this.filterPanel && (index.h("div", { key: 'ceda42d91fbd95be26d02956002d51379f1ac32a', id: "filterOption" }, index.h("udp-popover", { key: 'ea202af661e10ad61568540d92b5311a8017f9fb', open: this.filterOpen, position: 'bottom-start', toggleOnTriggerClick: false, onPopoverClose: () => this.handleCloseFilterPopover() }, index.h("div", { key: '95f5a91dd6277d20b00fefa91b5feea649632231', id: "filterOptionButton", slot: "trigger" }, index.h("udp-tooltip", { key: '19748356119018cba63c9f6577f852e0ceb23c9e', content: "Filter" }, index.h("udp-fluent-icon-button", { key: 'b48a5fb4495e3d8992c82453d49df6d9044fbdb8', iconName: "filter", ariaLabel: "Filter", onClick: () => this.handleFilterOnclick() }))), this.filterOpen && index.h("div", { key: 'd96720466044a8727a31c1ad770774e20eb5a53a', slot: "content", innerHTML: this.filterPanel })))), this.layerOptions && (index.h("div", { key: 'b9df3506fd4a640d2b473549401e1ac9daa3b5d5', id: "layerOption" }, index.h("udp-popover", { key: 'cb289fa03ee723e80b3664a9f36a7499b605e09e', open: this.layerOpen, position: 'bottom-start', toggleOnTriggerClick: false, onPopoverClose: () => this.handleCloseLayerPopover() }, index.h("div", { key: '563bd7cf9d10fccdbb6e4883b01f234982e5f2f6', id: "layerOptionButton", slot: "trigger" }, index.h("udp-tooltip", { key: '355c48368db5ad89cbeeec61b70a1abc569a4f49', content: "Layers" }, index.h("span", { key: 'ae161883440a19d0fedd92418fed2d06d7fe8dbf', class: "layerButtonBadgeWrapper" }, index.h("udp-fluent-icon-button", { key: '04548bb645749283a9b810e6e3632e967db8f0e5', iconName: "layer", ariaLabel: "Layers", onClick: () => this.handleLayerOnclick() }), ((_a = this.visibleLayers) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("udp-fluent-badge", { key: 'a5e89d52fa5530b45bc3011638831d329ca74a24', class: "layerCountBadge", size: "small", appearance: "filled", color: "brand" }, this.visibleLayers.length))))), this.layerOpen && (index.h("div", { key: 'dfc64b7fbe98e9f5ecb8771d5b43a8dc6bebe019', slot: "content", style: { maxHeight: '500px', overflow: 'auto' } }, index.h("select-layer-popup", { key: 'f18c4b3280f78336eb373d6d24ec4c694f302d92', enableTileSelection: this.enableTileSelection, tileOptions: this.tileOptions, handleMapTypeInputChange: this.handleMapTypeInputChange, handleSearchLayers: this.handleSearchLayers, filteredOptions: this.filteredOptions, visibleLayers: this.visibleLayers, updateSelectedLayers: this.updateSelectedLayers, selectedTile: this.selectedTile })))))), !this.readOnlyMap && this.selectedFeaturesActionPanel && (index.h("div", { key: 'e25c92d701aa311f4ace90d777306050e4ace31a', id: "bulkSelectOption" }, index.h("udp-popover", { key: 'e8a98d3c947c26a6c883123e4587fa8532a89d4c', open: this.bulkSelectionTypeOpen, position: 'bottom-start', toggleOnTriggerClick: false, onPopoverClose: () => this.handleCloseBulkSelectionTypePopover() }, index.h("div", { key: 'fe8fd679a7053c5031cd308099b65fdc72f7b28c', id: "bulkSelectOptionButton", slot: "trigger" }, index.h("udp-tooltip", { key: '84e1aeb49130a5ed7ac2f9009f25c9490f4ac0bb', content: "Select" }, index.h("udp-fluent-icon-button", { key: '81a6a17dee7528d3271f8ca8aa668fa4df6e2399', iconName: "lasso", ariaLabel: "Select", onClick: () => this.handleSelectionBtnOnclick() }))), this.bulkSelectionTypeOpen && (index.h("div", { key: 'a6312b782d6edc7e5d9afb332c8c21a6620e0dcc', slot: "content" }, index.h("udp-menu-item", { key: 'a3efc93116ded76058019b8905ae35965eb98357', label: 'Box', onItemClick: () => this.handleBulkSelectionTypeOnclick('box') }), index.h("udp-menu-item", { key: 'd874e1ac1794d722781ecbf37ca8ec0984b179a0', label: 'Circle', onItemClick: () => this.handleBulkSelectionTypeOnclick('circle') }), index.h("udp-menu-item", { key: '39931e2b867473167379eaa3434b7b9d6aaaff50', label: 'Polygon', onItemClick: () => this.handleBulkSelectionTypeOnclick('polygon') }), index.h("udp-menu-item", { key: '2da942df0c824cfdbc17b18f295e1e9639eafd87', label: 'Lasso', onItemClick: () => this.handleBulkSelectionTypeOnclick('lasso') })))))), !this.readOnlyMap && this.enableSplit && (index.h("div", { key: 'f635e600e79b98d891783790ed42adc88d8ab06c', id: "splitOption" }, index.h("udp-popover", { key: 'ca77d0b5367b557c47e985b70333c326bda4e455', open: this.splitOpen, position: 'bottom-start', toggleOnTriggerClick: false, onPopoverClose: () => this.handleCloseSplitPopover() }, index.h("div", { key: 'a5ea2c4e84bbf2f4a58f742b5203a5e6285b3d06', id: "splitOptionButton", slot: "trigger" }, index.h("udp-tooltip", { key: 'f14fef9f771de6f93e428a2d2a5b15533b6ca582', content: "Split Linear Feature" }, index.h("udp-fluent-icon-button", { key: '9fdc240667615f705f5b9dc93d375bf41c28e80a', iconName: "cut", ariaLabel: "Split Linear Feature", onClick: () => this.handleSplitBtnOnclick() }))), this.splitOpen && (index.h("split-line-popup", { key: '6ee2ae66b0bdb115416ea8e2a19887af18e68ba2', slot: "content", vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, handleStartSplitting: this.handleStartSplitting }))))), this.refreshEvent && (index.h("udp-tooltip", { key: 'a41b3b967147ccc9a9984178bb738119b02b2e8b', content: (_b = this.refreshButtonTooltip) !== null && _b !== void 0 ? _b : 'Refresh' }, index.h("udp-fluent-icon-button", { key: '64c4b105fe751f57f30395438592d8991e9fe2f0', iconName: "arrow-sync", ariaLabel: (_c = this.refreshButtonTooltip) !== null && _c !== void 0 ? _c : 'Refresh', onClick: () => this.refreshEvent() }))), !this.readOnlyMap && (this.enableDragBox || (this.addMultipleFeatures && this.enableAddNewFeature)) && (index.h("div", { key: '7f1606da5016100cb36651296a4af93997c7669f', class: "labelButtons" }, index.h("udp-fluent-button", { key: '85f7d108853c0e345d97f9a141efe2923794e170', startIconName: this.getButtonIcon(), appearance: "transparent", size: "small", onClick: () => {
                 if (this.enableDragBox) {
                     this.handleCancelBoxSelection();
                 }
                 if (this.enableAddNewFeature) {
                     this.handleAddNewFeature();
                 }
-            }, tooltip: this.getButtonText(), iconClassName: 'save-icon-class' }, index.h("unity-typography", { key: 'd1c720c48910ca49e8ccf45d5649c31734444893', variant: "button" }, this.getButtonText())))), this.showSplitButton && (index.h("div", { key: 'e56371a458a1981cfec1bee849a82c39b4543009', class: "labelButtons" }, index.h("stencil-icon-button-grid-action-header", { key: '2fa622457150c8cff9075e3e60d2af1142c48cc2', showLabel: true, icon: es.Checkmark16, onClick: () => this.handleSaveSplit(), tooltip: 'Save Split', iconClassName: 'save-icon-class' }, index.h("unity-typography", { key: '6bc6b5dcaa8d96a346d5826e5c995a2a12eef7f4', variant: "button" }, 'Save Split')))), this.showSplitButton && (index.h("div", { key: 'ab1b6edf4e1e2e9fd6696f21e44dca681d3cb5a8', class: "labelButtons" }, index.h("stencil-icon-button-grid-action-header", { key: '8583a1e757abc4d441cea4782e942367c0019960', showLabel: true, icon: es.Close16, onClick: () => this.handleCancelSplit(), tooltip: 'Cancel Split', iconClassName: 'save-icon-class' }, index.h("unity-typography", { key: '67ed0bb533ca08de906646832f0a09e283885575', variant: "button" }, 'Cancel Split')))), !this.readOnlyMap && this.enableAddNewFeature && (index.h("div", { key: '6142c8743d0288b295c625162cedcbda7e321d56', class: "labelButtons" }, index.h("stencil-icon-button-grid-action-header", { key: 'f4e2f6ed5d7626303f36ba859db9913c21dabe49', showLabel: true, icon: es.Close16, onClick: () => this.handleCancelAddNewFeature(), tooltip: 'Cancel Drawing', iconClassName: 'save-icon-class' }, index.h("unity-typography", { key: '0a210b36a0c836f5739e9727497824c84256abb5', variant: "button" }, 'Cancel Drawing')))), !this.readOnlyMap && this.withSelected && (index.h("div", { key: 'f0ec7b8edd948775d6eb0eb723ae221c024281ee', class: "selectedFeaturesButtons labelButtons" }, index.h("div", { key: '4821ffb5dba70d9c8fd8ddd70859b24516d09c78', id: "withSelectedOption" }, index.h("div", { key: '314e55247e7b77e7c6eb64765340bcf698d86767', id: "withSelectedOptionButton" }, index.h("stencil-icon-button-grid-action-header", { key: '04da5965a0523339b15b72c8a6130691a5b71f13', showLabel: true, icon: es.OverflowMenuHorizontal16, onClick: () => this.handleSelectionActionOnclick(), tooltip: 'With Selected', iconClassName: 'save-icon-class', count: this.selectedFeatureByBoxSelection.length }, index.h("unity-typography", { key: 'e11dc4310fda3185cf9653acbe02a7ebc5ca8b15', variant: "button" }, 'With Selected'))), index.h("div", { key: 'b2289b1fd63722101067a6d4a01cc41389671e02', id: "withSelectedOptionDiv" }, this.selectedFeaturesActionPanel && this.selectionActionAnchor && (index.h("udp-pop-over", { key: 'f35f8d6ca2b2eb1ba85fecbde874e009ae9dc941', isOpen: this.selectionActionAnchor ? true : false, anchorElement: this.selectionActionAnchor, handleOnClose: () => this.handleCloseSelectionActionPopover(), popoverPlacement: 'bottom-start' }, index.h("div", { key: '7916dfb4f8eafbc597eef1c35fa271b7d8794589', innerHTML: this.selectedFeaturesActionPanel }))))), index.h("stencil-icon-button-grid-action-header", { key: '8001b9c1918079e810fa21a0f9fd97f4d387d248', showLabel: true, icon: es.Close16, onClick: () => this.unselectFeatures(), tooltip: 'Cancel selection', iconClassName: 'save-icon-class' }, index.h("unity-typography", { key: '122550e431313ebdaefc919b3adf196b2c54106e', variant: "button" }, 'Cancel Selection'))))), index.h("div", { key: 'cc36f4c6901f7078b2cfde7ea7298bb5dbf16db6', id: "addOption" }, this.enableAdd && !this.readOnlyMap && (index.h("div", { key: 'e89c64ebc0313bba6adfecaeb48c76e5872d9a8d', id: "addOptionButton" }, index.h("custom-button", { key: 'd57ab77340faef5e0116f0610e7ee11737eb96a8', secondary: true, label: index.h("unity-typography", { variant: "button" }, 'Add'), onClick: () => this.handleAddOnclick(), size: "tall" }, index.h("udp-icon", { key: '472d40e06d3de8624bb451211cbf9461361c0059', iconName: 'add32', darkIcon: false })))), this.addFeatureAnchor && (index.h("udp-pop-over", { key: '0b2b5f6cfbdab2f95f115b882ba03f6d895f80b5', isOpen: this.addFeatureAnchor ? true : false, anchorElement: this.addFeatureAnchor, handleOnClose: () => this.handleCloseAddMapFeature(), popoverPlacement: 'bottom-start', overflow: 'visible' }, index.h("add-map-feature-popup", { key: '1097994bea361dc3987ea2b4967fd5e19b20b3d8', handleStartDrawingMapFeature: this.handleStartDrawingMapFeature, vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, selectedType: this.selectedTypeToAddFeature, panelConfig: this.addFeaturePanelConfig }))))))));
+            } }, this.getButtonText()))), this.showSplitButton && (index.h("div", { key: 'bcfc9b781a21ba431e6e63a4b40f8b8892fd3102', class: "labelButtons" }, index.h("udp-fluent-button", { key: '91bd879bc58fc4f58e7ea093da9631d1976e70c6', startIconName: "checkmark", appearance: "transparent", shape: "rounded", size: "small", onClick: () => this.handleSaveSplit() }, "Save Split"))), this.showSplitButton && (index.h("div", { key: 'd50e800be5bf8bcc492fa4ca2f9dc6ed92420b8f', class: "labelButtons" }, index.h("udp-fluent-button", { key: 'a3f41fa4bda890954ea75ea0234797619564622c', startIconName: "dismiss", appearance: "transparent", shape: "rounded", size: "small", onClick: () => this.handleCancelSplit() }, "Cancel Split"))), !this.readOnlyMap && this.enableAddNewFeature && (index.h("div", { key: '64f048152ba9e8d9e278f712b8ee491eab1bb639', class: "labelButtons" }, index.h("udp-fluent-button", { key: '8904799be1da8b1328dec76ad9393ccb88d8929b', startIconName: "dismiss", appearance: "transparent", shape: "rounded", size: "small", onClick: () => this.handleCancelAddNewFeature() }, "Cancel Drawing"))), !this.readOnlyMap && this.withSelected && (index.h("div", { key: 'f83d198940fa28f818ac07c3540772cf611d416c', class: "selectedFeaturesButtons labelButtons" }, index.h("div", { key: 'f5fb63af4216830043bfc3c84fd3a57405ea0144', id: "withSelectedOption" }, index.h("udp-popover", { key: '8e3ffcf49ae42d8d2a9a980f735f2a21bed3a488', open: this.selectionActionOpen, position: 'bottom-start', toggleOnTriggerClick: false, onPopoverClose: () => this.handleCloseSelectionActionPopover() }, index.h("div", { key: 'a04fc17dd6f5d506776f613a5ad236fbcbc88fb3', id: "withSelectedOptionButton", slot: "trigger" }, index.h("span", { key: '35b6063747946f9321cce57023465cf295f05bc7', class: "withSelectedButtonBadgeWrapper" }, index.h("udp-fluent-button", { key: 'd3857278ae739996a97e333a06a1927fa1540fe1', startIconName: "more", appearance: "transparent", shape: "rounded", size: "small", onClick: () => this.handleSelectionActionOnclick() }, "With Selected"), this.selectedFeatureByBoxSelection.length > 0 && (index.h("udp-fluent-badge", { key: 'a316e0bb4c1e7043b360350a9be0b9c7dd6f7ad6', class: "withSelectedCountBadge", size: "small", appearance: "filled", color: "brand" }, this.selectedFeatureByBoxSelection.length)))), this.selectedFeaturesActionPanel && this.selectionActionOpen && (index.h("div", { key: '3f2e0a6d8cc191b03c0d3a64111980f0fca3d8c5', slot: "content", innerHTML: this.selectedFeaturesActionPanel })))), index.h("udp-fluent-button", { key: 'c01f944177decffb3a19b2f837ad87b8f6e37a48', startIconName: "dismiss", appearance: "transparent", shape: "rounded", size: "small", onClick: () => this.unselectFeatures() }, "Cancel Selection")))), index.h("div", { key: '8b5bcc4aab237f610ac827bd1a19863bcf9b1eb3', id: "addOption" }, this.enableAdd && !this.readOnlyMap && (index.h("udp-popover", { key: 'df397b6a0b77d14320fcc585b3786ba7b5652501', open: this.addFeatureOpen, position: 'bottom-start', toggleOnTriggerClick: false, onPopoverClose: () => this.handleCloseAddMapFeature() }, index.h("div", { key: 'e434b9b14c070d8cd235d7e161ba247029c9fe88', id: "addOptionButton", slot: "trigger" }, index.h("udp-fluent-button", { key: '42443f7aff121d467676f32fa5e65f7d0a3d9313', startIconName: "add", appearance: "primary", size: "large", onClick: () => this.handleAddOnclick() }, "Add")), this.addFeatureOpen && (index.h("add-map-feature-popup", { key: '159fd8369d1a1205a5d20080754a919e9a8ebd4b', slot: "content", handleStartDrawingMapFeature: this.handleStartDrawingMapFeature, vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, selectedType: this.selectedTypeToAddFeature, panelConfig: this.addFeaturePanelConfig })))))))));
     }
-    get mapToolbarElement() { return index.getElement(this); }
     static get watchers() { return {
         "layerOptions": [{
                 "setLayerOptions": 0
@@ -306,44 +299,50 @@ const MapToolbar = class {
 };
 MapToolbar.style = mapToolbarCss();
 
-const mapPopupCss$1 = () => `.popoverContent{display:flex;flex-direction:column;column-gap:var(--spacing-04);padding:var(--spacing-04);z-index:1}.featureDetailsPopOverContent{min-width:300px;z-index:1}.data-row{display:flex;column-gap:var(--spacing-04)}.data-section{display:flex;flex-direction:column;column-gap:var(--spacing-02)}.key{font-weight:bold;color:var(--accent-color-two)}.header{display:flex;background-color:var(--accent-color-three);color:var(--accent-color-two);padding-left:var(--spacing-02);margin-bottom:var(--spacing-04)}.closeButton{display:flex;align-items:center;justify-content:flex-end}.options{display:flex;justify-content:flex-end;column-gap:var(--spacing-04)}.mapType{margin-bottom:var(--spacing-02)}`;
+const mapPopupCss$1 = () => `.featureDetailsPopOverContent{min-width:300px;z-index:1}.data-row{display:flex;column-gap:var(--spacing-04)}.data-section{display:flex;flex-direction:column;column-gap:var(--spacing-02)}.key{font-weight:bold;color:var(--accent-color-two)}.header{display:flex;background-color:var(--accent-color-three);color:var(--accent-color-two);padding-left:var(--spacing-02);margin-bottom:var(--spacing-04)}.closeButton{display:flex;align-items:center;justify-content:flex-end}.options{display:flex;justify-content:flex-end;column-gap:var(--spacing-04)}.mapType{margin-bottom:var(--spacing-02)}`;
 
 const SelectLayerPopUp = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** Whether to show the base map-type (tile layer) dropdown. */
         this.enableTileSelection = true;
+        /** Options for the map-type dropdown, each shaped `{ label, value }`. */
         this.tileOptions = [];
+        /** Layer groups to render as checkbox lists, filtered by the search input. */
         this.filteredOptions = [];
+        /** Names of the currently visible (checked) layers. */
         this.visibleLayers = [];
     }
     render() {
-        var _a, _b, _c;
-        return (index.h("div", { key: '2befa4e1a5119f7cc22d5104d41ec3f96c40915e', class: "popoverContent" }, this.enableTileSelection && (index.h("udp-selector", { key: '042eb796ecbb471104080688b8d15c9664e449c6', id: 'mapType', options: (_a = this.tileOptions) !== null && _a !== void 0 ? _a : [], initialValue: this.selectedTile.value, label: 'Map Type', onChange: (e) => {
+        var _a, _b, _c, _d;
+        return (index.h("div", { key: 'e88fbcd96a6c790379aafa26e702039d394f361b' }, this.enableTileSelection && (index.h("udp-fluent-dropdown", { key: 'f3213039afd0917ee84687487f622217ae32a130', options: (_a = this.tileOptions) !== null && _a !== void 0 ? _a : [], value: (_b = this.selectedTile) === null || _b === void 0 ? void 0 : _b.value, valueAs: "value", label: 'Map Type', onValueChanged: (e) => {
                 this.handleMapTypeInputChange(e.detail);
-            }, large: false })), index.h("div", { key: '5bb3a2da4cbc1ad9feb94d40cc5863e5571a96ff', style: { height: '12px' } }), index.h("div", { key: '39b6c479a8e4ef5a4f2931b4ab3f5fcb655d8ea2' }, index.h("text-field", { key: '8a016b9709c026f19900e78f7cea0d4b2039ee31', label: 'Search Layers', id: 'searchFilter', value: '', onInput: (e) => this.handleSearchLayers(e) })), ((_b = this.filteredOptions) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
-            ((_c = this.filteredOptions) === null || _c === void 0 ? void 0 : _c.map(item => (index.h("check-box-group", { title: item === null || item === void 0 ? void 0 : item.title, options: item === null || item === void 0 ? void 0 : item.options, values: this.visibleLayers, handleChange: this.updateSelectedLayers }))))));
+            } })), index.h("div", { key: '3b503a816ed48629dfd7c69544b3d38ee6b952b0' }, index.h("udp-search-input", { key: 'f3a754776334172be6016eaca17838a314127785', label: 'Search Layers', onValueChanged: (e) => this.handleSearchLayers(e.detail) })), ((_c = this.filteredOptions) === null || _c === void 0 ? void 0 : _c.length) > 0 &&
+            ((_d = this.filteredOptions) === null || _d === void 0 ? void 0 : _d.map(item => (index.h("check-box-group", { title: item === null || item === void 0 ? void 0 : item.title, options: item === null || item === void 0 ? void 0 : item.options, values: this.visibleLayers, handleChange: this.updateSelectedLayers }))))));
     }
 };
 SelectLayerPopUp.style = mapPopupCss$1();
 
-const mapPopupCss = () => `.popoverContent{display:flex;flex-direction:column;column-gap:var(--spacing-04);padding:var(--spacing-04);z-index:1}.featureDetailsPopOverContent{min-width:300px;z-index:1}.data-row{display:flex;column-gap:var(--spacing-04)}.data-section{display:flex;flex-direction:column;column-gap:var(--spacing-02)}.key{font-weight:bold;color:var(--accent-color-two)}.header{display:flex;background-color:var(--accent-color-three);color:var(--accent-color-two);padding-left:var(--spacing-02);margin-bottom:var(--spacing-04)}.closeButton{display:flex;align-items:center;justify-content:flex-end}.options{display:flex;justify-content:flex-end;column-gap:var(--spacing-04)}.mapType{margin-bottom:var(--spacing-02)}`;
+const mapPopupCss = () => `.featureDetailsPopOverContent{min-width:300px;z-index:1}.data-row{display:flex;column-gap:var(--spacing-04)}.data-section{display:flex;flex-direction:column;column-gap:var(--spacing-02)}.key{font-weight:bold;color:var(--accent-color-two)}.header{display:flex;background-color:var(--accent-color-three);color:var(--accent-color-two);padding-left:var(--spacing-02);margin-bottom:var(--spacing-04)}.closeButton{display:flex;align-items:center;justify-content:flex-end}.options{display:flex;justify-content:flex-end;column-gap:var(--spacing-04)}.mapType{margin-bottom:var(--spacing-02)}`;
 
 const SplitLinePopup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** Names of the vector layers available for splitting. */
         this.vectorLayerOptions = [];
+        /** The currently selected layer name. */
         this.selectedLayer = null;
     }
     render() {
         var _a;
-        return (index.h("div", { key: '0e8d4c473ce160e64c6eb258398b65712f277db7', class: "popoverContent" }, index.h("udp-selector", { key: 'de7e0cf8c6f0f79ff6ebb63ac09690e050cfd22d', id: 'layer', options: (_a = this.vectorLayerOptions.map(layer => {
+        return (index.h("div", { key: 'bd62f773175f60d292424fe32f798eb90c459f5d' }, index.h("udp-fluent-dropdown", { key: '706d7516c84537fb63bd828790db836888a72601', options: (_a = this.vectorLayerOptions.map(layer => {
                 return {
                     label: layer,
                     value: layer,
                 };
-            })) !== null && _a !== void 0 ? _a : [], initialValue: this.selectedLayer, label: 'Layer', onChange: (e) => {
+            })) !== null && _a !== void 0 ? _a : [], value: this.selectedLayer, valueAs: "value", label: 'Layer', onValueChanged: (e) => {
                 this.handleStartSplitting(e.detail);
-            }, large: false })));
+            } })));
     }
 };
 SplitLinePopup.style = mapPopupCss();

package/dist/cjs/address-search_6.cjs.entry.js

@@ -187,15 +187,15 @@ const AddressSearch = class {
                 borderBottom: '1px solid var(--gray-02, #f0f0f0)',
             }
             : undefined;
-        return (index.h(index.Host, { key: 'e50d857c801523c658407299cf5e008f46ae82c2', class: {
+        return (index.h(index.Host, { key: '4fbd74f82989dc5477a145c995ce62c4f9d66f55', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
                 'udp-input--readonly': this.readonly,
                 'address-search--suggestions-open': isSuggestionsOpen,
-            } }, index.h("div", { key: 'efa00951ef784c0692f33f9c5829f6fee20ccea0', class: "bx--form-item map-input-search-field" }, index.h("unity-typography", { key: 'f0f6ab0abb829699b994de66fc8746583196f747', variant: "caption-text" }, index.h("label", { key: '0ac4fe06c12a37aab93bbb9d880d05a362663f34', htmlFor: this.inputId + '-search', class: "bx--label" }, this.label, this.required ? '*' : '')), index.h("div", { key: '96eaa300e133216935bb0f36a75623bd0a1cd982', class: "search-container" }, index.h("div", { key: '2fbe2cecadc4ca98e3da2767cf3eaefbe03e900a', class: "search-wrapper" }, index.h("input", { key: "map-search-input", type: "text", id: this.inputId + '-search', class: "search-input bx--text-input", placeholder: this.placeholder, value: this.searchQuery, onInput: this.handleSearchInput, onFocus: this.handleFocus, disabled: this.disabled, readOnly: this.readonly,
+            } }, index.h("div", { key: '57baf3ff290bc6e09a42cf2d4496595764b3e4eb', class: "bx--form-item map-input-search-field" }, index.h("unity-typography", { key: '804858994e666d12728ee5276cbbe6a2ee8d7220', variant: "caption-text" }, index.h("label", { key: '28e1318f575c01414c1c903e67fe5aa0f9a8d0d7', htmlFor: this.inputId + '-search', class: "bx--label" }, this.label, this.required ? '*' : '')), index.h("div", { key: 'aa675771e3076399df6168ad8e321cec27175ded', class: "search-container" }, index.h("div", { key: '64ab0f43cba2a2be4759b4a34e8be190d166d556', class: "search-wrapper" }, index.h("input", { key: "map-search-input", type: "text", id: this.inputId + '-search', class: "search-input bx--text-input", placeholder: this.placeholder, value: this.searchQuery, onInput: this.handleSearchInput, onFocus: this.handleFocus, disabled: this.disabled, readOnly: this.readonly,
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-            ref: el => (this.searchInputEl = el) }), index.h("div", { key: '539a98a27bf99591cddef9f189d02851de67aad5', class: "search-actions" }, index.h("button", { key: 'bd8fe87b945f07fe5f36efedaf7c92fbddb5da9e', type: "button", class: { 'clear-button': true, 'hidden': !this.searchQuery }, onClick: this.clearSearch, "aria-label": "Clear search", disabled: this.disabled || this.readonly }, "\u2715"), index.h("div", { key: 'c66b575903f59adbae94f3698e53f4aa901095f6', class: { 'loading-indicator': true, 'hidden': !isBusy } }, index.h("div", { key: '91bc6fbe3dc504bb81a102e198785bacc825ffea', class: "spinner" }))), index.h("udp-pop-over", { key: '203fb3aef3414fe8cdb69707840f0ea24f12252b', anchorElement: this.searchInputEl, isOpen: isSuggestionsOpen, appendToBody: this.appendSuggestionsToBody, popoverPlacement: "bottom-start", popoverWidth: popoverWidth, popoverMaxHeight: "var(--address-search-suggestions-max-height)", overflow: "auto", handleOnClose: () => (this.showSuggestions = false) }, index.h("ul", { key: 'f3e5da0b9760a1e8c4314cca458ab30bdc166886', class: "suggestions-list", style: suggestionsListStyle }, this.suggestions.map(suggestion => (index.h("li", { key: suggestion.id, class: "suggestion-item", style: suggestionItemStyle, onClick: () => this.selectAddress(suggestion) }, index.h("unity-typography", { variant: "body" }, index.h("div", { class: "suggestion-content" }, index.h("span", { class: "suggestion-address" }, suggestion.address.freeformAddress)))))))))), errorMessage ? (index.h("div", { class: "error-message" }, index.h("unity-typography", { variant: "caption-text", color: "error" }, errorMessage))) : null)));
+            ref: el => (this.searchInputEl = el) }), index.h("div", { key: 'a851217b8d649bc4b028c63cef0b4bb7867dfd55', class: "search-actions" }, index.h("button", { key: '16b88e3e0fa611763e939284ddfc75f251eb1ae0', type: "button", class: { 'clear-button': true, 'hidden': !this.searchQuery }, onClick: this.clearSearch, "aria-label": "Clear search", disabled: this.disabled || this.readonly }, "\u2715"), index.h("div", { key: '487b4f1f11663ecbc6a6c0ad78c2af3000578b81', class: { 'loading-indicator': true, 'hidden': !isBusy } }, index.h("div", { key: '1b61bf03dcf5f1e481d2f66be8f5b63c4c1ab9b2', class: "spinner" }))), index.h("udp-pop-over", { key: 'aae3d5783d204a08cf183771f67a1dd03b655a20', anchorElement: this.searchInputEl, isOpen: isSuggestionsOpen, appendToBody: this.appendSuggestionsToBody, popoverPlacement: "bottom-start", popoverWidth: popoverWidth, popoverMaxHeight: "var(--address-search-suggestions-max-height)", overflow: "auto", handleOnClose: () => (this.showSuggestions = false) }, index.h("ul", { key: '7b75aa8683b7904cc90b2700ad6163c5c7f42bde', class: "suggestions-list", style: suggestionsListStyle }, this.suggestions.map(suggestion => (index.h("li", { key: suggestion.id, class: "suggestion-item", style: suggestionItemStyle, onClick: () => this.selectAddress(suggestion) }, index.h("unity-typography", { variant: "body" }, index.h("div", { class: "suggestion-content" }, index.h("span", { class: "suggestion-address" }, suggestion.address.freeformAddress)))))))))), errorMessage ? (index.h("div", { class: "error-message" }, index.h("unity-typography", { variant: "caption-text", color: "error" }, errorMessage))) : null)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -328,7 +328,7 @@ const NumericField = class {
             'bx--text-input--error': isError,
             'text-field--disabled': this.disabled,
         };
-        return (index.h(index.Host, { key: '159e64bff653433f34f23dbf40529ea25a43fed6', class: {
+        return (index.h(index.Host, { key: '3e9b5ea81b3109e29cfdf60524390f8ca286ad00', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -337,9 +337,9 @@ const NumericField = class {
                 'udp-input--readonly': this.readonly,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, index.h("div", { key: 'ddff5987dc0052ed5b8f3c25d4a00284b36e64da', class: "bx--form-item" }, index.h("unity-typography", { key: '56240493ad644970a3e475b121ccee83f9a4dd48', variant: "caption-text" }, index.h("label", { key: '81b8870f85f76275347d374732d051a5dcb508bc', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (index.h("input", { id: this.id, type: "hidden", value: this.internalValue, name: this.name })) : (index.h("input", { id: this.id, name: this.name, type: "number", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readOnly: this.readonly, onFocus: this.onFocus, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, inputMode: this.inputMode, min: this.min, max: this.max, step: this.step,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, index.h("div", { key: 'e05437a3597cac6a29a43beff62d563e4ece08aa', class: "bx--form-item" }, index.h("unity-typography", { key: 'ec02fa02e8c70a312e82a9a1c4fd6e63d704b7d0', variant: "caption-text" }, index.h("label", { key: 'ef2052d0a2b70ec298ee678a5ed749c3df6c95f0', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (index.h("input", { id: this.id, type: "hidden", value: this.internalValue, name: this.name })) : (index.h("input", { id: this.id, name: this.name, type: "number", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readOnly: this.readonly, onFocus: this.onFocus, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, inputMode: this.inputMode, min: this.min, max: this.max, step: this.step,
             //@ts-ignore
-            udprecordid: 'udpRecord-number-field-' + this.id })), isError && (index.h("div", { key: '80ca77405204d04cd00f0a0aeb99d9abdcc17db3', class: "error-message" }, index.h("unity-typography", { key: 'c60ad77740540eede56efaf62c525376eb2f3f80', variant: "caption-text", color: "error" }, this.errorMessage))))));
+            udprecordid: 'udpRecord-number-field-' + this.id })), isError && (index.h("div", { key: '7f8ce21f63a98cd3315aa0b883ee26dd21b3296e', class: "error-message" }, index.h("unity-typography", { key: 'a786e49cab606bdc4f59f84fd2d08eef65cc7f41', variant: "caption-text", color: "error" }, this.errorMessage))))));
     }
     static get watchers() { return {
         "error": [{
@@ -564,7 +564,7 @@ const TextArea = class {
     }
     render() {
         const { disabled, id, internalValue, label, placeholder, required, readonly, errorMessage, fullWidth, internalRows } = this;
-        return (index.h(index.Host, { key: '4b4970217807518c32ef805ba34a98bfa1e5feb4', class: {
+        return (index.h(index.Host, { key: 'debca7bf03ad9b343d85e5c190ff24f71156aba1', class: {
                 'udp-input': true,
                 'udp-input--error': !!errorMessage,
                 'udp-input--disabled': disabled,
@@ -573,11 +573,11 @@ const TextArea = class {
                 'udp-input--required': required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, index.h("div", { key: '4729bc67f42bf170f976cd60a775311e33fef7c2', class: "bx--form-item" }, index.h("unity-typography", { key: 'c5b5751f9d0d3b9419e6717b0018bd7c372ad384', variant: "caption-text" }, index.h("label", { key: '983150c302521472ce6ee4041f76fe20ac6ebb71', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), index.h("textarea", { key: '04d6a1fa8f3b7e61723acc6f677558350cb51640', ref: el => (this.textareaEl = el), id: id, class: {
+            } }, index.h("div", { key: '7577e691ce62360467eb3c5bd3f13dc119429f77', class: "bx--form-item" }, index.h("unity-typography", { key: 'cc3386474164315754d577a733ddc239100f6c65', variant: "caption-text" }, index.h("label", { key: 'f185f5dee17462fbbebcb04ef9f761c4cc7020a5', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), index.h("textarea", { key: 'd4a6ff34ecbbe189fe39b89c5adc91b10f1b5f65', ref: el => (this.textareaEl = el), id: id, class: {
                 'bx--text-input': true,
                 'bx--text-input--error': !!errorMessage,
                 'text-area--disabled': disabled,
-            }, placeholder: placeholder, value: internalValue, required: required, disabled: disabled, readonly: readonly, maxLength: this.maxCharacter, rows: internalRows, onInput: this.onInput, onChange: this.onChange }, internalValue), errorMessage && (index.h("div", { key: '2957c1189403c0e63ed48e2cf79cdd7a35a555b4', class: "error-message" }, index.h("unity-typography", { key: '4c334bcb6696d4d97450123850d71e66a06d0006', variant: "caption-text", color: "error" }, errorMessage))))));
+            }, placeholder: placeholder, value: internalValue, required: required, disabled: disabled, readonly: readonly, maxLength: this.maxCharacter, rows: internalRows, onInput: this.onInput, onChange: this.onChange }, internalValue), errorMessage && (index.h("div", { key: 'e2aa951a9eb18caad467734c8b4cbfb48959dd47', class: "error-message" }, index.h("unity-typography", { key: '3f65965fb302d0fccd0e06c854cb1e3008b69647', variant: "caption-text", color: "error" }, errorMessage))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -718,7 +718,7 @@ const UdpDateSelector = class {
             classNames.push('bx--text-input--full-width');
         }
         const inputClass = classNames.join(' ');
-        return (index.h(index.Host, { key: 'ed29cc11854d909570dfecb6d700043b6d191eac', class: {
+        return (index.h(index.Host, { key: '7ef43e90ed0441e4e5d3c6ab212e60c0ca3b9123', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -727,9 +727,9 @@ const UdpDateSelector = class {
                 'udp-input--required': this.required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, index.h("div", { key: '9c5e5af253a1e0c8a0aee2bda7d803eb0dea85cf', class: "bx--form-item" }, index.h("unity-typography", { key: '9efbc3ac8ace5731ccd033b4c759016a27e75c6e', variant: "caption-text" }, index.h("label", { key: 'a19e2ef8ca93f50076b236d9aa6fa6c21b795a5a', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), index.h("input", { key: 'afeadccd9ebd8f71b3620999c16320bb77ff2384', type: "date", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onChange: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, index.h("div", { key: '8e6a816712482facda6e374800bc8053affec184', class: "bx--form-item" }, index.h("unity-typography", { key: '6cef78917076c59d838ceaff783355f1d0796ed1', variant: "caption-text" }, index.h("label", { key: 'bbcc529061eafd72cc21e2cb7c8de3eb9f92dd3a', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), index.h("input", { key: '75979b477fb28cdcef1d11c8dae55e6efb231237', type: "date", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onChange: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
             //@ts-ignore
-            udprecordid: 'udpRecord-udp-date-selector-' + this.id }), index.h("unity-typography", { key: 'c5c093ce48f4aa5f76776c8161f64e54066738ea', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+            udprecordid: 'udpRecord-udp-date-selector-' + this.id }), index.h("unity-typography", { key: '40ec0d6d7ad41f6e6655b8bd2f2a9a5cf0bb592f', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
     }
     static get watchers() { return {
         "error": [{
@@ -898,7 +898,7 @@ const UdpDateTimeSelector = class {
             classNames.push('bx--text-input--full-width');
         }
         const inputClass = classNames.join(' ');
-        return (index.h(index.Host, { key: 'c061e0922d9b1e4eaeb20b033bb11536827be859', class: {
+        return (index.h(index.Host, { key: '6c6090a7505f123fa70c2d501b4c5fe658dcfcc0', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -907,9 +907,9 @@ const UdpDateTimeSelector = class {
                 'udp-input--required': this.required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, index.h("div", { key: 'c2fff1f49b491f6932bd821afad8f0cc72cd106d', class: "bx--form-item" }, index.h("unity-typography", { key: 'd75f48400e6f909df9adb43958000cccd9bb8925', variant: "caption-text" }, index.h("label", { key: '41e0aae7ab3fe50a1ed408c95d3b7bbdebf37757', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), index.h("input", { key: '709a393e4e43a5bb9cfa2b6e0cde9ec5b19d4f7f', type: "datetime-local", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, index.h("div", { key: '7abab9ac4a58ea7c43406e372b5e31b6df89b388', class: "bx--form-item" }, index.h("unity-typography", { key: 'decc42ce7477ceff6b2f55becc7b004e9cf0888a', variant: "caption-text" }, index.h("label", { key: 'd0f3bac5298e5443d6bf27078a25ab5a786063d8', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), index.h("input", { key: 'fc4e3906ef9eb0467fca3544ddccd788d74cdba5', type: "datetime-local", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
             //@ts-ignore
-            udprecordid: 'udpRecord-udp-datetime-selector-' + this.id }), index.h("unity-typography", { key: '9b17c37d9e0a5a4c4aacce6e12696049c1e37f82', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+            udprecordid: 'udpRecord-udp-datetime-selector-' + this.id }), index.h("unity-typography", { key: '010b34214279fa3cf235e2947619d8d0769e5681', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
     }
     static get watchers() { return {
         "error": [{
@@ -1149,7 +1149,7 @@ const UdpTimeSelector = class {
             classNames.push('bx--text-input--full-width');
         }
         const inputClass = classNames.join(' ');
-        return (index.h(index.Host, { key: 'becba7d7a2419dce77636779704d539e9d956599', class: {
+        return (index.h(index.Host, { key: 'd16c35a57460dfc7fd651b56b6bdcde990457946', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -1158,9 +1158,9 @@ const UdpTimeSelector = class {
                 'udp-input--required': this.required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, index.h("div", { key: 'de3f8ea3e555675041dee4ebb960be6141782c84', class: "bx--form-item" }, index.h("unity-typography", { key: '1de34dcbe87eb0d581cb0a168f48a1f57635a391', variant: "caption-text" }, index.h("label", { key: '824d51343e13daea3af8c5bc18788f6ab9eadb6d', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), index.h("input", { key: '7bf6932e0f1e13176cbb4c1dd1f38f9ec51ad211', type: "time", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min, max: this.max, onInput: this.handleTimeInput, onChange: this.handleTimeChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid, disabled: this.disabled, readonly: this.readonly, required: this.required,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, index.h("div", { key: 'fc6149551a9171d5fdd619f203e4ee5a1a4e6035', class: "bx--form-item" }, index.h("unity-typography", { key: '0ff82e4a3221b30079b1dee19e4021652ce9b859', variant: "caption-text" }, index.h("label", { key: 'a401d488ce3c24d6f294fd01d26fa079b8e79ff6', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), index.h("input", { key: '3775d295c87c97d76d9e3f0c74af24a260a63ac7', type: "time", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min, max: this.max, onInput: this.handleTimeInput, onChange: this.handleTimeChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid, disabled: this.disabled, readonly: this.readonly, required: this.required,
             //@ts-ignore
-            udprecordid: 'udpRecord-udp-time-selector-' + this.id }), index.h("unity-typography", { key: '3b4e73c5c52f8306eedf47920547fc8c2a3863b8', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+            udprecordid: 'udpRecord-udp-time-selector-' + this.id }), index.h("unity-typography", { key: '92a44ddf0e6197e9b03b9bce3b492ec6aea2d9ac', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {