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

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

@@ -0,0 +1,850 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, a as getElement } from './index-n-1ZSeAs.js';
+import { u as useTreeDatasource } from './conversionFunctions-CNWYTvRs.js';
+import { s as state } from './catalog-store-BhgNAUY6.js';
+import Close24 from '@carbon/icons/es/close/24';
+import { v4 } from 'uuid';
+import Save16 from '@carbon/icons/es/save/16';
+import Close16 from '@carbon/icons/es/close/16';
+import List16 from '@carbon/icons/es/list/16';
+import Download16 from '@carbon/icons/es/download/16';
+import Settings16 from '@carbon/icons/es/settings/16';
+import Star16 from '@carbon/icons/es/star/16';
+import AdvancedQuery16 from '@carbon/icons/es/ibm-watson--discovery/16';
+import DataEnrichment16 from '@carbon/icons/es/idea/16';
+import Renew16 from '@carbon/icons/es/renew/16';
+import '@stencil/store';
+import './apiUtils-cUHs50y0.js';
+import 'deep-equal';
+import './makeApiCall-B-daVutk.js';
+import 'axios';
+import './configService-BqLfkVKh.js';
+import './tenantUtils-Basdb1b1.js';
+
+const advancedSearchCss$1 = ":host{display:block;height:100%}.container{display:flex;height:100vh}.left-column{flex:1;background-color:white;height:90vh;overflow:scroll;padding:8px}.right-column{flex:2;margin-left:16px;padding:16px;height:90vh;overflow:scroll}.filter-group[data-level=\"0\"]{padding-left:0}.filter-group[data-level=\"1\"]{padding-left:20px}.filter-group[data-level=\"2\"]{padding-left:40px}.filter-group{margin-top:24px;border-left:1px solid #bababa}.search-input-list{height:100%;max-height:70vh;overflow:auto}.recent-searches{min-width:300px;margin-bottom:10px}";
+
+const AdvancedSearch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.advancedSearchItemChange = createEvent(this, "advancedSearchItemChange");
+        this.filterList = [];
+        this.filterRenderList = [];
+        this.nestedData = new Map();
+        this.searchObject = [];
+        this.tempNestedData = new Map();
+        //@Prop() parentFilter?: string;
+        this.testData = [];
+        this.showChildren = false;
+        this.handleReferenceClick = async (referenceValue, name, parentReference, parentFilter, parent, parentPath) => {
+            console.log('Clicked reference:', referenceValue, 'Name:', name, 'Parent Reference:', parentReference, 'parentFilter', parentFilter, 'parent reference click test', parent, parentPath);
+            if (state.isLoadingCatalogData || state.catalogData === null) {
+                return;
+            }
+            try {
+                const extendedSearchFilterList = await useTreeDatasource(state.catalogData, referenceValue, true, true, name, parentFilter, parent);
+                if (Array.isArray(extendedSearchFilterList)) {
+                    this.updateNestedData(extendedSearchFilterList);
+                }
+                else {
+                    console.error('Extended search filter list is not an array');
+                }
+            }
+            catch (error) {
+                console.error('Error fetching filters:', error);
+            }
+        };
+        this.updateNestedData = children => {
+            if (!Array.isArray(children) || children.length === 0) {
+                console.error('Invalid or empty children data provided for updateNestedData');
+                return;
+            }
+            const fromFilter = children[0].extendedProperties.fromFilter;
+            const parentName = children[0].extendedProperties.parent;
+            const checkForName = fromFilter;
+            const testParentArray = useTreeDatasource(state.catalogData, checkForName, true, true, name, '', '');
+            if (testParentArray) {
+                testParentArray.forEach(parentItem => {
+                    if (parentItem.name === parentName) {
+                        parentItem.referenceNode = children;
+                    }
+                    else if (parentItem.reference && parentItem.referenceNode) {
+                        this.updateNestedDataRecursively(parentItem.referenceNode, children, parentName);
+                    }
+                });
+            }
+            // Helper function to check if an item is already present in the array
+            const isItemPresent = (array, item) => array.some(existingItem => existingItem.name === item.name);
+            // Recursive function to update the nested data
+            const updateNestedDataHelper = (array, children, parentName) => {
+                return array.map(item => {
+                    if (item.name === parentName) {
+                        // Filter out children that are already present before appending
+                        const newChildren = children.filter(child => !isItemPresent(item.referenceNode || [], child));
+                        return Object.assign(Object.assign({}, item), { referenceNode: [...(item.referenceNode || []), ...newChildren] });
+                    }
+                    else if (item.referenceNode) {
+                        return Object.assign(Object.assign({}, item), { referenceNode: updateNestedDataHelper(item.referenceNode, children, parentName) });
+                    }
+                    else {
+                        return item;
+                    }
+                });
+            };
+            // Start the recursive update and assign it to testData
+            this.testData = updateNestedDataHelper(this.testData, children, parentName);
+            forceUpdate(this); // Not generally recommended, use as a last resort
+        };
+        this.updateNestedDataRecursively = (nestedArray, children, parentName) => {
+            nestedArray.forEach(item => {
+                if (item.name === parentName) {
+                    item.referenceNode = children;
+                }
+                else if (item.referenceNode) {
+                    this.updateNestedDataRecursively(item.referenceNode, children, parentName);
+                }
+            });
+        };
+        this.onTreeListItemClick = (event) => {
+            const detail = event.detail;
+            // Function to convert string to PascalCase
+            const toPascalCase = str => {
+                return str
+                    .split('.')
+                    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+                    .join('.');
+            };
+            // Check if both parentName and parentPath are present
+            if (detail.parentName && detail.parentPath) {
+                detail.searchField = `${detail.parentPath}.${detail.parentName}.${detail.searchField}`;
+            }
+            else if (detail.parentName) {
+                // If only parentName is present, exclude parentPath
+                detail.searchField = `${detail.parentName}.${detail.searchField}`;
+            }
+            else {
+                // No parentName or parentPath, use searchField as is
+                detail.searchField = `${detail.searchField}`;
+            }
+            // Convert searchField to PascalCase
+            detail.searchField = toPascalCase(detail.searchField);
+            this.handleItemClick(detail); // Perform the search with the modified search object
+        };
+    }
+    componentWillLoad() {
+        // console.log('this.testData', this.testData);
+    }
+    filterListWatcher(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.testData = newValue;
+        }
+    }
+    render() {
+        const safeTestData = Array.isArray(this.testData) ? this.testData : [];
+        const safeFilterRenderList = Array.isArray(this.filterRenderList) ? this.filterRenderList : [];
+        return (h("div", { key: '4836c6c40509b457544a5dff3b298b69e6eb6e74', class: "container" }, h("div", { key: '1f2111d6001b3eb8294197140eedcd426717083b', class: "left-column" }, !safeTestData.length && (h("div", { key: '749779efc8c6bd0b82ffb62e98d2d264ebfa2e5b', style: { marginRight: '8px' } }, h("udp-grid-loader", { key: 'f6b361e7a08cd80719d5dc041f4d4ecf0f56812e', width: "362px", "num-columns": "1", "num-rows": "20" }))), h("div", { key: 'f21ffa56fd67fc541b6ad57b51827f9a028df9f7' }, safeTestData.map((filter, index) => {
+            var _a;
+            return (h("tree-list-item", { key: `${filter.name}-${index}`, level: 0, label: this.getHeaderFieldLabel(filter.name), fieldName: filter.name, reference: filter.reference, parentName: "", parentFilter: filter.extendedProperties.parentFilter, parentPath: 'filter.extendedProperties.parentPath', parent: (_a = filter.extendedProperties) === null || _a === void 0 ? void 0 : _a.parent, nestedItems: filter.referenceNode, "onReference-clicked": (event) => this.handleReferenceClick(event.detail.reference, event.detail.name, event.detail.parentReference, event.detail.parentFilter, event.detail.parent, event.detail.parentPath), onItemClick: this.onTreeListItemClick }));
+        }))), h("div", { key: '06291f58613067479073e7d219c2ee70d8c98fac', class: "right-column" }, h("udp-page-header", { key: '16315b89430a5dc20d150f6ac4922528ee37f65f', onValueChanged: this.handleValueChanged }), h("filter-conditions", { key: 'f7469584c54f9991dc37eea0f04a32e90871c968' }), safeFilterRenderList.map(filter => filter.filterElements.map((item, index) => {
+            var _a;
+            return (h("search-list-item", { key: `${item.searchField}-${index}`, label: (_a = item === null || item === void 0 ? void 0 : item.searchLabel) !== null && _a !== void 0 ? _a : item.searchField, fieldName: item.searchField, handleDelete: () => this.handleDelete({ searchField: item.searchField, searchValue: item.searchValue }), name: item.searchValue }));
+        })))));
+    }
+    static get watchers() { return {
+        "filterList": ["filterListWatcher"]
+    }; }
+};
+AdvancedSearch.style = advancedSearchCss$1;
+
+const advancedSearchCss = ":host{display:block;height:100%}.container{display:flex;height:100vh}.left-column{flex:1;background-color:white;height:90vh;overflow:scroll;padding:8px}.right-column{flex:2;margin-left:16px;padding:16px;height:90vh;overflow:scroll}.filter-group[data-level=\"0\"]{padding-left:0}.filter-group[data-level=\"1\"]{padding-left:20px}.filter-group[data-level=\"2\"]{padding-left:40px}.filter-group{margin-top:24px;border-left:1px solid #bababa}.search-input-list{height:100%;max-height:70vh;overflow:auto}.recent-searches{min-width:300px;margin-bottom:10px}";
+
+const AdvancedSearchGrouped = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.advancedSearchItemChange = createEvent(this, "advancedSearchItemChange");
+        this.searchItemChanged = createEvent(this, "searchItemChanged");
+        this.searchOperatorChanged = createEvent(this, "searchOperatorChanged");
+        this.filterList = [];
+        this.filterRenderList = [];
+        this.nestedData = new Map();
+        this.searchObject = [];
+        this.tempNestedData = new Map();
+        //@Prop() parentFilter?: string;
+        this.testData = [];
+        this.showChildren = false;
+        this.filterGroups = [];
+        this.filterObjectsWithGroups = [];
+        this.disableFilterSelection = true;
+        this.sharedId = '';
+        this.filters = [];
+        this.recentSearchesOptions = [];
+        this.handleReferenceClick = async (referenceValue, name, parentReference, parentFilter, parent, parentPath) => {
+            console.log('Clicked reference:', referenceValue, 'Name:', name, 'Parent Reference:', parentReference, 'parentFilter', parentFilter, 'parent reference click test', parent, parentPath);
+            if (state.isLoadingCatalogData || state.catalogData === null) {
+                console.log('Catalog data is not ready yet.');
+                return;
+            }
+            try {
+                console.log('state.catalogData', state.catalogData);
+                const extendedSearchFilterList = await useTreeDatasource(state.catalogData, referenceValue, true, true, name, parentFilter, parent);
+                console.log('extendedSearchFilterList', extendedSearchFilterList);
+                if (Array.isArray(extendedSearchFilterList)) {
+                    this.updateNestedData(extendedSearchFilterList);
+                }
+                else {
+                    console.error('Extended search filter list is not an array');
+                }
+                console.log('Updated nestedData:', Array.from(this.nestedData.entries()));
+            }
+            catch (error) {
+                console.error('Error fetching filters:', error);
+            }
+        };
+        this.updateNestedData = children => {
+            if (!Array.isArray(children) || children.length === 0) {
+                console.error('Invalid or empty children data provided for updateNestedData');
+                return;
+            }
+            console.log('children in updatedNest', children);
+            const fromFilter = children[0].extendedProperties.fromFilter;
+            const parentName = children[0].extendedProperties.parent;
+            const checkForName = fromFilter;
+            const testParentArray = useTreeDatasource(state.catalogData, checkForName, true, true, name, '', '');
+            console.log('testParentArray', testParentArray);
+            if (testParentArray) {
+                testParentArray.forEach(parentItem => {
+                    if (parentItem.name === parentName) {
+                        parentItem.referenceNode = children;
+                        console.log('add referenceNode array', children, testParentArray);
+                    }
+                    else if (parentItem.reference && parentItem.referenceNode) {
+                        this.updateNestedDataRecursively(parentItem.referenceNode, children, parentName);
+                    }
+                });
+            }
+            // Helper function to check if an item is already present in the array
+            const isItemPresent = (array, item) => array.some(existingItem => existingItem.name === item.name);
+            // Recursive function to update the nested data
+            const updateNestedDataHelper = (array, children, parentName) => {
+                return array.map(item => {
+                    if (item.name === parentName) {
+                        // Filter out children that are already present before appending
+                        const newChildren = children.filter(child => !isItemPresent(item.referenceNode || [], child));
+                        return Object.assign(Object.assign({}, item), { referenceNode: [...(item.referenceNode || []), ...newChildren] });
+                    }
+                    else if (item.referenceNode) {
+                        return Object.assign(Object.assign({}, item), { referenceNode: updateNestedDataHelper(item.referenceNode, children, parentName) });
+                    }
+                    else {
+                        return item;
+                    }
+                });
+            };
+            // Start the recursive update and assign it to testData
+            this.testData = updateNestedDataHelper(this.testData, children, parentName);
+            console.log('Updated testData', this.testData);
+            forceUpdate(this); // Not generally recommended, use as a last resort
+        };
+        this.updateNestedDataRecursively = (nestedArray, children, parentName) => {
+            nestedArray.forEach(item => {
+                if (item.name === parentName) {
+                    item.referenceNode = children;
+                }
+                else if (item.referenceNode) {
+                    this.updateNestedDataRecursively(item.referenceNode, children, parentName);
+                }
+            });
+        };
+        this.onTreeListItemClick = (event) => {
+            const detail = event.detail;
+            console.log('Tree list item clicked in grouped:', detail);
+            // Function to convert string to PascalCase
+            const toPascalCase = str => {
+                return str
+                    .split('.')
+                    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+                    .join('.');
+            };
+            // Check if both parentName and parentPath are present
+            if (detail.parentName && detail.parentPath) {
+                detail.searchField = `${detail.parentPath}.${detail.parentName}.${detail.searchField}`;
+            }
+            else if (detail.parentName) {
+                // If only parentName is present, exclude parentPath
+                detail.searchField = `${detail.parentName}.${detail.searchField}`;
+            }
+            else {
+                // No parentName or parentPath, use searchField as is
+                detail.searchField = `${detail.searchField}`;
+            }
+            // Convert searchField to PascalCase
+            detail.searchField = toPascalCase(detail.searchField);
+            this.handleItemClick(detail); // Perform the search with the modified search object
+            this.disableFilterSelection = true;
+        };
+        this.currentLogicalOperator = 'AND';
+    }
+    componentWillLoad() { }
+    filterListWatcher(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.testData = newValue;
+        }
+    }
+    filterObjectsWithGroupsChanged(newValue, oldValue) {
+    }
+    updateFilterWithUserData(uniqueId, userData) {
+        const updatedFilters = this.filters.map(filter => (filter.id === uniqueId ? Object.assign(Object.assign({}, filter), userData) : filter));
+        this.filters = updatedFilters; // Update the state with the modified filters array
+    }
+    updateGroupLogicalOperator(groupId, newLogicalOperator) {
+        const updateOperatorInNode = (nodes, nodeId, newOperator) => {
+            for (const node of nodes) {
+                if (node.id === nodeId) {
+                    node.logicalOperator = newOperator; // Update the operator
+                    return true;
+                }
+                if (node.children && updateOperatorInNode(node.children, nodeId, newOperator)) {
+                    return true; // Operator updated in a deeper level
+                }
+            }
+            return false; // Node not found
+        };
+        // Attempt to update the operator in the node
+        if (updateOperatorInNode(this.filterObjectsWithGroups, groupId, newLogicalOperator)) {
+            // If the update was successful, trigger a state update
+            this.filterObjectsWithGroups = [...this.filterObjectsWithGroups];
+        }
+    }
+    handleSearchItemChange(event) {
+        const { searchOperator, searchValue, filterGroupId, id } = event.detail;
+        const group = this.findGroupById(this.filterObjectsWithGroups, filterGroupId);
+        if (group) {
+            const filter = group.filters.find(f => f.id === id);
+            if (filter) {
+                filter.searchOperator = searchOperator;
+                filter.searchValue = searchValue;
+                this.filterObjectsWithGroups = [...this.filterObjectsWithGroups];
+            }
+        }
+        this.searchItemChanged.emit(event.detail);
+    }
+    handleOperatorSelected(event, filterGroupId) {
+        const selectedOptionValue = event.detail.value; // Assuming this is '1' for AND, '2' for OR
+        const newLogicalOperator = this.getLogicalOperatorValue(selectedOptionValue);
+        // Call the updateLogicalOperator prop function passed from the parent component
+        this.updateLogicalOperator(filterGroupId, newLogicalOperator);
+        this.searchOperatorChanged.emit();
+    }
+    renderFilterGroup(filterGroup, level = 0) {
+        const isRoot = filterGroup.id === 'root';
+        const isDefault = filterGroup.id === 'default';
+        const paddingStyle = { 'padding-left': `${20 * level}px` };
+        const logicalOperator = this.getLogicalOperatorCode(filterGroup.logicalOperator).toString();
+        const operatorSelector = (h("udp-selector", { options: [
+                { value: '1', label: 'AND' },
+                { value: '2', label: 'OR' },
+            ], onChange: (event) => this.handleOperatorSelected(event, filterGroup.filterGroupId), initialValue: logicalOperator, disabled: isRoot || isDefault }));
+        const deleteGroupButton = !isRoot && !isDefault && h("stencil-icon-button", { icon: Close24, onClick: () => this.handleGroupDelete(filterGroup.filterGroupId) });
+        const filterItems = !isRoot && (h("div", { class: "search-input-list" }, filterGroup.filters.map((filter, index) => {
+            var _a;
+            return (h("search-list-item", { key: `${filter.id}-${index}`, isDefault: isDefault, id: filter.id, filterGroupId: filter.filterGroupId, label: (_a = filter === null || filter === void 0 ? void 0 : filter.searchLabel) !== null && _a !== void 0 ? _a : filter.searchField, fieldName: filter.searchField, handleDelete: () => this.handleDelete(filter), name: filter.searchValue, operator: filter.searchOperator, onSearchItemChanged: event => this.handleSearchItemChange(event), isInitialSearchItem: filter.isInitialFilterElement }));
+        })));
+        const actionButtons = !isDefault && (h("div", { style: { display: 'flex', gap: '8px', marginTop: '8px' } }, !isRoot && (h("custom-button", { variant: "outline", onClick: () => this.addFilter(filterGroup.id, filterGroup.filterGroupId) }, "+ Field")), h("custom-button", { variant: "outline", onClick: () => this.handleAddNewGroup(!isRoot ? filterGroup.id : 'root', this.currentLogicalOperator) }, "+ Group")));
+        const nestedGroups = h("div", { class: "nested-groups" }, (filterGroup.children || []).map(childGroup => this.renderFilterGroup(childGroup, level + 1)));
+        return (h("div", { class: !isRoot && 'filter-group', style: paddingStyle }, isDefault && filterGroup.filters.length === 0 ? null : (h("div", { style: { marginBottom: '16px' } }, h("div", { style: { display: 'flex', gap: '8px' } }, operatorSelector, deleteGroupButton))), filterItems, actionButtons, nestedGroups));
+    }
+    addFilter(groupId, filterGroupId) {
+        console.log('Adding filter...');
+        this.disableFilterSelection = false;
+        if (this.handleAddNewFilter) {
+            this.handleAddNewFilter(filterGroupId);
+        }
+        const newFilterPlaceholder = {
+            id: v4(),
+            groupId: groupId,
+            filterGroupId: filterGroupId,
+            searchField: '', // Initial placeholder for the search field
+            searchOperator: '=', // Default or initial placeholder for the search operator
+            searchValue: '', // Initial placeholder for the search value
+        };
+        this.filters = [...this.filters, newFilterPlaceholder];
+    }
+    render() {
+        const safeTestData = Array.isArray(this.testData) ? this.testData : [];
+        //const safeFilterRenderList = Array.isArray(this.filterRenderList) ? this.filterRenderList : [];
+        return (h("div", { key: '44ad58b7b1b20d4315c095a0aa2fae993581de5f', class: "container" }, h("div", { key: '8ab66afcc6b2be4a8c757034a013d085dfea9585', class: "left-column" }, this.selectRecentSearch !== null && this.fullClearSearch !== null && (h("div", { key: 'bdc179310c8dff96b24881504e0b939504aaa1bd', class: "recent-searches" }, "Recent Searches", h("div", { key: 'a995a2f902609373ff1cc94487cd53e3152205c4', style: { display: 'flex', alignItems: 'center' } }, h("udp-selector", { key: 'c34b4d62240fca2b7faa64d3681d254bb1eb24f1', options: this.recentSearchesOptions, onChange: (e) => this.selectRecentSearch(e), style: { marginRight: '10px' } }), h("udp-function-button", { key: '269bf9a2048436ef1c5fdf2dc3d1092e388153de', delete: true, onClick: this.fullClearSearch })))), !safeTestData.length && (h("div", { key: '8786af2cd61035fac7814c31635f2800bde03090', style: { marginRight: '8px' } }, h("udp-grid-loader", { key: 'e317dfbca9aa71158df07be961891dd009ccc2a7', width: "362px", "num-columns": "1", "num-rows": "20" }))), h("div", { key: 'a55cf9687c80d1411a061a7d11bde5068cee40be' }, safeTestData.map((filter, index) => {
+            var _a;
+            return (h("tree-list-item", { add: true, showAdd: true, key: `${filter.name}-${index}`, level: 0, label: this.getHeaderFieldLabel(filter.name), fieldName: filter.name, reference: filter.reference, parentName: "", parentFilter: filter.extendedProperties.parentFilter, parentPath: 'filter.extendedProperties.parentPath', parent: (_a = filter.extendedProperties) === null || _a === void 0 ? void 0 : _a.parent, nestedItems: filter.referenceNode, "onReference-clicked": (event) => this.handleReferenceClick(event.detail.reference, event.detail.name, event.detail.parentReference, event.detail.parentFilter, event.detail.parent, event.detail.parentPath), onItemClick: this.onTreeListItemClick }));
+        }))), h("div", { key: '3cfee395db5bd184e0d50a00136763fa97e792e4', class: "right-column" }, this.filterObjectsWithGroups.map(group => this.renderFilterGroup(group))), this.disableFilterSelection && (h("div", { key: 'b51704d900fc41cce97bb88ad9f10040b6071e39', style: { width: '411px', height: '100vh', background: 'white', position: 'absolute', zIndex: '9', top: '45px', left: 'px', opacity: '0.7' } }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "filterList": ["filterListWatcher"],
+        "filterObjectsWithGroups": ["filterObjectsWithGroupsChanged"]
+    }; }
+};
+AdvancedSearchGrouped.style = advancedSearchCss;
+
+const AgTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.height = 'calc(100vh - 200px)';
+    }
+    render() {
+        return (h("div", { key: 'e2b4974a3fb317a51b4e0954c0b405eeabeb794f', id: "myGrid", style: { height: this.height, width: '100%' }, class: "ag-theme-material" }));
+    }
+    get el() { return getElement(this); }
+};
+
+const editViewFormDialogCss = ".info-columns{display:flex}.column{width:100px}.toggle-options{display:flex;gap:16px;align-items:center;margin-bottom:16px}";
+
+const EditViewFormDialog = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // Initialize name with the value of currentName
+        this.name = '';
+        // Change isPrivate to be a number, defaulting to 2 (false/not private)
+        this.isPrivate = 2;
+        this.isDefault = false;
+        this.fetchedCurrentView = false;
+        this.handleGetExistingView = () => {
+            this.isPrivate = this.currentGridViewVisibilityTypeId;
+            this.isDefault = this.currentIsDefault;
+            console.log("isPrivate:", this.isPrivate, "isDefault:", this.isDefault);
+            this.fetchedCurrentView = true;
+        };
+        this.handleNameChange = (event) => {
+            this.currentName = event.target.value;
+            this.name = event.target.value;
+        };
+        this.handlePrivateChange = () => {
+            this.isPrivate = this.isPrivate === 1 ? 2 : 1;
+            this.currentGridViewVisibilityTypeId = this.currentGridViewVisibilityTypeId === 1 ? 2 : 1;
+            console.log(this.isPrivate);
+        };
+        this.handleDefaultChange = () => {
+            this.isDefault = !this.isDefault;
+            this.currentIsDefault = !this.currentIsDefault;
+            console.log(this.isDefault);
+        };
+        this.handleSubmit = () => {
+            this.handleFormSubmit(this.gridId, this.name, this.isPrivate, this.isDefault);
+        };
+    }
+    componentDidUpdate() {
+        if (this.open) {
+            this.handleGetExistingView();
+        }
+    }
+    componentWillRender() {
+        // console.log("rerendered name");
+        this.name = this.currentName;
+        this.gridId = this.currentGridId;
+    }
+    resetFetchedCurrentView() {
+        this.fetchedCurrentView = false;
+    }
+    render() {
+        return (h("fluent-dialog", { key: '00fdec78d1d7c997980430a62b841902682fb2be', 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: '7cb47d6e436942532898bd35398c610590fd2f3b', class: "edit-form" }, h("text-field", { key: '3293f40375aa017d694eac11c2872c3cb653844e', label: "View Name", value: this.name, onInput: (event) => this.handleNameChange(event) }), this.fetchedCurrentView &&
+            h("div", { key: '2cd3801aba62d1ea307bd3fd07d96ff998d0b551', class: "toggle-options" }, h("div", { key: '1273bbd90b08538068358606fdc2baa54ce12a31' }, h("stencil-toggle", { key: '8982f718420226588d2e22fe911cf129a97af1f8', label: "Private", checked: this.isPrivate === 1, onToggledChange: this.handlePrivateChange }), " "), h("div", { key: '593b50136a30a8bfa910f9ce6a1f521c4ecf2c48' }, h("stencil-toggle", { key: 'f44e4b8b92d6f7f44efe1fca51ae3d9aa6387762', label: "Default", checked: this.isDefault, onToggledChange: this.handleDefaultChange, style: { marginTop: '10px' } }))))));
+    }
+    get el() { return getElement(this); }
+};
+EditViewFormDialog.style = editViewFormDialogCss;
+
+const gridPrimaryBarCss = ".header-bar{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--accent-color)}.title-section{flex:1;margin-left:16px;display:flex;gap:16px;align-items:center}.button-section{display:flex;gap:8px;align-items:center;padding-right:16px;padding-top:8px;padding-bottom:8px}";
+
+const GridPrimaryBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hiddenActionButtons = [];
+        this.hiddenLabels = [];
+        this.actionButtons = [];
+        this.showAdvancedSearchFeature = true;
+        this.showFilterColumnFeature = true;
+        this.showGridOptions = true;
+        this.showHotlistButton = false;
+        this.hideExport = false;
+        this.showInsightsAction = false;
+        this.enableAdvancedSearch = true;
+        this.defaultActionButtons = [];
+        this.showLabels = true;
+        this.hideBar = false;
+    }
+    checkWindowWidth() {
+        const windowWidth = window.innerWidth;
+        this.showLabels = windowWidth >= 1000;
+    }
+    onResize() {
+        this.checkWindowWidth();
+    }
+    componentWillLoad() {
+        this.checkWindowWidth();
+        this.defaultActionButtons = this.initializeActionButtons();
+        this.updateHideBar();
+    }
+    componentDidLoad() {
+        // Add event listener for window resize
+        window.addEventListener('resize', this.checkWindowWidth.bind(this));
+    }
+    disconnectedCallback() {
+        // Remove event listener when component is unloaded
+        window.removeEventListener('resize', this.checkWindowWidth.bind(this));
+    }
+    updateHideBar() {
+        const visibleButtons = this.defaultActionButtons.filter(btn => btn.visible);
+        this.hideBar = visibleButtons.every(btn => this.hiddenActionButtons.includes(btn.label));
+    }
+    initializeActionButtons() {
+        let buttons = [
+            {
+                icon: Save16,
+                tooltip: 'Save View',
+                label: 'Save View',
+                visible: true,
+                showLabel: true,
+                iconClassName: 'save-icon-class',
+                clickHandler: this.customSaveViewClick,
+            },
+            {
+                icon: Star16,
+                tooltip: 'Views',
+                label: 'Views',
+                visible: true,
+                showLabel: true,
+                iconClassName: 'save-icon-class',
+                clickHandler: this.customShowViewClick,
+            },
+            {
+                icon: List16,
+                tooltip: 'Hotlists',
+                label: 'Hotlists',
+                visible: true,
+                showLabel: true,
+                iconClassName: 'save-icon-class',
+                clickHandler: this.customShowHotlistClick,
+            },
+            {
+                icon: AdvancedQuery16,
+                tooltip: 'Search',
+                label: 'Search',
+                visible: this.enableAdvancedSearch,
+                showLabel: true,
+                iconClassName: 'save-icon-class',
+                clickHandler: this.customShowCustomSearchClick,
+            },
+            {
+                icon: Renew16,
+                tooltip: 'Refresh',
+                label: 'Refresh',
+                visible: true,
+                showLabel: true,
+                iconClassName: 'save-icon-class',
+                clickHandler: this.customRefreshClick,
+            },
+            {
+                icon: Close16,
+                tooltip: 'Clear Search',
+                label: 'Clear Search',
+                visible: true,
+                showLabel: true,
+                iconClassName: 'save-icon-class',
+                clickHandler: this.customClearClick,
+            },
+        ];
+        if (!this.hideExport) {
+            buttons.splice(3, 0, {
+                icon: Download16,
+                tooltip: 'Export',
+                label: 'Export',
+                visible: true,
+                showLabel: true,
+                iconClassName: 'size-to-fit-icon-class',
+                clickHandler: this.customExportClick,
+            });
+        }
+        if (this.showInsightsAction) {
+            buttons.splice(this.hideExport ? 3 : 4, 0, {
+                icon: DataEnrichment16,
+                tooltip: 'Insights',
+                label: 'Insights',
+                visible: true,
+                showLabel: true,
+                iconClassName: 'save-icon-class',
+                clickHandler: this.customInsightsClick,
+            });
+        }
+        if (!this.showHotlistButton) {
+            buttons = buttons.filter((btn) => btn.label !== 'Hotlists');
+        }
+        if (this.showGridOptions) {
+            buttons.push({
+                icon: Settings16,
+                tooltip: 'Grid Options',
+                label: 'Grid Options',
+                visible: true,
+                showLabel: false,
+                iconClassName: 'save-icon-class',
+                clickHandler: this.customShowGridOptionsClick,
+            });
+        }
+        return buttons;
+    }
+    handleAdvancedSearchToggle() {
+        this.defaultActionButtons = this.initializeActionButtons();
+    }
+    onHiddenActionButtonsChange() {
+        this.updateHideBar();
+    }
+    render() {
+        return (h("div", { key: '26e89c4ee76b8c2a51d4c588a21d10ed9ba57735', class: "header-bar", style: !this.hideBar ? { background: 'var(--accent-color)' } : undefined }, h("div", { key: 'c17ce12953b0157ac2c7cffaffdcb5a67c8af1cf', class: "title-section" }, h("div", { key: '4b1bfb88c001254724afc3bb36c8b368a23443b0' }, h("unity-typography", { key: '6ff25bd7ca5eab892371903f35815cfc3b905ffa', variant: "h4" }, this.title, " "), ' ')), h("div", { key: 'fb420f82f35b04f3db1a3070d73d2c63cd74f63f', class: "button-section" }, h("div", { key: '4128e2dcf60f278fe3fd27b011f4a7a3852b7aa6' }, h("slot", { key: '54fdaa02ae93aed4147e58de08720ead1ed3d43a' })), this.defaultActionButtons.map(btn => {
+            const clickHandler = (event) => {
+                if (btn.clickHandler) {
+                    btn.clickHandler(event);
+                }
+                else {
+                    console.log(`${btn.label} Clicked but no custom handler defined`);
+                }
+            };
+            if (!this.hiddenActionButtons.includes(btn.label) && btn.visible) {
+                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: 'a8018da54bc2463781dbbcf318d466a9bbbe49c0', label: this.primaryActionLabel, onClick: (event) => this.primaryActionClick(event), size: "tall" }, this.primaryActionIcon && h("udp-icon", { key: '8a5589c358a38d5fc35635cfd82f2ecc091547d1', iconName: this.primaryActionIcon, darkIcon: false }))))));
+    }
+    static get watchers() { return {
+        "window:resize": ["onResize"],
+        "enableAdvancedSearch": ["handleAdvancedSearchToggle"],
+        "hiddenActionButtons": ["onHiddenActionButtonsChange"]
+    }; }
+};
+GridPrimaryBar.style = gridPrimaryBarCss;
+
+const kpiListCss = ".kpi-container{display:flex;align-items:center;padding-top:8px;padding-bottom:8px;justify-content:flex-end;padding-right:16px;background-color:rgb(247, 245, 243)}.kpi-item{display:flex;align-items:center}.kpi-label{margin-right:5px;font-weight:700}.kpi-value{margin-left:5px}.divider{border-left:1px solid black;height:20px;margin:0 10px}";
+
+const KpiList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h("div", { key: '1c4ccf7e146ac01b9c3361497d7e1e30fbb75ad3', 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',
+                fontFamily: 'sans-serif'
+            } }, " ", h("unity-typography", null, " ", kpi.label, ": "), "  "), h("span", { class: "kpi-value", style: {
+                fontSize: ' 0.875rem',
+                fontWeight: '600',
+                lineHeight: '0.25',
+                fontFamily: 'sans-serif'
+            } }, "  ", h("unity-typography", null, " ", kpi.value.toLocaleString(), " "), " "), index < this.kpiValues.length - 1 && h("div", { class: "divider" }))))));
+    }
+};
+KpiList.style = kpiListCss;
+
+const saveViewFormDialogCss = ".info-columns{display:flex}.column{width:100px}.toggle-options{display:flex;gap:16px;align-items:center;margin-bottom:16px}";
+
+const SaveViewFormDialog = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.name = '';
+        // Change isPrivate to be a number, defaulting to 2 (false/not private)
+        this.isPrivate = 2;
+        this.isDefault = false;
+        this.gridViewId = '';
+        this.fetchedCurrentView = false;
+        this.handleNameChange = event => {
+            this.name = event.target.value;
+        };
+        // Update the toggle method to flip between 1 (true/private) and 2 (false/not private)
+        this.handlePrivateChange = () => {
+            this.isPrivate = this.isPrivate === 1 ? 2 : 1;
+        };
+        this.handleDefaultChange = () => {
+            this.isDefault = !this.isDefault;
+        };
+        // Ensure handleSubmit correctly handles the isPrivate number
+        this.handleSubmit = () => {
+            this.handleFormSubmit(this.name, this.isPrivate, this.isDefault);
+            this.resetForm();
+        };
+        this.handleViewUpdate = () => {
+            this.handleViewAndConfigurationSubmit(this.name, this.isPrivate, this.isDefault);
+        };
+        this.resetForm = () => {
+            this.name = '';
+            this.isPrivate = 2;
+            this.isDefault = false;
+        };
+    }
+    handleModalOpen(newValue) {
+        var _a, _b;
+        if (newValue) {
+            // Reset the state every time the modal opens
+            this.name = this.currentName || '';
+            this.isPrivate = (_a = this.currentIsPrivate) !== null && _a !== void 0 ? _a : 2; // Set to 2 if null/undefined
+            this.isDefault = (_b = this.currentIsDefault) !== null && _b !== void 0 ? _b : false;
+            this.gridViewId = this.currentGridViewId || '';
+        }
+    }
+    render() {
+        return (h("fluent-dialog", { key: '85c1777bba527ba5a4bdb91d7d3cb84db162671f', 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: 'c5d6a85b2c9bdd9db4625664359a669eb79fa93f', class: "save-form" }, h("text-field", { key: 'f8647870cdb2c014d6cb1ee2c486ac3942863d33', label: "View Name", placeholder: "Create a name for your view", value: this.name, onInput: (event) => this.handleNameChange(event) }), h("div", { key: '8cdb4fa7fd74ed5c3f6ee823ab05874cd4dc964b', class: "toggle-options" }, h("div", { key: 'c97cc2bd0a11275b0453a5fe9103d8833cbc79ac' }, h("stencil-toggle", { key: 'b037a62d627f65bad73d907f21ef32f81d4aedb3', label: "Private", checked: this.isPrivate === 1, onToggledChange: this.handlePrivateChange }), ' '), h("div", { key: 'c879762bdbdbdd9a43629cc0fbf8e2359c147d88' }, h("stencil-toggle", { key: '670be85ca0d64a91af97acf685dbd784088a0bb5', label: "Default", checked: this.isDefault, onToggledChange: this.handleDefaultChange, style: { marginTop: '10px' } }))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["handleModalOpen"]
+    }; }
+};
+SaveViewFormDialog.style = saveViewFormDialogCss;
+
+const sideSheetCss = ".side-sheet {\n  /* --- OLD BEHAVIOR REMOVED --- */\n  /* width: 0; */\n  /* transition: width 0.5s ease; */\n\n  /* --- NEW BEHAVIOR ADDED --- */\n  /* 1. The sheet now has a fixed width from the start. */\n  height: 100%;\n  position: fixed;\n  z-index: 9999;\n  top: 0;\n  bottom: 0;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  background-color: #ffffff;\n\n  /* 2. The animation is now on the transform property. */\n  transition: transform 0.3s ease;\n\n  /* Hide scrollbar for Chrome, Safari and Opera */\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Hide scrollbar for Firefox */\n  scrollbar-width: none;\n\n  /* Hide scrollbar for IE and Edge */\n  -ms-overflow-style: none;\n}\n\n\n/* --- NEW: Define the starting position (off-screen) --- */\n.side-sheet.left {\n  left: 0;\n  transform: translateX(-100%); /* Start hidden to the left */\n}\n\n.side-sheet.right {\n  right: 0;\n  transform: translateX(100%); /* Start hidden to the right */\n}\n\n/* --- NEW: Apply width directly to the class, not just when open --- */\n.side-sheet.long {\n  width: 1300px;\n}\n\n.side-sheet.short {\n  width: 480px;\n}\n\n/* --- NEW: The .open class now only changes the transform --- */\n.side-sheet.open {\n  transform: translateX(0); /* Slide into view */\n}\n\n\n/* --- BACKDROP REMAINS THE SAME --- */\n.backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 9;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.5s ease;\n}\n\n.backdrop.open {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* --- OTHER STYLES REMAIN THE SAME --- */\n.title {\n display: flex;\n flex: 1;\n align-items: center;\n}\n\n.close-button {\n  display: flex;\n  align-items: center;\n}\n\n.ag-root.ag-layout-normal {\n  font-family: sans-serif !important;\n  font-size: 13px;\n}\n\n/* The inline style for custom width in your component will still work perfectly. */\n";
+
+const SideSheet = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.position = 'left';
+        this.widthOption = 'long';
+        this.disabled = false;
+        this.padding = true;
+        this.buttonTransform = "translate(0,0)";
+    }
+    render() {
+        const widthClass = typeof this.widthOption === 'number' ? 'custom-width' : this.widthOption;
+        const sideSheetStyle = typeof this.widthOption === 'number' ? { width: `${this.widthOption}px` } : {};
+        return (h("div", { key: '036108765e0adb7887260f2cf6720a4a17232a67' }, h("div", { key: 'a272a6e1416f15b53422016b2c019ff921ff1860', class: { 'backdrop': true, 'open': this.open }, onClick: this.toggleDrawer }), h("div", { key: 'e3ebe3552f40173924563f615c15e1cd7c555b80', class: { 'side-sheet': true, 'open': this.open, 'close': !this.open, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, h("div", { key: '91f6850ea18494467fe29e2b4d6055fd819afb5c', class: "title" }, h("div", { key: '3520199bade6fc0cd5bf4189b6c7295e9632473a', class: 'close-button' }, h("stencil-icon-button", { key: '3a40fdcca73e3a4ec9a2e8f70af24d68bec25562', icon: Close24, onClick: this.toggleDrawer })), h("div", { key: '639de6b74e7be616b993fbcc2cb32306cd537b4d', class: 'title' }, h("unity-typography", { key: '7b696cc1dfef033054bb5096ce1c1c12c2683d02', variant: "data-display-four" }, this.title)), this.sideSheetButtonLabel && h("custom-button", { key: '9062ff7cd51930b5321f3c6d3663a9637f25842a', style: { transform: this.buttonTransform, }, size: 'tall', disabled: this.disabled, onCustomClick: () => this.handleSideSheetButton() }, this.sideSheetButtonLabel)), h("side-sheet-container", { key: '325e75f40c3033746c2ab7f559ad24825a37b78a', padding: this.padding }, h("slot", { key: '86507469693b1d4cdca7d22d796a3f92561732e6' })))));
+    }
+};
+SideSheet.style = sideSheetCss;
+
+const udpHotlistFormCss = ".submit-button{margin-top:18px;display:flex;justify-content:flex-end;margin-right:24px;gap:8px}.wrapper{border-bottom:1px solid #d9d9d9;padding-bottom:16px;margin-bottom:10px;width:480px}";
+
+const UdpHotlistForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.name = '';
+        this.isPrivate = false;
+        this.handleNameChange = (event) => {
+            this.name = event.target.value;
+        };
+        this.handlePrivateChange = () => {
+            this.isPrivate = !this.isPrivate;
+        };
+        // Refreshes the page
+        //   handleSubmit = () => {
+        //     // Now passing columnState as well
+        //     this.handleFormSubmit(this.name, this.isPrivate, this.columnState);
+        //   };
+        this.handleSubmit = (event) => {
+            event.preventDefault();
+            this.handleFormSubmit(this.name, this.isPrivate, this.columnState);
+        };
+        // Handling custom button click
+        this.onCustomButtonClick = () => {
+            this.handleFormSubmit(this.name, this.isPrivate, this.columnState);
+        };
+    }
+    //   handleCancelClick = () => {
+    //     console.log('Cancel button clicked');
+    //   }
+    render() {
+        return (h("div", { key: 'dfd1510767f1b15176138dc9bb25f076db131874', class: "wrapper" }, h("form", { key: 'efee156202a1c075d8b1c253930c9df368ce8d38', class: "save-form", onSubmit: this.handleSubmit }, h("text-field", { key: 'ad287c008b12dbdc4783c90b3c3201f727485de8', label: "Hotlist Name", placeholder: "Create a name for your Hotlist", value: this.name, onChange: (event) => this.handleNameChange(event) }), h("stencil-toggle", { key: '4cb19e2ea8528c6b2459e2deed1b2ea2733067db', label: "Private", checked: this.isPrivate, onToggledChange: this.handlePrivateChange }), h("div", { key: '2d60f39c3bd41227ca55fc8e3f8a83e7966fb241', class: "submit-button" }, h("custom-button", { key: 'c2c6c98f245d680326f082fbc0c9724b8f5ebdb5', variant: 'outline', type: "submit", onCustomClick: this.handleCancelClick }, "Cancel"), h("custom-button", { key: '57d867b6bbfbb0db075fe10a5b3abbc0839c5633', disabled: !this.name, type: "submit", onCustomClick: this.onCustomButtonClick }, "Create List")))));
+    }
+    get el() { return getElement(this); }
+};
+UdpHotlistForm.style = udpHotlistFormCss;
+
+const udpNotificationCss = ":host{position:fixed;top:1rem;right:1rem;z-index:1000;display:block;}.udp-notification{min-width:250px;margin:0.5rem;padding:0.5rem 1rem;border-radius:4px;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);display:flex;align-items:center;justify-content:space-between;transition:transform 0.3s ease-in-out, opacity 0.3s ease-in-out;transform:translateY(-100%);opacity:0;visibility:hidden;background-color:#f4f4f4;}.visible{transform:translateY(0);opacity:1;visibility:visible}.status-success{border-left:4px solid #5aa700;}.status-error{border-left:4px solid #e0182d;}.status-warning{border-left:4px solid #ff832b;}.message{flex:1;padding:0 1rem}.close-button{background:none;border:none;font-size:1.5rem;cursor:pointer}";
+
+const UdpNotification = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.userCancel = false;
+        this.active = false;
+    }
+    activeChanged(newValue) {
+        if (newValue && !this.userCancel) {
+            // Hide the notification after 3 seconds only if userCancel is false
+            setTimeout(() => this.active = false, 3000);
+        }
+    }
+    render() {
+        const statusClass = `status-${this.status}`;
+        return (h("div", { key: 'f233a043af144cbc01b0936119343fde570697b2', class: {
+                'udp-notification': true,
+                'visible': this.active,
+                [statusClass]: true // This will apply the correct class based on the status
+            } }, this.userCancel && (h("button", { key: 'b818659d8206667153873cfa9bd901fb86952769', class: "close-button", onClick: () => this.active = false }, "\u00D7")), h("span", { key: '92b2551a93ce3f787ca1335ec8a5dec2eedd5c34', class: "message" }, " ", h("unity-typography", { key: '105642966ebe7705ca816f8cf5f43af654ba594a', variant: 'body' }, " ", this.message, " "))));
+    }
+    static get watchers() { return {
+        "active": ["activeChanged"]
+    }; }
+};
+UdpNotification.style = udpNotificationCss;
+
+const udpPopOverGridActionHeaderCss = ".popover{background-color:white;border:1px solid #ccc;padding:10px;box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);z-index:1000;position:relative}";
+
+const UdpPopOver = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isOpen = false;
+        this.handleClose = (event) => {
+            if (event && this.el.shadowRoot.contains(event.target)) {
+                return; // Clicked inside, do nothing
+            }
+            this.isOpen = false;
+            document.removeEventListener('click', this.handleClose);
+        };
+    }
+    componentWillLoad() {
+        if (this.isOpen) {
+            document.addEventListener('click', this.handleClose);
+        }
+        document.removeEventListener('click', this.handleClose);
+    }
+    watchHandler(newValue) {
+        if (newValue) {
+            document.addEventListener('click', this.handleClose);
+        }
+        else {
+            document.removeEventListener('click', this.handleClose);
+        }
+    }
+    render() {
+        const style = {
+            display: this.isOpen ? 'block' : 'none',
+            position: 'absolute',
+            right: '6px',
+        };
+        if (this.anchorElement) {
+            const rect = this.anchorElement.getBoundingClientRect();
+            style['top'] = `${rect.bottom}px`;
+            style['left'] = `${rect.left}px`;
+        }
+        return (h("div", { key: '501d862f26a26f625a33c7ab6fd5dd83888cabfd', class: "popover", style: style }, h("unity-typography", { key: 'b77f4fcad25be974b79aa6a72d4b47e37c4d751f', variant: "caption-text" }, h("slot", { key: 'fc35f9c5ae175c396d908e85fb92dd8e0b3f4558' }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "isOpen": ["watchHandler"]
+    }; }
+};
+UdpPopOver.style = udpPopOverGridActionHeaderCss;
+
+const updAlertBannerCss = ":host{display:block;width:100%;box-sizing:border-box}.alert-banner{display:flex;align-items:center;justify-content:space-between;padding:5px;padding-left:24px;padding-right:8px;box-sizing:border-box;background-color:var(--success-color-light);color:#000}.banner-group{display:flex;width:500px;}.info{background-color:var(--success-color-light);color:#000}.warning{background-color:var(--warning-color-main);color:#000}.error{background-color:var(--error-color-light);color:#000}.success{background-color:var(--success-color-light);color:#000}.stencil-icon-button{margin-left:auto;}";
+
+const UpdAlertBanner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // Define properties here
+        this.type = 'info';
+        this.message = '';
+    }
+    render() {
+        return (h("div", { key: '072252afd7e2269488d606c655df16bf01fbcffb', class: `alert-banner ${this.type}` }, h("unity-typography", { key: '3b789c8eea442c46423777b6bd08785f9a6c34fe', variant: "data-display-three" }, "   ", this.message, " ")));
+    }
+};
+UpdAlertBanner.style = updAlertBannerCss;
+
+export { AdvancedSearch as advanced_search, AdvancedSearchGrouped as advanced_search_grouped, AgTable as ag_table, EditViewFormDialog as edit_view_form_dialog, GridPrimaryBar as grid_primary_bar, KpiList as kpi_list, SaveViewFormDialog as save_view_form_dialog, SideSheet as side_sheet, UdpHotlistForm as udp_hotlist_form, UdpNotification as udp_notification, UdpPopOver as udp_pop_over_grid_action_header, UpdAlertBanner as upd_alert_banner };
+//# sourceMappingURL=advanced-search.advanced-search-grouped.ag-table.edit-view-form-dialog.grid-primary-bar.kpi-list.save-view-form-dialog.side-sheet.udp-hotlist-form.udp-notification.udp-pop-over-grid-action-header.upd-alert-banner.entry.js.map