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

package/dist/esm/advanced-search_50.entry.js

@@ -607,7 +607,7 @@ const AgTable = class {
         this.height = 'calc(100vh - 200px)';
     }
     render() {
-        return (h("div", { key: '83743973c902da683ac71a96eb67c4e44e12a778', id: "myGrid", style: { height: this.height, width: '100%' }, class: "ag-theme-material" }));
+        return (h("div", { key: '08764e8cfc9a52ac728c67018a849be7f3409408', id: "myGrid", style: { height: this.height, width: '100%' }, class: "ag-theme-material" }));
     }
     get el() { return getElement(this); }
 };
@@ -619,7 +619,7 @@ const AmbientDemoContainer = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: 'e2dc6db3f12a7cc3cbd9e0e5e59bb63abe1ff839', class: "container" }, h("div", { key: '1097924d31d84a42f3dfa4411efa02ca2d578b23', class: "title-container" }, " ", h("unity-typography", { key: '3c126bce0e92f7b57016dd206a83935bd216c9fe', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: '0df19aa562c08c1b24453f8b8c4b57a153f11d3b' })));
+        return (h("div", { key: '75dd493b0eed427f414786dcc666948afb7b40db', class: "container" }, h("div", { key: 'debe96ae62cfd10154da7432ef470e21d1ab879b', class: "title-container" }, " ", h("unity-typography", { key: '64cfc0fcbb5b745004e914fe5819d5a608b83fc4', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: 'c75ba7fa50059017da74ac203c9251ab79973645' })));
     }
 };
 AmbientDemoContainer.style = ambientDemoContainerCss;
@@ -4391,29 +4391,29 @@ const AmbientTemplateGrid = class {
             this.gridHeight = 'calc(100vh - 200px)';
         }
         const actionMenuItems = this.getOverflowActionList(this.overflowActionMenuItems, this.selectedRowParams);
