udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/collection/components/my-component/UI/layout/udp-container-query-grid-item/udp-container-query-grid-item.js

@@ -15,7 +15,7 @@ export class UdpContainerQueryGridItem {
             .join('\n');
     }
     render() {
-        return (h(Host, { key: '89b0f83301e6ab09a4d40d0fc68ed1f6e3db1773' }, h("style", { key: '7f96193bccc51b6c54e35370a9ad58b432ae0b00' }, this.getSpanStyles()), h("slot", { key: 'fedc89514e1fda59e0b6af7a6af4494b13843ad3' })));
+        return (h(Host, { key: '5ebe9a7f8eab224e668d740603cadedd60ee6d6d' }, h("style", { key: 'c37fa88850e4f1b1e7e4775729d4e5634968fdb3' }, this.getSpanStyles()), h("slot", { key: '4cbcef2ea0f2cf829bc0414fb7edcdaf339654b6' })));
     }
     static get is() { return "udp-container-query-grid-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/layout/udp-page/udp-page.js

@@ -16,7 +16,7 @@ export class UdpPage {
             padding: this.padding,
             margin: '0 auto', // Centers the content if max-width is set
         };
-        return (h("div", { key: '1934c4b0c1e8bed5363aba9cf34da78dd6f43e58', style: style }, h("slot", { key: '66374b078e6bab0010d92bb3fb13733457fed5ca' }), " "));
+        return (h("div", { key: '316922f60eb8c674d2554d052fac5ce02a16a569', style: style }, h("slot", { key: '17e83ffd041d734baaa42650e7611f214ab951ee' }), " "));
     }
     static get is() { return "udp-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/layout/udp-split-screen/udp-split-screen.js

@@ -51,7 +51,7 @@ export class UdpSplitScreen {
         }
     }
     render() {
-        return (h("div", { key: '48bb316c887e5dd643a4b33168336865e646dacf', ref: (el) => this.element = el, class: { 'container': true, 'open': this.isOpen } }, h("div", { key: 'ac57bfae5daa646950314ac4452c550fa524599e', class: "panel", style: { width: `${this.panelWidth}%` } }, h("slot", { key: '646d0b71e4d6425b3c69059c7f4f5c7a187251cb', name: "first-panel" })), h("div", { key: '1512cc23d3905f38cb42562609efe573f21564cb', class: "resizer", onMouseDown: (event) => event.preventDefault() }, h("div", { key: '816dbf7eb68dec975675c265f51ef811bcff6ea3', class: "drag-handle" })), h("div", { key: 'fc1cb866cafec9ecb40f1513ba5759e79a319daa', class: "panel", style: { width: `${100 - this.panelWidth}%` } }, h("slot", { key: '3242c07e700392da5ef2b3439b14db9a2a4114eb', name: "second-panel" }, this.panelContent))));
+        return (h("div", { key: 'c6e5fdfbdc2aa2e61446a1021bb4537bc2777894', ref: (el) => this.element = el, class: { 'container': true, 'open': this.isOpen } }, h("div", { key: 'c9bc0e3c0a276a1bee971086d43067813293f76c', class: "panel", style: { width: `${this.panelWidth}%` } }, h("slot", { key: '57e4dc5dacee687af0a5be34e0cd75f12251a2a2', name: "first-panel" })), h("div", { key: '0b6e5b5f5323236b0de818f21a6a885b440d0c84', class: "resizer", onMouseDown: (event) => event.preventDefault() }, h("div", { key: '3cfcacc4896b6a98ed7c45cf572e211df42e6ae1', class: "drag-handle" })), h("div", { key: '59e14c16bb916315856611ae31ab7313a6687c6e', class: "panel", style: { width: `${100 - this.panelWidth}%` } }, h("slot", { key: 'ef60ffa349ce94478897a4ee8fd3415e31b361c3', name: "second-panel" }, this.panelContent))));
     }
     static get is() { return "udp-split-screen"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/layout/udp-vertical-spacer.js

@@ -7,7 +7,7 @@ export class UdpVerticalSpacer {
             large: 'spacing-13', // Assuming this corresponds to --spacing-13
         };
         const spacingClass = sizeMap[this.unit] || 'spacing-01';
-        return (h("div", { key: '03a9fa7b390df96ed46b1c6bcc8dc36423a5780c', class: spacingClass }));
+        return (h("div", { key: 'a3cd3a28c2077e145860fee96ec5ec1210b0191d', class: spacingClass }));
     }
     static get is() { return "udp-vertical-spacer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/loaders/udp-grid-loader/udp-grid-loader.js

@@ -7,10 +7,10 @@ export class UdpGridLoader {
     }
     render() {
         // Header bar (fatter, divided into columns)
-        const headerBar = (h("div", { key: 'cb6f8e0c3b9a3c612d28dc4a932a8b57b3e57ff9', class: "grid-row" }, Array.from({ length: this.numColumns }).map(() => (h("udp-skeleton-loading", { width: "100%", height: "55px" })))));
+        const headerBar = (h("div", { key: 'b68a6832d416fb2d28dedffebbd360cbdd03976d', class: "grid-row" }, Array.from({ length: this.numColumns }).map(() => (h("udp-skeleton-loading", { width: "100%", height: "55px" })))));
         // Row bars (each divided into columns)
         const rowBars = Array.from({ length: this.numRows }).map(() => (h("div", { class: "grid-row" }, Array.from({ length: this.numColumns }).map(() => (h("udp-skeleton-loading", { width: "100%", height: "30px" }))))));
-        return (h("div", { key: '996659dd5030f5b88e65de36d3d1a9a020189d32', style: { width: this.width } }, headerBar, rowBars));
+        return (h("div", { key: '8143b998cf4703b674e1d913f9e2ea503b5f7d38', style: { width: this.width } }, headerBar, rowBars));
     }
     static get is() { return "udp-grid-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/loaders/udp-linear-loader/udp-linear-loader.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import "./udp-linear-loader.css";
 export class UdpLinearLoader {
     render() {
-        return (h(Host, { key: 'efde1ca8ae1260d2ed4952180e96d6f2d79888c7' }, h("div", { key: 'f0102481306d16411a845301b58aaa3bbe05510a', class: "loader" }, h("div", { key: '9587d61b151493fb5f531c6edd2103706604e34b', class: "indeterminate" }))));
+        return (h(Host, { key: '13379274e0bae0b9b2cada21fe3d4fd77d40014b' }, h("div", { key: '5fe178d0c052d9ca24c05fd38a12f93f99b6f159', class: "loader" }, h("div", { key: '7ca16b2a3be22007005b13bb7e53d5ebb0701d20', class: "indeterminate" }))));
     }
     static get is() { return "udp-linear-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/loaders/udp-skeleton-loading.js

@@ -7,7 +7,7 @@ export class UdpSkeletonLoading {
         this.borderRadius = '4px';
     }
     render() {
-        return (h("div", { key: '8527fcf0f7de753f16ded8d183e4bc8e7b74d81b', class: "skeleton-loader", style: { width: this.width, height: this.height, borderRadius: this.borderRadius } }));
+        return (h("div", { key: '4b9d1b3e81b933e8cde43a9f40e23c205f124e84', class: "skeleton-loader", style: { width: this.width, height: this.height, borderRadius: this.borderRadius } }));
     }
     static get is() { return "udp-skeleton-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/map/udp-map/map-component.js

@@ -365,7 +365,7 @@ export class MapComponent {
     }
     //////////////////////////////////////////////////////////RENDER/////////////////////////////////////////////////////
     render() {
-        return (h("div", { key: '238a435b8669f3faf293707490acd0a1e49d156a' }, h("div", { key: '4b502e433c24133abf9cad73324801048cfa7cba', id: "map", style: { height: this.mapHeight, width: '100%', overflow: 'hidden' } }, h("slot", { key: 'eb405c79cb5182d04b5fe52d61ff6f75cd235614' })), h("div", { key: 'c94c5d9845d738d168141cc1716671e21793993f', id: "featureDetailsPopOverContainer" }, h("feature-details-popup", { key: '1d5bf0a60d6b7d71930309acefb9786f0fef4d11', currentSelectedFeature: this.currentSelectedFeature, data: this.selectedFeatureProperties, coordinates: this.selectedFeatureCoordinates, enableViewFeature: this.enableViewFeature, handleViewFeature: this.handleViewFeature, popOverAnchorElement: this.anchorElement, showPopOver: this.showPopOver, isReadOnly: this.isReadOnlyFeature, additionalOnclosePopover: this.handleOnCloseFeaturePopover, primaryActions: this.popoverPrimaryActions, moreIconActions: this.popoverMoreIconButtonActions, getMessage: this.getMessagePopover, getMessageIcon: this.getMessageIconPopover, hideMessageIcon: this.hideMessageIconPopover, cardConfig: this.popoverCardConfig, popoverWidth: this.popoverWidth }))));
+        return (h("div", { key: 'f9c3f640b52cf725eca3a8559e5693d2bfe7d7f8' }, h("div", { key: 'a876572e979fee53fb39785ee489eccc8bec256b', id: "map", style: { height: this.mapHeight, width: '100%', overflow: 'hidden' } }, h("slot", { key: '712172adbd958d0fccad84c127678cff196287c9' })), h("div", { key: 'b563b28140fff397b226ad0b4a21ad3bf938d802', id: "featureDetailsPopOverContainer" }, h("feature-details-popup", { key: '479aed4b90f4a260d73a8b387f0cdf191f78591b', currentSelectedFeature: this.currentSelectedFeature, data: this.selectedFeatureProperties, coordinates: this.selectedFeatureCoordinates, enableViewFeature: this.enableViewFeature, handleViewFeature: this.handleViewFeature, popOverAnchorElement: this.anchorElement, showPopOver: this.showPopOver, isReadOnly: this.isReadOnlyFeature, additionalOnclosePopover: this.handleOnCloseFeaturePopover, primaryActions: this.popoverPrimaryActions, moreIconActions: this.popoverMoreIconButtonActions, getMessage: this.getMessagePopover, getMessageIcon: this.getMessageIconPopover, hideMessageIcon: this.hideMessageIconPopover, cardConfig: this.popoverCardConfig, popoverWidth: this.popoverWidth }))));
     }
     static get is() { return "map-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/map/udp-map/popups/add-map-feature-popup.js

@@ -70,11 +70,11 @@ export class AddMapFeaturePopUp {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'f6ff5ce82fce4039fd5630e746ef6db5159c0402', class: "popoverContent" }, !((_a = this.panelConfig) === null || _a === void 0 ? void 0 : _a.hideLayerSelector) && (h("div", { key: '962b6e43a72819ee6e2cbeeccf17560293bf265a' }, h("udp-selector", { key: '8e775bc6ab34637d359ea40cb9341ae88157b594', id: 'layer', options: this.layerToAddOptions, initialValue: this.selectedLayer, label: 'Layer', onChange: (e) => {
+        return (h("div", { key: '6247456eafdc8d2cdd21bf2b34baf79f165fc86f', class: "popoverContent" }, !((_a = this.panelConfig) === null || _a === void 0 ? void 0 : _a.hideLayerSelector) && (h("div", { key: '2c9d0d727aa0f2bb102eeea92d893e7abab6c29e' }, h("udp-selector", { key: 'fbae3f45068e8ae3c6165689611d121b9241ed7d', id: 'layer', options: this.layerToAddOptions, initialValue: this.selectedLayer, label: 'Layer', onChange: (e) => {
                 this.handleSetSelectedLayer(e);
-            }, large: false }), h("div", { key: 'fc4e34a9477481234936f254402d52658bde3cc5', style: { height: '12px' } }))), h("udp-selector", { key: '6909962ce277d4fef31b8fa9b2f1c6020a81ffb5', id: 'type', options: (_b = this.drawingTypeOptions) !== null && _b !== void 0 ? _b : [], initialValue: this.selectedType, label: 'Type', onChange: (e) => {
+            }, large: false }), h("div", { key: '8b2a1215ab7ec2f9329a8ecc36fb56bf4e1ed690', style: { height: '12px' } }))), h("udp-selector", { key: '1e1cc8fb219f876b9ae82ada5d718d47f29f5b38', id: 'type', options: (_b = this.drawingTypeOptions) !== null && _b !== void 0 ? _b : [], initialValue: this.selectedType, label: 'Type', onChange: (e) => {
                 this.handleSetSelectedType(e);
-            }, large: false }), h("div", { key: 'bd09d80bab70b71ca714e797fcabfba42abd4f95', style: { height: '12px' } }), h("div", { key: 'd2c4699510d461ff723d1a8f3ebb4e80997cccad', class: "formButton" }, h("custom-button", { key: '4f03a4aebd4815da636e586d81ecdd8d469b13d1', label: 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 }))));
+            }, large: false }), h("div", { key: '3fd93a87dec6f186d02713aeb7a24a6184628496', style: { height: '12px' } }), h("div", { key: 'bfd2027f37a43ea8463ab384737ed60b42c3e16f', class: "formButton" }, h("custom-button", { key: 'eaef537b4baa885c0bc8ca021eea31587803f7b1', label: 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 }))));
     }
     static get is() { return "add-map-feature-popup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/map/udp-map/popups/feature-details-card/feature-details-card.js

@@ -88,16 +88,16 @@ export class FeatureDetailsCard {
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const currentMessageIcon = (_a = this.messageIcon) !== null && _a !== void 0 ? _a : this.getDefaultMessageIcon();
-        return (h("div", { key: '93aedcfdab35c63524119ebf5083d8e62004187d', class: "card-wrapper", style: { width: (_b = this.width) !== null && _b !== void 0 ? _b : '100%' } }, this.showAdornment && this.status && (h("div", { key: 'f3e3824f46d588d67b16e115c96578e7bb9d0b24', class: "adornment" }, h("udp-adornment", { key: '569bee74ed9f06e0a1544844f66f5d86f5643aa0', status: (_c = this.status) !== null && _c !== void 0 ? _c : 'info' }))), h("div", { key: '32723956990e1ebf8899b98fd7330866231a0903', class: "content-wrapper" }, h("div", { key: '90f3cc1fe6932b926a337cd1cfd944f305943ec4', class: "header-wrapper", style: { backgroundColor: this.getHeaderBackgroundColor() } }, h("div", { key: '1409d8a3a41d7881d0b4040d2cc816cc4a765990', class: "title-wrapper" }, h("stencil-icon-button", { key: '5719590baca5ce60bf2265b64b4f5182fbe6e753', onClick: this.onClose, icon: CloseIcon24, tooltip: "Close", noBackground: true }), h("unity-typography", { key: '2c38b4101e8545ff4f4ae77a7cf2b3b080451d5f', variant: 'h6' }, this.title)), ((_d = this.moreIconActions) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", { key: '81d9fa2190770187dbd90eb8d776e16d480babf4' }, h("div", { key: '0b9647731906a6701ab15ceeadc2786c22d4d258', id: "moreHeaderIconButton1" }, h("stencil-icon-button", { key: 'f0b116ffd246a208f379df3ab4e39113d7f7c96b', onClick: this.handleOnClickMoreIcon, icon: OverflowMenuVertical24, tooltip: "More", noBackground: true, buttonId: "moreHeaderIconButton" })), h("udp-pop-over", { key: 'd0da8a9100347027bd1b8dcd696b1abdea9cfda8', anchorElement: this.moreIconAnchor, isOpen: this.showMoreHeaderPopover, popoverWidth: '200', popoverMaxHeight: '50', handleOnClose: this.handleClosePopover, popoverPlacement: 'bottom' }, h("div", { key: 'f7dc8df5107c794797a9c5c31a0d03f76b36c965', class: "menu" }, (_e = this.moreIconActions) === null || _e === void 0 ? void 0 : _e.map(action => (h("udp-menu-item", { label: action === null || action === void 0 ? void 0 : action.name, iconName: action === null || action === void 0 ? void 0 : action.iconName, handleOnClick: () => {
+        return (h("div", { key: 'ab3cae4515b88f98a5e853060bf29032cd3821c3', class: "card-wrapper", style: { width: (_b = this.width) !== null && _b !== void 0 ? _b : '100%' } }, this.showAdornment && this.status && (h("div", { key: '233bb655177b47c3be71de0bbb6a85c6dc8c8522', class: "adornment" }, h("udp-adornment", { key: '2c0e06acf499afca92d6031248b94290cfe24c0a', status: (_c = this.status) !== null && _c !== void 0 ? _c : 'info' }))), h("div", { key: '1a94ab2d7645d3b5bfcde0e2221bba2ff8452903', class: "content-wrapper" }, h("div", { key: 'aafd16f6f1acfed1f5231a27284f99fb942e154d', class: "header-wrapper", style: { backgroundColor: this.getHeaderBackgroundColor() } }, h("div", { key: 'a1c9f468f0743b818a1cbc39b3d02624fd305e41', class: "title-wrapper" }, h("stencil-icon-button", { key: '5a9330fb6600e26cc4de0df72b664af630e058f2', onClick: this.onClose, icon: CloseIcon24, tooltip: "Close", noBackground: true }), h("unity-typography", { key: '27b11552a33cd3ec3f67552b5ea59050993207a7', variant: 'h6' }, this.title)), ((_d = this.moreIconActions) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", { key: '6210fb07d242392fd560fac2ee1361500b5d6415' }, h("div", { key: 'e5e69755fac7918925a328ca5795024cf55ecf16', id: "moreHeaderIconButton1" }, h("stencil-icon-button", { key: 'c44197f9ea3ece6ced82048b48fd99906914b5c1', onClick: this.handleOnClickMoreIcon, icon: OverflowMenuVertical24, tooltip: "More", noBackground: true, buttonId: "moreHeaderIconButton" })), h("udp-pop-over", { key: '21cd04ef4afbcb3c3ec2042b8d2c509b6e29d27d', anchorElement: this.moreIconAnchor, isOpen: this.showMoreHeaderPopover, popoverWidth: '200', popoverMaxHeight: '50', handleOnClose: this.handleClosePopover, popoverPlacement: 'bottom' }, h("div", { key: '000e0e9fcce33962f8f51ada1829dbd5807073e6', class: "menu" }, (_e = this.moreIconActions) === null || _e === void 0 ? void 0 : _e.map(action => (h("udp-menu-item", { label: action === null || action === void 0 ? void 0 : action.name, iconName: action === null || action === void 0 ? void 0 : action.iconName, handleOnClick: () => {
                 action.onClick(this.data);
-            } })))))))), this.message && (h("div", { key: '2b3bc282402005d542314ac356044ba15542035e', class: "message-wrapper", style: { backgroundColor: this.getMessageBackgroundColor() } }, !this.hideMessageIcon && (h("div", { key: 'e136b7208ea210e1658468b0092d05f4c5e8aefb', class: "icon-message" }, h("udp-icon", { key: '70b9e2962193742260c12954c108977e54cd16d8', iconName: currentMessageIcon }))), h("div", { key: 'b141a3f78c3948aa8e3f8cb33e36e000dbe2d24b', class: "message" }, h("unity-typography", { key: '5edaa172a367eed0307a023d70140a42caa3282b' }, this.message)))), h("div", { key: 'a43d9a6a99a433181e15bcbd1aeee06442710172', class: "data-section" }, (_f = this.listData) === null || _f === void 0 ? void 0 : _f.map(({ subject, value }) => (h("div", { class: "data-row" }, h("div", { class: "key" }, h("unity-typography", { variant: 'data-display-three' }, `${subject}: `)), h("div", { class: "value" }, h("unity-typography", { variant: 'data-display-three' }, value)))))), h("div", { key: '58dee8b89fd27d8fcbcc10a2d834bedac983bd73', class: "options" }, this.enableViewFeature && this.data && (h("div", { key: 'b336fb1f684bc7a0c2faf298bca0c2146a813f38', id: "viewFeatureOption" }, h("stencil-icon-button", { key: 'b9a366a0a02d21281634b62f23b4dcb880f20d87', tooltip: 'View', icon: getIconFromName('view'), buttonId: 'viewFeatureButton', onClick: () => this.handleViewFeature({
+            } })))))))), this.message && (h("div", { key: 'd76cfbd478adfc6936e946efc78899512081706a', class: "message-wrapper", style: { backgroundColor: this.getMessageBackgroundColor() } }, !this.hideMessageIcon && (h("div", { key: 'fb201c62d5d2c522b3d9f2728967bd802650cf47', class: "icon-message" }, h("udp-icon", { key: 'bcbed77cc7f6f11bee1ff2c9f03c78ad50122699', iconName: currentMessageIcon }))), h("div", { key: '46d5885a727ca6c8c245840582cb7d29d0c0f3cf', class: "message" }, h("unity-typography", { key: '7fd9be613557e57a1e6afceba7f1998d32e52a63' }, this.message)))), h("div", { key: 'c0a22edd31202bc3c8e13e236056c4e1cbd2e4cf', class: "data-section" }, (_f = this.listData) === null || _f === void 0 ? void 0 : _f.map(({ subject, value }) => (h("div", { class: "data-row" }, h("div", { class: "key" }, h("unity-typography", { variant: 'data-display-three' }, `${subject}: `)), h("div", { class: "value" }, h("unity-typography", { variant: 'data-display-three' }, value)))))), h("div", { key: '7d2418695b75774fc3b3cf9d13619718ead6d553', class: "options" }, this.enableViewFeature && this.data && (h("div", { key: '6f8b90c1018219fd5bc0d37c834e3af08d607734', id: "viewFeatureOption" }, h("stencil-icon-button", { key: '05c9d502fa818402ac238b16ae447871a006400e', tooltip: 'View', icon: getIconFromName('view'), buttonId: 'viewFeatureButton', onClick: () => this.handleViewFeature({
                 selectedFeature: this.data,
                 formattedSelectedFeature: this.listData,
-            }) }))), ((_g = this.primaryActions) === null || _g === void 0 ? void 0 : _g.length) > 0 && (h("div", { key: '748378e9d6e8df9521c8793bfb4e38eceae17e8a' }, h("div", { key: '156ba965afbc47d9b1c5cde023ee276658efba8b', class: "options" }, (_h = this.visiblePrimaryActions) === null || _h === void 0 ? void 0 :
+            }) }))), ((_g = this.primaryActions) === null || _g === void 0 ? void 0 : _g.length) > 0 && (h("div", { key: '083fa67d179679bcb4b98e2da72595c0bbd0d250' }, h("div", { key: 'd1a8a86b795729faa0a916e6d86d5076bb75bfeb', class: "options" }, (_h = this.visiblePrimaryActions) === null || _h === void 0 ? void 0 :
             _h.map((action, index) => {
                 var _a;
                 return (h("stencil-icon-button", { tooltip: action === null || action === void 0 ? void 0 : action.name, icon: getIconFromName(action === null || action === void 0 ? void 0 : action.iconName), buttonId: (_a = action === null || action === void 0 ? void 0 : action.id) !== null && _a !== void 0 ? _a : `primary-icon-action-${index}`, onClick: () => action.onClick(this.data) }));
-            }), ((_j = this.overflowPrimaryActions) === null || _j === void 0 ? void 0 : _j.length) > 0 && (h("stencil-icon-button", { key: '43a695b3208080e95bf99c028e132a6ab45fdd60', onClick: this.handleOnClickPrimaryAction, icon: OverflowMenuVertical24, tooltip: "More", noBackground: true, buttonId: "morePrimaryIconButton" }))), h("udp-pop-over", { key: '0cd2de3a22e153ef82c1dafd86eef460df267c77', anchorElement: this.primaryActionAnchor, isOpen: this.showPrimaryPopover, popoverWidth: '200', popoverMaxHeight: '50', handleOnClose: this.handleClosePopover, popoverPlacement: 'bottom' }, h("div", { key: 'ef230e448589973a9c7799549e0199b3ca339a5a', class: "menu" }, (_k = this.overflowPrimaryActions) === null || _k === void 0 ? void 0 : _k.map(action => (h("udp-menu-item", { label: action === null || action === void 0 ? void 0 : action.name, iconName: action === null || action === void 0 ? void 0 : action.iconName, handleOnClick: () => {
+            }), ((_j = this.overflowPrimaryActions) === null || _j === void 0 ? void 0 : _j.length) > 0 && (h("stencil-icon-button", { key: 'ee909672380846e00770d9707f96eb5df4c84271', onClick: this.handleOnClickPrimaryAction, icon: OverflowMenuVertical24, tooltip: "More", noBackground: true, buttonId: "morePrimaryIconButton" }))), h("udp-pop-over", { key: '9860060be0145c4c9d0c1f15f3fb323af196680f', anchorElement: this.primaryActionAnchor, isOpen: this.showPrimaryPopover, popoverWidth: '200', popoverMaxHeight: '50', handleOnClose: this.handleClosePopover, popoverPlacement: 'bottom' }, h("div", { key: 'aa50274cd5e0c51ef4d9f51ed8ca441d7686a86a', class: "menu" }, (_k = this.overflowPrimaryActions) === null || _k === void 0 ? void 0 : _k.map(action => (h("udp-menu-item", { label: action === null || action === void 0 ? void 0 : action.name, iconName: action === null || action === void 0 ? void 0 : action.iconName, handleOnClick: () => {
                 action.onClick(this.data);
             } })))))))))));
     }

