udp-stencil-component-library 25.18.2-beta.1 → 25.18.2-beta.10

package/dist/esm/udp-forms-ui.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CaZq3YdB.js';
-import { b as UdpFormsFieldTypeEnum } from './enums-CHxgVY-B.js';
-import { f as fontOverrideMapping, o as overrideFont } from './utils-CiUp9KGZ.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DFnjA9NX.js';
+import { b as UdpFormsSubmissionStatusEnum, c as UdpFormsFieldTypeEnum } from './enums-D5dod6Ie.js';
+import { f as fontOverrideMapping, o as overrideFont } from './utils-kwLwITIE.js';
 import { g as getIconFromName } from './iconUtils-DcPvHO4A.js';
 import './iconMapping-CPerGeNF.js';
 import '@carbon/icons/es/add/16';
@@ -94,13 +94,13 @@ import '@carbon/icons/es/image/16';
 import '@carbon/icons/es/PPT/16';
 import '@carbon/icons/es/XLS/16';
 
-const udpFormsUiCss = ".background{background-color:var(--gray-01);height:100%;overflow-y:auto;overflow-x:hidden}.item{padding-bottom:var(--spacing-02);}.items{display:flex;flex-direction:column;gap:var(--spacing-05);padding-top:var(--spacing-02);padding-bottom:var(--spacing-02)}.footer{display:flex;flex-direction:row-reverse}.submit{background-color:var(--primary-color);box-sizing:border-box;border:none;color:white;padding:8px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.3s ease;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:48px;min-height:24px;}.submit:disabled{background-color:var(--gray-05);cursor:default}.submit-card{display:flex;flex-direction:row;justify-content:space-between}.form-section-content{margin-bottom:var(--spacing-05);background-color:white;padding:16px;display:flex;flex-direction:column;gap:var(--spacing-05)}.form-container{padding-top:var(--spacing-05);padding-bottom:var(--spacing-05);min-height:100px}.form-section-block{margin-bottom:var(--spacing-05)}.form-section-header{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--primary-color, #000);color:var(--primary-contrast-text, #FFF);padding:var(--spacing-04, 16px) var(--spacing-05, 24px);align-items:center;min-height:var(--spacing-10, 60px)}.form-section-text{margin-bottom:var(--spacing-03)}.center-div{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.finish-button{display:flex;flex-direction:column;justify-content:center}.form-renderer-header{padding:var(--spacing-05) var(--spacing-05);background-color:var(--primary-color-dark, #000);color:var(--primary-contrast-text, #FFF);display:flex;justify-content:space-between;align-items:center}.header-content{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-03)}.header-text{flex:1;min-width:0;}.header-save-button{display:block;}.floating-save-button{display:block;}.error-banner{background-color:#fdecea;border:1px solid #f5c6cb;color:#a94442;padding:12px;margin-bottom:12px;border-radius:4px}@media (max-width: 768px){.header-content{flex-direction:column;align-items:stretch;gap:var(--spacing-02)}.header-text{margin-bottom:var(--spacing-02)}}@media (max-height: 600px){.header-save-button{display:block}.floating-save-button{display:none}}.auto-save-status{margin-top:var(--spacing-02);padding:var(--spacing-01) 0;font-size:12px;opacity:0.8}";
+const udpFormsUiCss = () => `.background{background-color:var(--gray-01);height:100%;overflow-y:auto;overflow-x:hidden}.item{padding-bottom:var(--spacing-02);}.items{display:flex;flex-direction:column;gap:var(--spacing-05);padding-top:var(--spacing-02);padding-bottom:var(--spacing-02)}.footer{display:flex;flex-direction:row-reverse}.submit{background-color:var(--primary-color);box-sizing:border-box;border:none;color:white;padding:8px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.3s ease;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:48px;min-height:24px;}.submit:disabled{background-color:var(--gray-05);cursor:default}.submit-card{display:flex;flex-direction:row;justify-content:space-between}.form-section-content{margin-bottom:var(--spacing-05);background-color:white;padding:16px;display:flex;flex-direction:column;gap:var(--spacing-05)}.form-container{padding-top:var(--spacing-05);padding-bottom:var(--spacing-05);min-height:100px}.form-section-block{margin-bottom:var(--spacing-05)}.form-section-header{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--primary-color, #000);color:var(--primary-contrast-text, #FFF);padding:var(--spacing-04, 16px) var(--spacing-05, 24px);align-items:center;min-height:var(--spacing-10, 60px)}.form-section-text{margin-bottom:var(--spacing-03)}.center-div{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.finish-button{display:flex;flex-direction:column;justify-content:center}.form-renderer-header{padding:var(--spacing-05) var(--spacing-05);background-color:var(--primary-color-dark, #000);color:var(--primary-contrast-text, #FFF);display:flex;justify-content:space-between;align-items:center}.header-content{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-03)}.header-text{flex:1;min-width:0;}.header-save-button{display:block;}.floating-save-button{display:block;}.error-banner{background-color:#fdecea;border:1px solid #f5c6cb;color:#a94442;padding:12px;margin-bottom:12px;border-radius:4px}@media (max-width: 768px){.header-content{flex-direction:column;align-items:stretch;gap:var(--spacing-02)}.header-text{margin-bottom:var(--spacing-02)}}@media (max-height: 600px){.header-save-button{display:block}.floating-save-button{display:none}}.auto-save-status{margin-top:var(--spacing-02);padding:var(--spacing-01) 0;font-size:12px;opacity:0.8}`;
 
 const UdpFormsUi = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.formDirtyChange = createEvent(this, "formDirtyChange");
-        this.initialValues = {};
+        this.currentValues = {};
         this.submitSuccessful = false;
         this.isLoading = false;
         this.isSaving = false;