-        return (h("div", { key: '6871995383595619ddd3ff06e1c17b1d4f06979a' }, this.openActionPopoverMenu && (h("udp-pop-over", { key: '4631f97ac1e5410fa77d811b9e45a92c959d5537', isOpen: this.openActionPopoverMenu, anchorElement: this.actionMenuAnchorElement, popoverWidth: "170px", popoverMaxHeight: "250px", handleOnClose: event => {
+        return (h("div", { key: '018efb3b133e06c9e5b5de09529dfa0365a4af7d' }, this.openActionPopoverMenu && (h("udp-pop-over", { key: 'ef796986b195bfcdbf71dcb59e547e3b5f1ffa90', isOpen: this.openActionPopoverMenu, anchorElement: this.actionMenuAnchorElement, popoverWidth: "170px", popoverMaxHeight: "250px", handleOnClose: event => {
                 this.handleOnCloseActionPopover(event);
-            } }, h("div", { key: '18ccf5c431affb749891af01970fb8f4f6f9a9a4', class: "overflowActionButtons" }, actionMenuItems))), h("div", { key: 'f53232485703efb24d9faaeb98a88f77f9ad568b' }, this.showNotification && (h("udp-notification", { key: '1d00ee60cb5ab7ccbf8b1650a2999e39258b71a3', active: this.showNotification, message: this.notificationMessage, status: this.notificationStatus, userCancel: true, style: { zIndex: '999991', transform: 'translateY(20px)' } }))), h("style", { key: '9438433b5183956d991d44dfad7c7c31da84c22c' }, `:host ::slotted(.ag-side-bar) {
+            } }, h("div", { key: '03ad81c34aa492d68e9843b54a8d82677c211212', class: "overflowActionButtons" }, actionMenuItems))), h("div", { key: '9911c50d42f477d5adedb50649e68490853d870f' }, this.showNotification && (h("udp-notification", { key: 'd70cfe54578898de460d39f2bc36ef94ba9b834c', active: this.showNotification, message: this.notificationMessage, status: this.notificationStatus, userCancel: true, style: { zIndex: '999991', transform: 'translateY(20px)' } }))), h("style", { key: '9d9394d0326a80b942f7971ed15861746a7ad993' }, `:host ::slotted(.ag-side-bar) {
             width: ${filterPanelWidth} !important;
-          }`), h("grid-primary-bar", { key: 'ef06a7488132388a66f234d7ce610951ca3fa4a2', title: this.gridBarTitle, customSaveViewClick: () => this.showViewSave(), customShowViewClick: () => this.showViews(), customShowHotlistClick: () => this.showHotlist(), customShowCustomSearchClick: () => this.showCustomSearch(), customClearClick: () => this.clearFilters(), customRefreshClick: () => this.refreshGrid(), customExpandClick: () => this.expandColumns(), customExportClick: this.exportFunction ? () => this.exportFunction(this.entityName, this.filterRenderList[0]) : () => this.exportToCsv(), customInsightsClick: e => {
+          }`), h("grid-primary-bar", { key: 'b6348ced4a2ae59536945cd756cac11258eacc63', title: this.gridBarTitle, customSaveViewClick: () => this.showViewSave(), customShowViewClick: () => this.showViews(), customShowHotlistClick: () => this.showHotlist(), customShowCustomSearchClick: () => this.showCustomSearch(), customClearClick: () => this.clearFilters(), customRefreshClick: () => this.refreshGrid(), customExpandClick: () => this.expandColumns(), customExportClick: this.exportFunction ? () => this.exportFunction(this.entityName, this.filterRenderList[0]) : () => this.exportToCsv(), customInsightsClick: e => {
                 this.insightsActionOnClick(e);
             }, showInsightsAction: this.showInsightsAction, hiddenActionButtons: this.hiddenActionButtons, primaryActionLabel: this.primaryActionLabel, primaryActionClick: e => {
                 this.primaryActionOnClick(e);
-            }, primaryActionIcon: this.primaryActionIcon, customColumnViewClick: () => this.togglePanel('columns'), customFitColumnClick: () => this.fitColumns(), customFilterViewClick: () => this.togglePanel('filters'), customToggleServerClientClick: () => this.toggleServerSide(), customAdvancedSearchClick: () => this.showAdvancedSearch(), customShowGridOptionsClick: () => this.showGridOptions(), showAdvancedSearchFeature: this.showAdvancedSearchFeature, showFilterColumnFeature: this.showFilterColumnFeature, showHotlistButton: this.showHotlistButton && !(((_e = this.restrictedGridFeatures) === null || _e === void 0 ? void 0 : _e.Hotlist) && !this.userPermissions.some(permission => permission.name === this.restrictedGridFeatures.Hotlist)), hideExport: ((_f = this.restrictedGridFeatures) === null || _f === void 0 ? void 0 : _f.Export) && !this.userPermissions.some(permission => permission.name === this.restrictedGridFeatures.Export), enableAdvancedSearch: this.enableAdvancedSearch }), h("udp-pop-over-grid-action-header", { key: '3f98019eded6d266d819602f9fd9ed2eee1e3b32', isOpen: this.gridOptionsDrawerOpen, anchorElement: document.querySelector('grid-primary-bar') }, h("stencil-icon-button-grid-action-header", { key: 'dfdf51d69880fde5a10473da46b7b2398d45f165', onClick: () => {
+            }, primaryActionIcon: this.primaryActionIcon, customColumnViewClick: () => this.togglePanel('columns'), customFitColumnClick: () => this.fitColumns(), customFilterViewClick: () => this.togglePanel('filters'), customToggleServerClientClick: () => this.toggleServerSide(), customAdvancedSearchClick: () => this.showAdvancedSearch(), customShowGridOptionsClick: () => this.showGridOptions(), showAdvancedSearchFeature: this.showAdvancedSearchFeature, showFilterColumnFeature: this.showFilterColumnFeature, showHotlistButton: this.showHotlistButton && !(((_e = this.restrictedGridFeatures) === null || _e === void 0 ? void 0 : _e.Hotlist) && !this.userPermissions.some(permission => permission.name === this.restrictedGridFeatures.Hotlist)), hideExport: ((_f = this.restrictedGridFeatures) === null || _f === void 0 ? void 0 : _f.Export) && !this.userPermissions.some(permission => permission.name === this.restrictedGridFeatures.Export), enableAdvancedSearch: this.enableAdvancedSearch }), h("udp-pop-over-grid-action-header", { key: '480dd7b03bd9678410c1bf9d7acb88924d7e2194', isOpen: this.gridOptionsDrawerOpen, anchorElement: document.querySelector('grid-primary-bar') }, h("stencil-icon-button-grid-action-header", { key: '0777429c0bf2145f87a7f41ad475e7d6cbfe2770', onClick: () => {
                 this.togglePanel('columns');
                 this.showGridOptions();
-            }, tooltip: "Show/Hide Columns" }, h("unity-typography", { key: 'c214cf40e214832a7a21e531d151de92f0ce128e', variant: "button" }, "Show/Hide Columns")), h("udp-divider", { key: '038e494aceda6efbf2978bbe17e1cd84a25a78c9', size: "100%" }), h("stencil-icon-button-grid-action-header", { key: '919519a0c656824fec82d834ab6f1ccdcf7a6dc6', onClick: () => {
+            }, tooltip: "Show/Hide Columns" }, h("unity-typography", { key: '87c25bcb7cefacb6b9b65b8645c91665bf9939f1', variant: "button" }, "Show/Hide Columns")), h("udp-divider", { key: 'ed1a2ae18f7564b077247af285e6c0bb3bdad00c', size: "100%" }), h("stencil-icon-button-grid-action-header", { key: 'd3ff65af2ac6d8b728933f48c992c8332125e742', onClick: () => {
                 this.fitColumns();
                 this.showGridOptions();
-            }, tooltip: "Fit to Column" }, h("unity-typography", { key: 'f59b2f205a2323a58c53071e1b80a1ef41c25cfc', variant: "button" }, "Fit to Column")), h("udp-divider", { key: '91fb882a8b739292fd77f9b6734302314eeec0fd', size: "0px" }), h("stencil-icon-button-grid-action-header", { key: '074055300da27ae4f139c20dae8ac4c09a43cc52', onClick: () => {
+            }, tooltip: "Fit to Column" }, h("unity-typography", { key: '9070ae7f71efcae2f173be939fa255bf711ebad6', variant: "button" }, "Fit to Column")), h("udp-divider", { key: 'a59c8cdcd675478bd34c0e3db9bad66de08e888f', size: "0px" }), h("stencil-icon-button-grid-action-header", { key: '27d303bc18c56e77b00f28b648544da35257cce0', onClick: () => {
                 this.expandColumns();
                 this.showGridOptions();
-            }, tooltip: "Expand Grid" }, h("unity-typography", { key: 'cca1b3b6f3764de1ba8d36111f497807fa1baf41', variant: "button" }, "Expand Grid")), h("udp-divider", { key: 'be882a57006fe012c78d85f91e5e34b01c040b86', size: "0px" }), !this.disableSearchSwitch && (h("stencil-icon-button-grid-action-header", { key: '248a033027f7f2c1f9e05933a06b0d6be311d36c', onClick: () => {
+            }, tooltip: "Expand Grid" }, h("unity-typography", { key: '0f9862404272ad54b2ed8e7ee617c4145542def8', variant: "button" }, "Expand Grid")), h("udp-divider", { key: '19e25f0468d88e4693da59e2d7b512c8bbf772e5', size: "0px" }), !this.disableSearchSwitch && (h("stencil-icon-button-grid-action-header", { key: 'e6cce37025fd7400b9f3307a195c46e3cae02f8f', onClick: () => {
                 this.handleSearchModeToggle();
                 this.showGridOptions();
-            }, tooltip: this.enableAdvancedSearch ? 'Standard Search' : 'Advanced Search' }, h("unity-typography", { key: '14737479c7af569eefff926047a6a61b7e7e37b4', variant: "button" }, this.enableAdvancedSearch ? 'Standard Search' : 'Advanced Search')))), h("div", { key: '4297413de120150a00bcab3857424e79849f66c3', class: "second-row", style: { display: shouldHideSecondRow ? 'none' : '' } }, !this.hideBulkActions && this.rowsSelected && (h("div", { key: 'e00450f835e4bd39b0c07947b62a94d92fb71a36', class: "bulk-select" }, h("udp-badge", { key: 'cf63f6b27e007bf69c9f01d28c3bcd82edf1f8c0', content: this.selectedRowCount }, h("udp-selector", { key: 'a7533111f1a9ee4e1115347d5ebd7873986996b3', options: this.bulkActions.length > 0 ? this.formattedBulkActions : [], onChange: (e) => this.handleSelectedBulkOption(e) })))), ((_g = this.loadedViewTitle) === null || _g === void 0 ? void 0 : _g.length) !== 0 && (h("div", { key: '728131db932f7895a17f379db8a94dc3bebba562', class: "chip-wrapper" }, h("stencil-chip", { key: '61a449ca1be74f40f9857eb57fc16f6ed0e2ec87', text: this.loadedViewTitle,
+            }, tooltip: this.enableAdvancedSearch ? 'Standard Search' : 'Advanced Search' }, h("unity-typography", { key: '558125a22a8e1d5d714b22be4081a06b7af06d43', variant: "button" }, this.enableAdvancedSearch ? 'Standard Search' : 'Advanced Search')))), h("div", { key: 'a9a0ae547a462373a757c05cf375534f65708cee', class: "second-row", style: { display: shouldHideSecondRow ? 'none' : '' } }, !this.hideBulkActions && this.rowsSelected && (h("div", { key: 'd42c01a2b8dfdce5e70b98e6dcb3be79cf2e5dc1', class: "bulk-select" }, h("udp-badge", { key: '9ca967b40720a497161874a5013040b4a0b113f2', content: this.selectedRowCount }, h("udp-selector", { key: '642e579e0e1bc1fe868611bd66f5be75e16599fb', options: this.bulkActions.length > 0 ? this.formattedBulkActions : [], onChange: (e) => this.handleSelectedBulkOption(e) })))), ((_g = this.loadedViewTitle) === null || _g === void 0 ? void 0 : _g.length) !== 0 && (h("div", { key: 'b10ffb19b6f7394c3ce554b19a9dedb0ac234db6', class: "chip-wrapper" }, h("stencil-chip", { key: 'efa8c1b100d739c6dcb3977ea5323a08f51edd56', text: this.loadedViewTitle,
             // onOnDelete={this.handleDelete as any}
-            onOnDelete: this.handleViewChipDelete, color: "secondary", defaultToggled: true, leftIcon: Star16, showLeftIcon: this.selectedViewIsDefault }), h("udp-divider", { key: 'e4a657524450fd6f63d0e8444cbb9f0d78504eb0', variant: "vertical", size: "30px" }))), this.hotListActive && (h("div", { key: '24ebc8bf5cd2ab1a09fef3cb58a06b1ed9d8c3b7', class: "chip-wrapper" }, h("stencil-chip", { key: '17417dd688b011dcf159861fcb6b28d532dd4a37', text: this.hotListActive, color: "secondary", onOnDelete: this.handleRemoveHotlist, defaultToggled: true, leftIcon: List16 }), h("udp-divider", { key: '67f124b8abbb6ea6fa1bef9121c15d70599a2c12', variant: "vertical", size: "30px" }))), h("div", { key: 'a58e9971dc714549d9444c98bb6fb8dc71e97a01', class: "chip-section" }, this.filterChips.length > 0 && (h("udp-dynamic-container-with-menu", { key: '0823adf83f0ddb14ca86b087820ad6edff9f536e', id: "filterChipsContainer", externalToggle: this.externalToggle, onUdpChipClicked: (event) => this.setFilterFromChips(event.detail), menuItems: this.filterChips }))), h("div", { key: '4b6a14149e6492f64aea47d9cc5a65230b9abebd', class: "kpi" }, h("kpi-list", { key: 'ee7490e5255689fd1fe09f40302d6e59b44eabd1', kpiValues: this.kpiValues }))), this.gridError && (h("div", { key: 'de984a16037d14bf97829d428c871f2271f40c92' }, h("upd-alert-banner", { key: 'b86795271882a3c70239aa0043146b586c5b72c4', type: "error", message: `An error occurred with loading the grid with data.` }))), h("div", { key: '2ecb0b03edd474ddf03eb1b211ce09949622b28d', style: { height: '4px', backgroundColor: shouldHideSecondRow ? 'var(--accent-color)' : 'rgb(247, 245, 243)', overflow: 'hidden' } }, this.linearLoading && h("udp-linear-loader", { key: '8cb74a12e54205c01d80ded4fffa465a2658da13' })), this.noResults && (h("div", { key: '216f37ba09ab8a2164c59da2069abe73cd142626' }, h("upd-alert-banner", { key: 'b05f8fdfa3041d0d931ad68faf9292aeab01367e', onClick: () => this.refreshOnNoResults(), type: "info", message: "Sorry, no records meet your search criteria" }))), h("div", { key: '1a034a177d146b871af00f416f11058d1793459e' }, h("ag-table", { key: '508ef4f4302e2abbfa8ccfe3e41baed41ca721b1', gridOptions: this.gridOptions, licensekey: LicenseKey, height: this.gridHeight })), h("side-sheet", { key: '20335aceb8c0a35008310e6a65c77a30c19a0c5c', sideSheetButtonLabel: "Search", handleSideSheetButton: () => this.updateServerSideDatasource('', 'advanced search sheet'), title: "Advanced Search", open: this.advancedDrawerOpen, toggleDrawer: () => this.primaryActionClick('advancedSearch'), position: "right" }, h("div", { key: '1ca914f16561101f66139cff72e75c77bddce422', style: { width: '1200px' } }, h("advanced-search", { key: '7c3d54ef591d4e80ab49720afb392e28939b532e', handleDelete: filter => this.removeFilterItem(filter), filterRenderList: this.filterRenderList, filterList: this.extendedSearchFilterList, handleItemClick: headerName => this.setFilterSelections(headerName), onAdvancedSearchItemChange: (event) => this.updateSearchObject(event.detail), handleValueChanged: this.changeOperator, fetchFilters: () => this.getExtendedAdvancedSearchFilterList(), getHeaderFieldLabel: this.getHeaderFieldLabel }))), h("side-sheet", { key: 'f247053c95af887649c5f40d01268e1a10768337', widthOption: "short", title: "Views", open: this.viewDrawerOpen, toggleDrawer: () => this.primaryActionClick('views'), position: "right" }, h("div", { key: 'b34c8c0ef37985a4cd71b6e696875e4acd8e1773' }, h("div", { key: '19e3f8f86f1e6a917e820007f2b6024199fce9e0', style: { width: '450px', marginBottom: '8px' } }, h("hint-panel", { key: '13f741cf924f6a549ea2e74327f3e24b81d9a71e', hint: "Quickly access and manage your pre-configured table/grid views. These views are designed to help you focus on specific sets of data and streamline your workflow.", hideHintText: "Hide Hint" })), h("div", { key: '63d670161c4d91406f8f99d376c314741a8d7ada', style: { width: '446px' } }, this.viewListRowData &&
+            onOnDelete: this.handleViewChipDelete, color: "secondary", defaultToggled: true, leftIcon: Star16, showLeftIcon: this.selectedViewIsDefault }), h("udp-divider", { key: '05498eabbf0adad82794afa1aeade6f815701c48', variant: "vertical", size: "30px" }))), this.hotListActive && (h("div", { key: '2d918d4824be31993449e993cd88fe7c9ac4123c', class: "chip-wrapper" }, h("stencil-chip", { key: 'd3708cebd821070ff7cf1c4936f337c7951c9b2b', text: this.hotListActive, color: "secondary", onOnDelete: this.handleRemoveHotlist, defaultToggled: true, leftIcon: List16 }), h("udp-divider", { key: '64a23fcededff62d6df0f0fe18d8609c6486bbab', variant: "vertical", size: "30px" }))), h("div", { key: '736a3067ddec75228fdd84114e5ccc8de92f6d00', class: "chip-section" }, this.filterChips.length > 0 && (h("udp-dynamic-container-with-menu", { key: '31255d0eae05434a2576292f8af259f31ba19696', id: "filterChipsContainer", externalToggle: this.externalToggle, onUdpChipClicked: (event) => this.setFilterFromChips(event.detail), menuItems: this.filterChips }))), h("div", { key: 'dc613f41cb2b48b92df7d2f6c9beaa855a260b84', class: "kpi" }, h("kpi-list", { key: 'd605a061e7ede80827de7c8f2b6a090335077424', kpiValues: this.kpiValues }))), this.gridError && (h("div", { key: 'a60877c818046db8008c5900febfc31624132e0b' }, h("upd-alert-banner", { key: 'f15e52c48f370bc943069ec16ab80bcb57d88a2a', type: "error", message: `An error occurred with loading the grid with data.` }))), h("div", { key: '768014761eefb68887a55e7e61a2bece3f189f65', style: { height: '4px', backgroundColor: shouldHideSecondRow ? 'var(--accent-color)' : 'rgb(247, 245, 243)', overflow: 'hidden' } }, this.linearLoading && h("udp-linear-loader", { key: '3cdd4e20a668fe3b0324a7111b0ada9d864ea4d6' })), this.noResults && (h("div", { key: '49730d8dfd4f5f8505c0cd84f806466693dfed1f' }, h("upd-alert-banner", { key: '3c9e6505c0da47d0510f640aa05eb5b457af901d', onClick: () => this.refreshOnNoResults(), type: "info", message: "Sorry, no records meet your search criteria" }))), h("div", { key: '7c3c42e031146156d957654d3552c72e43586412' }, h("ag-table", { key: '712c5ba8633fc5dbc60affca5880b84cb902cfd2', gridOptions: this.gridOptions, licensekey: LicenseKey, height: this.gridHeight })), h("side-sheet", { key: '2dc25aa71fcb16dcbb3d0a7189159912269ceb6a', sideSheetButtonLabel: "Search", handleSideSheetButton: () => this.updateServerSideDatasource('', 'advanced search sheet'), title: "Advanced Search", open: this.advancedDrawerOpen, toggleDrawer: () => this.primaryActionClick('advancedSearch'), position: "right" }, h("div", { key: '937144f2713fbec3e782af2813094e2cef995347', style: { width: '1200px' } }, h("advanced-search", { key: 'ab9f37535a829ac4856bfb82e2ca559e6ee1424d', handleDelete: filter => this.removeFilterItem(filter), filterRenderList: this.filterRenderList, filterList: this.extendedSearchFilterList, handleItemClick: headerName => this.setFilterSelections(headerName), onAdvancedSearchItemChange: (event) => this.updateSearchObject(event.detail), handleValueChanged: this.changeOperator, fetchFilters: () => this.getExtendedAdvancedSearchFilterList(), getHeaderFieldLabel: this.getHeaderFieldLabel }))), h("side-sheet", { key: '5157413c3ab29f67d6ce656a3fb61c9a4a20441f', widthOption: "short", title: "Views", open: this.viewDrawerOpen, toggleDrawer: () => this.primaryActionClick('views'), position: "right" }, h("div", { key: '595b28b34054504ad12644faa4a39b2a3f56edc3' }, h("div", { key: 'af7d9c6ecf200514ad52d630b4fe0e5b6182842b', style: { width: '450px', marginBottom: '8px' } }, h("hint-panel", { key: 'dd6f7bb07bfd2e0437217b7c53b86bde3ce3d441', hint: "Quickly access and manage your pre-configured table/grid views. These views are designed to help you focus on specific sets of data and streamline your workflow.", hideHintText: "Hide Hint" })), h("div", { key: '0bd2a10799a18110ef62fdf974131493d4b72412', style: { width: '446px' } }, this.viewListRowData &&
             this.viewListRowData.map(item => {
                 if (item.gridViewVisibilityTypeId === 2 || item.userId.toLowerCase() === this.userId.toLocaleLowerCase()) {
                     return (h("tree-list-item", {
@@ -4424,9 +4424,9 @@ const AmbientTemplateGrid = class {
                         }, editHandler: () => this.openViewEdit(item.gridViewId, item.name, item.isDefault, item.gridViewVisibilityTypeId), deleteHandler: () => this.openDeleteViewConfirmation(item.gridViewId), showUpdateDefaultOption: true, updateDefaultHandler: () => this.updateDefaultView(item), isDefault: item.isDefault, gridViewVisibilityTypeId: item.gridViewVisibilityTypeId, showAdd: false, showViewOption: false
                     }));
                 }
-            })))), h("side-sheet", { key: '2366b12ad3fe0ce4fc2a888a3282da77233c09b2', title: "Search", sideSheetButtonLabel: "Search", handleSideSheetButton: this.handleSideSheetButtonClick, open: this.customSearchDrawerOpen, toggleDrawer: () => this.primaryActionClick('customSearch'), position: "right", buttonTransform: this.buttonTransform }, h("advanced-search-grouped", { key: '33795b531cad78d798855f6ab26e1197437ce64b', getLogicalOperatorValue: this.getLogicalOperatorValue, getLogicalOperatorCode: this.getLogicalOperatorCode, handleAddNewFilter: this.handleAddNewFilter, handleAddNewGroup: this.handleAddNewGroup, handleDelete: filter => this.removeFilterItem(filter), filterRenderList: this.filterRenderList, filterList: this.extendedSearchFilterList, handleItemClick: headerName => this.setGroupedFilterSelections(headerName), onAdvancedSearchItemChange: (event) => this.updateSearchObject(event.detail), handleValueChanged: this.changeOperator, filterObjectsWithGroups: this.filterObjectsWithGroups, fetchFilters: () => this.getExtendedAdvancedSearchFilterList(),
+            })))), h("side-sheet", { key: 'af57c5be0640aa7d295d3b30a70f7257e6a78359', title: "Search", sideSheetButtonLabel: "Search", handleSideSheetButton: this.handleSideSheetButtonClick, open: this.customSearchDrawerOpen, toggleDrawer: () => this.primaryActionClick('customSearch'), position: "right", buttonTransform: this.buttonTransform }, h("advanced-search-grouped", { key: '64fd15b182ccf7fab80d5318a803cfb66bc7f6b0', getLogicalOperatorValue: this.getLogicalOperatorValue, getLogicalOperatorCode: this.getLogicalOperatorCode, handleAddNewFilter: this.handleAddNewFilter, handleAddNewGroup: this.handleAddNewGroup, handleDelete: filter => this.removeFilterItem(filter), filterRenderList: this.filterRenderList, filterList: this.extendedSearchFilterList, handleItemClick: headerName => this.setGroupedFilterSelections(headerName), onAdvancedSearchItemChange: (event) => this.updateSearchObject(event.detail), handleValueChanged: this.changeOperator, filterObjectsWithGroups: this.filterObjectsWithGroups, fetchFilters: () => this.getExtendedAdvancedSearchFilterList(),
             // onSearchItemChanged={() => this.handleSearchItemChange()}
-            updateLogicalOperator: (_h = this.updateLogicalOperator) === null || _h === void 0 ? void 0 : _h.bind(this), handleGroupDelete: groupId => this.handleGroupDelete(groupId), recentSearchesOptions: this.recentSearchesOptions, selectRecentSearch: this.selectRecentSearch, fullClearSearch: this.fullClearSearch, findGroupById: this.findGroupById, getHeaderFieldLabel: this.getHeaderFieldLabel })), h("side-sheet", { key: '4b637b0ac782e67e77494ecb9c249c4a0adfa06e', disabled: this.showHotlistForm, widthOption: "short", sideSheetButtonLabel: "Create New Hotlist", handleSideSheetButton: () => this.toggleHotlistForm(), title: "Hot Lists", open: this.hotlistDrawerOpen, toggleDrawer: () => this.primaryActionClick('hotlists'), position: "right" }, h("div", { key: 'a5ba8d06922e2d6edd994ea4f92ce65f8dcfed6e' }, this.showHotlistForm && h("udp-hotlist-form", { key: 'afd100f1b400a5f52eed3665e01f34ff37f15240', handleFormSubmit: this.handleSaveHotlist, handleCancelClick: () => this.toggleHotlistForm() }), h("div", { key: '66a3ddab96cce9454aec1cc9eb8a16719315cf59', style: { width: '446px' } }, this.allHotlists &&
+            updateLogicalOperator: (_h = this.updateLogicalOperator) === null || _h === void 0 ? void 0 : _h.bind(this), handleGroupDelete: groupId => this.handleGroupDelete(groupId), recentSearchesOptions: this.recentSearchesOptions, selectRecentSearch: this.selectRecentSearch, fullClearSearch: this.fullClearSearch, findGroupById: this.findGroupById, getHeaderFieldLabel: this.getHeaderFieldLabel })), h("side-sheet", { key: 'e5c45d38b79f462d1e287bd70c77bd881e64eea6', disabled: this.showHotlistForm, widthOption: "short", sideSheetButtonLabel: "Create New Hotlist", handleSideSheetButton: () => this.toggleHotlistForm(), title: "Hot Lists", open: this.hotlistDrawerOpen, toggleDrawer: () => this.primaryActionClick('hotlists'), position: "right" }, h("div", { key: '36af0612c30f5163efbce8201b7d2262090623e9' }, this.showHotlistForm && h("udp-hotlist-form", { key: 'f159a17afc358e33ff894e9c3637a40c9f94601e', handleFormSubmit: this.handleSaveHotlist, handleCancelClick: () => this.toggleHotlistForm() }), h("div", { key: 'bccb6cbf2f3c15ab493b27fd27b5583a5fbaa321', style: { width: '446px' } }, this.allHotlists &&
             this.allHotlists.map(item => {
                 if (item.domain === this.entityName) {
                     return (h("tree-list-item", { label: item.name, fieldName: item.name, showViewOption: true, showAdd: this.businessObjectKey ? true : false, showDeleteOption: true, viewHandler: () => this.handleRequestHotlist(item.hotListId), deleteHandler: () => this.confirmRequestDelete(item.hotListId), onClick: () => this.handleSetSingleHotlistItem(item.hotListId), statusValue: item.isPrivate, statusClasses: {
@@ -4434,7 +4434,7 @@ const AmbientTemplateGrid = class {
                             false: 'neutral',
                         }, statusLabel: item.isPrivate ? 'Private' : 'Shared' }));
                 }
-            })))), h("save-view-form-dialog", { key: 'b5fe98767c960b86033c38ff245febd96eb2b42a', open: this.saveDialogOpen, title: this.selectedViewName ? 'Current View' : 'New View', closeDialog: () => this.showViewSave(), currentGridViewId: this.selectedGridId, currentName: this.selectedViewName, currentIsPrivate: this.selectedViewGridViewVisibilityTypeId, currentIsDefault: this.selectedViewIsDefault, handleFormSubmit: (name, isPrivate, isDefault) => {
+            })))), h("save-view-form-dialog", { key: '238c8e29a69f6e5b9953727b0a329c4e609d4d4f', open: this.saveDialogOpen, title: this.selectedViewName ? 'Current View' : 'New View', closeDialog: () => this.showViewSave(), currentGridViewId: this.selectedGridId, currentName: this.selectedViewName, currentIsPrivate: this.selectedViewGridViewVisibilityTypeId, currentIsDefault: this.selectedViewIsDefault, handleFormSubmit: (name, isPrivate, isDefault) => {
                 // Assuming this.columnState exists in this component's scope
                 this.handleViewFormSubmit(name, isPrivate, isDefault, this.gridState);
             }, handleViewAndConfigurationSubmit: (name, isPrivate, isDefault) => {
@@ -4447,11 +4447,11 @@ const AmbientTemplateGrid = class {
                         this.handleViewAndConfigurationsUpdate(this.selectedViewName, this.selectedViewGridViewVisibilityTypeId, this.selectedViewIsDefault, this.gridState);
                     }
                 }
-            } }), h("edit-view-form-dialog", { key: '979faf713d66a74d5630a7cb3a7597e88a1c7adc', open: this.editDialogOpen, title: "Edit View", closeDialog: () => this.closeViewEdit(), currentGridId: this.selectedGridId, currentName: this.selectedViewName, currentGridViewVisibilityTypeId: this.selectedViewGridViewVisibilityTypeId, currentIsDefault: this.selectedViewIsDefault, handleFormSubmit: (gridId, name, isPrivate, isDefault) => {
+            } }), h("edit-view-form-dialog", { key: 'a1b1d637d504b2bda3b696a8db829776e9339b76', open: this.editDialogOpen, title: "Edit View", closeDialog: () => this.closeViewEdit(), currentGridId: this.selectedGridId, currentName: this.selectedViewName, currentGridViewVisibilityTypeId: this.selectedViewGridViewVisibilityTypeId, currentIsDefault: this.selectedViewIsDefault, handleFormSubmit: (gridId, name, isPrivate, isDefault) => {
                 this.handleViewUpdate(gridId, name, isPrivate, isDefault);
-            } }), h("div", { key: 'dc1b28765fea40ff660fe060d62306e8958b0008' }), h("fluent-dialog", { key: '4749a681a594c062c9211dd2e985e964a47f29da', title: "Delete Hotlist", message: "Are you sure you want to delete this hotlist?", actionOne: () => this.handleRequestDeleteHotlist(), actionTwo: () => this.toggleDeleteDialog('hotlist'), labelOne: "Confirm", labelTwo: "Cancel", open: this.confirmDialog }, h("div", { key: 'e9a95f63f1538d9fa9ef007fac99af421a62269d' }, "This will not delete any of the data but only the records ", h("br", { key: 'b90bf325b71620bbf15ec4c71cccffec8b50f1ce' }), "from the hotlist and the hotlist itself.", ' ')), h("fluent-dialog", { key: 'ebb260ee17fea7d176737ae1e6190e7d3b46cbcd', title: "Delete View", message: "Are you sure you want to delete this view?", actionOne: () => this.handleDeleteView(), actionTwo: () => this.toggleDeleteDialog('View'), labelOne: "Confirm", labelTwo: "Cancel", open: this.confirmDialogDeleteView }, h("div", { key: 'bb08b2949e15b78460fb8f5e6aab6c7f5b22eeda' }, "This will not delete any of the data but only the settings ", h("br", { key: '82d84f443b8939387b516011d9270492f18dee86' }), "saved to display this view.", ' ')), h("fluent-dialog", { key: '5a0f02ecf465e7cd3324caff66fb7b432b8aabf4', title: "Update View", message: "Are you sure you want to update this view?", actionOne: () => this.handleViewAndConfigurationsUpdate(this.selectedViewName, this.selectedViewGridViewVisibilityTypeId, this.selectedViewIsDefault, this.gridState), actionTwo: () => this.showViewEditConfirmation(false), labelOne: "Confirm", labelTwo: "Cancel", open: this.editViewConfirmationDialogOpen }, h("div", { key: '8aca6e90ce41ef5a8fd02ec7cd23fcfe774093ab' }, "This is a public view. Any changes made to it will be seen by others when they load this view. ")), h("fluent-dialog", { key: 'f4268fb5190b1fb58ba988a33769d59a5e002d1b', title: 'Toggle Search Mode to ' + (this.enableAdvancedSearch ? 'Standard' : 'Advanced') + ' Search', message: this.enableAdvancedSearch
+            } }), h("div", { key: '0506d9a6493cdcedd089c634151a3929927964ee' }), h("fluent-dialog", { key: '6f0aca20d4b9834a4d7a2b1e59047143f2621f8f', title: "Delete Hotlist", message: "Are you sure you want to delete this hotlist?", actionOne: () => this.handleRequestDeleteHotlist(), actionTwo: () => this.toggleDeleteDialog('hotlist'), labelOne: "Confirm", labelTwo: "Cancel", open: this.confirmDialog }, h("div", { key: 'bae0df0958ecc33d23436e4250fbf70bd2461de6' }, "This will not delete any of the data but only the records ", h("br", { key: '9fac7c6c2794d7b6a8ddda628099bd06652d0352' }), "from the hotlist and the hotlist itself.", ' ')), h("fluent-dialog", { key: '806917e42de6b9b662af5561ef7861ded3d49187', title: "Delete View", message: "Are you sure you want to delete this view?", actionOne: () => this.handleDeleteView(), actionTwo: () => this.toggleDeleteDialog('View'), labelOne: "Confirm", labelTwo: "Cancel", open: this.confirmDialogDeleteView }, h("div", { key: '034ee23aaadf1d55e49e5ed40221a06b37ff5a04' }, "This will not delete any of the data but only the settings ", h("br", { key: '9db72e1787e85f2530f5fb93a7386a90ce8eee68' }), "saved to display this view.", ' ')), h("fluent-dialog", { key: '99480ac4cdeb2df5d6664a174e7fe63b800880e1', title: "Update View", message: "Are you sure you want to update this view?", actionOne: () => this.handleViewAndConfigurationsUpdate(this.selectedViewName, this.selectedViewGridViewVisibilityTypeId, this.selectedViewIsDefault, this.gridState), actionTwo: () => this.showViewEditConfirmation(false), labelOne: "Confirm", labelTwo: "Cancel", open: this.editViewConfirmationDialogOpen }, h("div", { key: '4018987b86e4e163a5050afa36c8c9c0e6bd16f3' }, "This is a public view. Any changes made to it will be seen by others when they load this view. ")), h("fluent-dialog", { key: '717000bba187ba84ef937da14627616500d17fc6', title: 'Toggle Search Mode to ' + (this.enableAdvancedSearch ? 'Standard' : 'Advanced') + ' Search', message: this.enableAdvancedSearch
                 ? `Are you sure you want to toggle the search mode to standard search?`
-                : `Are you sure you want to toggle the search mode to advanced search?`, actionOne: () => this.confirmSearchModeToggle(), actionTwo: () => this.toggleSearchModeConfirmation(false), labelOne: "Confirm", labelTwo: "Cancel", open: this.toggleSearchModeConfirmationDialogOpen }, h("div", { key: 'cf49c4a0cee0f0aaeba98fe92a55ba82dea212f8' }, this.enableAdvancedSearch
+                : `Are you sure you want to toggle the search mode to advanced search?`, actionOne: () => this.confirmSearchModeToggle(), actionTwo: () => this.toggleSearchModeConfirmation(false), labelOne: "Confirm", labelTwo: "Cancel", open: this.toggleSearchModeConfirmationDialogOpen }, h("div", { key: '33b5c68ff42a58c8a2bd5d7dece1b4e772e866ea' }, this.enableAdvancedSearch
             ? 'The advanced search functionality will be disabled, all advanced search filters will be cleared and the grid will be reset to its default state.'
             : 'The standard search functionality will be disabled and any existing standard filters will persist to the advanced search.'))));
     }