package/dist/collection/components/my-component/UI/map/udp-map/popups/feature-details-popup.js

@@ -40,7 +40,7 @@ export class FeatureDetailsPopUp {
         var _a, _b, _c;
         const message = this.getMessage ? this.getMessage(this.data) : null;
         const messageIcon = this.getMessageIcon ? this.getMessageIcon(this.data) : null;
-        return (h("udp-pop-over", { key: 'd873a396ef7264215a21b3d8c20202d2cad7faef', anchorElement: this.popOverAnchorElement, isOpen: this.showPopOver, popoverWidth: this.popoverWidth, popoverMaxHeight: '500px', handleOnClose: this.additionalOnclosePopover, popoverPlacement: 'bottom', noPadding: true }, h("feature-details-card", { key: '093d9bd93b6b21be5287251e7d8a5d0e358ffb13', data: this.currentSelectedFeature, title: this.cardTitle, listData: this.listData, status: (_c = (_a = this.data) === null || _a === void 0 ? void 0 : _a[(_b = this.cardConfig) === null || _b === void 0 ? void 0 : _b.statusColor]) === null || _c === void 0 ? void 0 : _c.toLowerCase(), enableViewFeature: this.enableViewFeature, handleViewFeature: this.handleViewFeature, primaryActions: this.isReadOnly ? [] : this.primaryActions, moreIconActions: this.isReadOnly ? [] : this.moreIconActions, message: message, messageIcon: messageIcon, hideMessageIcon: this.hideMessageIcon, onClose: this.additionalOnclosePopover, width: this.popoverWidth })));
+        return (h("udp-pop-over", { key: 'f4a52d95a622f2ae689679e7a280f916017143f9', anchorElement: this.popOverAnchorElement, isOpen: this.showPopOver, popoverWidth: this.popoverWidth, popoverMaxHeight: '500px', handleOnClose: this.additionalOnclosePopover, popoverPlacement: 'bottom', noPadding: true }, h("feature-details-card", { key: 'e040425bd340fb2210ed12b4ec1360d0d370f2bd', data: this.currentSelectedFeature, title: this.cardTitle, listData: this.listData, status: (_c = (_a = this.data) === null || _a === void 0 ? void 0 : _a[(_b = this.cardConfig) === null || _b === void 0 ? void 0 : _b.statusColor]) === null || _c === void 0 ? void 0 : _c.toLowerCase(), enableViewFeature: this.enableViewFeature, handleViewFeature: this.handleViewFeature, primaryActions: this.isReadOnly ? [] : this.primaryActions, moreIconActions: this.isReadOnly ? [] : this.moreIconActions, message: message, messageIcon: messageIcon, hideMessageIcon: this.hideMessageIcon, onClose: this.additionalOnclosePopover, width: this.popoverWidth })));
     }
     static get is() { return "feature-details-popup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/map/udp-map/popups/select-layer-popup.js

@@ -8,7 +8,7 @@ export class SelectLayerPopUp {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'f44d282caad5c666e94a296848d476f68f350b06', class: "popoverContent" }, this.enableTileSelection && (h("udp-selector", { key: '398acb46d56efefaf7e90bf57cf4679e00c24e30', id: "mapType", options: (_a = this.tileOptions) !== null && _a !== void 0 ? _a : [], initialValue: this.selectedTile.value, label: "Map Type", onChange: (e) => { this.handleMapTypeInputChange(e); }, large: false })), h("div", { key: '575148ace44a9aba270a3cd8ae4c442c47446d08', style: { height: '12px' } }), h("div", { key: '14bc3046978e8906bb22db412ef7e5c6fad94ab9' }, h("text-field", { key: '32756ad2ecde9d4c95395417fd87aee1fcc205e7', label: "Search Layers", id: "searchFilter", value: "", onInput: (e) => this.handleSearchLayers(e) })), ((_b = this.filteredOptions) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+        return (h("div", { key: '8d85412f6b99188b7bd3634f51447ca81c96e364', class: "popoverContent" }, this.enableTileSelection && (h("udp-selector", { key: '49bc9f01de9425b3b94897a6a947ec41eb49454f', id: "mapType", options: (_a = this.tileOptions) !== null && _a !== void 0 ? _a : [], initialValue: this.selectedTile.value, label: "Map Type", onChange: (e) => { this.handleMapTypeInputChange(e); }, large: false })), h("div", { key: '544e49072b516adc6cf357b016f9efa157377164', style: { height: '12px' } }), h("div", { key: '19f29c0ce2a4af9339d5aeb0a7557cb0713ac583' }, h("text-field", { key: '3ba68e86abc0e49289d6039a1d05ed0122606fa3', 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) => (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 }))))));
     }
     static get is() { return "select-layer-popup"; }

