udp-stencil-component-library 26.6.0-beta.2 → 26.6.0-beta.22

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: 'de68799067813cb564fb6c20299ba5756e260907' }, !((_a = this.panelConfig) === null || _a === void 0 ? void 0 : _a.hideLayerSelector) && (index.h("udp-fluent-dropdown", { key: '914c3b14a86b568634ea55f64c0c3f920ee8939c', 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: '9a90aecc598a68d4692dbfbcd044b3852a346454', 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: '5a2acd07394cea6d24c9da520811b83282cfa96f', class: "formButton" }, index.h("udp-fluent-button", { key: 'ff6d12855876c04af544ded324b858729e51cbb4', 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: '0ab76423f21557dc9fc0f883d39c7a1ec6d18a0b', class: "toolbarContainer" }, index.h("div", { key: '1600d9c390ba4c3f19a6ad95029beee3da32983f', class: "title" }, this.mapTitle && this.mapTitle.length > 0 && index.h("unity-typography", { key: 'f76e4c8fd806d7cbb87033bbb268739a307a133c', variant: "h4" }, this.mapTitle)), index.h("div", { key: 'c0855996d11e8cae62869a36a6c503ac4beed74e', class: "buttons" }, index.h("div", { key: '4f706360e0c9e645eb54a5c77349690c54ed0a3b', class: "buttonContainer" }, index.h("div", { key: '461a6d635a8ef14f4467d6f4fd526b5614600a51', class: "secondaryButtons" }, this.filterPanel && (index.h("div", { key: '81171e43bd5d22e456d08cc0c2ac1bb1dc46adc6', id: "filterOption" }, index.h("udp-popover", { key: '124f209bf73a9c948e2e23cdf83bc11e26ee4708', open: this.filterOpen, position: 'bottom-start', toggleOnTriggerClick: false, onPopoverClose: () => this.handleCloseFilterPopover() }, index.h("div", { key: '26096015b85796a6191bc03d91c175bf8ca25c05', id: "filterOptionButton", slot: "trigger" }, index.h("udp-tooltip", { key: '3da1fbecaf25fb2367966c0a829621ef947ab4b6', content: "Filter" }, index.h("udp-fluent-icon-button", { key: 'c2d49837a727d0b3502a1ad337eb1a7f28d9bf71', iconName: "filter", ariaLabel: "Filter", onClick: () => this.handleFilterOnclick() }))), this.filterOpen && index.h("div", { key: 'd9368a140f368a1f1fb881113d9b2447aae66a3b', slot: "content", innerHTML: this.filterPanel })))), this.layerOptions && (index.h("div", { key: '47ad15b683a05a324aadfa199668f4cc54b58149', id: "layerOption" }, index.h("udp-popover", { key: '17fbbf6c55e589058e76005283777fed2affc318', open: this.layerOpen, position: 'bottom-start', toggleOnTriggerClick: false, onPopoverClose: () => this.handleCloseLayerPopover() }, index.h("div", { key: '860756562732104108dca2b59816cbed622e6cbc', id: "layerOptionButton", slot: "trigger" }, index.h("udp-tooltip", { key: '553c8ed8d2247cf7aca6c2da4ca965c26fdbdc97', content: "Layers" }, index.h("span", { key: 'b5cfbb33ce76b25607024e4b67c1009ba0d1ebce', class: "layerButtonBadgeWrapper" }, index.h("udp-fluent-icon-button", { key: '694e7545152d3ad20e778eba1c55f763d43a67be', 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: '01ca9f833faf658fe6ec7066767d49a6da8cc148', class: "layerCountBadge", size: "small", appearance: "filled", color: "brand" }, this.visibleLayers.length))))), this.layerOpen && (index.h("div", { key: '2dad8c3a3a6e05901db27f6702f5f369f192d33f', slot: "content", style: { maxHeight: '500px', overflow: 'auto' } }, index.h("select-layer-popup", { key: '4fcb1eb6dee6e969ad73f5ca2d576af8612c866d', 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: '26e12139d4e54ad62c5a99c0a08fa435b318e294', id: "bulkSelectOption" }, index.h("udp-popover", { key: 'daab333308bba833fa8e672c73ad445ba543cce2', open: this.bulkSelectionTypeOpen, position: 'bottom-start', toggleOnTriggerClick: false, onPopoverClose: () => this.handleCloseBulkSelectionTypePopover() }, index.h("div", { key: 'e223bca1912f7d731d27937e9b8e3b23de85b1cd', id: "bulkSelectOptionButton", slot: "trigger" }, index.h("udp-tooltip", { key: 'fdc5e8354438cc0d37d05c39b2b681c8739d0a32', content: "Select" }, index.h("udp-fluent-icon-button", { key: '02ec3223887cdcc9443bb16d286b92173e0dcff2', iconName: "lasso", ariaLabel: "Select", onClick: () => this.handleSelectionBtnOnclick() }))), this.bulkSelectionTypeOpen && (index.h("div", { key: '49c2036d30a76c1b011dca54300781eae782bc2d', slot: "content" }, index.h("udp-menu-item", { key: '74eb3f27083e822f58fd04ad765fa94ea2528bf1', label: 'Box', onItemClick: () => this.handleBulkSelectionTypeOnclick('box') }), index.h("udp-menu-item", { key: '594020bc27d0bc6f24d93ec10c99c23c5760f28b', label: 'Circle', onItemClick: () => this.handleBulkSelectionTypeOnclick('circle') }), index.h("udp-menu-item", { key: 'dc100972340d19c7ccdf6188151ade11aa6200d3', label: 'Polygon', onItemClick: () => this.handleBulkSelectionTypeOnclick('polygon') }), index.h("udp-menu-item", { key: 'fd7540d844c3756cfbf2a01fa86efe76fcc24b1c', label: 'Lasso', onItemClick: () => this.handleBulkSelectionTypeOnclick('lasso') })))))), !this.readOnlyMap && this.enableSplit && (index.h("div", { key: '577af1bf894524229d5a6dcf12e344b05c4079dc', id: "splitOption" }, index.h("udp-popover", { key: '5f69091b0fe5e726f7e78d95e91ecd29fcd37642', open: this.splitOpen, position: 'bottom-start', toggleOnTriggerClick: false, onPopoverClose: () => this.handleCloseSplitPopover() }, index.h("div", { key: '0e4410aff4c5ae8aefbe9846d3c2d6e71808a23f', id: "splitOptionButton", slot: "trigger" }, index.h("udp-tooltip", { key: 'd2f93edb64d66a7218f5f89d05799aa33db5b5c1', content: "Split Linear Feature" }, index.h("udp-fluent-icon-button", { key: 'b48a275f4ff62ba7ba1a48513bb45cc9083647ba', iconName: "cut", ariaLabel: "Split Linear Feature", onClick: () => this.handleSplitBtnOnclick() }))), this.splitOpen && (index.h("split-line-popup", { key: 'b31d923ed69666a5610779562b96b242f0cd3db9', slot: "content", vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, handleStartSplitting: this.handleStartSplitting }))))), this.refreshEvent && (index.h("udp-tooltip", { key: '965bded97649cd3b890bfe6e10fee1439de4884b', content: (_b = this.refreshButtonTooltip) !== null && _b !== void 0 ? _b : 'Refresh' }, index.h("udp-fluent-icon-button", { key: '9e66a64e055affa4ec7935b868fbc8946b4a8d01', 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: 'b055ab6bdb78c012f5a8a7277bde7944bfc3173e', class: "labelButtons" }, index.h("udp-fluent-button", { key: '2e6be23ecc854aa31c9d34d2ca0c024753952ee3', 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: '97742a6deb8e76763873fd3e11281d2911f18d2e', class: "labelButtons" }, index.h("udp-fluent-button", { key: '8f707fc4b2f95c1baba1b557b291706a43afc428', startIconName: "checkmark", appearance: "transparent", shape: "rounded", size: "small", onClick: () => this.handleSaveSplit() }, "Save Split"))), this.showSplitButton && (index.h("div", { key: '72be254ec457e76cc56888fbc7a85b643a26a336', class: "labelButtons" }, index.h("udp-fluent-button", { key: '98fe0804c6e1d3cedf3ceacf7c1d1b60eac65993', startIconName: "dismiss", appearance: "transparent", shape: "rounded", size: "small", onClick: () => this.handleCancelSplit() }, "Cancel Split"))), !this.readOnlyMap && this.enableAddNewFeature && (index.h("div", { key: '4181d549c1deb7c0f1e29f31d4b2ba92cb6b2d74', class: "labelButtons" }, index.h("udp-fluent-button", { key: '67a5052d7d7d25e249d067cb77a4e6fd60216ce0', startIconName: "dismiss", appearance: "transparent", shape: "rounded", size: "small", onClick: () => this.handleCancelAddNewFeature() }, "Cancel Drawing"))), !this.readOnlyMap && this.withSelected && (index.h("div", { key: 'ecaf61e0ca284b2dc9db17cb15364adf4f331acd', class: "selectedFeaturesButtons labelButtons" }, index.h("div", { key: '332252fe2341f6622c428806500f97f2d862f110', id: "withSelectedOption" }, index.h("udp-popover", { key: 'f9099d2736bc62f995201520b768128a51f662ed', open: this.selectionActionOpen, position: 'bottom-start', toggleOnTriggerClick: false, onPopoverClose: () => this.handleCloseSelectionActionPopover() }, index.h("div", { key: '0907c6a36b2056d542ea8df9732aef781848eec9', id: "withSelectedOptionButton", slot: "trigger" }, index.h("span", { key: 'aebef7a0a0985ebf0ad01b9cd72bdc2244fd2d30', class: "withSelectedButtonBadgeWrapper" }, index.h("udp-fluent-button", { key: '7b35717cd901b46ad178b083ef6eceeda4c78149', startIconName: "more", appearance: "transparent", shape: "rounded", size: "small", onClick: () => this.handleSelectionActionOnclick() }, "With Selected"), this.selectedFeatureByBoxSelection.length > 0 && (index.h("udp-fluent-badge", { key: '9ccd89e572fb51033515ad8c2f78857ca9b877d2', class: "withSelectedCountBadge", size: "small", appearance: "filled", color: "brand" }, this.selectedFeatureByBoxSelection.length)))), this.selectedFeaturesActionPanel && this.selectionActionOpen && (index.h("div", { key: '8d821442adf3bedca3e242b80aac3a966f1fb3af', slot: "content", innerHTML: this.selectedFeaturesActionPanel })))), index.h("udp-fluent-button", { key: '41840ff82bfa4d6c40dcb9e2c8c8f81c50a38c00', startIconName: "dismiss", appearance: "transparent", shape: "rounded", size: "small", onClick: () => this.unselectFeatures() }, "Cancel Selection")))), index.h("div", { key: 'f58151fedad25a6aff641421dbc1444ff4eb7e18', id: "addOption" }, this.enableAdd && !this.readOnlyMap && (index.h("udp-popover", { key: '222f00d5d2b34967d19df7ff09773d2d89e3fc24', open: this.addFeatureOpen, position: 'bottom-start', toggleOnTriggerClick: false, onPopoverClose: () => this.handleCloseAddMapFeature() }, index.h("div", { key: '8ce7f163d6c40ec8871df48680262bfa5197ee1d', id: "addOptionButton", slot: "trigger" }, index.h("udp-fluent-button", { key: 'e2c86a21dfc9e5a8c6c6a3eef4e39a9615d60ee7', startIconName: "add", appearance: "primary", size: "large", onClick: () => this.handleAddOnclick() }, "Add")), this.addFeatureOpen && (index.h("add-map-feature-popup", { key: '1367785ab7e8640119f3b89b622660eb53f7b999', 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: 'baa60819b7e88df9fb7cc2edfd0050a81617ef87' }, this.enableTileSelection && (index.h("udp-fluent-dropdown", { key: '3a67b20c4ce7928907809f1f3644d69118ca4ca9', 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: '6436b4603f81e59ede6b3696153ed85a94daf4c9' }, index.h("udp-search-input", { key: 'f8ce6f667120f8250f01a07930f1b5f01d5154eb', 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: '163f4390f8f4ba35c1ca14febb34f7976df9c129' }, index.h("udp-fluent-dropdown", { key: 'd57e4d7009c5ccf360bea4bb99b1bb8670219e74', 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/advanced-search_12.cjs.entry.js

@@ -742,7 +742,7 @@ const SideSheet = class {
     render() {
         const widthClass = typeof this.widthOption === 'number' ? 'custom-width' : this.widthOption;
         const sideSheetStyle = typeof this.widthOption === 'number' ? { width: `${this.widthOption}px` } : {};
-        return (index.h("div", { key: '3d07905f3067e0fc830659393def141b5685b122' }, index.h("div", { key: '17b6fc7b039df0b82d6b73ff70ad2e6107bfcfc0', class: { 'backdrop': true, 'open': this.open }, onClick: this.toggleDrawer }), index.h("div", { key: 'f10c7a65b37cb6546725dd85eee15d14e4de7e1f', class: { 'side-sheet': true, 'open': this.open, 'close': !this.open, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, index.h("div", { key: '218c9a3daef08ce255dfcd6f67b3236d0927946e', class: "title" }, index.h("div", { key: '503b2be3c44c9349d85ec96ce1e78b4701c9d886', class: 'close-button' }, index.h("stencil-icon-button", { key: '09636768e15d16c3834bf1869e9c978c480b5131', icon: Close24__default.default, onClick: this.toggleDrawer })), index.h("div", { key: '134b25f17a242d00b9e6d2fcb746203f041339e0', class: 'title' }, index.h("unity-typography", { key: 'e40ad4b0ea886e4cbe964833d110869fa42b99f6', variant: "data-display-four" }, this.title)), this.sideSheetButtonLabel && index.h("custom-button", { key: '4c8048fc87716bfa6f61160c47856740b9f8de11', style: { transform: this.buttonTransform, }, size: 'tall', disabled: this.disabled, onCustomClick: () => this.handleSideSheetButton() }, this.sideSheetButtonLabel)), index.h("side-sheet-container", { key: '0f25133123820fcdf63df90b943d092f4a804434', padding: this.padding }, index.h("slot", { key: '7b14bcc143ee26139de37d07d46f37cfd6bf2027' })))));
+        return (index.h("div", { key: 'e7f39585fa1c69d603cd800f9dcd889420d149ba' }, index.h("div", { key: 'ba1ff3380e9b6d304f7413696ec464b146e9b484', class: { 'backdrop': true, 'open': this.open }, onClick: this.toggleDrawer }), index.h("div", { key: 'b727e385f525ecad5a25c7241512cbb128725c1f', class: { 'side-sheet': true, 'open': this.open, 'close': !this.open, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, index.h("div", { key: 'bfb02962e063aeaab9b8ec955210bc80828edcd4', class: "title" }, index.h("div", { key: 'dd01ddbf9fe1fdddffaca5ad45dd83bbb8b9c7a3', class: 'close-button' }, index.h("stencil-icon-button", { key: '00bbc4ae26feaa4802a71d5509eff4b90ca00031', icon: Close24__default.default, onClick: this.toggleDrawer })), index.h("div", { key: '05ec04667663cefc50129d043b32d759c95a6c34', class: 'title' }, index.h("unity-typography", { key: 'ba77e5d3222c8e52b54d5ff4e55300d9cff97adc', variant: "data-display-four" }, this.title)), this.sideSheetButtonLabel && index.h("custom-button", { key: 'f4679ea128e76f4e6b0947c4a1f07716710e5123', style: { transform: this.buttonTransform, }, size: 'tall', disabled: this.disabled, onCustomClick: () => this.handleSideSheetButton() }, this.sideSheetButtonLabel)), index.h("side-sheet-container", { key: 'c3a653934b7f72dff8524d044996a491e4320fa2', padding: this.padding }, index.h("slot", { key: '8f9789b59796e802d581c60040f4d7958399257f' })))));
     }
 };
 SideSheet.style = sideSheetCss();