@@ -4504,7 +4504,7 @@ const AppBar = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '90d237af2bda122e231ed0d4934f41a2c7b21992', class: "header" }, h("stencil-icon-button", { key: 'a35a9b3355284d972f5fd564c0b133ed32114b63', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: 'bd93a6c415dcab2421175e13c9e7a0807f78b85e', variant: 'data-display-one' }, " ", h("slot", { key: '6c4b317a6fd338dfdda3a77991ed78fd1702b995' }), "   "), h("a", { key: 'b2066316b5184675a04c2481fe1856785211b390', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: '3ba55346dea1a86fd90c63d366661dfb5e77d871', class: "header__logo" }), h("div", { key: '4cc724ff9b5f73262503172656b2439313552285', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: '7c3a3275ca99c1a328d86dd2b90a2bafe3290d5a', class: "header__global" }, h("udp-avatar", { key: '9a4db5288bce2550d56acfd124b57165e08b8d08', username: this.username }))));
+        return (h("div", { key: 'cad9b6256dbad649083ef3e26f13bff47e3d427d', class: "header" }, h("stencil-icon-button", { key: '79958d8a6a7993575923b87ac3a61180116fc614', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: 'ccd072e7ca26b9070ba990289b637608e903d1c0', variant: 'data-display-one' }, " ", h("slot", { key: 'af2e0183590ea54d48be89d36418281633fc6453' }), "   "), h("a", { key: '36a8c2006d5d0c25d9f4ef2691f86324d875503f', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: '2ccd08207f64f0d9a4854f34119765ed5fd48595', class: "header__logo" }), h("div", { key: 'b6cacb7037f36dfb81cb7e66f8cf268b96f84ae9', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: '9c147941d4b7d762cd9a1d97e7053190f3e6f0fc', class: "header__global" }, h("udp-avatar", { key: '15830daddc4f25488ec07014720762232e5e304a', username: this.username }))));
     }
 };
 AppBar.style = appBarCss;