package/dist/collection/components/my-component/UI/map/udp-map/popups/split-line-popup.js

@@ -6,7 +6,7 @@ export class SplitLinePopup {
     }
     render() {
         var _a;
-        return (h("div", { key: '2f02b75d0bdfeae2840362952345b5948f6ad5e2', class: "popoverContent" }, h("udp-selector", { key: '9b41da41768b4f38287f2700e1f4a42891a650c5', id: "layer", options: (_a = this.vectorLayerOptions.map((layer) => {
+        return (h("div", { key: 'b81c0a9d5583868fc78ca3377ffd0c3958e7d549', class: "popoverContent" }, h("udp-selector", { key: '43f2b19438893e5fd1b881d19e98cc88ac27340f', id: "layer", options: (_a = this.vectorLayerOptions.map((layer) => {
                 return {
                     label: layer,
                     value: layer

package/dist/collection/components/my-component/UI/map/udp-map/toolbar/map-toolbar.js

@@ -164,22 +164,22 @@ export class MapToolbar {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'cb3661c34c4093779f7d006cbeaf018062a54994', class: "toolbarContainer" }, h("div", { key: 'fab01f7d699a215c479ebb5b74dc717ec08b3018', class: "title" }, this.mapTitle && this.mapTitle.length > 0 && h("unity-typography", { key: 'd6bf4bc26a52e6f59ae7e8b03c368d986da94aad', variant: "h4" }, this.mapTitle)), h("div", { key: '92287f354c4c0d882915e6f2ff13cbe065d34f3c', class: "buttons" }, h("div", { key: '2c62c1e72cd38171eccf33d78c8facc9469ad3c0', class: "buttonContainer" }, h("div", { key: '47657600cb83585b41a9e37e1bafc406887e71b0', class: "secondaryButtons" }, this.filterPanel && (h("div", { key: 'c9b333edf9cc1ac1f0c2d76b1218061bbd91347c', id: "filterOption" }, h("div", { key: '991d24d97b03008f177a1b3c1f91de2dd19fda1d', id: "filterOptionButton" }, h("stencil-icon-button", { key: 'c4d9078b3c50f93f9dc66732d0e3e99604d1c6f3', iconName: 'filterButton', iconClassName: 'iconButtonWrapper', tooltip: 'Filter', icon: Filter16, buttonId: 'filterButton', onClick: () => this.handleFilterOnclick() })), this.filterAnchor && (h("div", { key: '4fd493891a6c8fef2a7c892cc155ad0ccb975c8b', id: "filterOptionDiv" }, h("udp-pop-over", { key: 'f15b35d592a94fe7ee0c14ab7ea3b3bd581329c7', isOpen: this.filterAnchor ? true : false, anchorElement: this.filterAnchor, handleOnClose: () => this.handleCloseFilterPopover(), popoverPlacement: 'bottom-start' }, h("div", { key: '94339d0d672e37ddccb24d074bc87910940177f9', innerHTML: this.filterPanel })))))), this.layerOptions && (h("div", { key: '6be1b312bcf144fe1e1a5e96985a783387719a86', id: "layerOption" }, h("div", { key: '9a6c86828ffe3e32c5fe22259749aee8f255d27a', id: "layerOptionButton" }, h("stencil-icon-button", { key: 'a8c4668a1be9c429085d09e9c126e5b75fd87d63', iconName: 'layersButton', iconClassName: 'iconButtonWrapper', tooltip: 'Layers', icon: Layers16, buttonId: 'layersButton', onClick: () => this.handleLayerOnclick(), count: (_a = this.visibleLayers) === null || _a === void 0 ? void 0 : _a.length })), h("div", { key: '0d44c00de66dcb120f170fab4544c61afcd4f959', id: "layerOptionDiv" }, this.layerAnchor && (h("udp-pop-over", { key: '6a232aefb8edd7a0856e086b2bb59d724f80c133', isOpen: this.layerAnchor ? true : false, anchorElement: this.layerAnchor, handleOnClose: () => this.handleCloseLayerPopover(), popoverPlacement: 'bottom-start', popoverMaxHeight: '500px' }, h("select-layer-popup", { key: '552b4bf53412003dcd4714b7fa75abbd5b42dd4d', 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 && (h("div", { key: 'cde340d42d79df5398687a3f5685ab5edac88a72', id: "bulkSelectOption" }, h("div", { key: 'dcded45a9dbe71c53b629998da835914331b25ea', id: "bulkSelectOptionButton" }, h("stencil-icon-button", { key: '03f64862f9b8466066a516406974e647c11cdd6c', iconName: 'selectButton', iconClassName: 'iconButtonWrapper', tooltip: 'Select', icon: Select_0116, buttonId: 'selectButton', onClick: () => this.handleSelectionBtnOnclick() })), h("div", { key: '362574ee975526b17d01a1b66987e9fd25cd1f64', id: "bulkSelectOptionDiv" }, this.bulkSelectionTypeAnchor && (h("udp-pop-over", { key: 'f921f211cec7f6ca3120f68ae7d6f91d6c06457b', isOpen: this.bulkSelectionTypeAnchor ? true : false, anchorElement: this.bulkSelectionTypeAnchor, handleOnClose: () => this.handleCloseBulkSelectionTypePopover(), popoverPlacement: 'bottom-start' }, h("udp-menu-item", { key: '6c6d563c9286c758030df30a817cef0a85b4947f', label: 'Box', handleOnClick: () => {
+        return (h("div", { key: '63e5d1cb7f18737a5b47aaa69fa790a82ec252bd', class: "toolbarContainer" }, h("div", { key: 'a8a41fc82fa879f4bb2fd0d3f8946821c3877233', class: "title" }, this.mapTitle && this.mapTitle.length > 0 && h("unity-typography", { key: '611511d191f7925d689dbaa35f15755445e4c481', variant: "h4" }, this.mapTitle)), h("div", { key: 'cd480ea48aaf938152aacc9b93ecb724a2c69c70', class: "buttons" }, h("div", { key: 'a70762390bb1651a70c450d2177b8856ec304eab', class: "buttonContainer" }, h("div", { key: '288d03c64d94edfc6344f9e0121003282d402f39', class: "secondaryButtons" }, this.filterPanel && (h("div", { key: 'baab19506fb5eb82418710ced23dd4fa4a71a5e7', id: "filterOption" }, h("div", { key: 'b01155330204b492ec96cce4dd36b0e2bf6e9fa7', id: "filterOptionButton" }, h("stencil-icon-button", { key: '512087d384860edde5fc01dc367c312ce8577929', iconName: 'filterButton', iconClassName: 'iconButtonWrapper', tooltip: 'Filter', icon: Filter16, buttonId: 'filterButton', onClick: () => this.handleFilterOnclick() })), this.filterAnchor && (h("div", { key: 'dc75dd9d4553280a89340ea09a92d6b13ce9c7b0', id: "filterOptionDiv" }, h("udp-pop-over", { key: 'd9dd6bb0da4ca0327e217c5c822b33a1d3c51391', isOpen: this.filterAnchor ? true : false, anchorElement: this.filterAnchor, handleOnClose: () => this.handleCloseFilterPopover(), popoverPlacement: 'bottom-start' }, h("div", { key: 'f1ca5a008e5bd96d875e36558075df6683af6b8c', innerHTML: this.filterPanel })))))), this.layerOptions && (h("div", { key: '24bcf338172287d1355b0c6677309227a8ab518f', id: "layerOption" }, h("div", { key: 'fa54c07b301197fdf53e4a6c6bd6ace8ad5ed2c8', id: "layerOptionButton" }, h("stencil-icon-button", { key: 'baa3d5a2303818f31dbbc26e3f0c5c5c7baeec58', iconName: 'layersButton', iconClassName: 'iconButtonWrapper', tooltip: 'Layers', icon: Layers16, buttonId: 'layersButton', onClick: () => this.handleLayerOnclick(), count: (_a = this.visibleLayers) === null || _a === void 0 ? void 0 : _a.length })), h("div", { key: '7893d2e0550f2976ff5d4f93577718a0eccae566', id: "layerOptionDiv" }, this.layerAnchor && (h("udp-pop-over", { key: '711aa8fa7437eb01256a85967ab43093dc99fe35', isOpen: this.layerAnchor ? true : false, anchorElement: this.layerAnchor, handleOnClose: () => this.handleCloseLayerPopover(), popoverPlacement: 'bottom-start', popoverMaxHeight: '500px' }, h("select-layer-popup", { key: '8fe4713951aed48303e7c85467043aaacd85dda2', 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 && (h("div", { key: '9610ea8f6d493509fd73a9b417d42072ef01ae3b', id: "bulkSelectOption" }, h("div", { key: '1c4b709732dbbc153c1b49557e14a522ac145c80', id: "bulkSelectOptionButton" }, h("stencil-icon-button", { key: 'f7ae982998e872d6ee62e0c85e40c679c7c0f7ed', iconName: 'selectButton', iconClassName: 'iconButtonWrapper', tooltip: 'Select', icon: Select_0116, buttonId: 'selectButton', onClick: () => this.handleSelectionBtnOnclick() })), h("div", { key: '78f12fa656f968d5b11440756f2dddc3fcb58c9f', id: "bulkSelectOptionDiv" }, this.bulkSelectionTypeAnchor && (h("udp-pop-over", { key: 'd186d719cda6987588ffaf6a8f37b53d93fc0978', isOpen: this.bulkSelectionTypeAnchor ? true : false, anchorElement: this.bulkSelectionTypeAnchor, handleOnClose: () => this.handleCloseBulkSelectionTypePopover(), popoverPlacement: 'bottom-start' }, h("udp-menu-item", { key: 'a4a5034892f0f314fb63012f54ba7f19867942bc', label: 'Box', handleOnClick: () => {
                 this.handleBulkSelectionTypeOnclick('box');
-            } }), h("udp-menu-item", { key: 'e91656c278be77923c1e0e597c77d140112ed601', label: 'Circle', handleOnClick: () => {
+            } }), h("udp-menu-item", { key: 'cc338aaeb64cdd92b2af2b83bf5cc02f7e07977b', label: 'Circle', handleOnClick: () => {
                 this.handleBulkSelectionTypeOnclick('circle');
-            } }), h("udp-menu-item", { key: '7f7c8963113199e4654d6a905ff98deae79ec28b', label: 'Polygon', handleOnClick: () => {
+            } }), h("udp-menu-item", { key: '415dad2a699ecad5bc15d47c65c1188f0c144a00', label: 'Polygon', handleOnClick: () => {
                 this.handleBulkSelectionTypeOnclick('polygon');
-            } }), h("udp-menu-item", { key: 'ac185e7185bb8bdea6571f82e0d46aafcd083d8d', label: 'Lasso', handleOnClick: () => {
+            } }), h("udp-menu-item", { key: 'b0f78211b6660188a6eda3a277500556b144408f', label: 'Lasso', handleOnClick: () => {
                 this.handleBulkSelectionTypeOnclick('lasso');
-            } })))))), !this.readOnlyMap && this.enableSplit && (h("div", { key: 'e88658354379a42d43d4637fbe519fcd56a33414', id: "splitOption" }, h("div", { key: '9431327ef5309cdab8850af74e01f2298e708bdd', id: "splitOptionButton" }, h("stencil-icon-button", { key: '112d434686b2b2883893fd6d602fe63b22f2bc51', iconName: 'splitButton', iconClassName: 'splitButtonWrapper', tooltip: 'Split Linear Feature', icon: Scalpel16, buttonId: 'splitButton', onClick: () => this.handleSplitBtnOnclick() })), h("div", { key: 'e4f9ca664278d951690f47501dfe74bca3394e0d', id: "splitOptionDiv" }, this.splitAnchor && (h("udp-pop-over", { key: '3e8db8b7ca9dca2e38d1e16b0a208ba2f948cfc3', isOpen: this.splitAnchor ? true : false, anchorElement: this.splitAnchor, handleOnClose: () => this.handleCloseSplitPopover(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("split-line-popup", { key: '76a2f7875c4c1b71c79835f16f90fcb14acb05ee', vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, handleStartSplitting: this.handleStartSplitting })))))), this.refreshEvent && (h("stencil-icon-button", { key: '8c7da78de98bf11c902ad1a6f1c4a60ad50d61ae', iconName: 'refreshButton', iconClassName: 'iconButtonWrapper', tooltip: (_b = this.refreshButtonTooltip) !== null && _b !== void 0 ? _b : 'Refresh', icon: Renew16, buttonId: 'refreshButton', onClick: () => this.refreshEvent() })), !this.readOnlyMap && (this.enableDragBox || (this.addMultipleFeatures && this.enableAddNewFeature)) && (h("div", { key: 'c7b44fc819f2b22fa34bebdfd69f961c1b97f8dd', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: 'b0a3b11645aded91a81635a80cf3dfaffd7c8854', showLabel: true, icon: this.getButtonIcon(), onClick: () => {
+            } })))))), !this.readOnlyMap && this.enableSplit && (h("div", { key: '1fa922732a30bcc6a6a6619f3d269cac5014d25a', id: "splitOption" }, h("div", { key: 'abafc16be4b95112f3e49c2f4b3271fbe879a00c', id: "splitOptionButton" }, h("stencil-icon-button", { key: '206a3fe6944998884e2454e55ee93776c1c086ac', iconName: 'splitButton', iconClassName: 'splitButtonWrapper', tooltip: 'Split Linear Feature', icon: Scalpel16, buttonId: 'splitButton', onClick: () => this.handleSplitBtnOnclick() })), h("div", { key: '11b6b95d1d986ea403e649d1894b6dfaf88adda7', id: "splitOptionDiv" }, this.splitAnchor && (h("udp-pop-over", { key: '82afddb19c39dc93c2e17b6b1541b977d671cd35', isOpen: this.splitAnchor ? true : false, anchorElement: this.splitAnchor, handleOnClose: () => this.handleCloseSplitPopover(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("split-line-popup", { key: '0fecbd18cb81e44036b67f24986a4932c0e5adc3', vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, handleStartSplitting: this.handleStartSplitting })))))), this.refreshEvent && (h("stencil-icon-button", { key: '471393a16b8da86e548acc94213c72c317c59988', iconName: 'refreshButton', iconClassName: 'iconButtonWrapper', tooltip: (_b = this.refreshButtonTooltip) !== null && _b !== void 0 ? _b : 'Refresh', icon: Renew16, buttonId: 'refreshButton', onClick: () => this.refreshEvent() })), !this.readOnlyMap && (this.enableDragBox || (this.addMultipleFeatures && this.enableAddNewFeature)) && (h("div", { key: '1d7fda0edc28f80ce91e91f83345d44c084ebeae', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '999834f4bfd813d3ceb929c35b922a69f8f9fbf3', showLabel: true, icon: this.getButtonIcon(), onClick: () => {
                 if (this.enableDragBox) {
                     this.handleCancelBoxSelection();
                 }
                 if (this.enableAddNewFeature) {
                     this.handleAddNewFeature();
                 }
-            }, tooltip: this.getButtonText(), iconClassName: 'save-icon-class' }, h("unity-typography", { key: '495319ff1fcb280b9e999038807d156a50933be5', variant: "button" }, this.getButtonText())))), this.showSplitButton && (h("div", { key: 'bd028ded9900d3e34e2a6c3c3304738a0164f1b5', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: 'eefa8dffb5adab4acc72dbc08e77f040b2b8ca12', showLabel: true, icon: Checkmark16, onClick: () => this.handleSaveSplit(), tooltip: 'Save Split', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '7f7b49336b19ed7cb9688befd7acc402e58dee6a', variant: "button" }, 'Save Split')))), this.showSplitButton && (h("div", { key: '54a555464fc6c2e02053265a0f572517673293a5', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '65f8ebdfd71c6ee308a85515087d67ef74010f1e', showLabel: true, icon: Close16, onClick: () => this.handleCancelSplit(), tooltip: 'Cancel Split', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '49cd8756f1a82e780e4b2d8365b5c28904f28bab', variant: "button" }, 'Cancel Split')))), !this.readOnlyMap && this.enableAddNewFeature && (h("div", { key: '598b90fe3980b39ec59d4f4ae2682c69aa8de5f4', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '378b1e6aa3b90c868f57a594307e3f7cc39af4d2', showLabel: true, icon: Close16, onClick: () => this.handleCancelAddNewFeature(), tooltip: 'Cancel Drawing', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '1ebd3e8b7b6b04153c3121e46f754140b876adb4', variant: "button" }, 'Cancel Drawing')))), !this.readOnlyMap && this.withSelected && (h("div", { key: '578d36fd52e2eea57b9b40e59d430a7b0eb2576f', class: "selectedFeaturesButtons labelButtons" }, h("div", { key: '8f89151b1134f52ae6cafde5df21e2f9edb53afc', id: "withSelectedOption" }, h("div", { key: 'fa3044d790982dda882bb13c56ed0e73f18c94a8', id: "withSelectedOptionButton" }, h("stencil-icon-button-grid-action-header", { key: '23784f3c2ef39e70322f2531923a90daa6602488', showLabel: true, icon: OverflowMenuHorizontal16, onClick: () => this.handleSelectionActionOnclick(), tooltip: 'With Selected', iconClassName: 'save-icon-class', count: this.selectedFeatureByBoxSelection.length }, h("unity-typography", { key: '71f7a1689f12f64081cbcbc992106dcd1f156c38', variant: "button" }, 'With Selected'))), h("div", { key: 'b12201cd228daf3be94c8d8331c53f7b2bf55491', id: "withSelectedOptionDiv" }, this.selectedFeaturesActionPanel && this.selectionActionAnchor && (h("udp-pop-over", { key: '86597960d2f1e0e319f54d3dd77d8a554e5ad0e9', isOpen: this.selectionActionAnchor ? true : false, anchorElement: this.selectionActionAnchor, handleOnClose: () => this.handleCloseSelectionActionPopover(), popoverPlacement: 'bottom-start' }, h("div", { key: '3d81922352aa12a31d8d9745b7fa6e701b9966ca', innerHTML: this.selectedFeaturesActionPanel }))))), h("stencil-icon-button-grid-action-header", { key: '1ac985bec8d9f578eb4d32ee0e72fbeb153604e0', showLabel: true, icon: Close16, onClick: () => this.unselectFeatures(), tooltip: 'Cancel selection', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '84936479305026c5d531595c33d2fbe12759d75b', variant: "button" }, 'Cancel Selection'))))), h("div", { key: 'b6fbe722db0414b4a47312e7d17c79be3cda4050', id: "addOption" }, this.enableAdd && !this.readOnlyMap && (h("div", { key: '928d8e3f5e8797024a7b076fa5c644f854e57cdd', id: "addOptionButton" }, h("custom-button", { key: '2d9637dabc12d0dfe889619fe7d83e19364c2eed', secondary: true, label: h("unity-typography", { variant: "button" }, 'Add'), onClick: () => this.handleAddOnclick(), size: "tall" }, h("udp-icon", { key: 'e8ae84b46c63e772797420adfd5752e94d1567cc', iconName: 'add32', darkIcon: false })))), this.addFeatureAnchor && (h("udp-pop-over", { key: 'b2e67de5518908e087bb5ec915ea724631d0a529', isOpen: this.addFeatureAnchor ? true : false, anchorElement: this.addFeatureAnchor, handleOnClose: () => this.handleCloseAddMapFeature(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("add-map-feature-popup", { key: 'e3e143076342e106afcd29a0508a3c9caaa599be', handleStartDrawingMapFeature: this.handleStartDrawingMapFeature, vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, selectedType: this.selectedTypeToAddFeature, panelConfig: this.addFeaturePanelConfig }))))))));
+            }, tooltip: this.getButtonText(), iconClassName: 'save-icon-class' }, h("unity-typography", { key: '0e41d8c14c9d4eece4b1fbcc407b8c0bd72e556b', variant: "button" }, this.getButtonText())))), this.showSplitButton && (h("div", { key: '1b1b7d98edab068c0215c0ebd549057688707b22', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '57f3fa7b17dd6ec52b32d1fb3295cbaa0cc6b4bb', showLabel: true, icon: Checkmark16, onClick: () => this.handleSaveSplit(), tooltip: 'Save Split', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '9b71c8dfb01f443f9ab9182b1d1720f3c1995a59', variant: "button" }, 'Save Split')))), this.showSplitButton && (h("div", { key: '43d8df6ab062b20746e93be9a1610cb3f28b0706', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '609fc625e58ddaf44dc8b928f379c9bf6daae23d', showLabel: true, icon: Close16, onClick: () => this.handleCancelSplit(), tooltip: 'Cancel Split', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '032929fea4ea88aa7f762dd5fe18a70359eec863', variant: "button" }, 'Cancel Split')))), !this.readOnlyMap && this.enableAddNewFeature && (h("div", { key: '87c0f6bc13fee9473dac179cd7c644bbaf014638', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '48f85630b74d41d884d3e5b30acc26445f705aca', showLabel: true, icon: Close16, onClick: () => this.handleCancelAddNewFeature(), tooltip: 'Cancel Drawing', iconClassName: 'save-icon-class' }, h("unity-typography", { key: 'cb5952934a327268b2aa8de4416ba3543b178adb', variant: "button" }, 'Cancel Drawing')))), !this.readOnlyMap && this.withSelected && (h("div", { key: 'cd7e248942c6e8d1780ed9f3a271f2be1b9e7210', class: "selectedFeaturesButtons labelButtons" }, h("div", { key: 'b67ac423d87d55b3dab25b12d403e2e510f04af8', id: "withSelectedOption" }, h("div", { key: '00c1c477eedc5aaea81eed7d500500454c5f23ef', id: "withSelectedOptionButton" }, h("stencil-icon-button-grid-action-header", { key: '5820a749fb6e543c7910e0cd3656fed0678a9bc1', showLabel: true, icon: OverflowMenuHorizontal16, onClick: () => this.handleSelectionActionOnclick(), tooltip: 'With Selected', iconClassName: 'save-icon-class', count: this.selectedFeatureByBoxSelection.length }, h("unity-typography", { key: 'f327e07bfb489f48f143dbfae0ffebb5f9576e40', variant: "button" }, 'With Selected'))), h("div", { key: '36a130bcca1caee7c485127b9f74355146a825c1', id: "withSelectedOptionDiv" }, this.selectedFeaturesActionPanel && this.selectionActionAnchor && (h("udp-pop-over", { key: '28d20134ff2a727f9752034560850140688ee9a1', isOpen: this.selectionActionAnchor ? true : false, anchorElement: this.selectionActionAnchor, handleOnClose: () => this.handleCloseSelectionActionPopover(), popoverPlacement: 'bottom-start' }, h("div", { key: '19d6849f8ab4460b5345ae65b469aca1db069189', innerHTML: this.selectedFeaturesActionPanel }))))), h("stencil-icon-button-grid-action-header", { key: 'af786f6b09dc773997f4b6a09939f1cef1504d2e', showLabel: true, icon: Close16, onClick: () => this.unselectFeatures(), tooltip: 'Cancel selection', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '629be3619fcb395a839770e37532d38d2412e381', variant: "button" }, 'Cancel Selection'))))), h("div", { key: 'b25d503b96afe55c1aa84d0cc4e389cd10db71fb', id: "addOption" }, this.enableAdd && !this.readOnlyMap && (h("div", { key: '335db1c9464c6c22d9454551ead0f9783525c3db', id: "addOptionButton" }, h("custom-button", { key: '4b27cb8c1bdd4e62f340de48dece96648f176319', secondary: true, label: h("unity-typography", { variant: "button" }, 'Add'), onClick: () => this.handleAddOnclick(), size: "tall" }, h("udp-icon", { key: '130c534ff13a81d3e4994718ff8e18eb19d59713', iconName: 'add32', darkIcon: false })))), this.addFeatureAnchor && (h("udp-pop-over", { key: 'c5d0d63c8a8d5e14683864d5851ca21b8a71fff3', isOpen: this.addFeatureAnchor ? true : false, anchorElement: this.addFeatureAnchor, handleOnClose: () => this.handleCloseAddMapFeature(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("add-map-feature-popup", { key: '168d45721040af9ec759aeda30839bd50bd76247', handleStartDrawingMapFeature: this.handleStartDrawingMapFeature, vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, selectedType: this.selectedTypeToAddFeature, panelConfig: this.addFeaturePanelConfig }))))))));
     }
     static get is() { return "map-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/map/udp-map/udp-map-toolbar.js

@@ -206,7 +206,7 @@ export class UdpMapToolbar {
     }
     //////////////////////////////////////////////////////////RENDER/////////////////////////////////////////////////////
     render() {
-        return (h("map-toolbar", { key: 'ef9c399c5aff7330ece3eaec4ba72971d7666987', map: this.map, mapTitle: this.mapTitle, layerOptions: this.layerOptions, handleSelectLayers: this.handleSelectLayers, visibleLayers: this.selectedLayers, tileOptions: this.tileSelectOptions, handleSelectTile: this.handleSelectTile, selectedTile: this.selectedTile, enableTileSelection: this.enableTileSelection, filterPanel: this.filterPanel, enableDragBox: this.enableDragBox, selectedFeatureByBoxSelection: this.selectedFeatureByBoxSelection, handleUnselectFeatures: this.handleBulkUnselectFeatures, selectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleCancelBoxSelection: this.handleCancelBulkSelectDraw, handleBulkSelectionTypeOnChange: this.bulkSelectDraw, mapProjection: this.mapProjection, refreshEvent: this.handleRefresh, refreshButtonTooltip: this.refreshButtonTooltip, enableAddNewFeature: this.enableAddNewFeature, handleStartDrawingMapFeature: this.startDrawingMapFeature, cancelAddNewFeature: this.cancelAddNewFeature, addNewFeature: this.addNewFeature, enableSplit: this.enableSplitFeature, handleStartSplitting: this.handleStartSplitting, handleCancelSplit: this.handleCancelSplit, handleSaveSplit: this.handleSaveSplit, readOnlyMap: this.readOnlyMap, enableAdd: this.enableAdd, addMultipleFeatures: this.addMultipleFeatures, showSplitButton: this.showSplitButton, readOnlyLayers: this.readOnlyLayers, addFeaturePanelConfig: this.addFeaturePanelConfig }));
+        return (h("map-toolbar", { key: '2e93749fe0f2d2670b3c48e8a584678e110ab0ae', map: this.map, mapTitle: this.mapTitle, layerOptions: this.layerOptions, handleSelectLayers: this.handleSelectLayers, visibleLayers: this.selectedLayers, tileOptions: this.tileSelectOptions, handleSelectTile: this.handleSelectTile, selectedTile: this.selectedTile, enableTileSelection: this.enableTileSelection, filterPanel: this.filterPanel, enableDragBox: this.enableDragBox, selectedFeatureByBoxSelection: this.selectedFeatureByBoxSelection, handleUnselectFeatures: this.handleBulkUnselectFeatures, selectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleCancelBoxSelection: this.handleCancelBulkSelectDraw, handleBulkSelectionTypeOnChange: this.bulkSelectDraw, mapProjection: this.mapProjection, refreshEvent: this.handleRefresh, refreshButtonTooltip: this.refreshButtonTooltip, enableAddNewFeature: this.enableAddNewFeature, handleStartDrawingMapFeature: this.startDrawingMapFeature, cancelAddNewFeature: this.cancelAddNewFeature, addNewFeature: this.addNewFeature, enableSplit: this.enableSplitFeature, handleStartSplitting: this.handleStartSplitting, handleCancelSplit: this.handleCancelSplit, handleSaveSplit: this.handleSaveSplit, readOnlyMap: this.readOnlyMap, enableAdd: this.enableAdd, addMultipleFeatures: this.addMultipleFeatures, showSplitButton: this.showSplitButton, readOnlyLayers: this.readOnlyLayers, addFeaturePanelConfig: this.addFeaturePanelConfig }));
     }
     static get is() { return "udp-map-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/map/udp-map/udp-map.js

@@ -89,11 +89,11 @@ export class UdpMap {
     }
     //////////////////////////////////////////////////////////RENDER/////////////////////////////////////////////////////
     render() {
-        return (h("map-component", { key: 'f10159d8203c6fbab9bf8b35a9fc9b96b67082ad', handleSetMapComponent: this.handleSetMapComponent, data: this.data, isGeoJsonFormat: this.isGeoJsonFormat, geoJsonMappingConfig: this.geoJsonMappingConfig, enableZoom: this.enableZoom, mapZoom: this.mapZoom, mapCenter: this.mapCenter, mapHeight: this.mapHeight, crs: this.crs, mapProjection: this.mapProjection, mapDataProjection: this.mapDataProjection, getFilteredMapData: this.getFilteredMapData, getFeatureStyles: this.getFeatureStyles, getSelectedFeatureStyles: this.getSelectedFeatureStyles, filterPanel: this.filterPanel, filterPanelCallback: this.filterPanelCallback, enableTileSelection: this.enableTileSelection, tileLayersOptions: this.tileLayersOptions, defaultTileOptionName: this.defaultTileOptionName, layerOptions: this.layerOptions, initialSelectedLayers: this.initialSelectedLayers, bulkSelectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: this.handleSetSelectedFeaturesOnBulkSelect, handleSetSelectedFeatureOnSelect: this.handleSetSelectedFeatureOnSelect, filterLayersByRole: this.filterLayersByRole, layerKeys: this.layerKeys, layerKeySeparator: this.layerKeySeparator, user: this.user, layerRoles: this.layerRoles, filteredLayerOptionsByRole: this.filteredLayerOptionsByRole, handleSetFilteredLayerOptionsByRole: this.handleSetFilteredLayerOptionsByRole, readOnlyMap: this.readOnlyMap, enableViewFeature: this.enableViewFeature, handleViewFeature: this.handleViewFeature, bulkSelectionActive: this.bulkSelectionActive, splitActive: this.splitActive, enableDragBox: this.enableDragBox, selectFeatureInteraction: this.selectFeatureInteraction, handleSetSelectedFeatureProperties: this.handleSetSelectedFeatureProperties, selectedFeatureCoordinates: this.selectedFeatureCoordinates, selectedFeatureProperties: this.selectedFeatureProperties, enableAddNewFeature: this.enableAddNewFeature, handleGetZoomExtent: this.handleGetZoomExtent, selectedLayers: this.selectedLayers, handleSetSelectedLayers: val => {
+        return (h("map-component", { key: 'f7bb8bb551b8c4c7a232f089a77a67c429cd7af6', handleSetMapComponent: this.handleSetMapComponent, data: this.data, isGeoJsonFormat: this.isGeoJsonFormat, geoJsonMappingConfig: this.geoJsonMappingConfig, enableZoom: this.enableZoom, mapZoom: this.mapZoom, mapCenter: this.mapCenter, mapHeight: this.mapHeight, crs: this.crs, mapProjection: this.mapProjection, mapDataProjection: this.mapDataProjection, getFilteredMapData: this.getFilteredMapData, getFeatureStyles: this.getFeatureStyles, getSelectedFeatureStyles: this.getSelectedFeatureStyles, filterPanel: this.filterPanel, filterPanelCallback: this.filterPanelCallback, enableTileSelection: this.enableTileSelection, tileLayersOptions: this.tileLayersOptions, defaultTileOptionName: this.defaultTileOptionName, layerOptions: this.layerOptions, initialSelectedLayers: this.initialSelectedLayers, bulkSelectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: this.handleSetSelectedFeaturesOnBulkSelect, handleSetSelectedFeatureOnSelect: this.handleSetSelectedFeatureOnSelect, filterLayersByRole: this.filterLayersByRole, layerKeys: this.layerKeys, layerKeySeparator: this.layerKeySeparator, user: this.user, layerRoles: this.layerRoles, filteredLayerOptionsByRole: this.filteredLayerOptionsByRole, handleSetFilteredLayerOptionsByRole: this.handleSetFilteredLayerOptionsByRole, readOnlyMap: this.readOnlyMap, enableViewFeature: this.enableViewFeature, handleViewFeature: this.handleViewFeature, bulkSelectionActive: this.bulkSelectionActive, splitActive: this.splitActive, enableDragBox: this.enableDragBox, selectFeatureInteraction: this.selectFeatureInteraction, handleSetSelectedFeatureProperties: this.handleSetSelectedFeatureProperties, selectedFeatureCoordinates: this.selectedFeatureCoordinates, selectedFeatureProperties: this.selectedFeatureProperties, enableAddNewFeature: this.enableAddNewFeature, handleGetZoomExtent: this.handleGetZoomExtent, selectedLayers: this.selectedLayers, handleSetSelectedLayers: val => {
                 this.updateSelectedLayers(val);
-            }, readOnlyLayers: this.readOnlyLayers, additionalOnclosePopover: this.additionalOnclosePopover, popoverPrimaryActions: this.popoverPrimaryActions, popoverMoreIconButtonActions: this.popoverMoreIconButtonActions, getMessagePopover: this.getMessagePopover, getMessageIconPopover: this.getMessageIconPopover, hideMessageIconPopover: this.hideMessageIconPopover, popoverCardConfig: this.cardConfig, popoverWidth: this.popoverWidth, handleGetAdditionalFeaturePropertiesOnSelect: this.handleGetAdditionalFeaturePropertiesOnSelect, minZoom: this.minZoom, maxZoom: this.maxZoom }, this.enableToolbar && (h("udp-map-toolbar", { key: 'e8c3d8824183b345d0ced8b76488b0bb089d68e1', map: this.map, mapTitle: this.mapTitle, mapProjection: this.mapProjection, getFeatureStyles: this.getFeatureStyles, getSelectedFeatureStyles: this.getSelectedFeatureStyles, filterPanel: this.filterPanel, enableTileSelection: this.enableTileSelection, tileLayersOptions: this.tileLayersOptions, defaultTileOptionName: this.defaultTileOptionName, layerOptions: this.layerOptions, bulkSelectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: this.handleSetSelectedFeaturesOnBulkSelect, handleRefresh: this.handleRefresh, refreshButtonTooltip: this.refreshButtonTooltip, readOnlyMap: this.readOnlyMap, enableAdd: this.enableAdd, handleAddNewFeatures: this.handleAddNewFeatures, addMultipleFeatures: this.addMultipleFeatures, enableSplitFeature: this.enableSplitFeature, handleSplitFeature: this.handleSplitFeature, handleSetSelectedFeatureProperties: this.handleSetSelectedFeatureProperties, filteredLayerOptionsByRole: this.filteredLayerOptionsByRole, handleSetBulkSelectionActive: this.handleSetBulkSelectionActive, enableDragBox: this.enableDragBox, handleSetEnableDragBox: this.handleSetEnableDragBox, splitActive: this.splitActive, handleSetSplitActive: this.handleSetSplitActive, selectFeatureInteraction: this.selectFeatureInteraction, enableAddNewFeature: this.enableAddNewFeature, handleEnableAddNewFeature: this.handleEnableAddNewFeature, handleSelectLayersCallback: this.handleSelectLayersCallback, selectedLayers: this.selectedLayers, handleSetSelectedLayers: val => {
+            }, readOnlyLayers: this.readOnlyLayers, additionalOnclosePopover: this.additionalOnclosePopover, popoverPrimaryActions: this.popoverPrimaryActions, popoverMoreIconButtonActions: this.popoverMoreIconButtonActions, getMessagePopover: this.getMessagePopover, getMessageIconPopover: this.getMessageIconPopover, hideMessageIconPopover: this.hideMessageIconPopover, popoverCardConfig: this.cardConfig, popoverWidth: this.popoverWidth, handleGetAdditionalFeaturePropertiesOnSelect: this.handleGetAdditionalFeaturePropertiesOnSelect, minZoom: this.minZoom, maxZoom: this.maxZoom }, this.enableToolbar && (h("udp-map-toolbar", { key: '36a494c95ad64c862f4363676854427399a7f699', map: this.map, mapTitle: this.mapTitle, mapProjection: this.mapProjection, getFeatureStyles: this.getFeatureStyles, getSelectedFeatureStyles: this.getSelectedFeatureStyles, filterPanel: this.filterPanel, enableTileSelection: this.enableTileSelection, tileLayersOptions: this.tileLayersOptions, defaultTileOptionName: this.defaultTileOptionName, layerOptions: this.layerOptions, bulkSelectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: this.handleSetSelectedFeaturesOnBulkSelect, handleRefresh: this.handleRefresh, refreshButtonTooltip: this.refreshButtonTooltip, readOnlyMap: this.readOnlyMap, enableAdd: this.enableAdd, handleAddNewFeatures: this.handleAddNewFeatures, addMultipleFeatures: this.addMultipleFeatures, enableSplitFeature: this.enableSplitFeature, handleSplitFeature: this.handleSplitFeature, handleSetSelectedFeatureProperties: this.handleSetSelectedFeatureProperties, filteredLayerOptionsByRole: this.filteredLayerOptionsByRole, handleSetBulkSelectionActive: this.handleSetBulkSelectionActive, enableDragBox: this.enableDragBox, handleSetEnableDragBox: this.handleSetEnableDragBox, splitActive: this.splitActive, handleSetSplitActive: this.handleSetSplitActive, selectFeatureInteraction: this.selectFeatureInteraction, enableAddNewFeature: this.enableAddNewFeature, handleEnableAddNewFeature: this.handleEnableAddNewFeature, handleSelectLayersCallback: this.handleSelectLayersCallback, selectedLayers: this.selectedLayers, handleSetSelectedLayers: val => {
                 this.updateSelectedLayers(val);
-            }, addFeaturePanelConfig: this.addFeaturePanelConfig })), h("slot", { key: 'f42905be40324ef54df5f335d800bf17e7ec01fd' })));
+            }, addFeaturePanelConfig: this.addFeaturePanelConfig })), h("slot", { key: '4ab0a55295f28326c7c841061a46a06a686396b8' })));
     }
     static get is() { return "udp-map"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/menu/menu-item/udp-menu-item.js

@@ -11,9 +11,9 @@ export class UdpMenuItem {
         };
     }
     render() {
-        return (h("div", { key: '16f5cc7cc0915c44d288d064473038d7b455dd89', class: "menu-item-root", onClick: this.handleItemClick, id: "udpRecord-udp-menu-item-ItemClick",
+        return (h("div", { key: 'e4e362bbece58706baa737db969854b0ecf6c634', class: "menu-item-root", onClick: this.handleItemClick, id: "udpRecord-udp-menu-item-ItemClick",
             //@ts-ignore
-            udprecordid: "udpRecord-udp-menu-item-ItemClick", disabled: this.disabled }, this.iconName && h("udp-icon", { key: '8dd19b4ee85acc2bbcde4bb0bccc1c62732b14c6', iconName: this.iconName, class: "menu-icon" }), h("span", { key: '22908bf1f676b1bc999f3c5c32fff11d4c054373', class: "menu-item-label" }, h("unity-typography", { key: '28d973ab4623be734bd518c07b453071648aa86f', variant: 'button' }, " ", this.label, " "))));
+            udprecordid: "udpRecord-udp-menu-item-ItemClick", disabled: this.disabled }, this.iconName && h("udp-icon", { key: 'bc5b2fa841a94238f9c27b6996d5b3892e956169', iconName: this.iconName, class: "menu-icon" }), h("span", { key: 'f205e78d348169ce5cbf805d80602082170b9c3d', class: "menu-item-label" }, h("unity-typography", { key: 'ae426e2abe8c1c3a29da1bcc54d69bfdee2f4924', variant: 'button' }, " ", this.label, " "))));
     }
     static get is() { return "udp-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/stepper/udp-stepper-demo.js

@@ -90,7 +90,7 @@ export class UdpStepperDemo {
         };
     }
     render() {
-        return (h("div", { key: '9ef8e3c29b52950c9107604e9926779a4b1390ff', style: { padding: '2rem' } }, h("unity-typography", { key: '129fca81d58dadf60c642ce71d6998a04ffb5866', variant: "h2" }, "Horizontal Stepper with Labels bottom"), h("udp-stepper", { key: '23fdf08f0cb1008c7dce1951f2c7dcd08aa5d9bb', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "bottom" }), h("unity-typography", { key: '895d3b1b55d32818c357ca32b2b8eb35b7a53faa', variant: "h2" }, "Horizontal Stepper without Labels"), h("udp-stepper", { key: '46620d533b8bb79c2eb80fc2de4a84e34aaa49d4', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "none", labelPosition: "bottom" }), h("unity-typography", { key: 'd4687b9b0bda118186b8d0bf923ce4181c202e4e', variant: "h2" }, "Horizontal Stepper with Labels to Right"), h("udp-stepper", { key: 'ae6eb63003f34e01f6d90b1a19f53c3e3460aa5e', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "right" }), h("unity-typography", { key: '3b164683fed82038c2a235357eeaffe85088e6a6', variant: "h2" }, "Vertical Stepper"), h("udp-stepper", { key: '28bdfa1403f1f38cdc431e0a09e58f70392ee95f', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "vertical", labelDisplay: "all", labelPosition: "right" })));
+        return (h("div", { key: '6516e89f4536b2e7206ccdf67aeb58a6b9cde9e1', style: { padding: '2rem' } }, h("unity-typography", { key: 'd353bbf42fda0c08a0d2cfa3f8af3f95e5b0886a', variant: "h2" }, "Horizontal Stepper with Labels bottom"), h("udp-stepper", { key: 'ea2701e37dcf5ca61aaf604f4af4e6d89e3ff3a0', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "bottom" }), h("unity-typography", { key: '43d04b503652595027202e798d3edbdf25043c72', variant: "h2" }, "Horizontal Stepper without Labels"), h("udp-stepper", { key: '3a2517ebccab447d7ea490f5922165a4eb3d5880', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "none", labelPosition: "bottom" }), h("unity-typography", { key: '4b752459b0a8bc96150477c40f4ce9ea25b8a981', variant: "h2" }, "Horizontal Stepper with Labels to Right"), h("udp-stepper", { key: 'ab70fdd5285e4bc776d9a1ba8475a2d2f1e3a3b6', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "right" }), h("unity-typography", { key: '8d0bd0df9f65c5534e01600d977dcaaf94bf3268', variant: "h2" }, "Vertical Stepper"), h("udp-stepper", { key: '5fb38ef1199564567bbaefa28d20780d1abc5ce3', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "vertical", labelDisplay: "all", labelPosition: "right" })));
     }
     static get is() { return "udp-stepper-demo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.js

@@ -7,7 +7,7 @@ export class UdpTabs {
         this.activeTab = tabIndex;
     }
     render() {
-        return (h("div", { key: 'b5a6bd4965dc70d64c4b2db4e98149a2f4ace501' }, h("div", { key: 'e3d2b07ad062986ac890f2df135cca4dfb30d55f', class: "tab-header" }, h("slot", { key: '3d6593027783984fd51c9b275f73e82a851aaa68', name: "tab-title" })), h("div", { key: 'fd154beeb418bdf7bec23d1cae675ad5d6c5811f' }, h("slot", { key: 'a5aa4515486a49cc401435c641b8a4b129db73a3' }))));
+        return (h("div", { key: '86770acfc5e8153b8172abf884fe4a8981459cdc' }, h("div", { key: '6f691f9e6a836b43be4b0e2294601bcb15554d50', class: "tab-header" }, h("slot", { key: '12995daf381e2925f63dc2ab84b1c28786d39506', name: "tab-title" })), h("div", { key: 'fabc8bf56c1ae90f3bf0bc0fb6e5b0aa4939e6e9' }, h("slot", { key: '20b513fc025fd0fcdf62e9377c4c8055953f20fa' }))));
     }
     static get is() { return "udp-tabs"; }
     static get originalStyleUrls() {

package/dist/collection/components/my-component/UI/tabs/tab/udp-tab.js

@@ -4,7 +4,7 @@ export class UdpTab {
         // Handle the active state change, if needed
     }
     render() {
-        return (h("div", { key: 'b2528a035e612130ed3526253b7269b00e837823', class: { 'tab-panel': true, 'active': this.active } }, h("slot", { key: '75c4ecadd2efa434a7a46d66c0902146b02b0d82' })));
+        return (h("div", { key: '9b8745c48da082b332355c9293b127dd43a817ae', class: { 'tab-panel': true, 'active': this.active } }, h("slot", { key: '251067ae03ca3a2e039f52bc04acd8e8a878ea9f' })));
     }
     static get is() { return "udp-tab"; }
     static get originalStyleUrls() {

package/dist/collection/components/my-component/UI/toolbars/app-bar/app-bar.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import Menu24 from "@carbon/icons/es/menu/24";
 export class AppBar {
     render() {
-        return (h("div", { key: 'c936d0da1f6e76d6321ba9ba3e61ed25c8de1552', class: "header" }, h("stencil-icon-button", { key: '0eb7eaff8ad5f35457ab049a00ea310dae832880', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: 'f92d2e34ff44f677752106989f268a468c6709b7', variant: 'data-display-one' }, " ", h("slot", { key: '3a5c557fcaabe1ce628ca19954f4e008bb7c4e02' }), "   "), h("a", { key: 'eb5f1c78b627737771d5f16cfb7e8827a3b504cc', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: 'c55bd7a5c6b6ef1ae90297854e2836ce64f33f22', class: "header__logo" }), h("div", { key: 'd9653d283d61c28aafb9b0c05938ef195d7a5076', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: 'a7dbe3c6da06f7bb5c33a78c3ea32c87fe8dd4f9', class: "header__global" }, h("udp-avatar", { key: '713e5e3409499ea36a63cbcd46c8216fde02fd73', username: this.username }))));
+        return (h("div", { key: '06b611d0de2e893f8d4b94f5e4d35745f91706ba', class: "header" }, h("stencil-icon-button", { key: '03e88f45a271f9ca4fa15926ad05473709fdd7e0', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: '8fae1d322d36bb3f7403417403728c7d1eb4a913', variant: 'data-display-one' }, " ", h("slot", { key: '54b51022a279a246e012a10e5e430470f6e9614c' }), "   "), h("a", { key: '0979dd3f68ce147259f6309de6a3497787901753', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: '7819e767b7bdbb8e6bd413181d084c2a14547168', class: "header__logo" }), h("div", { key: '05b32da0b1f8fcbd763e438b7b0170b47d33863b', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: 'e6da41c78ee183bcfb3fb471d6b13497991b9081', class: "header__global" }, h("udp-avatar", { key: '5eb201c0e152cef03891747f141b28f226cc9a59', username: this.username }))));
     }
     static get is() { return "app-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/demo/ambient-demo-container.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class AmbientDemoContainer {
     render() {
-        return (h("div", { key: '1ae64499422d23a16bf1119a8d9f06f3502adc7e', class: "container" }, h("div", { key: '1d0feef16ae20855b25c8ac7120c444f5c0d8988', class: "title-container" }, " ", h("unity-typography", { key: '6539e873263b38ffa32caf26fb7eb25e4f8d5f93', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: '7b367238cde374b88c6637908788f23ea4fc8f40' })));
+        return (h("div", { key: '35d81b468e19b8871ec965188504b71ae4922054', class: "container" }, h("div", { key: 'ac57303ecd758ef8b94aa303831ef31cdc7b204f', class: "title-container" }, " ", h("unity-typography", { key: 'c5e7bde5ea06c4f71d2130a9732ff9adf93305c9', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: '9c69947927da837896e20a35a401af20fd14ae4c' })));
     }
     static get is() { return "ambient-demo-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/test-component/inputs-example/inputs-example.js

@@ -91,7 +91,7 @@ export class InputsExample {
         };
     }
     render() {
-        return (h("div", { key: 'c1752ee849c28d15226e52f89e54effc0124096d', class: "inputs-example" }, h("h1", { key: 'f206efe282b4e4be1e72e080c658b5281b62677b' }, "Input Components Examples"), h("section", { key: 'dc2ccaa0c26a7828d645edf914afff039ab614cb', class: "example-section" }, h("h2", { key: 'a964de5f12691c8b8b376bc60ca555eaed0bab73' }, "Controlled Components"), h("p", { key: 'c78e0fbf5bd4af735ea24fc3f1321be657651920' }, "Parent component manages state and passes values to child components."), h("div", { key: '3c727d4852fb20550f7beb3293693f3c3b75f1d6', class: "input-grid" }, h("div", { key: '55813c68ff4a15b36c2c6ec4f5a3a2350ba99894', class: "input-example" }, h("h3", { key: '7fe73653ce6e01047cba3c5e895ceb7360a61c8f' }, "Text Field"), h("text-field", { key: 'b157bb01cd1d40475c93afff82753507dd1c0bf5', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), h("p", { key: '2292267101a88a7edbcc35b4c844c54cfb35670c', class: "value-display" }, "Value: ", this.controlledTextValue)), h("div", { key: 'b826cb6aa6811bae0aa6c58d079dadc41b834512', class: "input-example" }, h("h3", { key: '75bfe5eaddeee9b8925e542b998f2aa04b6d54e3' }, "Numeric Field"), h("numeric-field", { key: '36e0566646ed0fae60c500d3228de73f5ab456d9', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), h("p", { key: '46d9774aa39950df990807c90877d8eb07f89291', class: "value-display" }, "Value: ", this.controlledNumericValue)), h("div", { key: 'c30ab6ae34d3c90eb0d9ecda39f4455e16d560cc', class: "input-example" }, h("h3", { key: '47b490cd16b75baeba29dd91ba9f10f9ab6fdceb' }, "Text Area"), h("text-area", { key: '78a9810cd541b29414158722af7b911a3c55d369', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), h("p", { key: '35531b57b6dd4535df39f252c0d89aaccb83077c', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), h("div", { key: 'b3c0cf99402b280d615eedcfdd1ef0277772126a', class: "input-example" }, h("h3", { key: '294edc98458189a11728c365deaff0630f607ab9' }, "Checkbox"), h("check-box", { key: 'cbe8c1c145e6a81051b864e4714462a67aed9298', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), h("p", { key: '19ffa361b1b479d271fb2f8a90e2b6d341c44ec7', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), h("div", { key: '950be8a45351637658fb1e5c13f2a8b1ad2c3c06', class: "input-example" }, h("h3", { key: '5b3e513f3890dd35d62fa03eda5c0dd4f3e2f0ab' }, "Toggle"), h("stencil-toggle", { key: '16d125f201dc933e6a80345ca61850268e1b0bae', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), h("p", { key: '0a840d6e95d0fd3cacbbadc0f1b0f03082dd0b4c', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), h("div", { key: '4786b440e6c3cd22327ad8894bd2cbc1e2a28d43', class: "input-example" }, h("h3", { key: '43466d4f854f8fd5b8ebc8448aa20c8dc8fcb5b6' }, "Date Selector"), h("udp-date-selector", { key: '84be9acf1c48dff9cbeb19588fe8cf3338b16308', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), h("p", { key: 'ab8531b319529f652fbfeba9d038c157739ab78f', class: "value-display" }, "Date: ", this.controlledDateValue)), h("div", { key: '26a293d9425f560f29973aee493757b3f836cae6', class: "input-example" }, h("h3", { key: 'cee79570db45935defc57c0b59abaccb72d292cd' }, "DateTime Selector"), h("udp-datetime-selector", { key: '7f9efe03d0c622e336742675efb6a029e5a816fb', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), h("p", { key: '24a736902871a9b3687b9194c0e934bf231c314e', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), h("div", { key: '0bef5920951558ee4a1a041930ecb72eea4cb220', class: "input-example" }, h("h3", { key: '8e0e2790bb4e50e5702f0500bf125081aa79d9ba' }, "Time Selector"), h("udp-time-selector", { key: '6b053bdeb1f685f864345e5af0fa8c841dc9db06', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), h("p", { key: 'af9036e1b6c332d1963dfee819d024dc2e11c09c', class: "value-display" }, "Time: ", this.controlledTimeValue)), h("div", { key: '3566f7fac6a857d3117dbf0f799b73f1a67fddda', class: "input-example" }, h("h3", { key: '0f729058ce3067b744a4e557522d45ad850a09e9' }, "UDP Selector"), h("udp-selector", { key: 'bbde5d04caa4a7fdbb0aeccf97f3f2439b0a376a', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), h("p", { key: 'b8b1cd7d4f6959c4b7574e996d597a629f09e0d9', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), h("div", { key: '1dcc15135ed2997d99e867163b8e4bb3482e729f', class: "input-example" }, h("h3", { key: '8c35665c76e439b213391def276e3edb5fe8a4ca' }, "File Upload"), h("file-upload", { key: '13023732062341ac3f849eb9dd80a7ab3c988709', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), h("p", { key: 'a8863fd87d271b8e437169ff858b8727ef20b177', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), h("section", { key: '4df5360723d0adfb5e88e47cf8ad67ebbb3f0cf5', class: "example-section" }, h("h2", { key: 'e2b35a91d8af9470830cd59a9c4860fff9b45ced' }, "Uncontrolled Components"), h("p", { key: 'ee4972c9404597fe6a1d9166693ed58d6177302a' }, "Components manage their own state with initial values."), h("div", { key: '2831fa2114801cb847a5a7be320113c0b0b57e04', class: "input-grid" }, h("div", { key: 'fbeb85dc62183315fb224ac174129a28f0b82918', class: "input-example" }, h("h3", { key: 'aad3807977d2fa303612c4e4c8fa4b3f10e895c9' }, "Text Field"), h("text-field", { key: 'a4758b4b116c8c68481688ea373e2550fe55f72b', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), h("div", { key: '4a9abaeefc01f435954b8484b99c2cccf2a98b92', class: "input-example" }, h("h3", { key: '9316641218224158a182aa0432f32171f0bf8147' }, "Numeric Field"), h("numeric-field", { key: '54c980e988f9864066ff5ab74d0919e9d9a821a1', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), h("div", { key: 'c9bd3bdb4c4fe5bb8706d8550b1753d714ea05c9', class: "input-example" }, h("h3", { key: '7cc6d984f27655cabd977065a295b7b03a209760' }, "Text Area"), h("text-area", { key: 'ab416779159eef26c884b8c7c8108b1a85a27278', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), h("div", { key: '9bd567cecdd5c50a588640bb9192256298af0d85', class: "input-example" }, h("h3", { key: '7dc7065799e49d44cd20409cad45a23cebe35b05' }, "Checkbox"), h("check-box", { key: 'ce576e8595ef205619a26b1b1cf338af6c6dfb1c', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), h("div", { key: '7bd2f4c5c57691c8e02bbd8b1031e1b8bd863b19', class: "input-example" }, h("h3", { key: '27134fa9a4cdc8bf433802b92be292c0236f1f57' }, "Toggle"), h("stencil-toggle", { key: '4bb158343211ec80ba11c054b4d9bea27f4bb871', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), h("div", { key: 'e54426c4dd6f29ea88a67f48543e074f221d722e', class: "input-example" }, h("h3", { key: 'ef430abc90d5937765f564640a3ba8b990a6d899' }, "Date Selector"), h("udp-date-selector", { key: '78e2ad0e5f46ee01aff4c0b48e1004e9119d8244', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), h("div", { key: '05f5e5f00dda67616dc74e65dc32f5919d1b1f07', class: "input-example" }, h("h3", { key: '41eaf71ed50ee3188392a677ca5a3130516bcfa0' }, "Time Selector"), h("udp-time-selector", { key: 'da6aa8cac663d1307a3bff2c18532f2dcc68293f', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), h("div", { key: '1d7dd74a78f454cf360e83d39463f67e14759a02', class: "input-example" }, h("h3", { key: 'faa5e888eb8d1e08ed69e85ca529228119b54412' }, "DateTime Selector"), h("udp-datetime-selector", { key: '880b518fd32e80fcf305dbad31b37835755a76b0', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), h("div", { key: 'b2e4f0549e0b87c0052cf277914cbdc876c66800', class: "input-example" }, h("h3", { key: 'e5d0b009429f4c75dca407d0501179e09aec6ca4' }, "UDP Selector"), h("udp-selector", { key: '2f015c435e8fadbd867a0f640feb9e92625cc91c', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), h("section", { key: '81215b51a88570bedfe8c87b1f0f2b0ac34a270f', class: "example-section" }, h("h2", { key: '72ded636a7a45e1b32592a6a3bf863e170c2cf17' }, "Form-wrapped Components"), h("p", { key: 'b8364004cf77adf4a3988a080cbb11108a746688' }, "Components integrated with stencil-form and stencil-field for validation and state management."), h("stencil-form", { key: '362040b4f61388149bb9485950b23ee2325b857f', handleSubmit: this.handleFormSubmit, handleFormChange: this.handleFormChange, validate: this.validateForm, initialValues: {
+        return (h("div", { key: 'ead041ba85b98211f012e6b4369dccc99d053b10', class: "inputs-example" }, h("h1", { key: '65af5f39246bd6d2da1c64be87e015fda5fb6a7a' }, "Input Components Examples"), h("section", { key: 'ef08e78385539484fc0eac954d47211e14777526', class: "example-section" }, h("h2", { key: 'c360f6153537f9c4992f3a68a437e45a99c98c4c' }, "Controlled Components"), h("p", { key: '825d2a4af1868509344095dd3981c5a29fd246b9' }, "Parent component manages state and passes values to child components."), h("div", { key: '1d1a73fb3c9cf058fb28d7b087c83aae1514e49d', class: "input-grid" }, h("div", { key: '495161751e4de4d6997083e6ee76bff05f32f978', class: "input-example" }, h("h3", { key: '59b79a58b0a1e3c2f47dc9fa34a409c70dbfd0c8' }, "Text Field"), h("text-field", { key: '63436822d767c5cc0c418b45dc2ec3ebba41e757', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), h("p", { key: '5d19c568c62e12b974d264d0cda12f2dd1ebb7dd', class: "value-display" }, "Value: ", this.controlledTextValue)), h("div", { key: '0f8790600f3aeb4a246dbf35ff1c314eceb05109', class: "input-example" }, h("h3", { key: '03efdac63f20384b41908bd69c79fa8767d980f6' }, "Numeric Field"), h("numeric-field", { key: 'c93cde404875a19b6aa7b013332623e1c238807d', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), h("p", { key: '4dd5d5e35b756874e2866fb76f666f7851780a02', class: "value-display" }, "Value: ", this.controlledNumericValue)), h("div", { key: '5d074c8b83e033e99854cb7ee62b3dd7a7380428', class: "input-example" }, h("h3", { key: '62c8d34121c772c21b5b0d2e02b27f66a6b3be9a' }, "Text Area"), h("text-area", { key: '197b2645661c3c2e19ed82e370307a4c10323a63', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), h("p", { key: 'af4fcbbb265092ddca731d11c1ff0da1cdf9a91a', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), h("div", { key: '7bb01a5788a3d5d6821ce4b69de00a32843b3413', class: "input-example" }, h("h3", { key: '9b755776d53ece10f6696d8dae5351f337744e3f' }, "Checkbox"), h("check-box", { key: '857622539c358cd9fec892a892cb2a4432b43063', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), h("p", { key: '4321417816a9abd453dfda86f8a69a9b4954d76f', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), h("div", { key: 'd738bf42aa159aeaf2dc524dfba5ebb68769f272', class: "input-example" }, h("h3", { key: '6c9d2e27873505dd564866bb347bdd5687845098' }, "Toggle"), h("stencil-toggle", { key: '75c5febd9ee0ede9ab1072842ce7139b69b9d34c', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), h("p", { key: 'fdaa02e136ab9f2e573ecff19f59e23313d9af47', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), h("div", { key: '177c0f02a15c42f9678b52f85520f980048ede98', class: "input-example" }, h("h3", { key: 'ee407549f9d74dc62c9fe17ff27ccab0c4fd1a67' }, "Date Selector"), h("udp-date-selector", { key: '61d03580d107a6af1e3f57b169fb084e45ff952f', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), h("p", { key: 'df22efbc5c80ad21a26ba6edefc94afa44b48c85', class: "value-display" }, "Date: ", this.controlledDateValue)), h("div", { key: '04871c7e468e21664459dbe05e5f31bce27a50e3', class: "input-example" }, h("h3", { key: 'b40bf90f9b5ff4f388308394a65ec3261dd96a54' }, "DateTime Selector"), h("udp-datetime-selector", { key: '8fbbeec979c623dd19f4d05e75014353175b6f78', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), h("p", { key: '05f4acb63cb896bd1114ae57fb993b10d15f466d', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), h("div", { key: '15db56d8368350d30a0227677de3fa340d27033d', class: "input-example" }, h("h3", { key: 'a028c9048a4e3753130612c377772c399851a283' }, "Time Selector"), h("udp-time-selector", { key: '83c4404cb6366ac56a58d2518d92fadfdb309129', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), h("p", { key: '2d6828e931a7a060a0c15adb1fe36663c5e81bb1', class: "value-display" }, "Time: ", this.controlledTimeValue)), h("div", { key: '8552d777482b8da3aeaada17e99313821d440a75', class: "input-example" }, h("h3", { key: 'ff54a50e321ac32a53df3d7847694d5353704de5' }, "UDP Selector"), h("udp-selector", { key: '21e773065907d81cbd70d63bc0e2f01982c51c50', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), h("p", { key: '100924186cdbe53a99cab2243e21ed9501e75a64', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), h("div", { key: '55e78a38f3dcc50c82b3ddc881c066e4651340dc', class: "input-example" }, h("h3", { key: '79c08058ee3361bb82b20ce740eeb4dbebda89db' }, "File Upload"), h("file-upload", { key: 'd8eded5ac0596f01d6b1aea185f7b95ca6da8ba4', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), h("p", { key: '0d41949e7a69533971f5443bd2d775124305273b', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), h("section", { key: '146f1684b0757ace25609812cdc8730dabcf15b4', class: "example-section" }, h("h2", { key: 'bf9e5f0a41257174a51b68bed545053aa1a431fc' }, "Uncontrolled Components"), h("p", { key: '062318030eee902383a84ac760ddf42bc248466c' }, "Components manage their own state with initial values."), h("div", { key: 'a1fdbe78c6c361e0e686ce313133c579230befef', class: "input-grid" }, h("div", { key: '8719ee0ac014dcc8c1c1a9c18ad8f6bcca539a00', class: "input-example" }, h("h3", { key: '1742c1d2570f34aa6067ae1c237c30104e847d83' }, "Text Field"), h("text-field", { key: '130f49bdd53c13e1e7a17d451c9d2e5c658a27ef', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), h("div", { key: 'fcf1194e3256b29499d26518e0a50f38c906209e', class: "input-example" }, h("h3", { key: '44a7979e43ff56c504846656699e8040b1034c43' }, "Numeric Field"), h("numeric-field", { key: 'f0e350629909aa6dc68fb604ab30b6a685b21d29', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), h("div", { key: '78803cb57e2be17d7362c737825b1711557e766f', class: "input-example" }, h("h3", { key: '704e0971cc3c36e5e331adad5cc46b7783a97566' }, "Text Area"), h("text-area", { key: '4fb0a56753ee44bbf2dbf8c2544cab06c3e2f059', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), h("div", { key: '039b32e4e293730978effdc73dea7e30d3ac25ae', class: "input-example" }, h("h3", { key: '07c6ed789a22cabac6f01a6bf6b800ba84a565b9' }, "Checkbox"), h("check-box", { key: '9478c892010ca55a8a7ba6d43774ec00539baaef', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), h("div", { key: '758db977d0340bcad0762b013a217bb3c67b3453', class: "input-example" }, h("h3", { key: 'ae94941ca3fbc0c65c6d319a84414e9f9a91ab07' }, "Toggle"), h("stencil-toggle", { key: '9f1f843c2be02f427539edeade6a17cdd441eff2', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), h("div", { key: '2d28be1cbbe0f795bd613f99e563b25c0d79a90d', class: "input-example" }, h("h3", { key: 'e49e236aee6091cf6f5433e92fa8bb5306d04839' }, "Date Selector"), h("udp-date-selector", { key: 'ac2ca5d7327de0d3833cddd5690382c50f7ca1c3', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), h("div", { key: 'aba4ecaa0068112e162c2bc04850d600e5c7767a', class: "input-example" }, h("h3", { key: 'bf163192d2b4027ad2589f671ec957a01d0dbe62' }, "Time Selector"), h("udp-time-selector", { key: 'ecd51155d0e76cb5eb2ede897dd5826eb4d289f5', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), h("div", { key: '6eee8f9d02ef5d481aa9bd430abe1ea59ed6c061', class: "input-example" }, h("h3", { key: 'e15f4fc5522996e4adf89ca3409d509227532473' }, "DateTime Selector"), h("udp-datetime-selector", { key: '8af40a16fe3a6760f47972551fa1a48ff08e445f', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), h("div", { key: '87a954650d4ebf6c477b9385723e3fe64c7f3745', class: "input-example" }, h("h3", { key: 'ff80ee04afabdb29f27b7996b59ffeea98975834' }, "UDP Selector"), h("udp-selector", { key: '6bbf24fb2e3a1079c5cb7824705669bae4db524d', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), h("section", { key: 'b720c35fd8521629276001346204e8a6b6ed213c', class: "example-section" }, h("h2", { key: '95c96c7494af07c3e89ffae8cd85b63b518dd5d1' }, "Form-wrapped Components"), h("p", { key: 'ae001f27cd4679aa5756520d5312d283008f47d7' }, "Components integrated with stencil-form and stencil-field for validation and state management."), h("stencil-form", { key: '0d80d1f25976fae0affdd28648a8f2bc54e3c399', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
                 formTextField: 'Initial form text',
                 formNumericField: '25',
                 formTextArea: 'Initial form description',
@@ -100,7 +100,7 @@ export class InputsExample {
                 formDate: '2024-02-01',
                 formTime: '09:00',
                 formSelector: 'option1'
-            } }, h("div", { key: 'da246cd0f737d4cc24a9e1aab2d642f46f0dd5b9', class: "form-grid" }, h("stencil-field", { key: 'fca403e3e4b22b9697a28fa0a72c539b19209c5e', name: "formTextField" }, h("text-field", { key: '6fcc84433366bbe7f2ad107e3f62f5086a5bca68', label: "Form Text Field", placeholder: "Enter text...", required: true })), h("stencil-field", { key: '02e8e022962ac70fc3922134195d2789a1ff1150', name: "formNumericField" }, h("numeric-field", { key: 'c11c278c51a87671babf4aa9d56b6186c675a23b', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), h("stencil-field", { key: '5dab6572842cc9eac5da936d8885772ef79cd316', name: "formTextArea" }, h("text-area", { key: '11bfbfd5088ce2394f3afff18e32d2116a32aef5', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), h("stencil-field", { key: 'ecea25b318eed0547c13e59a027b654c4be9fcd0', name: "formCheckbox" }, h("check-box", { key: '78f127f9f7bcca6a0f6e481afb818b3db6d949fe', label: "Accept Terms and Conditions", required: true })), h("stencil-field", { key: '77cbe4ff4e53e767d3eb8d6373019b9b4a50735d', name: "formToggle" }, h("stencil-toggle", { key: '1fbd8fcc5decfed9f42b7cc779c52c1094e16865', label: "Enable Notifications" })), h("stencil-field", { key: 'a63a863e35dfa120d868c686dd05d904789191b9', name: "formDate" }, h("udp-date-selector", { key: 'd28a405f02c4782c4cab90ddfd05f37a98027f3d', label: "Form Date", required: true })), h("stencil-field", { key: '0f845e170698ed8278c30c049cb1959ca9014670', name: "formTime" }, h("udp-time-selector", { key: '29fcc81c4e71aa1e92ce9912fe65da1b3ef80076', label: "Form Time" })), h("stencil-field", { key: '635a13e8e4df968a2e2570752beee6cddd26237d', name: "formSelector" }, h("udp-selector", { key: '1b073b08193591c209fbc952d5d2611c640d335c', label: "Form Selector", options: this.selectorOptions, required: true })), h("stencil-field", { key: '8edf845e1abc0a0e1e3a6301f4c791c0cb9a4d32', name: "formFiles" }, h("file-upload", { key: '232a216103e25969d6e2cccd7accffc1453e7cc8', label: "Form File Upload", allowMultiple: true }))), h("div", { key: 'd0f7e7ffcba8cac4a659dc309f5b6a34781cc72b', class: "form-actions" }, h("button", { key: '9afaea75673848a0c5f7edd31a12fc4b7073cb57', type: "submit", class: "submit-button" }, "Submit Form"))), h("div", { key: 'e85b39d39068141392939d10baa9d99b39e3679e', class: "form-values" }, h("h3", { key: 'eafdd2ef93a23b27d2cff21ba16eb6c196ffae7b' }, "Current Form Values:"), h("pre", { key: '2db8a367e6a482522522bc88b2c13d9c9bb5e2d7' }, JSON.stringify(this.formValues, null, 2)))), h("section", { key: '7b4214782208e8f6a3b51ec98cf921fc2ace3ef1', class: "example-section" }, h("h2", { key: '499581121cdd03f92d778365a878fcb54a5d8e47' }, "Additional Examples"), h("p", { key: '31154dcc4ff09bdf22e48990b5b8a4ae99b6efe6' }, "More complex configurations and specialized use cases."), h("div", { key: '74cd3c0d4165e6abd032dbc93bfd45170634beae', class: "input-grid" }, h("div", { key: '50de9539f73cb00ceadeba9042055319b486abcf', class: "input-example" }, h("h3", { key: '3dc9837aeeed3d87ab64ecec3c4402a7c6bd0f22' }, "Multi-Select UDP Selector"), h("udp-selector", { key: '972ce6287b9c1adb73f2dbc2e48c5d5252044530', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), h("div", { key: '1f3747ee36e54941587f842fc8b78524b738196b', class: "input-example" }, h("h3", { key: '3ad60a99c76032da10f00c2b65cea29c003a8044' }, "Large UDP Selector"), h("udp-selector", { key: 'a552b021960e894caaf347164a777d87cd10c39a', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), h("div", { key: '41181b3cdff1a6576042a41b94c164aea0c8af24', class: "input-example" }, h("h3", { key: '7126db87670d76fd6c7d4b9f2a4c34cf474c5eb5' }, "File Upload with Type Restrictions"), h("file-upload", { key: '86fc2356ae21a9a74e12b9819c2d3a0413d39503', label: "Image Upload Only", allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif'], allowMultiple: false, browseFileMessage: "Select an Image", onChange: (e) => console.log('Image upload changed:', e.detail) })), h("div", { key: 'bdf0de911e1e15902e722f1dad923ecd0aafef7e', class: "input-example" }, h("h3", { key: '359bcf5229b0620c5949970c323f32f63ff1c55b' }, "Disabled Components"), h("div", { key: 'bfc2fb3b2b9167228311066b837c146e4d786cb2', class: "disabled-examples" }, h("text-field", { key: '032af6447b2942306ca4aa232f583e5e3faf4488', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), h("check-box", { key: '725fed37e0a7d52e9b734591dbf5ede47011bc31', label: "Disabled Checkbox", checked: true, disabled: true }), h("udp-selector", { key: '8ff9c64f074c7105b8b9eb682b46c55af42b787f', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
+            } }, h("div", { key: 'd3f2b6e80373351888fff6354da2e47d0f793e16', class: "form-grid" }, h("stencil-field", { key: 'fca42fef7ac85ffc7c78b7d48267a1130d247e18', name: "formTextField" }, h("text-field", { key: '2eca17fb876f941bdfc1ba18ed4c24460375b39e', label: "Form Text Field", placeholder: "Enter text...", required: true })), h("stencil-field", { key: 'e27116858ab2388ccec348eecadf74b7230412e7', name: "formNumericField" }, h("numeric-field", { key: 'a190ffe8b8abb45f3c2ddad582317cd6f0746705', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), h("stencil-field", { key: '0f31ffd8c1112e74e4e923a5cadf5a3de96f22f8', name: "formTextArea" }, h("text-area", { key: '7b726b56ac74271d81be67da24264872e6c6510c', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), h("stencil-field", { key: 'bfeaf19abe940b745147fc95d7d8a9997b05a1ca', name: "formCheckbox" }, h("check-box", { key: 'f14e48a72b51c3ce0eadea0cb9f9d98e6fe6ddf6', label: "Accept Terms and Conditions", required: true })), h("stencil-field", { key: 'd71e60dbe3f6073ec6b630100c277db489d1efd3', name: "formToggle" }, h("stencil-toggle", { key: 'a04122b5e66627aa561fd4696b04a39ccb74c950', label: "Enable Notifications" })), h("stencil-field", { key: '20078be77f220315ccab082acc22f370f849fe44', name: "formDate" }, h("udp-date-selector", { key: '65098750d73fb1800330acaa665bf23a7d9f1deb', label: "Form Date", required: true })), h("stencil-field", { key: '7ea824bd2f2f7bb0ce6134e6f9ac86520495267e', name: "formTime" }, h("udp-time-selector", { key: '3b2efc78755ef1e97f6e2b5f282ddac21561f8b5', label: "Form Time" })), h("stencil-field", { key: 'a018fdca8d1b4525a18913b9a61ec15b861567df', name: "formSelector" }, h("udp-selector", { key: '14c0fdf9f115b95425d2ad22ef6d43ce666f34e3', label: "Form Selector", options: this.selectorOptions, required: true })), h("stencil-field", { key: 'f7d7f213d4a124642984b6f5ad275e3cd2230acf', name: "formFiles" }, h("file-upload", { key: '3ffd920ee0ccbbbf29cee8ca764e700ca6061af0', label: "Form File Upload", allowMultiple: true }))), h("div", { key: '640cab040e228cfbde45bdcad09bfdafcd97762f', class: "form-actions" }, h("button", { key: 'e829bfacee6a40ae5a85dcf27620381594285b9e', type: "submit", class: "submit-button" }, "Submit Form"))), h("div", { key: 'e06850277d32c6b429806037834094890e6fe834', class: "form-values" }, h("h3", { key: 'e242d0b268e51236233767cf086b007860a79c38' }, "Current Form Values:"), h("pre", { key: '628c32d498445e766c39a947048f977b0b87860b' }, JSON.stringify(this.formValues, null, 2)))), h("section", { key: '5e7d344174f0cc95a63377492a51f00369c86653', class: "example-section" }, h("h2", { key: '7a4fbd7a391fbafe8b3bcbfbc5bf6d6cc39639b0' }, "Additional Examples"), h("p", { key: '811a4497b1d7601aa3713ac7afd52a4f52e8aa47' }, "More complex configurations and specialized use cases."), h("div", { key: '0f6ff92228f10d1312a6dc380ae167e5644b07e6', class: "input-grid" }, h("div", { key: '45377b191a88f04e0bfa33a5791fb5ed6063f34b', class: "input-example" }, h("h3", { key: 'be2f5bfd53beacd2223889e32c360aaaa90c42bc' }, "Multi-Select UDP Selector"), h("udp-selector", { key: 'cd521f59323fa517f9125000974fe07419eefe3a', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), h("div", { key: '779ee8bb2988bb90bbdfe7c21af013da91da0a36', class: "input-example" }, h("h3", { key: '0b1067836811f19b95a2475486bebe9c03c1f205' }, "Large UDP Selector"), h("udp-selector", { key: '8450a289444ac6358aa941f67e322c5d3aaa1046', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), h("div", { key: 'd259be6b747f95563f3844498955de4590f5605e', class: "input-example" }, h("h3", { key: '6363536f0028333f1d9eca2b0ff8f394dad865c4' }, "File Upload with Type Restrictions"), h("file-upload", { key: '353e274d122b8f0791ef8549c2a20a69416060ef', label: "Image Upload Only", allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif'], allowMultiple: false, browseFileMessage: "Select an Image", onChange: (e) => console.log('Image upload changed:', e.detail) })), h("div", { key: '5d8723c44a1307e82b00c5bacc54590538bc203a', class: "input-example" }, h("h3", { key: '2226792e8402ec9aa95c1b0287caa976433e1f96' }, "Disabled Components"), h("div", { key: 'ac25c524f1a396cafea48dd4c918ddf5c4f46dd5', class: "disabled-examples" }, h("text-field", { key: 'c3dc2d09d0137837655775adc4fa40632685b4a3', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), h("check-box", { key: '075f60f94e599da6cac7e4a0aae16a11a858b860', label: "Disabled Checkbox", checked: true, disabled: true }), h("udp-selector", { key: 'a44401e2621578e294adfb1874d78a62bc483627', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
     }
     static get is() { return "inputs-example"; }
     static get encapsulation() { return "shadow"; }