udp-stencil-component-library 25.18.1-beta.6 → 25.18.1-beta.8

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

@@ -97,19 +97,19 @@ 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: '0f48ef1f064a7716ffb4ec27d8e77ddae408ea4e', class: "card-wrapper", style: { width: (_b = this.width) !== null && _b !== void 0 ? _b : '100%' } }, this.showAdornment && this.status && (h("div", { key: '9164d74a21825455b5ce1b0f2c1faf51ae9fd0d6', class: "adornment" }, h("udp-adornment", { key: 'd118ef020ff45b8cff1f1e5aaa0bf40a62b47670', status: (_c = this.status) !== null && _c !== void 0 ? _c : 'info' }))), h("div", { key: '8d90a41f5746d178f8eed681aaff6280de22e7fb', class: "content-wrapper" }, h("div", { key: 'b6f7270300a2c2a576fc3596c13c18e1f84f9ce4', class: "header-wrapper", style: { backgroundColor: this.getHeaderBackgroundColor() } }, h("div", { key: '79f1b6cae1fe69126ab99bc988d97b9221ebc9b4', class: "title-wrapper" }, h("stencil-icon-button", { key: 'f1dc3606a00577bfa270dfc2bf74bdd8f96ed95e', onClick: this.onClose, icon: CloseIcon24, tooltip: "Close", noBackground: true }), h("unity-typography", { key: '30dfa7fe22120433bbe02affa8f75bce0b3612b2', variant: 'h6' }, this.title)), ((_d = this.moreIconActions) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", { key: '5a5368d74eb5e171697e3d03e3d167f02d7f2c66' }, h("div", { key: 'f4c1fe6b4da6bcec91d83f27d116d8cd1ab9770a', id: "moreHeaderIconButton1" }, h("stencil-icon-button", { key: '9e1b5310e1bf4dc402b4f29e25667dfe956e0f64', onClick: this.handleOnClickMoreIcon, icon: OverflowMenuVertical24, tooltip: "More", noBackground: true, buttonId: "moreHeaderIconButton" })), this.moreIconAnchor && (h("udp-pop-over", { key: 'd7e28b157beaab735cd880f6e3fe73ec93be8b31', anchorElement: this.moreIconAnchor, isOpen: this.showMoreHeaderPopover, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleClosePopover, container: this.popoverContainer }, h("div", { key: '0449f6aa16eeb67bac9ab2599e30a22677dc43c1', class: "menu" }, (_e = this.moreIconActions) === null || _e === void 0 ? void 0 : _e.map(action => {
+        return (h("div", { key: '9781ea11818aaa6eaae88eb0c6f4c0b43b5a99e5', class: "card-wrapper", style: { width: (_b = this.width) !== null && _b !== void 0 ? _b : '100%' } }, this.showAdornment && this.status && (h("div", { key: '209fc91b2d98c079102074dbd8a0c060c053b2d4', class: "adornment" }, h("udp-adornment", { key: '1c09dc89841fda0747ad70a04adf70e800fe6a83', status: (_c = this.status) !== null && _c !== void 0 ? _c : 'info' }))), h("div", { key: '9afa54bd54a12b5931d31fa4eeee7c2b7df6f30b', class: "content-wrapper" }, h("div", { key: '7c23194810bc7fc58a97f94eee8f9f2408e019b9', class: "header-wrapper", style: { backgroundColor: this.getHeaderBackgroundColor() } }, h("div", { key: 'bb4840f16d4e448a958bd41405e29415aa6a1612', class: "title-wrapper" }, h("stencil-icon-button", { key: 'b46623a2a8c65049725a1bca325b9a9cb4d94aaf', onClick: this.onClose, icon: CloseIcon24, tooltip: "Close", noBackground: true }), h("unity-typography", { key: 'db5d074812e16b98a688dabb0abc71542b4e30bb', variant: 'h6' }, this.title)), ((_d = this.moreIconActions) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", { key: '6bf4e8d3123f062c42f183af8a3f07ff72364b79' }, h("div", { key: '7885e3bb96bd2f3ced77600b56e2043bcbb83963', id: "moreHeaderIconButton1" }, h("stencil-icon-button", { key: '8bc4a4c8181b0e4e6870023b4b948eed253ef80f', onClick: this.handleOnClickMoreIcon, icon: OverflowMenuVertical24, tooltip: "More", noBackground: true, buttonId: "moreHeaderIconButton" })), this.moreIconAnchor && (h("udp-pop-over", { key: '376a5488530604b63cc13ef8f94dff86f06fc9c9', anchorElement: this.moreIconAnchor, isOpen: this.showMoreHeaderPopover, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleClosePopover, container: this.popoverContainer }, h("div", { key: '2016252e992ee3988d12d6c1158c48f6bb6f67d6', class: "menu" }, (_e = this.moreIconActions) === null || _e === void 0 ? void 0 : _e.map(action => {
             var _a;
             return (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);
                 }, disabled: (action === null || action === void 0 ? void 0 : action.checkDisabled) ? action === null || action === void 0 ? void 0 : action.checkDisabled(this.data) : (_a = action === null || action === void 0 ? void 0 : action.disabled) !== null && _a !== void 0 ? _a : false }));
-        }))))))), this.message && (h("div", { key: 'ce1ffc85e445542b5fc8c0585ab4c4597b9f7ffc', class: "message-wrapper", style: { backgroundColor: this.getMessageBackgroundColor() } }, !this.hideMessageIcon && (h("div", { key: 'd6b21e7b4386340382a0d14d05ebdcfd90ae82a1', class: "icon-message" }, h("udp-icon", { key: '7043ed6a01bc10803a2e053d4ecc556f5b7db573', iconName: currentMessageIcon }))), h("div", { key: '566fba8595867e4f33e2c6b06bfae4e0cee0ad0e', class: "message" }, h("unity-typography", { key: 'b4061afebe60a2aecba26f06607f892212978929' }, this.message)))), h("div", { key: '0a2f353d57524636c259b01df78cd3a5960fd034', 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: '6c87017e6ae56ccf64ab3e87e662988830aa2266', class: "options" }, this.enableViewFeature && this.data && (h("div", { key: 'bf9aead97dc27b42be7cfaf935d40370391ecd95', id: "viewFeatureOption" }, h("stencil-icon-button", { key: 'dbccb36cdd3bf46a4f976a64189ab0489e97fc12', tooltip: 'View', icon: getIconFromName('view'), buttonId: 'viewFeatureButton', onClick: () => this.handleViewFeature({
+        }))))))), this.message && (h("div", { key: 'f4e32de4e683d044decbfd69e391583f8ccb92db', class: "message-wrapper", style: { backgroundColor: this.getMessageBackgroundColor() } }, !this.hideMessageIcon && (h("div", { key: 'e06a6965667b324abaa9fd0d869174fa60dc2579', class: "icon-message" }, h("udp-icon", { key: '6980a16b88790e0455e387ac442ec7e8481468a3', iconName: currentMessageIcon }))), h("div", { key: '4293a6bdc84ac43b6f613809efdf6926b119291c', class: "message" }, h("unity-typography", { key: 'f84db35a63f7c504486d6d549fd0672c98037229' }, this.message)))), h("div", { key: '7251c146dd425b62d8f0659ffa825faa84e7b110', 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: '2df27e38d9092c04d6d4fa4428108b55f1b62f77', class: "options" }, this.enableViewFeature && this.data && (h("div", { key: 'b8c8364d7fd1a3e2442abea73db19ac5bff4b5fa', id: "viewFeatureOption" }, h("stencil-icon-button", { key: '31f87917589d61040ebb3e46b1ad630b31eeec34', 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: '00951c8e348acb7d887359ba78674f6fbd9cb478' }, h("div", { key: '41dff2c40a6532f9c49c6a1388c2146c23180054', 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: 'b1a1c7c4ea2e602eaaa983993e814fbd2de8d976' }, h("div", { key: '88d88f99f4b41d48e87ab7894e826d0043dbb5c4', class: "options" }, (_h = this.visiblePrimaryActions) === null || _h === void 0 ? void 0 :
             _h.map((action, index) => {
                 var _a, _b;
                 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), disabled: (action === null || action === void 0 ? void 0 : action.checkDisabled) ? action === null || action === void 0 ? void 0 : action.checkDisabled(this.data) : (_b = action === null || action === void 0 ? void 0 : action.disabled) !== null && _b !== void 0 ? _b : false }));
-            }), ((_j = this.overflowPrimaryActions) === null || _j === void 0 ? void 0 : _j.length) > 0 && (h("stencil-icon-button", { key: '4bb9bd45120c494f181299295c8757c98e1da65b', onClick: this.handleOnClickPrimaryAction, icon: OverflowMenuVertical24, tooltip: "More", noBackground: true, buttonId: "morePrimaryIconButton" }))), this.primaryActionAnchor && (h("udp-pop-over", { key: 'edb84a9d52ff94e336e2ee5360b9ef189fde34f7', anchorElement: this.primaryActionAnchor, isOpen: this.showPrimaryPopover, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleClosePopover, container: this.popoverContainer }, h("div", { key: 'b63a280d184467cb7f9f0dac5c80805c6fb6c20f', class: "menu" }, (_k = this.overflowPrimaryActions) === null || _k === void 0 ? void 0 : _k.map(action => {
+            }), ((_j = this.overflowPrimaryActions) === null || _j === void 0 ? void 0 : _j.length) > 0 && (h("stencil-icon-button", { key: '93371bedffe6f7d2d0c88d5b24a46da780b9b0f3', onClick: this.handleOnClickPrimaryAction, icon: OverflowMenuVertical24, tooltip: "More", noBackground: true, buttonId: "morePrimaryIconButton" }))), this.primaryActionAnchor && (h("udp-pop-over", { key: '5559e811a2912ceccb8e28d4a9fe8bf42e0afcb8', anchorElement: this.primaryActionAnchor, isOpen: this.showPrimaryPopover, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleClosePopover, container: this.popoverContainer }, h("div", { key: 'a181790896fd98c30a9475ee7d10ac99697f9d84', class: "menu" }, (_k = this.overflowPrimaryActions) === null || _k === void 0 ? void 0 : _k.map(action => {
             var _a;
             return (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

@@ -44,7 +44,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("div", { key: '1b5195214872ac0f1e3593d4de57c6d3b26bce96' }, this.showPopOver && (h("feature-details-card", { key: '07d39ad98391f84657bb4451b1a4857ec05bc88c', 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, popoverContainer: this.popoverContainer }))));
+        return (h("div", { key: 'deaed233d3e7bb551c0573d572e726e89478b0c1' }, this.showPopOver && (h("feature-details-card", { key: '1032dce713a053da66036992fc43dfcf860f3ad3', 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, popoverContainer: this.popoverContainer }))));
     }
     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,9 +8,9 @@ export class SelectLayerPopUp {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '59c78bf206bd9fded412537c9895df6f03bb9d6e', class: "popoverContent" }, this.enableTileSelection && (h("udp-selector", { key: '82aa97bae49d1322b829ee6a81e042ef65c843a5', id: 'mapType', options: (_a = this.tileOptions) !== null && _a !== void 0 ? _a : [], initialValue: this.selectedTile.value, label: 'Map Type', onChange: (e) => {
+        return (h("div", { key: '75be11ee044fe3dd6b1ff317f5102d9a5e843c0b', class: "popoverContent" }, this.enableTileSelection && (h("udp-selector", { key: 'fb9f115d6cb76d9195f519e586fd2f43663853da', id: 'mapType', options: (_a = this.tileOptions) !== null && _a !== void 0 ? _a : [], initialValue: this.selectedTile.value, label: 'Map Type', onChange: (e) => {
                 this.handleMapTypeInputChange(e.detail);
-            }, large: false })), h("div", { key: '3349429aa5bc8b56ab8353312d8dfd72bacecfc7', style: { height: '12px' } }), h("div", { key: '36ee444e5eca89aee6fc8f1fb490f85710a3f203' }, h("text-field", { key: '40ee433a9b81fefe07fea2c187e668c1f72f3c37', label: 'Search Layers', id: 'searchFilter', value: '', onInput: (e) => this.handleSearchLayers(e) })), ((_b = this.filteredOptions) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+            }, large: false })), h("div", { key: 'e85a746fb04057cadf91eb450283987fb3372cd3', style: { height: '12px' } }), h("div", { key: '58861e7563ec08856433a4026c10ebdfafdac06b' }, h("text-field", { key: '350169bcaf5aa1e94e6df89f4a93d1ad6991c4d1', 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: '0f59eb37ecfaa2e6b15831da41cf1845c9255d65', class: "popoverContent" }, h("udp-selector", { key: 'f3edeffd55bba9595514cc3892616fb6cae51f5e', id: 'layer', options: (_a = this.vectorLayerOptions.map(layer => {
+        return (h("div", { key: '6bef4be9dd21190fba6cf252f14289972b3faefd', class: "popoverContent" }, h("udp-selector", { key: '96de4c44244ab905076f94c9c7369052944861e0', 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: '92aff962af02e5cf567ed73e01331c5c4e0a7d36', class: "toolbarContainer" }, h("div", { key: '865a3024d08132f49842f5501d0adb501a9c4eb5', class: "title" }, this.mapTitle && this.mapTitle.length > 0 && h("unity-typography", { key: '5d35a424f4530a9f5ce373decdc507ec0950d846', variant: "h4" }, this.mapTitle)), h("div", { key: 'b37a86dee249f48432bd3d2ec1ff7119974c0208', class: "buttons" }, h("div", { key: '95dbc9ae45e4ed791448ad0dcba95cf2a596bade', class: "buttonContainer" }, h("div", { key: 'fc9dc7fccc9f139335114d063efafefc0c516377', class: "secondaryButtons" }, this.filterPanel && (h("div", { key: '111c9c98e9d983ec1c6ddf5311cecb12b27888ec', id: "filterOption" }, h("div", { key: 'e6ecbdd628141b4c2f1bea0d8aaf3157d0800168', id: "filterOptionButton" }, h("stencil-icon-button", { key: '0123cc43cf0215a0490fe69c2e6dabdb7ebca07a', iconName: 'filterButton', iconClassName: 'iconButtonWrapper', tooltip: 'Filter', icon: Filter16, buttonId: 'filterButton', onClick: () => this.handleFilterOnclick() })), this.filterAnchor && (h("div", { key: '87d771bc490a75ad7e926bddf60b3f19bc1a5578', id: "filterOptionDiv" }, h("udp-pop-over", { key: '19cf5a56d0f8e9bb34ee7676f638157484c0fa27', isOpen: this.filterAnchor ? true : false, anchorElement: this.filterAnchor, handleOnClose: () => this.handleCloseFilterPopover(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("div", { key: 'fe5b580e4006473bab8213198e4d14e2c152a3b9', innerHTML: this.filterPanel })))))), this.layerOptions && (h("div", { key: '6084b6eec32eff25caa021592d1a43ca211de43c', id: "layerOption" }, h("div", { key: 'acb3dea072a8cdde8eae06c5029cab86ede335bb', id: "layerOptionButton" }, h("stencil-icon-button", { key: '1b997180ab2ad4b38af0d7db79ec6b3200d5002b', 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: 'e5bc121b178770d1f554773e21b5784aef30d36b', id: "layerOptionDiv" }, this.layerAnchor && (h("udp-pop-over", { key: 'd879c986af1754329ddeb2ae8338fb46d0b606d0', isOpen: this.layerAnchor ? true : false, anchorElement: this.layerAnchor, handleOnClose: () => this.handleCloseLayerPopover(), popoverPlacement: 'bottom-start', popoverMaxHeight: '500px' }, h("select-layer-popup", { key: '7bc85044798e140bf4725249821ef5cd80071ad0', 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: '286a5caed22a8e24f00d8c0059b10e9df280eafc', id: "bulkSelectOption" }, h("div", { key: '4a9206ccd1eef4f64a472b32f4254b245a97780b', id: "bulkSelectOptionButton" }, h("stencil-icon-button", { key: '599e85c48f6e6faf263c104bd54c8ca4eb6615b5', iconName: 'selectButton', iconClassName: 'iconButtonWrapper', tooltip: 'Select', icon: Select_0116, buttonId: 'selectButton', onClick: () => this.handleSelectionBtnOnclick() })), h("div", { key: '6e684eecc4c1f760d1af6ebc75a1d2f939646c7d', id: "bulkSelectOptionDiv" }, this.bulkSelectionTypeAnchor && (h("udp-pop-over", { key: 'eac89e93ec0756f8c928bbc8d3e1511b5f6758dc', isOpen: this.bulkSelectionTypeAnchor ? true : false, anchorElement: this.bulkSelectionTypeAnchor, handleOnClose: () => this.handleCloseBulkSelectionTypePopover(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("udp-menu-item", { key: 'a5625c778b322a630e9103a58815b281c3c874e3', label: 'Box', handleOnClick: () => {
+        return (h("div", { key: '1eba387405c4bf43b9c4ce081cb492d741b04b92', class: "toolbarContainer" }, h("div", { key: 'ffb57c4c043d56e928e804ba4d48ec9f9f26d9d2', class: "title" }, this.mapTitle && this.mapTitle.length > 0 && h("unity-typography", { key: '473b413fa71cf1c3a44fcaa27a3252b86133412a', variant: "h4" }, this.mapTitle)), h("div", { key: '58d54ecb7d82d1e46c3ca21dc200e012c6532d1f', class: "buttons" }, h("div", { key: 'f4745e154a0bd1a5afa37a7cde9215538971ea0c', class: "buttonContainer" }, h("div", { key: '0519d96067031bfcd8d38ba11b8b30722de6aa37', class: "secondaryButtons" }, this.filterPanel && (h("div", { key: '9a8fbc50acdfc99adc1cef7a3b05da9aedad36b2', id: "filterOption" }, h("div", { key: '93e58b935048c6acd27fded91aac745d60a27cfe', id: "filterOptionButton" }, h("stencil-icon-button", { key: 'd325a815292b31879d23a41882defa95607f61fd', iconName: 'filterButton', iconClassName: 'iconButtonWrapper', tooltip: 'Filter', icon: Filter16, buttonId: 'filterButton', onClick: () => this.handleFilterOnclick() })), this.filterAnchor && (h("div", { key: '25e452412bf6a7f1e57e5b84c44154aad8c87b8b', id: "filterOptionDiv" }, h("udp-pop-over", { key: 'dde09e92dbb5743b48e65a4a5b558dba682c5dac', isOpen: this.filterAnchor ? true : false, anchorElement: this.filterAnchor, handleOnClose: () => this.handleCloseFilterPopover(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("div", { key: '759edc2e56cb727c18b37f234fd69bde9ea6630d', innerHTML: this.filterPanel })))))), this.layerOptions && (h("div", { key: '2fabf18e069c06e2df0de699116b0017be77f347', id: "layerOption" }, h("div", { key: '8972d9cf4c32c9b35559812522c58f692728a90d', id: "layerOptionButton" }, h("stencil-icon-button", { key: 'a44bf929c953da98a0a2389efb31135c196bc154', 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: '8bfc66d8a2af2b8f262377827017fc4f0282bdba', id: "layerOptionDiv" }, this.layerAnchor && (h("udp-pop-over", { key: '4419c415218b76e0e0fa56db48fec2e4f375fa2a', isOpen: this.layerAnchor ? true : false, anchorElement: this.layerAnchor, handleOnClose: () => this.handleCloseLayerPopover(), popoverPlacement: 'bottom-start', popoverMaxHeight: '500px' }, h("select-layer-popup", { key: 'bbece2ad270970f457912c4a3057200664ef71a3', 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: '049b29d4f288b3ca7c9a06b677241c800575a02a', id: "bulkSelectOption" }, h("div", { key: 'df804ada9992538d5d740c7d1d404a04072c015f', id: "bulkSelectOptionButton" }, h("stencil-icon-button", { key: '29f6948ddc700b8760c9187d1160a203621116b4', iconName: 'selectButton', iconClassName: 'iconButtonWrapper', tooltip: 'Select', icon: Select_0116, buttonId: 'selectButton', onClick: () => this.handleSelectionBtnOnclick() })), h("div", { key: 'dfb95265b42906ac297ae0915cf6f5d13332089e', id: "bulkSelectOptionDiv" }, this.bulkSelectionTypeAnchor && (h("udp-pop-over", { key: '1e3e98d550f1432acc21d7bf4cbdcc90a59be339', isOpen: this.bulkSelectionTypeAnchor ? true : false, anchorElement: this.bulkSelectionTypeAnchor, handleOnClose: () => this.handleCloseBulkSelectionTypePopover(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("udp-menu-item", { key: 'd80259e629d4837e8d379ba08b00df3a7246e037', label: 'Box', handleOnClick: () => {
                 this.handleBulkSelectionTypeOnclick('box');
-            } }), h("udp-menu-item", { key: '2d64af7fc0cacfca6a2f64d42bb65a1ef866a268', label: 'Circle', handleOnClick: () => {
+            } }), h("udp-menu-item", { key: 'dc61c1fe2f7918ea83f89be262d8cb29d51f226b', label: 'Circle', handleOnClick: () => {
                 this.handleBulkSelectionTypeOnclick('circle');
-            } }), h("udp-menu-item", { key: '24275349b0beaa377012af15227d1871cfef0350', label: 'Polygon', handleOnClick: () => {
+            } }), h("udp-menu-item", { key: '115f39df51f9652896c86a0ab5d3ebcac74b7f42', label: 'Polygon', handleOnClick: () => {
                 this.handleBulkSelectionTypeOnclick('polygon');
-            } }), h("udp-menu-item", { key: '68dced4de1ef9839b9fe99c2270d83e35824b5e3', label: 'Lasso', handleOnClick: () => {
+            } }), h("udp-menu-item", { key: '5a552b35e6f17bbf0d239c1d7ecf61c93dae0b8b', label: 'Lasso', handleOnClick: () => {
                 this.handleBulkSelectionTypeOnclick('lasso');
-            } })))))), !this.readOnlyMap && this.enableSplit && (h("div", { key: '677903b1fa52a56a94c856349d195adf5fcd44e0', id: "splitOption" }, h("div", { key: '7b2c01b8db2d4cf74a686533fd49fb4bb4aaf942', id: "splitOptionButton" }, h("stencil-icon-button", { key: '8be08c89e8330e406d37ed7ddbaf4ef771dbc893', iconName: 'splitButton', iconClassName: 'splitButtonWrapper', tooltip: 'Split Linear Feature', icon: Scalpel16, buttonId: 'splitButton', onClick: () => this.handleSplitBtnOnclick() })), h("div", { key: '37075abad3f520af3c3a476830e1edf3441a3a55', id: "splitOptionDiv" }, this.splitAnchor && (h("udp-pop-over", { key: 'd14d5e422bf018771401e1f902f6ffee4e60536c', isOpen: this.splitAnchor ? true : false, anchorElement: this.splitAnchor, handleOnClose: () => this.handleCloseSplitPopover(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("split-line-popup", { key: '26ac310d4543db4ef26a1428a2ae6330a8f8dc2e', vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, handleStartSplitting: this.handleStartSplitting })))))), this.refreshEvent && (h("stencil-icon-button", { key: '031a71e008b330f58ba093292d92246ced0255e9', 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: '4581c9ffd923f25521c428ecef6fd5fdaadfb89b', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '1143ca35a8aa4cee611747e7d9a724fcb773cd80', showLabel: true, icon: this.getButtonIcon(), onClick: () => {
+            } })))))), !this.readOnlyMap && this.enableSplit && (h("div", { key: '97b0a293572225057f7293522ae1bd8e4d8859ce', id: "splitOption" }, h("div", { key: 'e027ac10e6e0d540cfe25841bb5d1c4a282691c8', id: "splitOptionButton" }, h("stencil-icon-button", { key: 'ca7514fdbf701ed837d9d29a9e0388c4e495b675', iconName: 'splitButton', iconClassName: 'splitButtonWrapper', tooltip: 'Split Linear Feature', icon: Scalpel16, buttonId: 'splitButton', onClick: () => this.handleSplitBtnOnclick() })), h("div", { key: '278b56b5d01297f1088d4ee85c9f3736d266d077', id: "splitOptionDiv" }, this.splitAnchor && (h("udp-pop-over", { key: '3769be623dbab0e42fc95339c5da88c1458b0044', isOpen: this.splitAnchor ? true : false, anchorElement: this.splitAnchor, handleOnClose: () => this.handleCloseSplitPopover(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("split-line-popup", { key: '7acfc291053af93ac25ccb39b130650889482f7f', vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, handleStartSplitting: this.handleStartSplitting })))))), this.refreshEvent && (h("stencil-icon-button", { key: 'f1fbbadd29aea681c3d04bb0c2788e96f5ec4350', 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: 'dfa3aff925c51f86df39d40d2197436078e8318f', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: 'b28aa322b29c14a1de03a89fbd6d1c37ca7930dc', 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: '47326bd2461319fde02ada021b7b36601801006b', variant: "button" }, this.getButtonText())))), this.showSplitButton && (h("div", { key: 'd99768af9e9a97b47cbd593929bfe3759b8989d6', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '3d0c70f3ec271f9c051619ff12f0b3127f00c050', showLabel: true, icon: Checkmark16, onClick: () => this.handleSaveSplit(), tooltip: 'Save Split', iconClassName: 'save-icon-class' }, h("unity-typography", { key: 'fa873733fcd91058bfe4feaa7d4ce0447df6d5a1', variant: "button" }, 'Save Split')))), this.showSplitButton && (h("div", { key: '8ddc969c7980c65cf966f8987967f9baefa7eb3e', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: 'c03d59a07fa922a344fc08302a8c704ffb76f4d5', showLabel: true, icon: Close16, onClick: () => this.handleCancelSplit(), tooltip: 'Cancel Split', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '0b67fc50e7b85793513584b92b3a1e78925676bb', variant: "button" }, 'Cancel Split')))), !this.readOnlyMap && this.enableAddNewFeature && (h("div", { key: 'e728ddd150014a1938126d3c7e9cdd019c7f4d07', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: 'c6fd3b23c9875e21ade00d200a6e3ba271f9e6b7', showLabel: true, icon: Close16, onClick: () => this.handleCancelAddNewFeature(), tooltip: 'Cancel Drawing', iconClassName: 'save-icon-class' }, h("unity-typography", { key: 'f1742d21adfa7d0191550223f6274be4a60aec06', variant: "button" }, 'Cancel Drawing')))), !this.readOnlyMap && this.withSelected && (h("div", { key: '4fa8add9733ff4b386bf0d42cb127d2b322c066d', class: "selectedFeaturesButtons labelButtons" }, h("div", { key: '0dfefbea95108e46e5a4c04912f79175628f21b0', id: "withSelectedOption" }, h("div", { key: 'a1e2b7dbfdda5412d334de1963941d87776b260d', id: "withSelectedOptionButton" }, h("stencil-icon-button-grid-action-header", { key: '3127f8a603d95b6e5464442cf3d8384ef96a21d8', showLabel: true, icon: OverflowMenuHorizontal16, onClick: () => this.handleSelectionActionOnclick(), tooltip: 'With Selected', iconClassName: 'save-icon-class', count: this.selectedFeatureByBoxSelection.length }, h("unity-typography", { key: 'dc870d24afc035204de902e28f6b50e653937f21', variant: "button" }, 'With Selected'))), h("div", { key: '3b8fcd59e572f4b3bdb4eed06fea231b0b53a3a7', id: "withSelectedOptionDiv" }, this.selectedFeaturesActionPanel && this.selectionActionAnchor && (h("udp-pop-over", { key: 'f9cd89aada0facea33b8d36dd4f4bffabe22131e', isOpen: this.selectionActionAnchor ? true : false, anchorElement: this.selectionActionAnchor, handleOnClose: () => this.handleCloseSelectionActionPopover(), popoverPlacement: 'bottom-start' }, h("div", { key: '8534a1c5c88a0bc17310dc143874921ba42caa12', innerHTML: this.selectedFeaturesActionPanel }))))), h("stencil-icon-button-grid-action-header", { key: '6f753e273730d6594fae87ea1ed15b88387a274e', showLabel: true, icon: Close16, onClick: () => this.unselectFeatures(), tooltip: 'Cancel selection', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '38b4021f5f65a64111637f79da94f52458cb661b', variant: "button" }, 'Cancel Selection'))))), h("div", { key: 'fab640268b46c9c86eb35a72eca539877cdf0b37', id: "addOption" }, this.enableAdd && !this.readOnlyMap && (h("div", { key: '76016acd0aec63d999341d8b042242813c8d7596', id: "addOptionButton" }, h("custom-button", { key: '2b432bb1c027d17aa11a2f7a316daaa4a8153975', secondary: true, label: h("unity-typography", { variant: "button" }, 'Add'), onClick: () => this.handleAddOnclick(), size: "tall" }, h("udp-icon", { key: '40c415e61dd6184f24da61a50a25e52878879fb1', iconName: 'add32', darkIcon: false })))), this.addFeatureAnchor && (h("udp-pop-over", { key: '756afd7031d5d4d9ce04a49f3a9ca6493a751f54', isOpen: this.addFeatureAnchor ? true : false, anchorElement: this.addFeatureAnchor, handleOnClose: () => this.handleCloseAddMapFeature(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("add-map-feature-popup", { key: '821bc3b0df6df063b0e0a40177631ee0c3ad4371', 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: 'fca407f3dc7199ea55275beb4eee465167ceea93', variant: "button" }, this.getButtonText())))), this.showSplitButton && (h("div", { key: '9effe3aaa30520eb6f5b9efa7fda5175ed8b091c', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: 'f03951703a6445929a2a761309c3f258d9fcabe9', showLabel: true, icon: Checkmark16, onClick: () => this.handleSaveSplit(), tooltip: 'Save Split', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '0af4980c4a309601f6dd1097355aca69d859c77e', variant: "button" }, 'Save Split')))), this.showSplitButton && (h("div", { key: '6ef7104b181d6fd7299bb865e569dc189ad6a24f', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '44338781709d52bf448a7a633c640146492856f7', showLabel: true, icon: Close16, onClick: () => this.handleCancelSplit(), tooltip: 'Cancel Split', iconClassName: 'save-icon-class' }, h("unity-typography", { key: 'aebcfb04c8cc10f56bbf4043cd05017115653143', variant: "button" }, 'Cancel Split')))), !this.readOnlyMap && this.enableAddNewFeature && (h("div", { key: 'bcb41a52f13a47db70c8b9f5af6abc7c513290fd', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '5fae2fc60c5eeac7d51ee2fbf97745e5f7d5d086', showLabel: true, icon: Close16, onClick: () => this.handleCancelAddNewFeature(), tooltip: 'Cancel Drawing', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '355dae6321de0f406e78ff371c7fc1a81d460a88', variant: "button" }, 'Cancel Drawing')))), !this.readOnlyMap && this.withSelected && (h("div", { key: '42ee564e2176c31ecbe6c20e6f17629cee37ed20', class: "selectedFeaturesButtons labelButtons" }, h("div", { key: 'e3f6928b33007f677bbdc355c9a5626d21f0e6f4', id: "withSelectedOption" }, h("div", { key: '1645690909db2062d12825aa60e5296faf7dd72a', id: "withSelectedOptionButton" }, h("stencil-icon-button-grid-action-header", { key: '9134da4ae07c260b1ec80497392e0b928d67edb0', showLabel: true, icon: OverflowMenuHorizontal16, onClick: () => this.handleSelectionActionOnclick(), tooltip: 'With Selected', iconClassName: 'save-icon-class', count: this.selectedFeatureByBoxSelection.length }, h("unity-typography", { key: '3175b9135a0d9b0139441d536525b61409aad478', variant: "button" }, 'With Selected'))), h("div", { key: 'bfe9ed21796c744f57432d65de29f41c6af93012', id: "withSelectedOptionDiv" }, this.selectedFeaturesActionPanel && this.selectionActionAnchor && (h("udp-pop-over", { key: 'e47e9655a04c432af84d7a74af5e5723384f0bf9', isOpen: this.selectionActionAnchor ? true : false, anchorElement: this.selectionActionAnchor, handleOnClose: () => this.handleCloseSelectionActionPopover(), popoverPlacement: 'bottom-start' }, h("div", { key: 'd79a38d005451dd8a2d82801c472520d29d374a8', innerHTML: this.selectedFeaturesActionPanel }))))), h("stencil-icon-button-grid-action-header", { key: '89cc575ab98ab801a7b716cbb82d298d42082ed9', showLabel: true, icon: Close16, onClick: () => this.unselectFeatures(), tooltip: 'Cancel selection', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '93050377a4ad47e87987d42e9a87b2ce4781f60f', variant: "button" }, 'Cancel Selection'))))), h("div", { key: '98a41208a4257aaa119df27d126ca5dde1bb1cf0', id: "addOption" }, this.enableAdd && !this.readOnlyMap && (h("div", { key: '74bc8c6f1f7c63b6a25fbc41ba6441bed0902a26', id: "addOptionButton" }, h("custom-button", { key: '8fcb487b0e4e7365ec5fb38ef16468b2e6787d91', secondary: true, label: h("unity-typography", { variant: "button" }, 'Add'), onClick: () => this.handleAddOnclick(), size: "tall" }, h("udp-icon", { key: '0c370bf5114be8fcfd6e473797edbbf663dafa13', iconName: 'add32', darkIcon: false })))), this.addFeatureAnchor && (h("udp-pop-over", { key: '7be238e827d9dbaf3c4a3dfaaf9e6cce51b7e0fe', isOpen: this.addFeatureAnchor ? true : false, anchorElement: this.addFeatureAnchor, handleOnClose: () => this.handleCloseAddMapFeature(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("add-map-feature-popup", { key: '64f39e0b6b3bcaa100669ad6e5fab61859009257', 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

@@ -205,7 +205,7 @@ export class UdpMapToolbar {
     }
     //////////////////////////////////////////////////////////RENDER/////////////////////////////////////////////////////
     render() {
-        return (h("map-toolbar", { key: '04c81b92186cd20eac7a8fdd4663f2656837cd5e', 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: 'fe800500ed0c628a824e7e07e5bbfc3cd62a5fb6', 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: 'b701c0b012dade16e39e23231e6e96e15e8024cf', 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: 'dbea383c45161505aff8965d3bfbd925ccce570b', 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: '04d39770f38e442466c0c82f0feb92bfc70b1535', 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: 'd62be8bc2f358155b349688ac9ddd27c4ee95594', 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: '24e6a8974bd1acda96d431dfc7fa5b8bd8129355' })));
+            }, addFeaturePanelConfig: this.addFeaturePanelConfig })), h("slot", { key: 'f2753f5f595726febc44235dbc1e728c1763da64' })));
     }
     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,7 +11,7 @@ export class UdpMenuItem {
         };
     }
     render() {
-        return (h("button", { key: 'd81dd6bdb90af4ee188bb7d4151ecb5e33333dfd', class: "menu-item-root", onClick: this.handleItemClick, disabled: this.disabled, role: "menuitem" }, this.iconName && h("udp-icon", { key: '18383905dff4511ee12af85156c1ae2b45569004', iconName: this.iconName, class: "menu-icon" }), h("span", { key: '78635c29150bbe4bc3ec4a91066941e9e6b903bf', class: "menu-item-label" }, h("unity-typography", { key: 'f24e771dfb0c2a543c298b8f04dc8ca9a46f7f01', variant: 'body1' }, this.label))));
+        return (h("button", { key: 'fb7827a4ddd3ec09634dde5e392b82ee2bc2aa56', class: "menu-item-root", onClick: this.handleItemClick, disabled: this.disabled, role: "menuitem" }, this.iconName && h("udp-icon", { key: '7cb749410ab0d3db5ed37a80014a2db733b7611f', iconName: this.iconName, class: "menu-icon" }), h("span", { key: 'd123d5a3d5bce228283bd829e25a0c187d791274', class: "menu-item-label" }, h("unity-typography", { key: '1c139bca8c0b84d41246bbf17e793301a9c79235', variant: 'body1' }, this.label))));
     }
     static get is() { return "udp-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -90,7 +90,7 @@ export class UdpMenu {
         }
     }
     render() {
-        return (h(Host, { key: '3f7be47a5c35c075c742aaa03a28cde14a3d1090' }, h("div", { key: '48323bd6c9b777ebb157c50505196345cb14ec43', class: "menu-panel", role: "menu" }, h("slot", { key: '25e9949b651d5c5fa7443e1b8d6b58af3846b5a0' }))));
+        return (h(Host, { key: '442d88639387239daf36ef71be1a197b098f7d15' }, h("div", { key: 'e42568ca41f4454b7b90791da690fd44c107a63f', class: "menu-panel", role: "menu" }, h("slot", { key: 'b124207c63660c4d51be5818816030e2c64b272a' }))));
     }
     static get is() { return "udp-menu"; }
     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: 'afad6510846a9c4d5d83344d045915061c40e4da', style: { padding: '2rem' } }, h("unity-typography", { key: '39114ea64804d8441c90ab2b4bac9175509128f1', variant: "h2" }, "Horizontal Stepper with Labels bottom"), h("udp-stepper", { key: '4525e5ceb4a92ddc679690ba2762bfaff5b09218', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "bottom" }), h("unity-typography", { key: 'c28dc5a2348e1af8e544a33d6f359d32d7f326ea', variant: "h2" }, "Horizontal Stepper without Labels"), h("udp-stepper", { key: 'bc50999f3a4b9f150d3f932101221c9c6b992fdc', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "none", labelPosition: "bottom" }), h("unity-typography", { key: 'a5fb283cd408dae5a92b5bbcb999849d29c4114e', variant: "h2" }, "Horizontal Stepper with Labels to Right"), h("udp-stepper", { key: 'cc34b5cfd9e2a29dc5f23c229e28ff6e3bb4fccd', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "right" }), h("unity-typography", { key: '6d602c582f6ebc764cb46f0bc3a7b7322da22217', variant: "h2" }, "Vertical Stepper"), h("udp-stepper", { key: 'f530054751640c808efa3a1abdfea025402283a8', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "vertical", labelDisplay: "all", labelPosition: "right" })));
+        return (h("div", { key: 'e81619ca3c31f9f6662c0b3af6c02a2db3e3f564', style: { padding: '2rem' } }, h("unity-typography", { key: '5e11e57915b6081e460f47a344dd31bf722d7e5b', variant: "h2" }, "Horizontal Stepper with Labels bottom"), h("udp-stepper", { key: 'ec35e19cc92d59c85818becd4e4d56e065df5dc3', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "bottom" }), h("unity-typography", { key: 'f0011595e8eb435dd85b6c6c2570029a3cbd6afc', variant: "h2" }, "Horizontal Stepper without Labels"), h("udp-stepper", { key: 'afe54dc4d369c757dcb6ba5fe455e84c95e86f07', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "none", labelPosition: "bottom" }), h("unity-typography", { key: '394396ffff23cc1f4d99611bc3ccceeb096a2c1e', variant: "h2" }, "Horizontal Stepper with Labels to Right"), h("udp-stepper", { key: '104aaf080e02cd0c9da8a84cf911b721883e0a37', steps: this.steps, activeStep: this.activeStep, completed: this.completed, stepChange: this.handleStepChange, orientation: "horizontal", labelDisplay: "all", labelPosition: "right" }), h("unity-typography", { key: '90b1aaf901ca38b48c5584c0fb79d75a0f5a2a8c', variant: "h2" }, "Vertical Stepper"), h("udp-stepper", { key: '219567475d5ea693bd77641df12c20ee9360367d', 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.css

@@ -160,11 +160,6 @@
   gap: 4px;
 }
 
-.tab-content {
-  padding: 16px;
-  background-color: #ffffff;
-}
-
 .slider {
   position: absolute;
   bottom: 0;

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

@@ -8,18 +8,46 @@ export class UdpTabs {
          * - `'fill'`: Tabs will stretch to fill the available horizontal space.
          */
         this.variant = 'fill';
-        this.activeTab = 0;
-        this.tabDetails = []; // Uses new interface
+        /**
+         * (Optional) An array of tab configuration objects.
+         * If provided, this will be used to render tabs instead of slotted `<udp-tab>` components.
+         * This mode is typically used with controlled tabs.
+         */
+        this.tabs = [];
+        this.internalActiveTab = 0; // For uncontrolled mode
+        this.tabDetails = []; // Unified details from prop or slot
         this.sliderStyle = {
             width: '0',
             transform: 'translateX(0)',
         };
         this.showScrollLeft = false;
         this.showScrollRight = false;
-        this.tabs = [];
+        this.slottedTabs = []; // Renamed from `tabs`
         this.buttonRefs = [];
     }
+    /**
+     * Returns true if the component is in controlled mode.
+     */
+    get isControlled() {
+        return this.value != null;
+    }
+    /**
+     * Returns true if tabs are being provided by the `tabs` prop.
+     */
+    get useTabsProp() {
+        return this.tabs && this.tabs.length > 0;
+    }
+    /**
+     * Returns the currently active tab index,
+     * respecting controlled or uncontrolled mode.
+     */
+    get activeTab() {
+        return this.isControlled ? this.value : this.internalActiveTab;
+    }
     handleSlotChange() {
+        // If we're using the tabs prop, slot changes are irrelevant
+        if (this.useTabsProp)
+            return;
         this.initializeTabs();
     }
     handleResize() {
@@ -31,9 +59,27 @@ export class UdpTabs {
     componentDidLoad() {
         this.initializeTabs();
     }
-    onActiveTabChange() {
+    /**
+     * Watcher for uncontrolled state changes.
+     */
+    onActiveTabChange(newValue) {
+        this.updateActiveTabs();
+        this.updateSliderPosition();
+        this.scrollTabIntoView(newValue);
+    }
+    /**
+     * Watcher for controlled state changes.
+     */
+    onValueChange(newValue) {
         this.updateActiveTabs();
         this.updateSliderPosition();
+        this.scrollTabIntoView(newValue);
+    }
+    /**
+     * Watcher for tabs prop changes.
+     */
+    onTabsPropChange() {
+        this.initializeTabs();
     }
     onVariantChange() {
         requestAnimationFrame(() => {
@@ -44,21 +90,29 @@ export class UdpTabs {
     initializeTabs() {
         var _a, _b;
         this.buttonRefs = [];
-        // Get ALL tabs from the slot
-        this.tabs = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'udp-tab');
-        this.tabDetails = this.tabs.map(tab => ({
-            title: tab.title,
-            icon: tab.icon,
-            iconPlacement: tab.iconPlacement,
-            hidden: tab.hidden,
-            disabled: tab.disabled,
-        }));
-        // Check if the current activeTab (default 0) is invalid
-        if (((_a = this.tabDetails[this.activeTab]) === null || _a === void 0 ? void 0 : _a.hidden) || ((_b = this.tabDetails[this.activeTab]) === null || _b === void 0 ? void 0 : _b.disabled)) {
-            // If it is, find the first valid tab to select
-            const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);
-            // If we found one, set it. If not (all tabs invalid), set to -1
-            this.activeTab = firstValidIndex;
+        if (this.useTabsProp) {
+            // --- Prop-based ---
+            this.tabDetails = this.tabs.map(t => (Object.assign({}, t))); // Use data from prop
+            this.slottedTabs = []; // Ensure we're not tracking slotted tabs
+        }
+        else {
+            // --- Slot-based ---
+            this.slottedTabs = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'udp-tab');
+            this.tabDetails = this.slottedTabs.map(tab => ({
+                label: tab.label,
+                icon: tab.icon,
+                iconPlacement: tab.iconPlacement,
+                hidden: tab.hidden,
+                disabled: tab.disabled,
+            }));
+        }
+        // --- Common Logic ---
+        // In uncontrolled mode, check if the default active tab is invalid.
+        if (!this.isControlled) {
+            if (((_a = this.tabDetails[this.internalActiveTab]) === null || _a === void 0 ? void 0 : _a.hidden) || ((_b = this.tabDetails[this.internalActiveTab]) === null || _b === void 0 ? void 0 : _b.disabled)) {
+                const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);
+                this.internalActiveTab = firstValidIndex > -1 ? firstValidIndex : 0;
+            }
         }
         this.updateActiveTabs();
         requestAnimationFrame(() => {
@@ -67,12 +121,17 @@ export class UdpTabs {
         });
     }
     updateActiveTabs() {
-        this.tabs.forEach((tab, index) => {
-            tab.active = index === this.activeTab;
-        });
+        // Only update slotted tabs if we're in slot mode
+        if (!this.useTabsProp) {
+            const currentActiveTab = this.activeTab;
+            this.slottedTabs.forEach((tab, index) => {
+                tab.active = index === currentActiveTab;
+            });
+        }
+        // If in prop mode, the <button> 'active' class is handled by render()
     }
     updateSliderPosition() {
-        const activeButton = this.buttonRefs[this.activeTab];
+        const activeButton = this.buttonRefs[this.activeTab]; // Use getter
         if (!activeButton) {
             this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };
             return;
@@ -95,7 +154,18 @@ export class UdpTabs {
         if ((_a = this.tabDetails[tabIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
             return;
         }
-        this.activeTab = tabIndex;
+        if (this.isControlled) {
+            // In controlled mode, emit the event for the parent to handle.
+            // The `onValueChange` watcher will handle UI updates when the prop changes.
+            this.udpTabChange.emit(tabIndex);
+        }
+        else {
+            // In uncontrolled mode, update state directly.
+            // The `onActiveTabChange` watcher will handle UI updates.
+            this.internalActiveTab = tabIndex;
+        }
+    }
+    scrollTabIntoView(tabIndex) {
         const tabButton = this.buttonRefs[tabIndex];
         const container = this.scrollContainerRef;
         if (!tabButton || !container)
@@ -106,20 +176,16 @@ export class UdpTabs {
         const safeZonePadding = 70;
         const safeZoneLeft = scrollLeft + safeZonePadding;
         const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;
-        // Check if the tab's left edge is hidden by the left fade
         if (tabLeft < safeZoneLeft) {
-            // Scroll to position the tab's left edge at the start of the safe zone
             container.scrollTo({
                 left: tabLeft - safeZonePadding,
-                behavior: 'smooth'
+                behavior: 'smooth',
             });
         }
-        // Check if the tab's right edge is hidden by the right fade
         else if (tabRight > safeZoneRight) {
-            // Scroll to position the tab's right edge at the end of the safe zone
             container.scrollTo({
                 left: tabRight - clientWidth + safeZonePadding,
-                behavior: 'smooth'
+                behavior: 'smooth',
             });
         }
     }
@@ -137,21 +203,22 @@ export class UdpTabs {
         container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });
     }
     render() {
-        return (h("div", { key: '173d42a32bb4ed0cbd57950e38bb75ab216efda1', class: "tab-container" }, h("div", { key: '369754b2aeed74f35f5e7be39b6617081c41cad2', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: '68fefbbb9e8c95f54b3a78d700698d61b1c0b8bc', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: 'f2230bcf77a4ef6cfc972f3219023c8da4607e2e', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: '69476b6d664f2b42b7a102275999f131e1b397f0', class: "scroll-fade left" }), h("div", { key: 'a12d5b22ec762e52091770b1ed276a7df8267437', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index) => {
+        const currentActiveTab = this.activeTab; // Use getter
+        return (h("div", { key: '7446df2caa768cb8161b59992cdbbf5bbae2146f', class: "tab-container" }, h("div", { key: '78eb57f157f69543baaf8eab9b5282cdba37bbb9', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: 'eb45ebcbfd365a68412c9fa098669085925b5ab9', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: '0066a09a8942b0624b3a6260a0934ce372e51473', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: 'd356a1ebae93318b97e7e9ada3d21fd44e9b1f37', class: "scroll-fade left" }), h("div", { key: '0040b9a6ff0dc8c8881a17b8c4d3f435cf2c67b3', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index) => {
             if (tab.hidden) {
                 return null;
             }
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             const iconEl = tab.icon ? h("udp-icon", { iconName: tab.icon, color: 'inherit' }) : null;
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            const titleEl = h("span", null, tab.title);
+            const labelEl = h("span", null, tab.label);
             return (h("button", { class: {
-                    'active': index === this.activeTab,
+                    'active': index === currentActiveTab,
                     'has-icon': !!tab.icon,
                     [`icon-${tab.iconPlacement}`]: !!tab.icon,
                     'disabled': tab.disabled,
-                }, disabled: tab.disabled, onClick: () => this.tabClicked(index), role: "tab", "aria-selected": index === this.activeTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index] = el) }, iconEl, titleEl));
-        }), h("div", { key: '6726c5fd74d32e9385aa83aaf88ab92e9d83d858', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: 'ce175b2bb6465211587af95995375d315a0e6fed', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '63dbc5cd40921b7b39c75377986ba37b5d69c93a', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: 'b191a3a90cdecf10abf94dc98fbf16bd973ee1e1', iconName: "chevronRight16", color: "inherit" })))), h("div", { key: '3ffe241125e1fa6969cf9fcce49350d63f82bee6', class: "tab-content" }, h("slot", { key: 'a6fe2932604e485e85f0a860ee58633f8bf161b6' }))));
+                }, disabled: tab.disabled, onClick: () => this.tabClicked(index), role: "tab", "aria-selected": index === currentActiveTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index] = el) }, iconEl, labelEl));
+        }), h("div", { key: '7470bff947872896ee283c35cf37a45fb2a64631', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: '820c57b5782c5c85f220fd7b7909351f4a76fcec', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: 'f8db99b5f8a7401449c3a55eb170b341eaf26df1', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: 'b14c8c86928352c683d1140c2b3ba2dd92ebee7f', iconName: "chevronRight16", color: "inherit" })))), !this.isControlled && !this.useTabsProp && (h("div", { key: '95a11117862494527b06f1d5a8c92234a24e89d0' }, h("slot", { key: '4621baa5801a228fc9beb38e3b9b30dc7260e41a' })))));
     }
     static get is() { return "udp-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -186,23 +253,89 @@ export class UdpTabs {
                 "reflect": false,
                 "attribute": "variant",
                 "defaultValue": "'fill'"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "(Controlled) The index of the currently active tab.\nIf this prop is provided, the component will be in \"controlled\" mode.\nThe parent must listen for `udpTabChange` to update this value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "tabs": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabDetail[]",
+                    "resolved": "TabDetail[]",
+                    "references": {
+                        "TabDetail": {
+                            "location": "global",
+                            "id": "global::TabDetail"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "(Optional) An array of tab configuration objects.\nIf provided, this will be used to render tabs instead of slotted `<udp-tab>` components.\nThis mode is typically used with controlled tabs."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
             }
         };
     }
     static get states() {
         return {
-            "activeTab": {},
+            "internalActiveTab": {},
             "tabDetails": {},
             "sliderStyle": {},
             "showScrollLeft": {},
             "showScrollRight": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "udpTabChange",
+                "name": "udpTabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "(Controlled) Emits the index of the tab that was clicked.\nThis is only emitted in \"controlled\" mode (when `value` is provided)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "activeTab",
+                "propName": "internalActiveTab",
                 "methodName": "onActiveTabChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "tabs",
+                "methodName": "onTabsPropChange"
             }, {
                 "propName": "variant",
                 "methodName": "onVariantChange"