@@ -4604,8 +4604,8 @@ const EditViewFormDialog = class {
         this.fetchedCurrentView = false;
     }
     render() {
-        return (h("fluent-dialog", { key: '13510c696c9ee250e34511d939ec2162e6a4c798', open: this.open, actionOne: () => { this.handleSubmit(); this.closeDialog(); this.resetFetchedCurrentView(); }, actionTwo: () => { this.closeDialog(); this.resetFetchedCurrentView(); }, handleClose: this.handleClose, labelOne: "Save Update", labelTwo: "Cancel", title: this.title, disableOne: !this.name }, h("form", { key: '9a9bc362d32e3738d14b3a7f7120463cc8474236', class: "edit-form" }, h("text-field", { key: '7dd193fc122d44d11a5d879a9a0343a00d3f5139', label: "View Name", value: this.name, onInput: (event) => this.handleNameChange(event) }), this.fetchedCurrentView &&
-            h("div", { key: 'e236df4118070b03b4a39cbc22d7e6e4dbf434ed', class: "toggle-options" }, h("div", { key: '6485d8d5bb333ad83a89312d342d08a5a75a601a' }, h("stencil-toggle", { key: '112c950264146cf27b715d008345dab4386564ee', label: "Private", checked: this.isPrivate === 1, onToggledChange: this.handlePrivateChange }), " "), h("div", { key: 'fdae4c4d5b87b027b72e59a5d53a8df08878d76b' }, h("stencil-toggle", { key: '740f081c7a644a30ce096a3a3e6b847767365712', label: "Default", checked: this.isDefault, onToggledChange: this.handleDefaultChange, style: { marginTop: '10px' } }))))));
+        return (h("fluent-dialog", { key: '7d9f36f3e3f076bf8e9b9ea76678c3a65431922c', open: this.open, actionOne: () => { this.handleSubmit(); this.closeDialog(); this.resetFetchedCurrentView(); }, actionTwo: () => { this.closeDialog(); this.resetFetchedCurrentView(); }, handleClose: this.handleClose, labelOne: "Save Update", labelTwo: "Cancel", title: this.title, disableOne: !this.name }, h("form", { key: '582cce3a0ea5f9a4670b2c67f7c4096f3cf97884', class: "edit-form" }, h("text-field", { key: 'c8b700f8db69b68666a03c539f893d29fe507d72', label: "View Name", value: this.name, onInput: (event) => this.handleNameChange(event) }), this.fetchedCurrentView &&
+            h("div", { key: '6ebbde8f024c03916bc1100e964d440868749154', class: "toggle-options" }, h("div", { key: 'f699dfeecb0ddf085d9c3d5a8dfc42c3987ae53e' }, h("stencil-toggle", { key: '8c1e54b90e023140879bafa1377388f8a4a18432', label: "Private", checked: this.isPrivate === 1, onToggledChange: this.handlePrivateChange }), " "), h("div", { key: '562103cb25f1fa01d4e0749f8c0a3cd400c809f6' }, h("stencil-toggle", { key: 'aaafe2ead718dae3489df1dd24027fb3c8a8300d', label: "Default", checked: this.isDefault, onToggledChange: this.handleDefaultChange, style: { marginTop: '10px' } }))))));
     }
     get el() { return getElement(this); }
 };
@@ -4633,9 +4633,9 @@ const FluentDialog = class {
         this.buttonThreeHidden = true;
     }
     render() {
-        return (h("div", { key: '04a8aa4e472a39d524ee138afe8a569787c75843', class: { 'overlay': true, 'overlay-open': this.open } }, h("div", { key: 'bd58e65752384f3091e39a2a481a924c9e008e76', class: { 'dialog-container': true, 'dialog-open': this.open } }, h("div", { key: '74992ef8c8f6f84eb7206890813c7f8b2e1df7e6', class: "dialog-title", id: this.titleId }, h("unity-typography", { key: '319d68746d8fe968b36562e55c68328828cc20c1', variant: "h3" }, this.title)), h("div", { key: '1f1eabf51753f8bb0149e00b5dae4fb7bfe5e92d', class: "dialog-content" }, h("unity-typography", { key: '185821d98461721147e8131ceb069f74799a18ef', variant: "h6" }, this.message), h("unity-typography", { key: '39ad78492867945a3b21d1805aa561f38ed7c27d', variant: "body" }, h("slot", { key: 'a4c259a59a5ce8ee3eba5ec6b39a46718d3e9348' }))), h("div", { key: '3985e215eefe1e27d831ab3369b2a8bfd21f2ef2', class: "dialog-actions" }, !this.buttonTwoHidden && (h("custom-button", { key: '382eb5cbf946b6c4e57d3794aeb6f31b7d4dd143', size: "tall", variant: "text", onClick: () => this.actionTwo() }, this.labelTwo)), !this.buttonThreeHidden && (h("custom-button", { key: '08b6ce4fa8519d5b02cb2215cabae04ca1371c75',
+        return (h("div", { key: 'a67918a009b7850a24efa7fc0e778ed8dccaae6b', class: { 'overlay': true, 'overlay-open': this.open } }, h("div", { key: 'd4475170ef03b690c76b8a21306c50cdf9a146b4', class: { 'dialog-container': true, 'dialog-open': this.open } }, h("div", { key: '17cf58f182a6f04fb1397addbba892b51c512cef', class: "dialog-title", id: this.titleId }, h("unity-typography", { key: '7ed19079acd30bedace74b84a2526dfdc2854daf', variant: "h3" }, this.title)), h("div", { key: 'c17f3edde2e241dd13723f1a0baed138320bf532', class: "dialog-content" }, h("unity-typography", { key: 'f3b39b44284dc013069ad52232b0973fe8588b9b', variant: "h6" }, this.message), h("unity-typography", { key: '2162c0081d1bc1238d76b2acf88483ae4bfc8672', variant: "body" }, h("slot", { key: '39019b9967ba312d50dd3fd64a24089cf2cd65e8' }))), h("div", { key: '9f50fb36d28f9f62cf829328d6786fc9bf0795cb', class: "dialog-actions" }, !this.buttonTwoHidden && (h("custom-button", { key: '1bc3782ee17bd5baa10c3860b22de6bb3747764f', size: "tall", variant: "text", onClick: () => this.actionTwo() }, this.labelTwo)), !this.buttonThreeHidden && (h("custom-button", { key: '3bf6eb9efdc79a9fd154dc45fcdc5fd79f2a450c',
             //class="primary-action"
-            onClick: () => this.actionThree(), size: "tall", variant: "text", disabled: this.disableThree }, this.labelThree)), !this.buttonOneHidden && (h("custom-button", { key: '50b1433782b04b4bb04ec0f6fc4adb45f535e26a', class: "primary-action", variant: "text", onClick: () => this.actionOne(), size: "tall", disabled: this.disableOne }, this.labelOne))), this.progress && h("div", { key: '38c5abae188957796b93f80f5a93edafc1d600c5', class: "linear-progress" }))));
+            onClick: () => this.actionThree(), size: "tall", variant: "text", disabled: this.disableThree }, this.labelThree)), !this.buttonOneHidden && (h("custom-button", { key: 'b14268f5d3ed523dce91c3e6ab151bf6df782e48', class: "primary-action", variant: "text", onClick: () => this.actionOne(), size: "tall", disabled: this.disableOne }, this.labelOne))), this.progress && h("div", { key: 'd2b065ffacc638e5e3b2a1f4b8bd7b1f4af28a6b', class: "linear-progress" }))));
     }
 };
 FluentDialog.style = fluentDialogCss;