@@ -134,10 +134,8 @@ const UdpFormsUi = class {
         }
     }
     watchIsSaving(newValue, oldValue) {
-        console.log('isSaving watcher triggered:', { oldValue, newValue, saveErrorMessage: this.saveErrorMessage });
         // When isSaving changes from true to false (save completed successfully)
         if (oldValue === true && newValue === false && !this.saveErrorMessage) {
-            console.log('Setting showSavedMessage to true');
             this.showSavedMessage = true;
             // Clear any existing timeout
             if (this.savedMessageTimeoutId) {
@@ -145,7 +143,6 @@ const UdpFormsUi = class {
             }
             // Hide the "Saved" message after 5 seconds
             this.savedMessageTimeoutId = setTimeout(() => {
-                console.log('Hiding saved message after 5 seconds');
                 this.showSavedMessage = false;
             }, 5000);
         }
@@ -192,7 +189,7 @@ const UdpFormsUi = class {
         else if ((_f = (_e = (_d = this.udpForm) === null || _d === void 0 ? void 0 : _d.styleOverrides) === null || _e === void 0 ? void 0 : _e.background) === null || _f === void 0 ? void 0 : _f.backgroundColor) {
             backgroundOverrides.backgroundColor = (_j = (_h = (_g = this.udpForm) === null || _g === void 0 ? void 0 : _g.styleOverrides) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j.backgroundColor;
         }
-        return (h("div", { class: 'background', style: backgroundOverrides }, h("udp-container", { maxWidth: "md" }, h("div", { class: "form-container" }, !this.submitSuccessful ? (h("stencil-form", { handleSubmit: this.handleSubmit, initialValues: this.initialValues, handleChange: this.handleChange, onDirtyChange: event => this.formDirtyChange.emit(event.detail) }, this.readonly &&
+        return (h("div", { class: 'background', style: backgroundOverrides }, h("udp-container", { maxWidth: "md" }, h("div", { class: "form-container" }, !this.submitSuccessful ? (h("stencil-form", { handleSubmit: this.handleSubmit, initialValues: this.currentValues, handleChange: this.handleChange, onDirtyChange: event => this.formDirtyChange.emit(event.detail) }, this.readonly &&
             (h("div", { class: "error-banner" }, h("unity-typography", { variant: "body2" }, "View Only Mode. The contents of this form cannot be changed."))), h("fluent-dialog", { open: this.isDialogOpen, message: this.dialogMessage, labelOne: 'Confirm', labelTwo: 'Cancel', actionOne: () => this.dialogAction(), actionTwo: () => (this.isDialogOpen = false) }), h("div", null, h("div", { class: "form-section-block" }, h("div", { class: "form-renderer-header", style: Object.assign({}, (((_l = (_k = this.udpForm) === null || _k === void 0 ? void 0 : _k.styleOverrides) === null || _l === void 0 ? void 0 : _l.headerBackgroundColor) && {
                 backgroundColor: this.udpForm.styleOverrides.headerBackgroundColor,
             })) }, h("unity-typography", { id: this.titleId, variant: 'h6', color: "inherit" }, this.udpForm.name), this.showAutoSaveStatus && (h("div", { class: "auto-save-status" }, this.saveErrorMessage && (h("unity-typography", { variant: "body", color: "secondary" }, this.saveErrorMessage)))), this.isShowManualSaveIcon && (h("udp-save-draft-button", { isVisible: this.isShowManualSaveIcon, isSaving: this.isSaving,
@@ -222,10 +219,10 @@ const UdpFormsUi = class {
                         helperText: (_a = this.udpForm.styleOverrides) === null || _a === void 0 ? void 0 : _a.helperText,
                         paragraphText: (_b = this.udpForm.styleOverrides) === null || _b === void 0 ? void 0 : _b.paragraphText,
                         questionText: (_c = this.udpForm.styleOverrides) === null || _c === void 0 ? void 0 : _c.questionText,
-                    }, question: question, questionNumber: num, value: (_g = (_f = (_e = (_d = this.initialValues) === null || _d === void 0 ? void 0 : _d[sectionKey]) === null || _e === void 0 ? void 0 : _e[question.name]) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : '', disabled: this.disabled, readonly: this.readonly, key: question.questionIdentifierKey, initialValues: this.initialValues, clientUserInfo: this.clientUserInfo, udpFormSubmission: this.udpFormSubmission })));
+                    }, question: question, questionNumber: num, value: (_g = (_f = (_e = (_d = this.currentValues) === null || _d === void 0 ? void 0 : _d[sectionKey]) === null || _e === void 0 ? void 0 : _e[question.name]) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : '', disabled: this.disabled, readonly: this.readonly, key: question.questionIdentifierKey, currentValues: this.currentValues, clientUserInfo: this.clientUserInfo, udpFormSubmission: this.udpFormSubmission })));
             }))))));
-        }), ((_r = this.udpFormSubmission) === null || _r === void 0 ? void 0 : _r.status) != 2 && (h("div", { class: "footer" }, h("input", { disabled: this.isLoading || this.disabled || this.readonly, type: "submit", value: "Submit", class: "submit", id: "udpRecord-udp-forms-renderer-Submit", onClick: () => {
-                console.log('Submit button clicked');
+        }), ((_r = this.udpFormSubmission) === null || _r === void 0 ? void 0 : _r.status) != UdpFormsSubmissionStatusEnum.Submitted && (h("div", { class: "footer" }, h("input", { disabled: this.isLoading || this.disabled || this.readonly, type: "submit", value: "Submit", class: "submit", id: "udpRecord-udp-forms-renderer-Submit", onClick: () => {
+                // console.log('Submit button clicked');
                 // Let the form handle the submit naturally
             } })))))) : (
         //if the form has been submit, display success message with a button to trigger the action associated to the form
@@ -233,10 +230,11 @@ const UdpFormsUi = class {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "isSaving": ["watchIsSaving"]
+        "isSaving": [{
+                "watchIsSaving": 0
+            }]
     }; }
 };
-UdpFormsUi.style = udpFormsUiCss;
+UdpFormsUi.style = udpFormsUiCss();
 
 export { UdpFormsUi as udp_forms_ui };
-//# sourceMappingURL=udp-forms-ui.entry.js.map

package/dist/esm/udp-icon.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CaZq3YdB.js';
+import { r as registerInstance, h } from './index-DFnjA9NX.js';
 import { g as getIconFromName } from './iconUtils-DcPvHO4A.js';
 import './iconMapping-CPerGeNF.js';
 import '@carbon/icons/es/add/16';
@@ -92,7 +92,7 @@ import '@carbon/icons/es/image/16';
 import '@carbon/icons/es/PPT/16';
 import '@carbon/icons/es/XLS/16';
 
-const udpIconCss = ".icon-container{height:100%;display:flex;align-items:center;color:inherit}";
+const udpIconCss = () => `.icon-container{height:100%;display:flex;align-items:center;color:inherit}`;
 
 const UdpIcon = class {
     constructor(hostRef) {
@@ -149,7 +149,6 @@ const UdpIcon = class {
         }))));
     }
 };
-UdpIcon.style = udpIconCss;
+UdpIcon.style = udpIconCss();
 
 export { UdpIcon as udp_icon };
-//# sourceMappingURL=udp-icon.entry.js.map

package/dist/esm/udp-kpi-card.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-CaZq3YdB.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DFnjA9NX.js';
 
-const udpKpiCardCss = ":host{display:inline-block;height:100%}.kpi-card{display:block;text-decoration:none;color:inherit;height:100%}.kpi-card__wrapper{width:160px;height:100%;min-height:80px;border-radius:var(--border-radius, 4px);box-shadow:var(--elevation-02);border:2px solid transparent;transition:var(--input-transition);position:relative;background:white;box-sizing:border-box}.kpi-card--active .kpi-card__wrapper{box-shadow:var(--elevation-04);border-color:var(--card-color, --info-color-main);transform:scale(1.02);z-index:1}.kpi-card--clickable .kpi-card__wrapper{cursor:pointer}.kpi-card--clickable:hover .kpi-card__wrapper{box-shadow:var(--elevation-04);z-index:1;transform:scale(1.02);border-color:var(--card-color, --info-color-main)}.kpi-card--clickable:focus{outline:none}.kpi-card--clickable:focus-visible .kpi-card__wrapper{box-shadow:var(--elevation-04), 0 0 0 3px color-mix(in srgb, var(--card-color, --info-color-main) 30%, transparent);z-index:1;border-color:var(--card-color, --info-color-main)}.kpi-card--active.kpi-card--clickable:hover .kpi-card__wrapper{box-shadow:var(--elevation-04)}.kpi-card__content{padding:var(--spacing-03) var(--spacing-04);overflow:hidden}.kpi-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-03);color:var(--card-color, --info-color-main)}.kpi-card-caption{color:var(--text-hint);margin-top:-5px}";
+const udpKpiCardCss = () => `:host{display:inline-block;height:100%}.kpi-card{display:block;text-decoration:none;color:inherit;height:100%}.kpi-card__wrapper{width:160px;height:100%;min-height:80px;border-radius:var(--border-radius, 4px);box-shadow:var(--elevation-02);border:2px solid transparent;transition:var(--input-transition);position:relative;background:white;box-sizing:border-box}.kpi-card--active .kpi-card__wrapper{box-shadow:var(--elevation-04);border-color:var(--card-color, --info-color-main);transform:scale(1.02);z-index:1}.kpi-card--clickable .kpi-card__wrapper{cursor:pointer}.kpi-card--clickable:hover .kpi-card__wrapper{box-shadow:var(--elevation-04);z-index:1;transform:scale(1.02);border-color:var(--card-color, --info-color-main)}.kpi-card--clickable:focus{outline:none}.kpi-card--clickable:focus-visible .kpi-card__wrapper{box-shadow:var(--elevation-04), 0 0 0 3px color-mix(in srgb, var(--card-color, --info-color-main) 30%, transparent);z-index:1;border-color:var(--card-color, --info-color-main)}.kpi-card--active.kpi-card--clickable:hover .kpi-card__wrapper{box-shadow:var(--elevation-04)}.kpi-card__content{padding:var(--spacing-03) var(--spacing-04);overflow:hidden}.kpi-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-03);color:var(--card-color, --info-color-main)}.kpi-card-caption{color:var(--text-hint);margin-top:-5px}`;
 
 const UdpKpiCard = class {
     constructor(hostRef) {
@@ -109,7 +109,6 @@ const UdpKpiCard = class {
         return (h(Host, { key: 'e3ea56203c667471f7d8f504f62ddcb1a1b871f0' }, isNavigation ? (h("a", { href: this.href, class: cardClasses, style: { textDecoration: 'none' } }, content)) : (h("div", { class: cardClasses, onClick: isClickable ? this.handleClick : undefined, onKeyDown: isClickable ? this.handleKeyDown : undefined, tabIndex: isClickable ? 0 : undefined, "aria-current": (_a = this.active) !== null && _a !== void 0 ? _a : undefined, "aria-label": this.primaryText, role: "button" }, content))));
     }
 };
-UdpKpiCard.style = udpKpiCardCss;
+UdpKpiCard.style = udpKpiCardCss();
 
 export { UdpKpiCard as udp_kpi_card };
-//# sourceMappingURL=udp-kpi-card.entry.js.map

package/dist/esm/udp-kpi-cards.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-CaZq3YdB.js';
+import { r as registerInstance, c as createEvent, h } from './index-DFnjA9NX.js';
 
-const udpKpiCardsCss = ".kpi-cards-container{display:grid;grid-template-columns:repeat(auto-fit, 160px);grid-auto-rows:1fr;gap:var(--spacing-03, '8px');align-items:stretch}";
+const udpKpiCardsCss = () => `.kpi-cards-container{display:grid;grid-template-columns:repeat(auto-fit, 160px);grid-auto-rows:1fr;gap:var(--spacing-03, '8px');align-items:stretch}`;
 
 const UdpKpiCards = class {
     constructor(hostRef) {
@@ -35,7 +35,6 @@ const UdpKpiCards = class {
             }), h("slot", { key: '044c295aaa60bb80c36aa845bdb92d30e9b47b3b' })));
     }
 };
-UdpKpiCards.style = udpKpiCardsCss;
+UdpKpiCards.style = udpKpiCardsCss();
 
 export { UdpKpiCards as udp_kpi_cards };
-//# sourceMappingURL=udp-kpi-cards.entry.js.map

package/dist/esm/udp-linear-loader_2.entry.js

@@ -0,0 +1,285 @@
+import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-DFnjA9NX.js';
+import Close24 from '@carbon/icons/es/close/24';
+
+const udpLinearLoaderCss = () => `:host{--udp-loader-primary-color:var(--primary-color, #2953ff);--udp-loader-secondary-color:var(--secondary-color, #6f767a);--udp-loader-success-color:var(--success-color, #0da40d);--udp-loader-error-color:var(--error-color, #ff0000);--udp-loader-warning-color:var(--warning-color, #ffa500);--udp-loader-info-color:var(--info-color, #2953ff)}.loader{position:relative;width:100%;height:4px;background-color:transparent;overflow:hidden;}.indeterminate{background-color:var(--udp-loader-primary-color);position:absolute;width:40%;height:100%;animation:indeterminate 1s linear infinite}.loader--color-primary .indeterminate{background-color:var(--udp-loader-primary-color)}.loader--color-secondary .indeterminate{background-color:var(--udp-loader-secondary-color)}.loader--color-success .indeterminate{background-color:var(--udp-loader-success-color)}.loader--color-error .indeterminate{background-color:var(--udp-loader-error-color)}.loader--color-warning .indeterminate{background-color:var(--udp-loader-warning-color)}.loader--color-info .indeterminate{background-color:var(--udp-loader-info-color)}@keyframes indeterminate{0%{left:-50%;width:50%}100%{left:100%;width:100%}}`;
+
+const UdpLinearLoader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The color of the loader. It supports theming using global CSS variables.
+         */
+        this.color = 'primary';
+    }
+    render() {
+        const loaderClasses = {
+            loader: true,
+            [`loader--color-${this.color}`]: true,
+        };
+        return (h(Host, { key: '9a117a437dfa0fb96e428aa052de8a5d04f8fd15' }, h("div", { key: '369d4f034b7d962bcc7eb621a078db1f107a0f8a', class: loaderClasses }, h("div", { key: 'ed2a6774666c41ba5e67147ffedce6af63aeb1e1', class: "indeterminate" }))));
+    }
+};
+UdpLinearLoader.style = udpLinearLoaderCss();
+
+const udpSideSheetCss = () => `:host{position:fixed;top:0;left:0;width:0;height:0;overflow:hidden;transform:translate(0);z-index:9999;visibility:hidden;transition:visibility 0s 0.2s, width 0s 0.2s, height 0s 0.2s}:host(.is-visible){width:100vw;height:100vh;overflow:visible;visibility:visible;transition-delay:0s}.backdrop{background:rgba(0, 0, 0, 0.5);width:100%;height:100%;position:fixed;top:0;left:0;opacity:0;transition:opacity 0.2s ease-in-out}:host(.is-visible) .backdrop{opacity:1}.sheet{background:white;height:100vh;position:fixed;top:0;display:flex;flex-direction:column;box-shadow:0 0 4px rgba(0, 0, 0, 0.3);transition:transform 0.2s ease-in-out;width:100%}.sheet.right{right:0;transform:translateX(100%)}.sheet.left{left:0;transform:translateX(-100%)}:host(.is-visible) .sheet{transform:translateX(0)}.sheet.sm{max-width:360px}.sheet.md{max-width:600px}.sheet.lg{max-width:960px}.sheet.full{max-width:100%}.sheet.custom-width{}.title-container{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;box-shadow:var(--elevation-01, 0 4px 8px rgba(0, 0, 0, 0.1));gap:var(--spacing-02)}.title-text{flex-grow:1;text-align:left;}.close-button{flex-shrink:0}.header-action-button{flex-shrink:0;display:flex;align-items:center;gap:var(--spacing-02, 4px);padding:var(--spacing-03, 8px) var(--spacing-03, 8px) var(--spacing-03, 8px) 0}.content{overflow-y:auto;flex-grow:1;background-color:var(--gray-01)}.content.padding{padding:var(--spacing-05, 24px)}.footer{padding:var(--spacing-03, 8px);box-shadow:var(--elevation-01, 0 4px 8px rgba(0, 0, 0, 0.1));display:flex;justify-content:flex-end;flex-shrink:0;width:100%;gap:var(--spacing-02, 4px);align-items:center}.footer.secondary-button-overflow{flex-direction:row-reverse}.footer-secondary-buttons-container{flex-grow:2;width:100%}.footer-secondary-buttons{display:flex;justify-content:flex-end;gap:var(--spacing-02, 4px);align-items:center}.footer-secondary-buttons.secondary-button-overflow{flex-grow:1}.loader-container{height:4px;width:100%;background-color:var(--gray-01)}.loader-container udp-linear-loader{visibility:hidden;opacity:0;transition:none}.loader-container udp-linear-loader.is-loading{visibility:visible;opacity:1;}`;
+
+const UdpSideSheet = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.udpSideSheetClose = createEvent(this, "udpSideSheetClose");
+        this.udpPrimaryButtonClick = createEvent(this, "udpPrimaryButtonClick");
+        this.udpHeaderActionButtonClick = createEvent(this, "udpHeaderActionButtonClick");
+        /** When true, the side sheet is open and visible */
+        this.open = false;
+        /** Position of the sheet on the screen */
+        this.position = 'right';
+        /** Width preset or a numeric pixel width */
+        this.width = 'md';
+        /** Controls whether default inner padding is applied */
+        this.padding = true;
+        /** When true, shows a top loader */
+        this.loading = false;
+        /** Whether the header action button is disabled */
+        this.headerActionButtonDisabled = false;
+        /** Whether the primary footer button is disabled */
+        this.primaryButtonDisabled = false;
+        /** Whether the footer should show the overflow "More" button */
+        this.showOverflowButton = false;
+        /** Whether the overflow popover is open */
+        this.openOverflowMenu = false;
+        this.visibleSecondaryButtons = [];
+        this.overflowSecondaryButtons = [];
+        /** Saved original document.body.overflow value to restore on close */
+        this.originalBodyOverflow = '';
+        /** Saved original document.body.paddingRight value to restore on close */
+        this.originalBodyPaddingRight = '';
+        /**
+         * Transition end handler used to remove the host element from body after close.
+         *
+         * @private
+         */
+        this.handleTransitionEnd = () => {
+            if (!this.open && this.hostEl.parentElement === document.body) {
+                document.body.removeChild(this.hostEl);
+            }
+        };
+        /**
+         * Close the side sheet and emit close event.
+         *
+         * @private
+         */
+        this.onClose = () => {
+            this.open = false;
+            this.udpSideSheetClose.emit();
+        };
+        /**
+         * Backdrop click handler. Only closes when clicking the backdrop itself.
+         *
+         * @param e - MouseEvent from the backdrop click
+         * @private
+         */
+        this.onCloseBackdrop = (e) => {
+            if (e.target === e.currentTarget) {
+                this.onClose();
+            }
+        };
+        /**
+         * Emit primary footer button click event.
+         *
+         * @private
+         */
+        this.onPrimaryButtonClick = () => {
+            this.udpPrimaryButtonClick.emit();
+        };
+        /**
+         * Emit header action button click event.
+         *
+         * @private
+         */
+        this.onHeaderActionButtonClick = () => {
+            this.udpHeaderActionButtonClick.emit();
+        };
+        /**
+         * Open overflow menu anchored to the clicked element.
+         *
+         * @param event - MouseEvent from the "More" button click
+         * @private
+         */
+        this.onMoreActionButtonClick = (event) => {
+            this.overflowMenuAnchor = event.currentTarget;
+            this.openOverflowMenu = true;
+        };
+        /**
+         * Close the overflow popover.
+         *
+         * @param e - optional KeyboardEvent or MouseEvent (unused)
+         * @private
+         */
+        this.handleCloseOverflowMenu = () => {
+            this.openOverflowMenu = false;
+        };
+    }
+    /**
+     * Watcher for `open` prop. Handles portal append/removal and body scroll lock.
+     *
+     * @param newValue - new value of the `open` prop
+     * @param oldValue - previous value of the `open` prop
+     */
+    handleOpenChange(newValue, oldValue) {
+        if (newValue === oldValue) {
+            return;
+        }
+        if (newValue) {
+            // Calculate scrollbar width before hiding it
+            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            // Save original values
+            this.originalBodyOverflow = document.body.style.overflow;
+            this.originalBodyPaddingRight = document.body.style.paddingRight;
+            document.body.appendChild(this.hostEl);
+            // Add padding to compensate for scrollbar
+            if (scrollbarWidth > 0) {
+                const currentPadding = parseInt(window.getComputedStyle(document.body).paddingRight) || 0;
+                document.body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;
+            }
+            document.body.style.overflow = 'hidden';
+            requestAnimationFrame(() => {
+                this.hostEl.classList.add('is-visible');
+                // Check overflow after the side sheet is visible
+                setTimeout(() => this.checkOverflow(), 50);
+            });
+        }
+        else {
+            this.hostEl.classList.remove('is-visible');
+            document.body.style.overflow = this.originalBodyOverflow;
+            document.body.style.paddingRight = this.originalBodyPaddingRight;
+            this.hostEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true });
+        }
+    }
+    /**
+     * Watcher for footer secondary buttons changes. Triggers overflow recalculation.
+     */
+    handleSecondaryButtonsChange() {
+        // Recheck overflow when buttons change
+        setTimeout(() => this.checkOverflow(), 50);
+    }
+    /**
+     * Measures footer buttons in an offscreen container and sets `showOverflowButton`.
+     * Safely returns early if required refs are unavailable.
+     */
+    checkOverflow() {
+        if (!this.footerRef || !this.measurementContainerRef) {
+            return;
+        }
+        if (!this.footerSecondaryButtons || this.footerSecondaryButtons.length === 0) {
+            this.showOverflowButton = false;
+            return;
+        }
+        // Get the footer container width (minus padding)
+        const footerWidth = this.footerRef.offsetWidth;
+        const footerStyle = window.getComputedStyle(this.footerRef);
+        const footerPaddingLeft = parseFloat(footerStyle.paddingLeft);
+        const footerPaddingRight = parseFloat(footerStyle.paddingRight);
+        const availableWidth = footerWidth - footerPaddingLeft - footerPaddingRight;
+        // Measure all buttons in the hidden measurement container
+        const measurementButtons = this.measurementContainerRef.querySelectorAll('udp-button');
+        let totalWidth = 0;
+        measurementButtons.forEach((button, index) => {
+            const buttonWidth = button && button instanceof HTMLElement ? button.offsetWidth : 0;
+            totalWidth += buttonWidth;
+            // Add gap spacing between buttons (except for the last one)
+            if (index < measurementButtons.length - 1) {
+                const containerStyle = window.getComputedStyle(this.measurementContainerRef);
+                const gap = parseFloat(containerStyle.gap) || 4; // Default gap from CSS
+                totalWidth += gap;
+            }
+        });
+        // Add a small buffer to prevent edge cases
+        const buffer = 10;
+        const isOverflowing = totalWidth + buffer > availableWidth;
+        this.showOverflowButton = isOverflowing;
+    }
+    /**
+     * Lifecycle: componentDidLoad. Sets up ResizeObserver and initial overflow check.
+     *
+     * @private
+     */
+    componentDidLoad() {
+        {
+            // Set up ResizeObserver to watch for footer size changes
+            this.resizeObserver = new ResizeObserver(() => {
+                this.checkOverflow();
+            });
+            // Initial check after a small delay to ensure DOM is ready
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    if (this.footerRef) {
+                        this.resizeObserver.observe(this.footerRef);
+                    }
+                    this.checkOverflow();
+                }, 100);
+            });
+        }
+    }
+    /**
+     * Lifecycle: disconnectedCallback. Restores body styles and disconnects observers.
+     *
+     * @private
+     */
+    disconnectedCallback() {
+        if (document.body.style.overflow === 'hidden') {
+            document.body.style.overflow = this.originalBodyOverflow;
+            document.body.style.paddingRight = this.originalBodyPaddingRight;
+        }
+        // Clean up ResizeObserver
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    /**
+     * Render the component UI.
+     *
+     * @returns JSX element tree
+     * @private
+     */
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const widthClass = typeof this.width === 'number' ? 'custom-width' : this.width;
+        const sideSheetStyle = typeof this.width === 'number' ? { maxWidth: `${this.width}px` } : {};
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const headerStartIcon = Boolean(this.headerActionButtonIcon) ? (h("udp-icon", { iconName: this.headerActionButtonIcon, color: "inherit" })) : undefined;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const overflowIcon = h("udp-icon", { key: '6da1f10cce0b9e2b2f597df9249ef45128445801', iconName: "overflowMenuVertical", color: "inherit" });
+        return (h("div", { key: '20237474eebbd73253c97b28229607d10ac91e2f', class: "backdrop", onClick: this.onCloseBackdrop }, h("div", { key: '5b09a3b7e0905a7eef6875499eb863daedcb8969', class: { sheet: true, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, h("div", { key: '99c0fa14ced2b4397b066f9348984cf85c5e6325', class: "title-container" }, h("div", { key: 'a47a3669b74bfc3e7235ab4487fcae6b24675b26', class: "close-button" }, h("stencil-icon-button", { key: '46a52c8e2f4ac95b4ef668e05905fdde9f8d0ee4',
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            icon: Close24, onClick: this.onClose, secondary: true })), h("div", { key: '267ede825a8d9fab576c7bb0eeac782b8195372c', class: "title-text" }, h("unity-typography", { key: 'b3001278f39e3311e2b736dd47d91ecb04601981', variant: "h6" }, this.title)), (this.headerActionButtonLabel || ((_a = this.headerSecondaryButtons) === null || _a === void 0 ? void 0 : _a.length) > 0) && (h("div", { key: '5751cfe92eb7b01c836085d50429f19234844b31', class: "header-action-button" }, (_b = this.headerSecondaryButtons) === null || _b === void 0 ? void 0 :
+            _b.map((item) => (h("udp-button", { variant: "outlined", disabled: item.disabled, onClick: item.onClick, endIcon: item.icon }, item.label))), this.headerActionButtonLabel && (h("udp-button", { key: 'a8f34ed12616418ee42cb5eec10e92add96598a6', disabled: this.headerActionButtonDisabled, onClick: this.onHeaderActionButtonClick,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            startIcon: headerStartIcon, variant: "contained" }, this.headerActionButtonLabel))))), h("div", { key: '94364ba51f35c7a46fddb17792c7905dfd6ebc45', class: "loader-container" }, h("udp-linear-loader", { key: 'e12b1130a11b4a9de87aa8da219f538354508e9f', class: { 'is-loading': this.loading }, color: "primary" })), h("div", { key: 'eb842f58defdcd74ef6a28815f11f21c68c8c2ee', class: { content: true, padding: this.padding } }, h("slot", { key: 'd7731b049a94fb19d38c045ea76c2bf78062ec1b' })), (this.primaryButtonLabel || ((_c = this.footerSecondaryButtons) === null || _c === void 0 ? void 0 : _c.length) > 0) && (h("div", { key: '0991510d62b3fefd3027f15b96e46d44a8ac66e1' }, h("div", { key: '148a2ebb2385c9e04c5957fff1d9be90a57d441c', class: "loader-container" }), h("div", { key: 'ffe55575f51be1c9136cc1bdf8eb3a43e14b01da', class: {
+                footer: true,
+            }, ref: el => (this.footerRef = el) }, !this.showOverflowButton && ((_d = this.footerSecondaryButtons) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", { key: '47b70ed64e9246d63819afcdb93d40eb6559a9a8', class: "footer-secondary-buttons-container" }, h("div", { key: 'ef8f34e7c4c01c4a9f689a1cffe648837663a46c', class: "footer-secondary-buttons" }, (_e = this.footerSecondaryButtons) === null || _e === void 0 ? void 0 : _e.map((item) => (h("udp-button", { variant: "outlined", disabled: item.disabled, onClick: item.onClick, endIcon: item.icon }, item.label)))))), this.showOverflowButton && (h("udp-button", { key: 'aa388701ba4d91be157b3ee4ad434d50b8d03efe', variant: "outlined", onClick: this.onMoreActionButtonClick, color: "secondary",
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            endIcon: overflowIcon }, "More")), this.primaryButtonLabel && (h("udp-button", { key: 'cb644736d0d39dcd89cd2fe2d721810781a581d2', variant: "contained", disabled: this.primaryButtonDisabled, onClick: this.onPrimaryButtonClick, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)), this.showOverflowButton && (h("udp-pop-over", { key: '7de1a458880803c3a3b912aaa567c9df82748531', anchorElement: this.overflowMenuAnchor, isOpen: this.openOverflowMenu, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleCloseOverflowMenu }, h("div", { key: 'dc0dc7b56615ede816650bf970e6059b8ea30c2d', class: "menu" }, (_f = this.footerSecondaryButtons) === null || _f === void 0 ? void 0 : _f.map(item => (h("udp-menu-item", { label: item === null || item === void 0 ? void 0 : item.label, iconName: item === null || item === void 0 ? void 0 : item.icon, onItemClick: () => {
+                item === null || item === void 0 ? void 0 : item.onClick();
+                this.handleCloseOverflowMenu();
+            }, disabled: item === null || item === void 0 ? void 0 : item.disabled })))))), h("div", { key: 'a7aecadc65eb2fb3a106c19f6101e4c6c158c960', ref: el => (this.measurementContainerRef = el), style: {
+                position: 'absolute',
+                visibility: 'hidden',
+                pointerEvents: 'none',
+                display: 'flex',
+                gap: 'var(--spacing-02, 4px)',
+            }, "aria-hidden": "true" }, (_g = this.footerSecondaryButtons) === null || _g === void 0 ? void 0 :
+            _g.map((item) => (h("udp-button", { variant: "text", size: "medium", disabled: item.disabled, endIcon: item.icon }, item.label))), this.primaryButtonLabel && (h("udp-button", { key: '64be9bf39748c7c301d4f4d264fae98ed0e40302', variant: "contained", size: "medium", disabled: this.primaryButtonDisabled, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)))))))));
+    }
+    get hostEl() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }],
+        "footerSecondaryButtons": [{
+                "handleSecondaryButtonsChange": 0
+            }]
+    }; }
+};
+UdpSideSheet.style = udpSideSheetCss();
+
+export { UdpLinearLoader as udp_linear_loader, UdpSideSheet as udp_side_sheet };