@@ -4785,7 +4785,7 @@ const GridPrimaryBar = class {
         this.updateHideBar();
     }
     render() {
-        return (h("div", { key: '9c96efe374beb272cf4db272a72ff2c3445c85c7', class: "header-bar", style: !this.hideBar ? { background: 'var(--accent-color)' } : undefined }, h("div", { key: 'ab0d4e5977801ec737ed3c2b1ad1ebabf4bf237b', class: "title-section" }, h("div", { key: 'a2a7b84fcdd51d96ada9ee897c2001811e934ae5' }, h("unity-typography", { key: 'f9ae10f04be89dcae6dce10a957c75ad39cff0f5', variant: "h4" }, this.title, " "), ' ')), h("div", { key: 'e1b7fb0b8d9740533c021e67e7199bf4a5e4dca8', class: "button-section" }, h("div", { key: 'ec5642d7c5c0268990d0db6c2613d46293707e0a' }, h("slot", { key: 'd1fe2e205a150cd6ec64eb8911c7b7080b3448b3' })), this.defaultActionButtons.map(btn => {
+        return (h("div", { key: '520856f627fd84e8bdc9c481ff2e475fd7dfb66a', class: "header-bar", style: !this.hideBar ? { background: 'var(--accent-color)' } : undefined }, h("div", { key: '8a7655a50007c944cf6b28c5b8936abc7e3393c0', class: "title-section" }, h("div", { key: 'f0ddcc41fb5b35778a6d2424a4ceb3cd0f618fa4' }, h("unity-typography", { key: '113ef0b8e7ea2f113a263e25541acbaf043b4bee', variant: "h4" }, this.title, " "), ' ')), h("div", { key: '595a3de59f7f639ba9c372fcc8f6f198214fc0e5', class: "button-section" }, h("div", { key: 'e2cbb462d75f84f9aa3a7f9b75f05b1a19ccd326' }, h("slot", { key: '49d2dd8953d70e159fbd404baf168d2b56146c87' })), this.defaultActionButtons.map(btn => {
             const clickHandler = (event) => {
                 if (btn.clickHandler) {
                     btn.clickHandler(event);
@@ -4798,7 +4798,7 @@ const GridPrimaryBar = class {
                 return (h("stencil-icon-button-grid-action-header", { showLabel: this.showLabels, secondary: btn.secondary, icon: btn.icon, onClick: clickHandler, tooltip: btn.tooltip, iconClassName: btn.iconClassName }, btn.icon && h("i", { class: btn.icon }), btn.label.toLowerCase() === 'save' || (!this.hiddenLabels.includes(btn.label) && btn.showLabel) ? h("span", null, btn.label) : null));
             }
             return null;
-        }), this.primaryActionClick && this.primaryActionLabel && (h("custom-button", { key: 'e803e7ccc08a52be4b5004d4d9631ab582b8201e', label: this.primaryActionLabel, onClick: (event) => this.primaryActionClick(event), size: "tall" }, this.primaryActionIcon && h("udp-icon", { key: '91918fe33cf27f733075e9f08efe0ae303b98079', iconName: this.primaryActionIcon, darkIcon: false }))))));
+        }), this.primaryActionClick && this.primaryActionLabel && (h("custom-button", { key: '34a103505b82064aeb9f6ddf6ff8d75c6881538c', label: this.primaryActionLabel, onClick: (event) => this.primaryActionClick(event), size: "tall" }, this.primaryActionIcon && h("udp-icon", { key: '0cefb9ec69d19ad7609338521a4efcd5e8443e1a', iconName: this.primaryActionIcon, darkIcon: false }))))));
     }
     static get watchers() { return {
         "window:resize": ["onResize"],
@@ -4831,7 +4831,7 @@ const KpiList = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '85c225971e2e51a0a0808165130c60c6734dc707', class: "kpi-container" }, this.kpiValues.map((kpi, index) => (h("div", { class: "kpi-item" }, h("span", { class: "kpi-label", style: {
+        return (h("div", { key: 'a04e6b402e88c914e2c53bf45d587a819544dda6', class: "kpi-container" }, this.kpiValues.map((kpi, index) => (h("div", { class: "kpi-item" }, h("span", { class: "kpi-label", style: {
                 fontSize: ' 0.875rem',
                 fontWeight: '300',
                 lineHeight: '0.25',
@@ -6327,7 +6327,7 @@ const PrimaryActionHeader = class {
     //   }
     render() {
         console.log('active tab', this.activeTabIndex);
-        return (h("div", { key: '2b5cd6ddd163ddef49cc7fa95dab7f4a9911939e', class: "header-bar" }, h("div", { key: '0b74461e94c2263eb92a1faf4e2783eda26a29da', class: "title-section" }, h("unity-typography", { key: '0a21709957bdb4de3dcd85b882946b960caa7447', variant: "h4" }, this.title)), this.tabs && (h("div", { key: '1b224383283f2e875e4e4bec85f97d548078f256', class: "tabs" }, h("udp-tabs", { key: '3f2af545b1af466bf376e248ddadda48fceebb4d' }, h("button", { key: '7ba0d458d14def7c1fb1c32852e89097a85a07c2', class: this.activeTabIndex === 0 ? 'active' : '', slot: "tab-title", onClick: () => this.selectTab(0) }, "Demo Grid"), h("button", { key: '7dec1019d203c03c6ab9485c0aa83008b7970cdc', class: this.activeTabIndex === 1 ? 'active' : '', slot: "tab-title", onClick: () => this.selectTab(1) }, "Other Content")))), h("div", { key: 'f2a2f4e44fbc245ef82f8f3fe125cde71c3cc37e', class: "button-section" }, this.defaultActionButtons.map(btn => {
+        return (h("div", { key: 'a747d9aeac8c5d98c8781f91c0306e20279886df', class: "header-bar" }, h("div", { key: '167eafc92eec5750035e6cfba200893b7cc5e10b', class: "title-section" }, h("unity-typography", { key: '2aa18ffa1d295e3ba51cea9fd2c842f7bbb35004', variant: "h4" }, this.title)), this.tabs && (h("div", { key: 'd5b3255eadb6ba4961e1c312861ac814ea8c8743', class: "tabs" }, h("udp-tabs", { key: 'c1c5d42e23ec1b25963127a2b081d86abeb9e3b6' }, h("button", { key: '79659833299583267aa6589a5e36142256681dc3', class: this.activeTabIndex === 0 ? 'active' : '', slot: "tab-title", onClick: () => this.selectTab(0) }, "Demo Grid"), h("button", { key: '0635c5ef0354b88c2a0e1793a5249dd04fc70015', class: this.activeTabIndex === 1 ? 'active' : '', slot: "tab-title", onClick: () => this.selectTab(1) }, "Other Content")))), h("div", { key: 'a7da9e4e8385692aa04b1196e49d4b0d973b35d2', class: "button-section" }, this.defaultActionButtons.map(btn => {
             // Determine the actual icon to use
             const ActualIcon = this.getIconComponent(btn.icon, btn.customIcon);
             const clickHandler = (event) => {
@@ -6342,7 +6342,7 @@ const PrimaryActionHeader = class {
                 return (h("stencil-icon-button", { secondary: btn.secondary, onClick: clickHandler, tooltip: btn.tooltip }, this.renderIcon(ActualIcon), !this.hiddenLabels.includes(btn.label) && btn.showLabel && h("span", null, btn.label)));
             }
             return null;
-        }), !this.actionButtonLabel && h("div", { key: '6cd80a675dab2d514a8ddfa819162ed2219d41c1', class: "right-margin" }), this.actionButtonLabel && (h("udp-button", { key: '0c714349e245f2554667b03de3bdb0e66d44581d', variant: "contained", color: "secondary", onClick: event => this.primaryActionClick(event) }, this.actionButtonLabel)))));
+        }), !this.actionButtonLabel && h("div", { key: '20aa08ddc0f999d58f401594bfe42802d100afac', class: "right-margin" }), this.actionButtonLabel && (h("udp-button", { key: 'd63ae8c88041c2b07d61e2ae94cb28df17c58d4e', variant: "contained", color: "secondary", onClick: event => this.primaryActionClick(event) }, this.actionButtonLabel)))));
     }
 };
 PrimaryActionHeader.style = primaryActionHeaderCss;
@@ -6393,11 +6393,11 @@ const SaveViewFormDialog = class {
         }
     }
     render() {
-        return (h("fluent-dialog", { key: 'b9ff8a67921043d715ef9706a63e045f21cede3e', open: this.open, actionOne: () => {
+        return (h("fluent-dialog", { key: 'c2926169d24d5964ba0a202199e3a5f46186075b', open: this.open, actionOne: () => {
                 this.handleSubmit();
             }, actionTwo: this.closeDialog, actionThree: () => {
                 this.handleViewUpdate();
-            }, handleClose: this.handleClose, labelOne: "Save as Copy", labelTwo: "Cancel", labelThree: "Save View", title: this.title, disableOne: !this.name, buttonThreeHidden: !this.gridViewId }, h("form", { key: 'a46321d2b7c8468d36971c3a1228071563e85760', class: "save-form" }, h("text-field", { key: '49355f6a92a88878f690e58caff0fe8eb9c04813', label: "View Name", placeholder: "Create a name for your view", value: this.name, onInput: (event) => this.handleNameChange(event) }), h("div", { key: 'b75313634e10d55bef6814e101a3309554d94cab', class: "toggle-options" }, h("div", { key: '83c1b04dc322d116efc8985eb1607cdc498630ee' }, h("stencil-toggle", { key: 'b8ce2a3f60b9eb60543b64ade3ff91cad03e73bf', label: "Private", checked: this.isPrivate === 1, onToggledChange: this.handlePrivateChange }), ' '), h("div", { key: '707e135e7d8121213f4a3aebf1877e5cf5967990' }, h("stencil-toggle", { key: 'e1e6b37ef6978493439da65575e7112ff56b12c1', label: "Default", checked: this.isDefault, onToggledChange: this.handleDefaultChange, style: { marginTop: '10px' } }))))));
+            }, handleClose: this.handleClose, labelOne: "Save as Copy", labelTwo: "Cancel", labelThree: "Save View", title: this.title, disableOne: !this.name, buttonThreeHidden: !this.gridViewId }, h("form", { key: 'c4157e2d148ef0566bcaa19e07d4c1699df65868', class: "save-form" }, h("text-field", { key: '8415b9b28f1d8405325d1066158c2b7279dd394b', label: "View Name", placeholder: "Create a name for your view", value: this.name, onInput: (event) => this.handleNameChange(event) }), h("div", { key: '13b731a0dacf1acdc0829ee3d1589ce93b57362f', class: "toggle-options" }, h("div", { key: '63c23d978e2b05c7eaebaa1128592c4776a18db7' }, h("stencil-toggle", { key: 'aa2edb2c9e399ab133e48789fa4428b234456e18', label: "Private", checked: this.isPrivate === 1, onToggledChange: this.handlePrivateChange }), ' '), h("div", { key: '530df15c84ff4cf6748ecc43d9b99a1897601548' }, h("stencil-toggle", { key: 'fe4e4b97c11e6a3d3ff536660c8a59fc58296286', label: "Default", checked: this.isDefault, onToggledChange: this.handleDefaultChange, style: { marginTop: '10px' } }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -6501,7 +6501,7 @@ const SearchListItem = class {
         });
     }
     render() {
-        return (h("div", { key: '2f9faea0db2a5169b65604d68f9ca20eafd6f861', class: "list-item" }, h("div", { key: 'b82093bc34c325f67524a1d3186539caa36e2152', class: "list-body" }, h("div", { key: 'b3dafb84904a51cea0056bce923a568a0aec5be4', class: "name" }, h("unity-typography", { key: '6601c3002021d53aa9e538184160a7f60e92a520', variant: "button" }, this.label)), h("div", { key: '0062f55adaff01fb3c04542bda56c06ce0af5391', style: { width: '200px' } }, h("udp-selector", { key: this.searchOperator, initialValue: this.searchOperator, options: this.selectorOptions, disabled: this.isInitialSearchItem || this.isDefault, onChange: (event) => this.handleOperatorSelected(event) })), h("div", { key: 'f2138827a4cb3a16a366c7fca18f60ca39106004', class: "input" }, h("text-field", { key: 'ee52bc7081269037056c185a0ed7f491c0d5db24', value: this.name, disabled: this.isInitialSearchItem, onBlur: this.handleInputBlur }))), (!this.isInitialSearchItem || !this.isDefault) && h("stencil-icon-button", { key: '2894cf78c8a2ee6ea23db2485bf5807d6d3374c6', icon: Close24, onClick: this.handleDelete })));
+        return (h("div", { key: '9fb346269c6a44b051c4a20cc39bfbc623ed9511', class: "list-item" }, h("div", { key: '46a6a66eb5f52df6e8bec384bbf297dbcf0d4e2c', class: "list-body" }, h("div", { key: '7d9f84c9bd1fba13c9c9bcca525e1c785975de24', class: "name" }, h("unity-typography", { key: '9f5addc8ff5141cd43a823245ae1562f0276e772', variant: "button" }, this.label)), h("div", { key: '934360ca2bd4d9f2bc27b984105a08b99a7e1430', style: { width: '200px' } }, h("udp-selector", { key: this.searchOperator, initialValue: this.searchOperator, options: this.selectorOptions, disabled: this.isInitialSearchItem || this.isDefault, onChange: (event) => this.handleOperatorSelected(event) })), h("div", { key: '797210e0f73d37629b38daee87679d6c6ed22957', class: "input" }, h("text-field", { key: '4a66cf9f3a2600ef5bc690b74050866abb8c8bc6', value: this.name, disabled: this.isInitialSearchItem, onBlur: this.handleInputBlur }))), (!this.isInitialSearchItem || !this.isDefault) && h("stencil-icon-button", { key: '24001c57bab2a78885fe3853571893f1fcb8e8fd', icon: Close24, onClick: this.handleDelete })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -6875,16 +6875,16 @@ const StencilToggle = class {
         const buttonId = `${baseId}-button`;
         const labelId = `${baseId}-label`;
         const isError = !!this.errorMessage;
-        const labelElement = this.label && (h("label", { key: 'a045a91655fb11fac16536c29c967c137178f9bb', id: labelId, class: `toggle-label label-${this.labelPosition}`, htmlFor: !this.disabled ? buttonId : undefined }, h("unity-typography", { key: '7defcfbba676246910cb08882199a2397391a24e', variant: "caption-text" }, this.label)));
-        const toggleElement = (h("div", { key: '0e67d5c3679c0f7692add642f008223993344568', class: `toggle-container ${this.toggled ? 'toggled' : ''}` }, h("button", { key: 'bfd9302e70c4b28fbda66249e2f62e112e75d9d4', id: buttonId, onClick: () => this.toggleButton(), disabled: this.disabled, "aria-checked": this.toggled.toString(), "aria-labelledby": labelId, role: "switch" }, h("span", { key: '8ad3d746a78e9108a49c0423ffd8ae22fcd3f543', class: "toggle-knob" }))));
-        return (h(Host, { key: 'e9744c4d87c09d74824b77269b0ef6812ab0e6dd', class: {
+        const labelElement = this.label && (h("label", { key: 'd70c0b30b934987f5867dea6af373d5c9b46064f', id: labelId, class: `toggle-label label-${this.labelPosition}`, htmlFor: !this.disabled ? buttonId : undefined }, h("unity-typography", { key: 'dcabb099ba822136e0540dfa9d1799f8cd73c06e', variant: "caption-text" }, this.label)));
+        const toggleElement = (h("div", { key: '8209c9d3215fb2cbc1cb6d495c35c56cf91cd758', class: `toggle-container ${this.toggled ? 'toggled' : ''}` }, h("button", { key: 'b6c27babc037c4df1614b653ad56e50a9c51a4e8', id: buttonId, onClick: () => this.toggleButton(), disabled: this.disabled, "aria-checked": this.toggled.toString(), "aria-labelledby": labelId, role: "switch" }, h("span", { key: '77133f23b5ebfa3a22667abdafbef32885f2d23a', class: "toggle-knob" }))));
+        return (h(Host, { key: '0795d6d5455dab4c66e715181f31a76457dbf154', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
                 'udp-input--checked': this.toggled,
                 [`udp-input--margin-${this.margin}`]: true,
                 [`udp-input--size-${this.size}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false' }, h("div", { key: '51288ef853d5ed875831e23ec0d2b2ab5b5cef4c', class: `toggle-wrapper position-${this.labelPosition}` }, this.labelPosition === 'left' && labelElement, toggleElement, this.labelPosition === 'right' && labelElement, this.labelPosition === 'bottom' && labelElement, this.errorMessage && h("div", { key: 'bc19ff90dc89dd84f867aa1bfffc34fa06a57f65', class: "error-message" }, this.errorMessage))));
+            }, "aria-invalid": isError ? 'true' : 'false' }, h("div", { key: '08ea551f5a08c30d6516b43f1e2706de3629bfb5', class: `toggle-wrapper position-${this.labelPosition}` }, this.labelPosition === 'left' && labelElement, toggleElement, this.labelPosition === 'right' && labelElement, this.labelPosition === 'bottom' && labelElement, this.errorMessage && h("div", { key: '0ae44ccd60c71290f862db4de185fd6902687ab8', class: "error-message" }, this.errorMessage))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7066,7 +7066,7 @@ const TextField = class {
             'bx--text-input:user-invalid': isError,
             'text-field--disabled': this.disabled,
         };
-        return (h(Host, { key: '3d786be38d2098b00476e9a5cc9ac08349db06b8', class: {
+        return (h(Host, { key: '8a904b91424ef0f338b577d495b16cab865500ea', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -7074,9 +7074,9 @@ const TextField = class {
                 'udp-input--required': this.required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '979bafec5f0506413db35f8361d92beeec357f87', class: "bx--form-item" }, h("unity-typography", { key: 'edd1b93537092c3096e8e8e0667210cd330782c1', variant: "caption-text" }, h("label", { key: 'a6f90dafa0028b60c6963e62ebab679e9f302ebf', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (h("input", { id: this.id, type: "hidden", value: this.internalValue })) : (h("input", { id: this.id, type: "text", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readonly: this.readonly, maxLength: this.maxCharacter, inputMode: this.inputMode, onInput: this.onInput, onChange: this.onChange,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '2a807fc813c3e3d774de4d9557921021db0836de', class: "bx--form-item" }, h("unity-typography", { key: '27a02c53a522b8339c5a0d8be4e8134e078438e0', variant: "caption-text" }, h("label", { key: '9e44649e7369b0c48a9394a3cafe37c92d8dccc4', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (h("input", { id: this.id, type: "hidden", value: this.internalValue })) : (h("input", { id: this.id, type: "text", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readonly: this.readonly, maxLength: this.maxCharacter, inputMode: this.inputMode, onInput: this.onInput, onChange: this.onChange,
             //@ts-ignore
-            udprecordid: 'udpRecord-text-field-' + this.id })), isError && (h("div", { key: '14fbf61e4d11054de7c29a901b93900f03781c0e', class: "error-message" }, h("unity-typography", { key: '7e5d81b981ba343ee52ac12fc4eda2134dc57d23', variant: "caption-text", color: "error" }, this.errorMessage))))));
+            udprecordid: 'udpRecord-text-field-' + this.id })), isError && (h("div", { key: 'f16c206feb4536ffef669187d2535b123f43d6c1', class: "error-message" }, h("unity-typography", { key: 'cd7b71a7179fd524053835a60cd3affd26b70ff1', variant: "caption-text", color: "error" }, this.errorMessage))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7283,9 +7283,9 @@ const UdpAmbientToolTip = class {
     render() {
         // Check if content is provided before rendering the tooltip content.
         const shouldDisplayTooltip = !!this.isVisible && !!this.content && this.content.trim() !== '';
-        return (h("div", { key: '213f2dd7bcd6470d4a5bf6ae953fbcdd2ec775dc', class: "tooltip-wrapper", ref: el => (this.wrapperEl = el), onMouseOver: this.showTooltip, onMouseOut: this.hideTooltip }, h("slot", { key: '9088f10428a250bd218c8429722b2395927d5b11' }), shouldDisplayTooltip && (
+        return (h("div", { key: '55804784ff463b9aa4350063c7184183bc00cd2f', class: "tooltip-wrapper", ref: el => (this.wrapperEl = el), onMouseOver: this.showTooltip, onMouseOut: this.hideTooltip }, h("slot", { key: '53baf44478409db05bca1a7470e53083493876c2' }), shouldDisplayTooltip && (
         // STEP 4: Use the global class name we defined in our style string.
-        h("div", { key: '235f0deab48ed2764980d391bd12781be7778183', class: "udp-tooltip-portal", role: "tooltip", ref: el => (this.tooltipContentEl = el) }, h("unity-typography", { key: '6c068bf0a81a9e754afc7c19ceb86bb1f348b839', variant: "caption-text" }, this.content)))));
+        h("div", { key: '72b5a2ebda076e46f07c1e338b0981ddd12df1da', class: "udp-tooltip-portal", role: "tooltip", ref: el => (this.tooltipContentEl = el) }, h("unity-typography", { key: '76b55c15271a02a07f3d0747e922566d118b8188', variant: "caption-text" }, this.content)))));
     }
 };
 UdpAmbientToolTip.style = udpAmbientToolTipCss;
@@ -7336,7 +7336,7 @@ const UdpAvatar = class {
         else {
             style['background-color'] = this.getColorForUsername();
         }
-        return (h("div", { key: '39efa3768058fc1fe61ee05d6f0e2ee2ff6ecd0e', class: classes.join(' '), style: style }, this.iconName ? h("udp-icon", { iconName: this.iconName, darkIcon: false }) : h("unity-typography", { variant: "data-display-two" }, " ", this.getInitial())));
+        return (h("div", { key: '171f5b8188fe7648880844ecb0e92e9f93e734e8', class: classes.join(' '), style: style }, this.iconName ? h("udp-icon", { iconName: this.iconName, darkIcon: false }) : h("unity-typography", { variant: "data-display-two" }, " ", this.getInitial())));
     }
 };
 UdpAvatar.style = udpAvatarCss;
@@ -7610,7 +7610,7 @@ const DynamicContainerWithMenu = class {
         this.udpChipClicked.emit(chipText);
     }
     render() {
-        return (h("div", { key: '3dbaff6a6f132f9a88d1e20be8b2bd6addfe29e1', class: "container" }, h("div", { key: '19612cdc163703220caf60859a78cf05a2bc6f2a', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index) => (h("stencil-chip", { color: "secondary", key: index, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), h("div", { key: 'f5311d566d4ee2f3e5f3000de81dbb85bf62f6bb', class: "overflow" }, h("udp-pop-over", { key: 'df064bb0a2757b1452aad74d80413113cf56016e', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: '1ea5b82d8578de30740af913f9f3109b971b3ef1', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
+        return (h("div", { key: 'e39cb91451a2879c50e94d06ad7d04ea48e6924c', class: "container" }, h("div", { key: '68340fbe6565fcb4065634c23bbde57509aaa377', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index) => (h("stencil-chip", { color: "secondary", key: index, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), h("div", { key: 'fd984302e13b2d30c4e0724735b92e91150694af', class: "overflow" }, h("udp-pop-over", { key: '296ae16800bd847a6f2d45c65c9971e2fa9642c0', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: '8edb5977027465a416e5440104c0b97da7df23a7', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7688,10 +7688,10 @@ const UdpGridLoader = class {
     }
     render() {
         // Header bar (fatter, divided into columns)
-        const headerBar = (h("div", { key: '4d8ba5b1e5fd3c8b1d53b872a3806f6d8106c33b', class: "grid-row" }, Array.from({ length: this.numColumns }).map(() => (h("udp-skeleton-loading", { width: "100%", height: "55px" })))));
+        const headerBar = (h("div", { key: '45f44170dff0e08a68d1d53f32a3961d86712b58', 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: '52df9c2cb6065565c28b0121a004b38e30f07329', style: { width: this.width } }, headerBar, rowBars));
+        return (h("div", { key: '9c9be92fa74d1a27aba15e811c863b07ba672c05', style: { width: this.width } }, headerBar, rowBars));
     }
 };
 UdpGridLoader.style = udpGridLoaderCss;
@@ -7727,7 +7727,7 @@ const UdpHotlistForm = class {
     //     console.log('Cancel button clicked');
     //   }
     render() {
-        return (h("div", { key: 'ac1094c8819c456ec5f13d25f842a9a48217eddf', class: "wrapper" }, h("form", { key: 'b37b22672fe734ae4bed4b834067206425c89e97', class: "save-form", onSubmit: this.handleSubmit }, h("text-field", { key: '494cb5a4283ab1a741bb7541691ddd0f96ecd277', label: "Hotlist Name", placeholder: "Create a name for your Hotlist", value: this.name, onChange: (event) => this.handleNameChange(event) }), h("stencil-toggle", { key: '80250bb87065a1a38ad46a279a3a387d5b733b36', label: "Private", checked: this.isPrivate, onToggledChange: this.handlePrivateChange }), h("div", { key: '5e5d17fa6c23238e92db97ffc06f33b4551516f9', class: "submit-button" }, h("custom-button", { key: 'c3ec8024f9cb2a2c746b7dc90620a87e1ae7f960', variant: 'outline', type: "submit", onCustomClick: this.handleCancelClick }, "Cancel"), h("custom-button", { key: '4bb9221503cea4abe925009d3d603bb697432406', disabled: !this.name, type: "submit", onCustomClick: this.onCustomButtonClick }, "Create List")))));
+        return (h("div", { key: 'fed1159fa6172e2ef425fda713135e3cdac5b998', class: "wrapper" }, h("form", { key: '4bcf1830addf2e62a4b80bb689760997d53412de', class: "save-form", onSubmit: this.handleSubmit }, h("text-field", { key: '55b95fbe7649a5ff8a3d0a275ad55a2c0a2bcc11', label: "Hotlist Name", placeholder: "Create a name for your Hotlist", value: this.name, onChange: (event) => this.handleNameChange(event) }), h("stencil-toggle", { key: '1ff5aa5b5ff37e5870abeb5f15f4254586c2124e', label: "Private", checked: this.isPrivate, onToggledChange: this.handlePrivateChange }), h("div", { key: '101fd16f08d5aaf1d054dd91f0bd9a0451ac299c', class: "submit-button" }, h("custom-button", { key: '2af466a976f5f9cdebf9cd1054e7bb7bddbb9b32', variant: 'outline', type: "submit", onCustomClick: this.handleCancelClick }, "Cancel"), h("custom-button", { key: '58b86c74365d86ce22131e6462e83fe5036a15ba', disabled: !this.name, type: "submit", onCustomClick: this.onCustomButtonClick }, "Create List")))));
     }
     get el() { return getElement(this); }
 };
@@ -7747,6 +7747,9 @@ const UdpIcon = class {
     render() {
         var _a, _b;
         const iconData = getIconFromName(this.iconName, this.iconType);
+        if (!iconData) {
+            return null;
+        }
         let iconColor;
         if (this.color) {
             switch (this.color) {
@@ -7775,7 +7778,7 @@ const UdpIcon = class {
         else {
             iconColor = this.darkIcon ? 'black' : 'white';
         }
-        return (h("div", { key: '3fcd971d2ddff23c78ebc0663ee5e1e484ae2805', class: "icon-container" }, h("svg", Object.assign({ key: '8fe3db2e6cf032b5b3eb6c0460579cdf660e76ec' }, ((_a = iconData === null || iconData === void 0 ? void 0 : iconData.attrs) !== null && _a !== void 0 ? _a : {}), { fill: iconColor }), (_b = iconData === null || iconData === void 0 ? void 0 : iconData.content) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
+        return (h("div", { class: "icon-container" }, h("svg", Object.assign({}, ((_a = iconData === null || iconData === void 0 ? void 0 : iconData.attrs) !== null && _a !== void 0 ? _a : {}), { fill: iconColor }), (_b = iconData === null || iconData === void 0 ? void 0 : iconData.content) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
             var _a, _b;
             if ((item === null || item === void 0 ? void 0 : item.elem) === 'path') {
                 return h("path", Object.assign({}, ((_a = item === null || item === void 0 ? void 0 : item.attrs) !== null && _a !== void 0 ? _a : {}), { key: index }));
@@ -7804,7 +7807,7 @@ const UdpLinearLoader = class {
             loader: true,
             [`loader--color-${this.color}`]: true,
         };
-        return (h(Host, { key: '1a06cc73baefe8ba6d805715b3e1a1276b430bec' }, h("div", { key: '9b172ff7560cff19841ae2d3d42daf2e12e31826', class: loaderClasses }, h("div", { key: 'da1e732cf59a1c76ff1b6514983022c5a9353511', class: "indeterminate" }))));
+        return (h(Host, { key: 'e87886877c3dd11c47b1cc2a04f24fac06a6834c' }, h("div", { key: '13fd6426afe4ab10b8f69cf577674a80086388e4', class: loaderClasses }, h("div", { key: '230bb05b4fa3082299aed007ff77588deb4a46d2', class: "indeterminate" }))));
     }
 };
 UdpLinearLoader.style = udpLinearLoaderCss;
@@ -7825,7 +7828,7 @@ const UdpMenuItem = class {
         };
     }
     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))));
     }
 };
 UdpMenuItem.style = udpMenuItemCss;
@@ -7846,11 +7849,11 @@ const UdpNotification = class {
     }
     render() {
         const statusClass = `status-${this.status}`;
-        return (h("div", { key: '6f9511dcb791934acf07b90000160a764d0fc6e7', class: {
+        return (h("div", { key: '555f2f94b04009382fac53a32d74f8f84f14a733', class: {
                 'udp-notification': true,
                 'visible': this.active,
                 [statusClass]: true // This will apply the correct class based on the status
-            } }, this.userCancel && (h("button", { key: '3e6f7df67c906e32d6e2bd38262c6441c77d21ed', class: "close-button", onClick: () => this.active = false }, "\u00D7")), h("span", { key: 'ebdd3141d533f86448edfd7c84d2f681f2315bac', class: "message" }, " ", h("unity-typography", { key: 'aae63f399ad043aef3ece93e022d4e9873d2d558', variant: 'body' }, " ", this.message, " "))));
+            } }, this.userCancel && (h("button", { key: 'a9e6b1a2faa49b97d3d39da732a0b3e35045228d', class: "close-button", onClick: () => this.active = false }, "\u00D7")), h("span", { key: 'ed21c8f3e5e3fa53d2a1d4a54835e0f4b63210c4', class: "message" }, " ", h("unity-typography", { key: '9283d1e980b03cd92e5721d7a41209ee0c109cdf', variant: 'body' }, " ", this.message, " "))));
     }
     static get watchers() { return {
         "active": ["activeChanged"]
@@ -7992,7 +7995,7 @@ const UdpPopOver$1 = class UdpPopOver {
             maxHeight: this.popoverMaxHeight,
             overflow: this.overflow
         };
-        return (h(Host, { key: '5c088fd433163c11cc9af440ddbde003d95a0f96' }, h("div", { key: '37774fc4c4f7484e23bf848e58adee84a47f5d6c', class: "popover", style: style }, h("slot", { key: 'f479cfe2f59c6ddded24909b26f7f7a6aeba5d59' }))));
+        return (h(Host, { key: 'a064210032eb7db2bba02fee5c9a857fffc4cbcf' }, h("div", { key: '1cd02d254250afed442607f0925613dafb0ef63f', class: "popover", style: style }, h("slot", { key: '085cca6f9a387c33b56fd18d41b54fbfd4b59b90' }))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -8040,7 +8043,7 @@ const UdpPopOver = class {
             style['top'] = `${rect.bottom}px`;
             style['left'] = `${rect.left}px`;
         }
-        return (h("div", { key: '8e551e93e0cd39e0a1945c6bba655986ce3f9ec4', class: "popover", style: style }, h("unity-typography", { key: 'f19947195b6539834bf48380c7ea628ec75c1119', variant: "caption-text" }, h("slot", { key: 'ff01703a997941175c2f3d94e3765015d604be86' }))));
+        return (h("div", { key: '8db3050c709cd4652f36b7f7fccdf5474fef6786', class: "popover", style: style }, h("unity-typography", { key: '1d45adc91c79e9c417161bedd9c347884738b612', variant: "caption-text" }, h("slot", { key: '4782e7ff5fef34f131e21b3c6e85c6162543aa11' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8385,7 +8388,7 @@ const UdpSelector = class {
             'focused': this.isOpen,
         };
         const hasSelection = this.multiSelect ? this.selectedOptions.length > 0 : !!this.selectedOption;
-        return (h(Host, { key: 'a04488a812e21beb16efb0ffd3cbb8f559a04a73', class: {
+        return (h(Host, { key: 'ff3d430a821267669e8ba41d4d814be594042f0c', class: {
                 'udp-input': true,
                 'udp-selector': true,
                 'udp-input--error': isError,
@@ -8395,9 +8398,9 @@ const UdpSelector = class {
                 'udp-input--large': this.large,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '0ee9bf4156989e69a4d87b565e292593f65fe28b', class: "bx--form-item" }, this.label && (h("unity-typography", { key: '7ef7eab435299b30aed9b0f5bcd9186b397160ff', variant: "caption-text" }, h("label", { key: 'bd7e81c0056b05c56dbd5da5c57e96eed713dabb', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : ''))), h("div", { key: '7d6c0cec8000805938dcc119f8f0176d8d1a57ae', class: "udp-selector__container" }, h("div", { key: 'eea4f0f49348ea6187dc1ad4705e3cadc733ef6c', class: selectedOptionClasses, onClick: () => this.toggleDropdown(), tabindex: this.disabled || this.readonly ? '-1' : '0', role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen.toString(), id: 'udpRecord-udp-selector-' + this.id,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'b81f9ba1806adfade81fb55b0f9ecc1fba2ce305', class: "bx--form-item" }, this.label && (h("unity-typography", { key: 'b207e16041dda5996f21e58c7d305a19ae9a5810', variant: "caption-text" }, h("label", { key: 'babd3165a21c7ff38199494a6276ee2c814632c5', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : ''))), h("div", { key: '08bd70119c4f353d8ad318e298da088e2812fd99', class: "udp-selector__container" }, h("div", { key: 'b4aff7c12f9199ce974bb9591812ff9ddd94ef46', class: selectedOptionClasses, onClick: () => this.toggleDropdown(), tabindex: this.disabled || this.readonly ? '-1' : '0', role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen.toString(), id: 'udpRecord-udp-selector-' + this.id,
             // @ts-ignore
-            udprecordid: 'udpRecord-udp-selector-' + this.id }, h("div", { key: 'e7e4f5b4fca4661810be2d3ed209e0a8605b15a1', class: {
+            udprecordid: 'udpRecord-udp-selector-' + this.id }, h("div", { key: 'fdc3d8248a8de967b0136f9cb8a259fcf0f309f2', class: {
                 'selected-option-label': true,
                 'placeholder': !hasSelection,
             } }, this.multiSelect
@@ -8406,7 +8409,7 @@ const UdpSelector = class {
                 : 'Select option(s)'
             : this.selectedOption
                 ? this.selectedOption.label
-                : 'Select an option'), this.multiSelect && this.selectedOptions.length > 0 && h("span", { key: '4052d40ff41db33716893c6d65d2c48b4d45652b', class: "checkmark" }), h("div", { key: '8755c9ea4b73108d4e3c519562c89b4689b9ed3e', class: "arrow" })), this.isOpen && (h("ul", { key: '0f3b18e480ca1f008d60486e08ab131848f0f5aa', class: "options-list" }, this.options.map(option => (h("unity-typography", { variant: "button" }, h("li", { class: this.isOptionSelected(option) ? 'selected' : '', onClick: () => this.selectOption(option), onMouseDown: this.handleOptionMouseDown }, option.label, this.isOptionSelected(option) && h("span", { class: "checkmark" })))))))), this.errorMessage && (h("div", { key: 'adae8b2672e855ca67b7e58cba347ccbe235125b', class: "error-message" }, h("unity-typography", { key: 'a2910e6a68b8589ec75313d0eb28e570d9a99a63', variant: "caption-text", color: "error" }, this.errorMessage))))));
+                : 'Select an option'), this.multiSelect && this.selectedOptions.length > 0 && h("span", { key: '7bf13954e3374093da80d54c53f43d110f6575a5', class: "checkmark" }), h("div", { key: 'd3fe7ba8c3ab16fdc1073a8c9b494fbe324f23d0', class: "arrow" })), this.isOpen && (h("ul", { key: '0be46a38647b29310324b446993121d404e7bd77', class: "options-list" }, this.options.map(option => (h("unity-typography", { variant: "button" }, h("li", { class: this.isOptionSelected(option) ? 'selected' : '', onClick: () => this.selectOption(option), onMouseDown: this.handleOptionMouseDown }, option.label, this.isOptionSelected(option) && h("span", { class: "checkmark" })))))))), this.errorMessage && (h("div", { key: '6fdfcb547313774dc09085af93e07c75379097cc', class: "error-message" }, h("unity-typography", { key: '93ff63ec2f2c8e318bcdd51bbbf88ad7047a8dbc', variant: "caption-text", color: "error" }, this.errorMessage))))));
     }
     /**
      * Checks if a given option is currently selected.
@@ -8444,12 +8447,12 @@ const UdpSkeletonLoading = class {
         this.borderRadius = '4px';
     }
     render() {
-        return (h("div", { key: 'a55df89b16c067a579ec4177039da791543c92d8', class: "skeleton-loader", style: { width: this.width, height: this.height, borderRadius: this.borderRadius } }));
+        return (h("div", { key: '8af6143940732dff91329dbd3acd7f0f9b9f2f97', class: "skeleton-loader", style: { width: this.width, height: this.height, borderRadius: this.borderRadius } }));
     }
 };
 UdpSkeletonLoading.style = udpSkeletonLoadingCss;
 
-const udpTabCss = ".tab-panel{display:none;background-color:#ffffff}.tab-panel.active{display:block}";
+const udpTabCss = ".tab-panel{display:none}.tab-panel.active{display:block}";
 
 const UdpTab = class {
     constructor(hostRef) {
@@ -8476,16 +8479,17 @@ const UdpTab = class {
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: '0dbc41862f8bb01ecfec94ca44f082f0e4e7104f', class: { 'tab-panel': true, 'active': this.active }, role: "tabpanel" }, h("slot", { key: 'facc5f18260ea67c405dca1a90dcdc48e5ec995c' })));
+        return (h("div", { key: '20ba03ac77abb9cde63aa864aac67db7c57bf66a', class: { 'tab-panel': true, 'active': this.active }, role: "tabpanel" }, h("slot", { key: 'd4b0450e94770421adae0e47c0b868d00cdf772d' })));
     }
 };
 UdpTab.style = udpTabCss;
 
-const udpTabsCss = ".tab-container{display:flex;flex-direction:column}.tab-header{background-color:#ffffff;position:relative;display:flex;align-items:center}.tab-scroll-container{display:flex;position:relative;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0}.tab-scroll-container::-webkit-scrollbar{height:4px}.tab-scroll-container::-webkit-scrollbar-track{background:transparent}.tab-scroll-container::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.2);border-radius:4px}.tab-scroll-container::-webkit-scrollbar-thumb:hover{background-color:rgba(0, 0, 0, 0.3)}.tab-header::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--divider-color, #e0e0e0)}.tab-header button{padding:16px;font-size:14px;text-align:center;border:none;background:none;cursor:pointer;outline:none;transition:all 0.22s ease;color:#555555;font-weight:600;opacity:0.9;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px}.tab-header.fill .tab-scroll-container{width:100%}.tab-header.fill .tab-scroll-container button{flex-grow:1}.tab-header button.active{color:var(--secondary-color, #344861);opacity:1.0}.tab-header button.scroll-arrow{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:40px;padding:0;background:#ffffff;cursor:pointer;font-size:16px;font-weight:bold;color:#757575;z-index:2;transition:color 0.2s ease;flex-shrink:0;opacity:1;gap:0}.tab-header button.scroll-arrow:hover{color:#000}.tab-header button.scroll-arrow.left{left:0}.tab-header button.scroll-arrow.right{right:0}.scroll-fade{position:absolute;top:0;bottom:0;width:30px;z-index:1;pointer-events:none}.scroll-fade.left{left:40px;background:linear-gradient(\n    to right,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  )}.scroll-fade.right{right:40px;background:linear-gradient(\n    to left,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  )}.tab-header button udp-icon{font-size:1.2em;line-height:1}.tab-header button.icon-start{flex-direction:row}.tab-header button.icon-end{flex-direction:row-reverse}.tab-header button.icon-top{flex-direction:column;gap:4px}.tab-header button.icon-bottom{flex-direction:column-reverse;gap:4px}.tab-content{padding:16px;background-color:#ffffff}.slider{position:absolute;bottom:0;left:0;height:2px;background-color:var(--secondary-color, #344861);transition:transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),\n    width 0.22s cubic-bezier(0.4, 0, 0.2, 1);z-index:1}.tab-header button.disabled{opacity:0.5;cursor:not-allowed}.tab-header button.disabled.active{color:#757575;opacity:0.5}";
+const udpTabsCss = ".tab-container{display:flex;flex-direction:column}.tab-header{background-color:#ffffff;position:relative;display:flex;align-items:center}.tab-scroll-container{display:flex;position:relative;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0}.tab-scroll-container::-webkit-scrollbar{height:4px}.tab-scroll-container::-webkit-scrollbar-track{background:transparent}.tab-scroll-container::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.2);border-radius:4px}.tab-scroll-container::-webkit-scrollbar-thumb:hover{background-color:rgba(0, 0, 0, 0.3)}.tab-header::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--divider-color, #e0e0e0)}.tab-header button{padding:16px;font-size:14px;text-align:center;border:none;background:none;cursor:pointer;outline:none;transition:all 0.22s ease;color:#555555;font-weight:600;opacity:0.9;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px}.tab-header.fill .tab-scroll-container{width:100%}.tab-header.fill .tab-scroll-container button{flex-grow:1}.tab-header button.active{color:var(--secondary-color, #344861);opacity:1.0}.tab-header button.scroll-arrow{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:40px;padding:0;background:#ffffff;cursor:pointer;font-size:16px;font-weight:bold;color:#757575;z-index:2;transition:color 0.2s ease;flex-shrink:0;opacity:1;gap:0}.tab-header button.scroll-arrow:hover{color:#000}.tab-header button.scroll-arrow.left{left:0}.tab-header button.scroll-arrow.right{right:0}.scroll-fade{position:absolute;top:0;bottom:0;width:30px;z-index:1;pointer-events:none}.scroll-fade.left{left:40px;background:linear-gradient(\n    to right,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  )}.scroll-fade.right{right:40px;background:linear-gradient(\n    to left,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  )}.tab-header button udp-icon{font-size:1.2em;line-height:1}.tab-header button.icon-start{flex-direction:row}.tab-header button.icon-end{flex-direction:row-reverse}.tab-header button.icon-top{flex-direction:column;gap:4px}.tab-header button.icon-bottom{flex-direction:column-reverse;gap:4px}.slider{position:absolute;bottom:0;left:0;height:2px;background-color:var(--secondary-color, #344861);transition:transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),\n    width 0.22s cubic-bezier(0.4, 0, 0.2, 1);z-index:1}.tab-header button.disabled{opacity:0.5;cursor:not-allowed}.tab-header button.disabled.active{color:#757575;opacity:0.5}";
 
 const UdpTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.udpTabChange = createEvent(this, "udpTabChange");
         /**
          * Specifies the layout variant of the tab header.
          *
@@ -8493,18 +8497,46 @@ const UdpTabs = class {
          * - `'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() {
@@ -8516,9 +8548,27 @@ const UdpTabs = class {
     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(() => {
@@ -8529,21 +8579,29 @@ const UdpTabs = class {
     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(() => {
@@ -8552,12 +8610,17 @@ const UdpTabs = class {
         });
     }
     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;
@@ -8580,7 +8643,18 @@ const UdpTabs = class {
         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)
@@ -8591,20 +8665,16 @@ const UdpTabs = class {
         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',
             });
         }
     }
@@ -8622,25 +8692,28 @@ const UdpTabs = class {
         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' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "activeTab": ["onActiveTabChange"],
+        "internalActiveTab": ["onActiveTabChange"],
+        "value": ["onValueChange"],
+        "tabs": ["onTabsPropChange"],
         "variant": ["onVariantChange"]
     }; }
 };
@@ -8713,7 +8786,7 @@ const UpdAlertBanner = class {
         this.message = '';
     }
     render() {
-        return (h("div", { key: 'd252b1793bc4caa4e96acebb6e2ec6ba8e52f029', class: `alert-banner ${this.type}` }, h("unity-typography", { key: '7ec2b81da5013172c16f6d61b1454a3264ef66ca', variant: "data-display-three" }, "   ", this.message, " ")));
+        return (h("div", { key: '4551695bcaba3fde5445c7a34f1d67d0444af855', class: `alert-banner ${this.type}` }, h("unity-typography", { key: 'd763dea98c2b14a12753f54d5b99c89be23aaf49', variant: "data-display-three" }, "   ", this.message, " ")));
     }
 };
 UpdAlertBanner.style = updAlertBannerCss;