package/dist/esm/udp-list-renderer_2.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-CaZq3YdB.js';
+import { r as registerInstance, c as createEvent, h } from './index-DFnjA9NX.js';
 
-const udpListRendererCss = ":host{display:block}.udp-list-renderer-container{display:flex;flex-direction:column}.item-list-container{display:flex;flex-direction:column}.item-list-container.spacing-xs{gap:var(--spacing-02)}.item-list-container.spacing-sm{gap:var(--spacing-03)}.item-list-container.spacing-md{gap:var(--spacing-04)}.item-list-container.spacing-lg{gap:var(--spacing-06)}.item-list-container.spacing-condensed{gap:var(--spacing-01)}.loading-container{display:flex;justify-content:center;align-items:center;padding:var(--spacing-07);min-height:100px;}";
+const udpListRendererCss = () => `:host{display:block}.udp-list-renderer-container{display:flex;flex-direction:column}.item-list-container{display:flex;flex-direction:column}.item-list-container.spacing-xs{gap:var(--spacing-02)}.item-list-container.spacing-sm{gap:var(--spacing-03)}.item-list-container.spacing-md{gap:var(--spacing-04)}.item-list-container.spacing-lg{gap:var(--spacing-06)}.item-list-container.spacing-condensed{gap:var(--spacing-01)}.loading-container{display:flex;justify-content:center;align-items:center;padding:var(--spacing-07);min-height:100px;}`;
 
 const UdpItemList = class {
     constructor(hostRef) {
@@ -121,12 +121,14 @@ const UdpItemList = class {
         return (h("host", null, h("div", { class: containerClasses }, this.renderItems()), this.pagination && this.getTotalPages() > 1 && (h("udp-pagination", { currentPage: this.internalCurrentPage, totalPages: this.getTotalPages(), isLoading: this.isLoading, onPageChange: event => this.handlePageChange(event.detail) }))));
     }
     static get watchers() { return {
-        "currentPage": ["currentPageChanged"]
+        "currentPage": [{
+                "currentPageChanged": 0
+            }]
     }; }
 };
-UdpItemList.style = udpListRendererCss;
+UdpItemList.style = udpListRendererCss();
 
-const udpPaginationCss = ":host{display:block;font-family:var(--font-family)}.pagination-controls{display:flex;justify-content:center;align-items:center;padding:var(--spacing-03);gap:var(--spacing-02);}.pagination-controls span.ellipsis{color:var(--text-secondary);padding:var(--spacing-02) var(--spacing-01);display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;}";
+const udpPaginationCss = () => `:host{display:block;font-family:var(--font-family)}.pagination-controls{display:flex;justify-content:center;align-items:center;padding:var(--spacing-03);gap:var(--spacing-02);}.pagination-controls span.ellipsis{color:var(--text-secondary);padding:var(--spacing-02) var(--spacing-01);display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;}`;
 
 const UdpPagination = class {
     constructor(hostRef) {
@@ -195,7 +197,6 @@ const UdpPagination = class {
         return (h("div", { class: "pagination-controls" }, h("udp-button", { onClick: () => this.navigateToPage(this.currentPage - 1), disabled: this.isLoading || this.currentPage <= 1, variant: "text", ariaLabel: "Go to previous page" }, "Previous"), this.renderPageNumbers(), h("udp-button", { onClick: () => this.navigateToPage(this.currentPage + 1), disabled: this.isLoading || this.currentPage >= this.totalPages, variant: "text", ariaLabel: "Go to next page" }, "Next")));
     }
 };
-UdpPagination.style = udpPaginationCss;
+UdpPagination.style = udpPaginationCss();
 
 export { UdpItemList as udp_list_renderer, UdpPagination as udp_pagination };
-//# sourceMappingURL=udp-list-renderer.udp-pagination.entry.js.map

package/dist/esm/udp-map-utils-DNAUNI5U.js

@@ -169,6 +169,3 @@ const getDisplayCoordinates = (coordinates, maxLength) => {
 };
 
 export { getMapFeatures as a, getFilteredLayerOptionsByRole as b, getLayer as c, getLayerStringArrayFromArray as d, getDisplayCoordinates as e, searchForLayerOptions as f, getFilteredData as g, hasStyles as h, setSelectedLayersList as s };
-//# sourceMappingURL=udp-map-utils-DNAUNI5U.js.map
-
-//# sourceMappingURL=udp-map-utils-DNAUNI5U.js.map

package/dist/esm/udp-map.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CaZq3YdB.js';
+import { r as registerInstance, h } from './index-DFnjA9NX.js';
 
-const udpMapCss = ":host{display:block}.zoomControl{left:'auto';right:'20';top:'20'}.iconButtonWrapper{padding:var(--spacing-04)}#featureDetailsPopOverContainer{position:absolute;z-index:1000}.hidden-controls .ol-zoom,.hidden-controls .ol-attribution{display:none}.ol-control{width:fit-content !important}";
+const udpMapCss = () => `:host{display:block}.zoomControl{left:'auto';right:'20';top:'20'}.iconButtonWrapper{padding:var(--spacing-04)}#featureDetailsPopOverContainer{position:absolute;z-index:1000}.hidden-controls .ol-zoom,.hidden-controls .ol-attribution{display:none}.ol-control{width:fit-content !important}`;
 
 const UdpMap = class {
     constructor(hostRef) {
@@ -93,18 +93,21 @@ const UdpMap = class {
     }
     //////////////////////////////////////////////////////////RENDER/////////////////////////////////////////////////////
     render() {
-        return (h("map-component", { key: 'cf730fe0040dac4733618efa7f1b5912273a4014', handleSetMapComponent: this.handleSetMapComponent, data: this.data, isGeoJsonFormat: this.isGeoJsonFormat, geoJsonMappingConfig: this.geoJsonMappingConfig, enableZoom: this.enableZoom, mapZoom: this.mapZoom, mapCenter: this.mapCenter, mapHeight: this.mapHeight, crs: this.crs, mapProjection: this.mapProjection, mapDataProjection: this.mapDataProjection, getFilteredMapData: this.getFilteredMapData, getFeatureStyles: this.getFeatureStyles, getSelectedFeatureStyles: this.getSelectedFeatureStyles, filterPanel: this.filterPanel, filterPanelCallback: this.filterPanelCallback, enableTileSelection: this.enableTileSelection, tileLayersOptions: this.tileLayersOptions, defaultTileOptionName: this.defaultTileOptionName, layerOptions: this.layerOptions, initialSelectedLayers: this.initialSelectedLayers, bulkSelectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: this.handleSetSelectedFeaturesOnBulkSelect, handleSetSelectedFeatureOnSelect: this.handleSetSelectedFeatureOnSelect, filterLayersByRole: this.filterLayersByRole, layerKeys: this.layerKeys, layerKeySeparator: this.layerKeySeparator, user: this.user, layerRoles: this.layerRoles, filteredLayerOptionsByRole: this.filteredLayerOptionsByRole, handleSetFilteredLayerOptionsByRole: this.handleSetFilteredLayerOptionsByRole, readOnlyMap: this.readOnlyMap, enableViewFeature: this.enableViewFeature, handleViewFeature: this.handleViewFeature, bulkSelectionActive: this.bulkSelectionActive, splitActive: this.splitActive, enableDragBox: this.enableDragBox, selectFeatureInteraction: this.selectFeatureInteraction, handleSetSelectedFeatureProperties: this.handleSetSelectedFeatureProperties, selectedFeatureCoordinates: this.selectedFeatureCoordinates, selectedFeatureProperties: this.selectedFeatureProperties, enableAddNewFeature: this.enableAddNewFeature, handleGetZoomExtent: this.handleGetZoomExtent, selectedLayers: this.selectedLayers, handleSetSelectedLayers: val => {
+        return (h("map-component", { key: '69efae07b0c9f45f2f66d59fd5bb9092557d7d75', handleSetMapComponent: this.handleSetMapComponent, data: this.data, isGeoJsonFormat: this.isGeoJsonFormat, geoJsonMappingConfig: this.geoJsonMappingConfig, enableZoom: this.enableZoom, mapZoom: this.mapZoom, mapCenter: this.mapCenter, mapHeight: this.mapHeight, crs: this.crs, mapProjection: this.mapProjection, mapDataProjection: this.mapDataProjection, getFilteredMapData: this.getFilteredMapData, getFeatureStyles: this.getFeatureStyles, getSelectedFeatureStyles: this.getSelectedFeatureStyles, filterPanel: this.filterPanel, filterPanelCallback: this.filterPanelCallback, enableTileSelection: this.enableTileSelection, tileLayersOptions: this.tileLayersOptions, defaultTileOptionName: this.defaultTileOptionName, layerOptions: this.layerOptions, initialSelectedLayers: this.initialSelectedLayers, bulkSelectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: this.handleSetSelectedFeaturesOnBulkSelect, handleSetSelectedFeatureOnSelect: this.handleSetSelectedFeatureOnSelect, filterLayersByRole: this.filterLayersByRole, layerKeys: this.layerKeys, layerKeySeparator: this.layerKeySeparator, user: this.user, layerRoles: this.layerRoles, filteredLayerOptionsByRole: this.filteredLayerOptionsByRole, handleSetFilteredLayerOptionsByRole: this.handleSetFilteredLayerOptionsByRole, readOnlyMap: this.readOnlyMap, enableViewFeature: this.enableViewFeature, handleViewFeature: this.handleViewFeature, bulkSelectionActive: this.bulkSelectionActive, splitActive: this.splitActive, enableDragBox: this.enableDragBox, selectFeatureInteraction: this.selectFeatureInteraction, handleSetSelectedFeatureProperties: this.handleSetSelectedFeatureProperties, selectedFeatureCoordinates: this.selectedFeatureCoordinates, selectedFeatureProperties: this.selectedFeatureProperties, enableAddNewFeature: this.enableAddNewFeature, handleGetZoomExtent: this.handleGetZoomExtent, selectedLayers: this.selectedLayers, handleSetSelectedLayers: val => {
                 this.updateSelectedLayers(val);
-            }, readOnlyLayers: this.readOnlyLayers, additionalOnclosePopover: this.additionalOnclosePopover, popoverPrimaryActions: this.popoverPrimaryActions, popoverMoreIconButtonActions: this.popoverMoreIconButtonActions, getMessagePopover: this.getMessagePopover, getMessageIconPopover: this.getMessageIconPopover, hideMessageIconPopover: this.hideMessageIconPopover, popoverCardConfig: this.cardConfig, popoverWidth: this.popoverWidth, handleGetAdditionalFeaturePropertiesOnSelect: this.handleGetAdditionalFeaturePropertiesOnSelect, minZoom: this.minZoom, maxZoom: this.maxZoom }, this.enableToolbar && (h("udp-map-toolbar", { key: '49d244cc30139684e35f2f3d62a19fb994438882', map: this.map, mapTitle: this.mapTitle, mapProjection: this.mapProjection, getFeatureStyles: this.getFeatureStyles, getSelectedFeatureStyles: this.getSelectedFeatureStyles, filterPanel: this.filterPanel, enableTileSelection: this.enableTileSelection, tileLayersOptions: this.tileLayersOptions, defaultTileOptionName: this.defaultTileOptionName, layerOptions: this.layerOptions, bulkSelectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: this.handleSetSelectedFeaturesOnBulkSelect, handleRefresh: this.handleRefresh, refreshButtonTooltip: this.refreshButtonTooltip, readOnlyMap: this.readOnlyMap, enableAdd: this.enableAdd, handleAddNewFeatures: this.handleAddNewFeatures, addMultipleFeatures: this.addMultipleFeatures, enableSplitFeature: this.enableSplitFeature, handleSplitFeature: this.handleSplitFeature, handleSetSelectedFeatureProperties: this.handleSetSelectedFeatureProperties, filteredLayerOptionsByRole: this.filteredLayerOptionsByRole, handleSetBulkSelectionActive: this.handleSetBulkSelectionActive, enableDragBox: this.enableDragBox, handleSetEnableDragBox: this.handleSetEnableDragBox, splitActive: this.splitActive, handleSetSplitActive: this.handleSetSplitActive, selectFeatureInteraction: this.selectFeatureInteraction, enableAddNewFeature: this.enableAddNewFeature, handleEnableAddNewFeature: this.handleEnableAddNewFeature, handleSelectLayersCallback: this.handleSelectLayersCallback, selectedLayers: this.selectedLayers, handleSetSelectedLayers: val => {
+            }, readOnlyLayers: this.readOnlyLayers, additionalOnclosePopover: this.additionalOnclosePopover, popoverPrimaryActions: this.popoverPrimaryActions, popoverMoreIconButtonActions: this.popoverMoreIconButtonActions, getMessagePopover: this.getMessagePopover, getMessageIconPopover: this.getMessageIconPopover, hideMessageIconPopover: this.hideMessageIconPopover, popoverCardConfig: this.cardConfig, popoverWidth: this.popoverWidth, handleGetAdditionalFeaturePropertiesOnSelect: this.handleGetAdditionalFeaturePropertiesOnSelect, minZoom: this.minZoom, maxZoom: this.maxZoom }, this.enableToolbar && (h("udp-map-toolbar", { key: '3af4c7dd6451b1a16146eb0161ebcb13f12040f6', map: this.map, mapTitle: this.mapTitle, mapProjection: this.mapProjection, getFeatureStyles: this.getFeatureStyles, getSelectedFeatureStyles: this.getSelectedFeatureStyles, filterPanel: this.filterPanel, enableTileSelection: this.enableTileSelection, tileLayersOptions: this.tileLayersOptions, defaultTileOptionName: this.defaultTileOptionName, layerOptions: this.layerOptions, bulkSelectedFeaturesActionPanel: this.bulkSelectedFeaturesActionPanel, handleSetSelectedFeaturesOnBulkSelect: this.handleSetSelectedFeaturesOnBulkSelect, handleRefresh: this.handleRefresh, refreshButtonTooltip: this.refreshButtonTooltip, readOnlyMap: this.readOnlyMap, enableAdd: this.enableAdd, handleAddNewFeatures: this.handleAddNewFeatures, addMultipleFeatures: this.addMultipleFeatures, enableSplitFeature: this.enableSplitFeature, handleSplitFeature: this.handleSplitFeature, handleSetSelectedFeatureProperties: this.handleSetSelectedFeatureProperties, filteredLayerOptionsByRole: this.filteredLayerOptionsByRole, handleSetBulkSelectionActive: this.handleSetBulkSelectionActive, enableDragBox: this.enableDragBox, handleSetEnableDragBox: this.handleSetEnableDragBox, splitActive: this.splitActive, handleSetSplitActive: this.handleSetSplitActive, selectFeatureInteraction: this.selectFeatureInteraction, enableAddNewFeature: this.enableAddNewFeature, handleEnableAddNewFeature: this.handleEnableAddNewFeature, handleSelectLayersCallback: this.handleSelectLayersCallback, selectedLayers: this.selectedLayers, handleSetSelectedLayers: val => {
                 this.updateSelectedLayers(val);
-            }, addFeaturePanelConfig: this.addFeaturePanelConfig })), h("slot", { key: '88fad9362a1e7d28a537eb2dfcdcb9735f491542' })));
+            }, addFeaturePanelConfig: this.addFeaturePanelConfig })), h("slot", { key: '00102aa5f21cb5fa6382f9e0785486cd956d714f' })));
     }
     static get watchers() { return {
-        "enableDragBox": ["watchDragBoxandSelectedFeatureInteraction"],
-        "selectFeatureInteraction": ["watchDragBoxandSelectedFeatureInteraction"]
+        "enableDragBox": [{
+                "watchDragBoxandSelectedFeatureInteraction": 0
+            }],
+        "selectFeatureInteraction": [{
+                "watchDragBoxandSelectedFeatureInteraction": 0
+            }]
     }; }
 };
-UdpMap.style = udpMapCss;
+UdpMap.style = udpMapCss();
 
 export { UdpMap as udp_map };
-//# sourceMappingURL=udp-map.entry.js.map

package/dist/esm/{udp-pop-over.entry.js → udp-menu-item_2.entry.js}

@@ -1,7 +1,28 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CaZq3YdB.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DFnjA9NX.js';
 import { createPopper } from '@popperjs/core';
 
-const udpPopOverCss = ":host{display:block;position:fixed;z-index:9999;pointer-events:none;opacity:0;transform:scale(0.95);transition:opacity 0.2s ease-out}:host(.is-visible){pointer-events:auto;opacity:1;transform:scale(1)}.popover{background-color:white;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border:1px solid #e0e0e0}";
+const udpMenuItemCss = () => `.menu-item-root{display:flex;width:100%;padding:8px 16px;gap:8px;align-items:center;background:none;border:none;font-family:inherit;text-align:left;cursor:pointer;transition:background-color 0.15s ease-in-out}.menu-item-root:hover:not(:disabled){background-color:rgba(0, 0, 0, 0.08)}.menu-item-label{font-size:14px}.menu-item-root:disabled{cursor:not-allowed;opacity:0.4}.menu-icon{height:100%}`;
+
+const UdpMenuItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemClick = createEvent(this, "itemClick");
+        this.disabled = false; // reflect: true helps with CSS styling
+        this.handleItemClick = (e) => {
+            // if (this.disabled) {
+            //   e.stopPropagation();
+            //   return;
+            // }
+            this.itemClick.emit(e);
+        };
+    }
+    render() {
+        return (h("button", { key: '4a43cdb229edec0f13ceda8672bfd3c48c545dc6', class: "menu-item-root", onClick: this.handleItemClick, disabled: this.disabled, role: "menuitem" }, this.iconName && h("udp-icon", { key: '499c217a79efe99f11e289f9792eb1f9307264bb', iconName: this.iconName, class: "menu-icon" }), h("span", { key: '8c414f47700d8b3802d81579fb1374aa81c8691b', class: "menu-item-label" }, h("unity-typography", { key: '5c95b5ab659abe6c7baa2a1b7a287077afd4af92', variant: 'body1' }, this.label))));
+    }
+};
+UdpMenuItem.style = udpMenuItemCss();
+
+const udpPopOverCss = () => `:host{display:block;position:fixed;z-index:9999;pointer-events:none;opacity:0;transform:scale(0.95);transition:opacity 0.2s ease-out}:host(.is-visible){pointer-events:auto;opacity:1;transform:scale(1)}.popover{background-color:white;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border:1px solid #e0e0e0}`;
 
 const UdpPopOver = class {
     constructor(hostRef) {
@@ -121,10 +142,11 @@ const UdpPopOver = class {
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
-        "isOpen": ["handleOpenChange"]
+        "isOpen": [{
+                "handleOpenChange": 0
+            }]
     }; }
 };
-UdpPopOver.style = udpPopOverCss;
+UdpPopOver.style = udpPopOverCss();
 
-export { UdpPopOver as udp_pop_over };
-//# sourceMappingURL=udp-pop-over.entry.js.map
+export { UdpMenuItem as udp_menu_item, UdpPopOver as udp_pop_over };

package/dist/esm/udp-page.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CaZq3YdB.js';
+import { r as registerInstance, h } from './index-DFnjA9NX.js';
 
-const udpPageCss = ":host{display:block}";
+const udpPageCss = () => `:host{display:block}`;
 
 const UdpPage = class {
     constructor(hostRef) {
@@ -20,10 +20,9 @@ const UdpPage = class {
             padding: this.padding,
             margin: '0 auto', // Centers the content if max-width is set
         };
-        return (h("div", { key: 'cd340c347257f5eb66d73ed93ce4164ba0d6c94c', style: style }, h("slot", { key: '68e33d37810a56cf7fc6f7290a6d44c10c4ef781' }), " "));
+        return (h("div", { key: '87960916a8c702c88f3a7dd7a9ef90227d76f605', style: style }, h("slot", { key: '1915453eae25182b42e004450ca04ee20c17cbff' }), " "));
     }
 };
-UdpPage.style = udpPageCss;
+UdpPage.style = udpPageCss();
 
 export { UdpPage as udp_page };
-//# sourceMappingURL=udp-page.entry.js.map