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

package/dist/collection/components/my-component/UI/drawers/udp-side-sheet/udp-side-sheet.js

@@ -1,59 +1,251 @@
-import { h } from "@stencil/core";
+/* eslint-disable stencil/strict-boolean-conditions */
+import { h, Build, } from "@stencil/core";
 import Close24 from "@carbon/icons/es/close/24";
+/**
+ * Side sheet component used for contextual drawers.
+ */
 export class UdpSideSheet {
     constructor() {
+        /** 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();
         };
-        // Handler for the new header action button click
+        /**
+         * 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;
-            document.body.style.overflow = 'hidden';
+            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() {
+        if (Build.isBrowser) {
+            // 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` } : {};
-        return (h("div", { key: '3071b6fbf443030422ad30d2fc7a86a3c71d060a', class: "backdrop", onClick: this.onClose }, h("div", { key: '75ae7c0f6bc4da076a3cd04579fc09252f701eb3', class: { sheet: true, [this.position]: true, [widthClass]: true }, style: sideSheetStyle, onClick: e => e.stopPropagation() }, h("div", { key: 'ec51c197afe4b00084881abb8688ca8f4f994a30', class: "title-container" }, h("div", { key: 'f382e9b4bf63314092b0b5d326069a9ca2316272', class: "close-button" }, h("stencil-icon-button", { key: 'ff449c9a65921a12207f2f4f6daaa45d9ff652c0', icon: Close24, onClick: this.onClose, secondary: true })), h("div", { key: '72e80626b9f519098dd069ebb357061f5e7008f8', class: "title-text" }, h("unity-typography", { key: 'fa7de8f448021ef6ac8a34d4825dcad745124dd2', variant: "h6" }, this.title)), this.headerActionButtonLabel && (h("div", { key: 'bcce55c18c3ff2b80cea48f471468ece741dc0bd', class: "header-action-button" }, h("udp-button", { key: '09d1343460e8b0d7fdceb8769ed8387647ab5a34', disabled: this.headerActionButtonDisabled, onClick: this.onHeaderActionButtonClick, startIcon: h("udp-icon", { iconName: this.headerActionButtonIcon, color: 'inherit' }), variant: "contained" }, this.headerActionButtonLabel)))), h("div", { key: '594932ae9ee30cfd5415fefcd48765c3d3f21aea', class: "loader-container" }, h("udp-linear-loader", { key: 'f3d09a98c7ac6bd22699339d2d0a7325c035e63d', class: { 'is-loading': this.loading }, color: "primary" })), h("div", { key: '59e987c1780a950dcdc8f56f012087a0ba55acb0', class: { content: true, padding: this.padding } }, h("slot", { key: 'fda6cf654587b15f3a28443b47a30f7564b2bf57' })), this.primaryButtonLabel && (h("div", { key: 'c6434be80f44e6f8a277bdff49503f67db5cdca7', class: "footer" }, h("udp-button", { key: '522a0e7bb290472cb1704bc4f61bf2a22ebda668', variant: "contained", size: "large", disabled: this.primaryButtonDisabled, onClick: this.onPrimaryButtonClick, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel))))));
+        // 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: '8e59af17cf1b7020e45a13929dd9e46278a9a068', iconName: "overflowMenuVertical", color: "inherit" });
+        return (h("div", { key: 'bbd54f9f207337e25c445e1dd43e777e61ebaa76', class: "backdrop", onClick: this.onCloseBackdrop }, h("div", { key: '463d433bf00b07005353a55fd677617d514300a6', class: { sheet: true, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, h("div", { key: '70075153a5213fb6fcf9aa9cfb76092d878c5887', class: "title-container" }, h("div", { key: '60e47f939481d0034c2ba21a6b0b1fd0e9d6c287', class: "close-button" }, h("stencil-icon-button", { key: 'a75372ccf0f85bcac71603564855e0012f60bae0',
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            icon: Close24, onClick: this.onClose, secondary: true })), h("div", { key: 'f5b7ad789cdae7a39a1d2f4625ccd1b29ca0691e', class: "title-text" }, h("unity-typography", { key: '0a9b9c05421673e376ebf4ff48e9d54b5f38b816', variant: "h6" }, this.title)), (this.headerActionButtonLabel || ((_a = this.headerSecondaryButtons) === null || _a === void 0 ? void 0 : _a.length) > 0) && (h("div", { key: '824c51aa4f6a3d22cb846448b9d04940f1bfe73b', 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: '01a18162e4c3ca98c3e3bb3fb79f2d8f288a657e', disabled: this.headerActionButtonDisabled, onClick: this.onHeaderActionButtonClick,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            startIcon: headerStartIcon, variant: "contained" }, this.headerActionButtonLabel))))), h("div", { key: '2fc8c688b4a53b82c497943594cbd58396ff6deb', class: "loader-container" }, h("udp-linear-loader", { key: '301925168c0cbf064987a121948317ff5ebeb728', class: { 'is-loading': this.loading }, color: "primary" })), h("div", { key: '61de55a5e32c71982d3d90dc242d75c2e14d8a1e', class: { content: true, padding: this.padding } }, h("slot", { key: '14aea9d974a1af2325d7bc7574cea561218c02fb' })), (this.primaryButtonLabel || ((_c = this.footerSecondaryButtons) === null || _c === void 0 ? void 0 : _c.length) > 0) && (h("div", { key: '1b036a85a6a499a8cbda3333d51ff96afb66a7f5' }, h("div", { key: 'e2c38b8ce3c6c8b80da87c4a938cf9bf0bcd1e1d', class: "loader-container" }), h("div", { key: '4510dc03ffa1eeb3776dfb7de10e641acf18cb2b', 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: 'ee00d11046a044b0a0c2fa51e45adfa9678fa4c1', class: "footer-secondary-buttons-container" }, h("div", { key: '953c029aab16c60de3b8f717a10bf7bf3d042489', 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: '44c23081cb66dd26598c1f77c89a2b49e6fcc6e3', 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: 'cf898a3b44e55d43f6c9556429de2f230508f2c1', variant: "contained", disabled: this.primaryButtonDisabled, onClick: this.onPrimaryButtonClick, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)), this.showOverflowButton && (h("udp-pop-over", { key: '1685cb92b649360b680f75d7009d2394fc5db160', anchorElement: this.overflowMenuAnchor, isOpen: this.openOverflowMenu, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleCloseOverflowMenu }, h("div", { key: '80993bf78dc2c248e0b33578c2418413467c0379', 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: '41a63c50ea0c6f348e962368b9b6867b8d7310d4', 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: '520a7ecd6b5859e2ff541bbd79be522c0b905cd6', variant: "contained", size: "medium", disabled: this.primaryButtonDisabled, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)))))))));
     }
     static get is() { return "udp-side-sheet"; }
     static get encapsulation() { return "shadow"; }
@@ -81,7 +273,7 @@ export class UdpSideSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "When true, the side sheet is open and visible"
                 },
                 "getter": false,
                 "setter": false,
@@ -101,7 +293,7 @@ export class UdpSideSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Title text displayed in the header"
                 },
                 "getter": false,
                 "setter": false,
@@ -120,7 +312,7 @@ export class UdpSideSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Position of the sheet on the screen"
                 },
                 "getter": false,
                 "setter": false,
@@ -140,7 +332,7 @@ export class UdpSideSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Width preset or a numeric pixel width"
                 },
                 "getter": false,
                 "setter": false,
@@ -160,7 +352,7 @@ export class UdpSideSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controls whether default inner padding is applied"
                 },
                 "getter": false,
                 "setter": false,
@@ -180,7 +372,7 @@ export class UdpSideSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "When true, shows a top loader"
                 },
                 "getter": false,
                 "setter": false,
@@ -200,7 +392,7 @@ export class UdpSideSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label for the header primary action button"
                 },
                 "getter": false,
                 "setter": false,
@@ -219,7 +411,7 @@ export class UdpSideSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Whether the header action button is disabled"
                 },
                 "getter": false,
                 "setter": false,
@@ -239,13 +431,36 @@ export class UdpSideSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Icon name for the header action button"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "header-action-button-icon"
             },
+            "headerSecondaryButtons": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SecondaryButton[]",
+                    "resolved": "SecondaryButton[]",
+                    "references": {
+                        "SecondaryButton": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/my-component/UI/drawers/udp-side-sheet/types.ts::SecondaryButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional secondary buttons to render in the header"
+                },
+                "getter": false,
+                "setter": false
+            },
             "primaryButtonLabel": {
                 "type": "string",
                 "mutable": false,
@@ -258,7 +473,7 @@ export class UdpSideSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label for the primary footer action button"
                 },
                 "getter": false,
                 "setter": false,
@@ -277,7 +492,7 @@ export class UdpSideSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Whether the primary footer button is disabled"
                 },
                 "getter": false,
                 "setter": false,
@@ -297,15 +512,47 @@ export class UdpSideSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Icon name for the primary footer button"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "primary-button-icon"
+            },
+            "footerSecondaryButtons": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SecondaryButton[]",
+                    "resolved": "SecondaryButton[]",
+                    "references": {
+                        "SecondaryButton": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/my-component/UI/drawers/udp-side-sheet/types.ts::SecondaryButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary buttons to render in the footer"
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
+    static get states() {
+        return {
+            "showOverflowButton": {},
+            "openOverflowMenu": {},
+            "overflowMenuAnchor": {},
+            "visibleSecondaryButtons": {},
+            "overflowSecondaryButtons": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "udpSideSheetClose",
@@ -315,7 +562,7 @@ export class UdpSideSheet {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the sheet is closed"
                 },
                 "complexType": {
                     "original": "void",
@@ -330,7 +577,7 @@ export class UdpSideSheet {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the primary footer button is clicked"
                 },
                 "complexType": {
                     "original": "void",
@@ -345,7 +592,7 @@ export class UdpSideSheet {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the header action button is clicked"
                 },
                 "complexType": {
                     "original": "void",
@@ -359,6 +606,9 @@ export class UdpSideSheet {
         return [{
                 "propName": "open",
                 "methodName": "handleOpenChange"
+            }, {
+                "propName": "footerSecondaryButtons",
+                "methodName": "handleSecondaryButtonsChange"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"udp-side-sheet.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/drawers/udp-side-sheet/udp-side-sheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Watch, Event, EventEmitter } from '@stencil/core';\nimport Close24 from '@carbon/icons/es/close/24';\n\n@Component({\n  tag: 'udp-side-sheet',\n  styleUrl: 'udp-side-sheet.css',\n  shadow: true,\n})\nexport class UdpSideSheet {\n  @Element() hostEl!: HTMLElement;\n\n  @Prop({ reflect: true, mutable: true }) open = false;\n  @Prop() title: string;\n  @Prop() position: 'left' | 'right' = 'right';\n  @Prop() width: 'sm' | 'md' | 'lg' | 'full' | number = 'md';\n  @Prop() padding = true;\n  @Prop() loading: boolean = false;\n\n  // Props for the new header action button\n  @Prop() headerActionButtonLabel: string;\n  @Prop() headerActionButtonDisabled = false;\n  @Prop() headerActionButtonIcon: string;\n\n  // Props for the existing footer button\n  @Prop() primaryButtonLabel: string;\n  @Prop() primaryButtonDisabled = false;\n  @Prop() primaryButtonIcon: string;\n\n  @Event() udpSideSheetClose: EventEmitter<void>;\n  @Event() udpPrimaryButtonClick: EventEmitter<void>;\n  // Event for the new header action button\n  @Event() udpHeaderActionButtonClick: EventEmitter<void>;\n\n  private originalBodyOverflow: string = '';\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean, oldValue: boolean) {\n    if (newValue === oldValue) {\n      return;\n    }\n\n    if (newValue) {\n      this.originalBodyOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n      document.body.appendChild(this.hostEl);\n\n      requestAnimationFrame(() => {\n        this.hostEl.classList.add('is-visible');\n      });\n    } else {\n      this.hostEl.classList.remove('is-visible');\n      document.body.style.overflow = this.originalBodyOverflow;\n      this.hostEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true });\n    }\n  }\n\n  private handleTransitionEnd = () => {\n    if (!this.open && this.hostEl.parentElement === document.body) {\n      document.body.removeChild(this.hostEl);\n    }\n  };\n\n  disconnectedCallback() {\n    if (document.body.style.overflow === 'hidden') {\n      document.body.style.overflow = this.originalBodyOverflow;\n    }\n  }\n\n  private onClose = () => {\n    this.open = false;\n    this.udpSideSheetClose.emit();\n  };\n\n  private onPrimaryButtonClick = () => {\n    this.udpPrimaryButtonClick.emit();\n  };\n\n  // Handler for the new header action button click\n  private onHeaderActionButtonClick = () => {\n    this.udpHeaderActionButtonClick.emit();\n  };\n\n  render() {\n    const widthClass = typeof this.width === 'number' ? 'custom-width' : this.width;\n    const sideSheetStyle = typeof this.width === 'number' ? { maxWidth: `${this.width}px` } : {};\n\n    return (\n      <div class=\"backdrop\" onClick={this.onClose}>\n        <div\n          class={{ sheet: true, [this.position]: true, [widthClass]: true }}\n          style={sideSheetStyle}\n          onClick={e => e.stopPropagation()}\n        >\n          {/* Header layout has been changed here */}\n          <div class=\"title-container\">\n            <div class=\"close-button\">\n              <stencil-icon-button\n                icon={Close24}\n                onClick={this.onClose}\n                secondary\n              ></stencil-icon-button>\n            </div>\n            <div class=\"title-text\">\n              <unity-typography variant=\"h6\">{this.title}</unity-typography>\n            </div>\n            {/* Conditionally render the new header action button */}\n            {this.headerActionButtonLabel && (\n              <div class=\"header-action-button\">\n                <udp-button\n                  disabled={this.headerActionButtonDisabled}\n                  onClick={this.onHeaderActionButtonClick}\n                  startIcon={<udp-icon iconName={this.headerActionButtonIcon} color={'inherit'} />}\n                  variant=\"contained\"\n                >\n                  {this.headerActionButtonLabel}\n                </udp-button>\n              </div>\n            )}\n          </div>\n          <div class=\"loader-container\">\n              <udp-linear-loader class={{ 'is-loading': this.loading }} color=\"primary\" />\n            </div>\n\n          <div class={{ content: true, padding: this.padding }}>\n\n            <slot />\n          </div>\n          {this.primaryButtonLabel && (\n            <div class=\"footer\">\n              <udp-button\n                variant=\"contained\"\n                size=\"large\"\n                disabled={this.primaryButtonDisabled}\n                onClick={this.onPrimaryButtonClick}\n                endIcon={this.primaryButtonIcon}\n              >\n                {this.primaryButtonLabel}\n              </udp-button>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"udp-side-sheet.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/drawers/udp-side-sheet/udp-side-sheet.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable stencil/strict-boolean-conditions */\r\nimport {\r\n  Component,\r\n  h,\r\n  Prop,\r\n  Element,\r\n  Watch,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Build,\r\n} from '@stencil/core';\r\nimport Close24 from '@carbon/icons/es/close/24';\r\nimport { SecondaryButton } from './types';\r\n\r\n/**\r\n * Side sheet component used for contextual drawers.\r\n */\r\n@Component({\r\n  tag: 'udp-side-sheet',\r\n  styleUrl: 'udp-side-sheet.css',\r\n  shadow: true,\r\n})\r\nexport class UdpSideSheet {\r\n  /** Host element reference for portal behavior */\r\n  @Element() hostEl!: HTMLElement;\r\n\r\n  /** When true, the side sheet is open and visible */\r\n  @Prop({ reflect: true, mutable: true }) open = false;\r\n\r\n  /** Title text displayed in the header */\r\n  @Prop() title: string;\r\n\r\n  /** Position of the sheet on the screen */\r\n  @Prop() position: 'left' | 'right' = 'right';\r\n\r\n  /** Width preset or a numeric pixel width */\r\n  @Prop() width: 'sm' | 'md' | 'lg' | 'full' | number = 'md';\r\n\r\n  /** Controls whether default inner padding is applied */\r\n  @Prop() padding = true;\r\n\r\n  /** When true, shows a top loader */\r\n  @Prop() loading: boolean = false;\r\n\r\n  // Header action button props\r\n\r\n  /** Label for the header primary action button */\r\n  @Prop() headerActionButtonLabel: string;\r\n\r\n  /** Whether the header action button is disabled */\r\n  @Prop() headerActionButtonDisabled = false;\r\n\r\n  /** Icon name for the header action button */\r\n  @Prop() headerActionButtonIcon: string;\r\n\r\n  /** Additional secondary buttons to render in the header */\r\n  @Prop() headerSecondaryButtons: SecondaryButton[];\r\n\r\n  // Footer / primary button props\r\n\r\n  /** Label for the primary footer action button */\r\n  @Prop() primaryButtonLabel: string;\r\n\r\n  /** Whether the primary footer button is disabled */\r\n  @Prop() primaryButtonDisabled = false;\r\n\r\n  /** Icon name for the primary footer button */\r\n  @Prop() primaryButtonIcon: string;\r\n\r\n  /** Secondary buttons to render in the footer */\r\n  @Prop() footerSecondaryButtons?: SecondaryButton[];\r\n\r\n  /** Emitted when the sheet is closed */\r\n  @Event() udpSideSheetClose: EventEmitter<void>;\r\n\r\n  /** Emitted when the primary footer button is clicked */\r\n  @Event() udpPrimaryButtonClick: EventEmitter<void>;\r\n\r\n  /** Emitted when the header action button is clicked */\r\n  @Event() udpHeaderActionButtonClick: EventEmitter<void>;\r\n\r\n  /** Whether the footer should show the overflow \"More\" button */\r\n  @State() showOverflowButton: boolean = false;\r\n\r\n  /** Whether the overflow popover is open */\r\n  @State() openOverflowMenu: boolean = false;\r\n\r\n  /** Anchor element for the overflow popover */\r\n  @State() overflowMenuAnchor: HTMLElement;\r\n\r\n  @State() visibleSecondaryButtons: SecondaryButton[] = [];\r\n  @State() overflowSecondaryButtons: SecondaryButton[] = [];\r\n\r\n  /** Saved original document.body.overflow value to restore on close */\r\n  private originalBodyOverflow: string = '';\r\n\r\n  /** ResizeObserver instance watching footer size changes */\r\n  private resizeObserver: ResizeObserver;\r\n\r\n  /** Reference to the footer element */\r\n  private footerRef: HTMLElement;\r\n\r\n  /** Offscreen measurement container for buttons */\r\n  private measurementContainerRef: HTMLElement;\r\n\r\n  /** Saved original document.body.paddingRight value to restore on close */\r\n  private originalBodyPaddingRight: string = '';\r\n\r\n  /**\r\n   * Watcher for `open` prop. Handles portal append/removal and body scroll lock.\r\n   *\r\n   * @param newValue - new value of the `open` prop\r\n   * @param oldValue - previous value of the `open` prop\r\n   */\r\n  @Watch('open')\r\n  handleOpenChange(newValue: boolean, oldValue: boolean) {\r\n    if (newValue === oldValue) {\r\n      return;\r\n    }\r\n\r\n    if (newValue) {\r\n      // Calculate scrollbar width before hiding it\r\n      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\r\n\r\n      // Save original values\r\n      this.originalBodyOverflow = document.body.style.overflow;\r\n      this.originalBodyPaddingRight = document.body.style.paddingRight;\r\n\r\n      document.body.appendChild(this.hostEl);\r\n\r\n      // Add padding to compensate for scrollbar\r\n      if (scrollbarWidth > 0) {\r\n        const currentPadding = parseInt(window.getComputedStyle(document.body).paddingRight) || 0;\r\n        document.body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;\r\n      }\r\n\r\n      document.body.style.overflow = 'hidden';\r\n\r\n      requestAnimationFrame(() => {\r\n        this.hostEl.classList.add('is-visible');\r\n        // Check overflow after the side sheet is visible\r\n        setTimeout(() => this.checkOverflow(), 50);\r\n      });\r\n    } else {\r\n      this.hostEl.classList.remove('is-visible');\r\n      document.body.style.overflow = this.originalBodyOverflow;\r\n      document.body.style.paddingRight = this.originalBodyPaddingRight;\r\n      this.hostEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Watcher for footer secondary buttons changes. Triggers overflow recalculation.\r\n   */\r\n  @Watch('footerSecondaryButtons')\r\n  handleSecondaryButtonsChange() {\r\n    // Recheck overflow when buttons change\r\n    setTimeout(() => this.checkOverflow(), 50);\r\n  }\r\n\r\n  /**\r\n   * Measures footer buttons in an offscreen container and sets `showOverflowButton`.\r\n   * Safely returns early if required refs are unavailable.\r\n   */\r\n  private checkOverflow() {\r\n    if (!this.footerRef || !this.measurementContainerRef) {\r\n      return;\r\n    }\r\n\r\n    if (!this.footerSecondaryButtons || this.footerSecondaryButtons.length === 0) {\r\n      this.showOverflowButton = false;\r\n      return;\r\n    }\r\n\r\n    // Get the footer container width (minus padding)\r\n    const footerWidth = this.footerRef.offsetWidth;\r\n    const footerStyle = window.getComputedStyle(this.footerRef);\r\n    const footerPaddingLeft = parseFloat(footerStyle.paddingLeft);\r\n    const footerPaddingRight = parseFloat(footerStyle.paddingRight);\r\n    const availableWidth = footerWidth - footerPaddingLeft - footerPaddingRight;\r\n\r\n    // Measure all buttons in the hidden measurement container\r\n    const measurementButtons = this.measurementContainerRef.querySelectorAll('udp-button');\r\n    let totalWidth = 0;\r\n\r\n    measurementButtons.forEach((button, index) => {\r\n      const buttonWidth = button && button instanceof HTMLElement ? button.offsetWidth : 0;\r\n      totalWidth += buttonWidth;\r\n\r\n      // Add gap spacing between buttons (except for the last one)\r\n      if (index < measurementButtons.length - 1) {\r\n        const containerStyle = window.getComputedStyle(this.measurementContainerRef);\r\n        const gap = parseFloat(containerStyle.gap) || 4; // Default gap from CSS\r\n        totalWidth += gap;\r\n      }\r\n    });\r\n\r\n    // Add a small buffer to prevent edge cases\r\n    const buffer = 10;\r\n    const isOverflowing = totalWidth + buffer > availableWidth;\r\n\r\n    this.showOverflowButton = isOverflowing;\r\n  }\r\n\r\n  /**\r\n   * Transition end handler used to remove the host element from body after close.\r\n   *\r\n   * @private\r\n   */\r\n  private handleTransitionEnd = () => {\r\n    if (!this.open && this.hostEl.parentElement === document.body) {\r\n      document.body.removeChild(this.hostEl);\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Lifecycle: componentDidLoad. Sets up ResizeObserver and initial overflow check.\r\n   *\r\n   * @private\r\n   */\r\n  componentDidLoad() {\r\n    if (Build.isBrowser) {\r\n      // Set up ResizeObserver to watch for footer size changes\r\n      this.resizeObserver = new ResizeObserver(() => {\r\n        this.checkOverflow();\r\n      });\r\n\r\n      // Initial check after a small delay to ensure DOM is ready\r\n      requestAnimationFrame(() => {\r\n        setTimeout(() => {\r\n          if (this.footerRef) {\r\n            this.resizeObserver.observe(this.footerRef);\r\n          }\r\n          this.checkOverflow();\r\n        }, 100);\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Lifecycle: disconnectedCallback. Restores body styles and disconnects observers.\r\n   *\r\n   * @private\r\n   */\r\n  disconnectedCallback() {\r\n    if (document.body.style.overflow === 'hidden') {\r\n      document.body.style.overflow = this.originalBodyOverflow;\r\n      document.body.style.paddingRight = this.originalBodyPaddingRight;\r\n    }\r\n\r\n    // Clean up ResizeObserver\r\n    if (this.resizeObserver) {\r\n      this.resizeObserver.disconnect();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Close the side sheet and emit close event.\r\n   *\r\n   * @private\r\n   */\r\n  private onClose = () => {\r\n    this.open = false;\r\n    this.udpSideSheetClose.emit();\r\n  };\r\n\r\n  /**\r\n   * Backdrop click handler. Only closes when clicking the backdrop itself.\r\n   *\r\n   * @param e - MouseEvent from the backdrop click\r\n   * @private\r\n   */\r\n  private onCloseBackdrop = (e: MouseEvent) => {\r\n    if (e.target === e.currentTarget) {\r\n      this.onClose();\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Emit primary footer button click event.\r\n   *\r\n   * @private\r\n   */\r\n  private onPrimaryButtonClick = () => {\r\n    this.udpPrimaryButtonClick.emit();\r\n  };\r\n\r\n  /**\r\n   * Emit header action button click event.\r\n   *\r\n   * @private\r\n   */\r\n  private onHeaderActionButtonClick = () => {\r\n    this.udpHeaderActionButtonClick.emit();\r\n  };\r\n\r\n  /**\r\n   * Open overflow menu anchored to the clicked element.\r\n   *\r\n   * @param event - MouseEvent from the \"More\" button click\r\n   * @private\r\n   */\r\n  private onMoreActionButtonClick = (event: MouseEvent) => {\r\n    this.overflowMenuAnchor = event.currentTarget as HTMLElement;\r\n    this.openOverflowMenu = true;\r\n  };\r\n\r\n  /**\r\n   * Close the overflow popover.\r\n   *\r\n   * @param e - optional KeyboardEvent or MouseEvent (unused)\r\n   * @private\r\n   */\r\n  private handleCloseOverflowMenu = () => {\r\n    this.openOverflowMenu = false;\r\n  };\r\n\r\n  /**\r\n   * Render the component UI.\r\n   *\r\n   * @returns JSX element tree\r\n   * @private\r\n   */\r\n  render() {\r\n    const widthClass = typeof this.width === 'number' ? 'custom-width' : this.width;\r\n    const sideSheetStyle = typeof this.width === 'number' ? { maxWidth: `${this.width}px` } : {};\r\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\r\n    const headerStartIcon = Boolean(this.headerActionButtonIcon) ? (\r\n      <udp-icon iconName={this.headerActionButtonIcon} color=\"inherit\" />\r\n    ) : undefined;\r\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\r\n    const overflowIcon = <udp-icon iconName=\"overflowMenuVertical\" color=\"inherit\" />;\r\n\r\n    return (\r\n      <div class=\"backdrop\" onClick={this.onCloseBackdrop}>\r\n        <div\r\n          class={{ sheet: true, [this.position]: true, [widthClass]: true }}\r\n          style={sideSheetStyle}\r\n        >\r\n          {/* Header layout has been changed here */}\r\n          <div class=\"title-container\">\r\n            <div class=\"close-button\">\r\n              <stencil-icon-button\r\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\r\n                icon={Close24}\r\n                onClick={this.onClose}\r\n                secondary\r\n              ></stencil-icon-button>\r\n            </div>\r\n            <div class=\"title-text\">\r\n              <unity-typography variant=\"h6\">{this.title}</unity-typography>\r\n            </div>\r\n            {/* Conditionally render the new header action button */}\r\n            {(this.headerActionButtonLabel || this.headerSecondaryButtons?.length > 0) && (\r\n              <div class=\"header-action-button\">\r\n                {this.headerSecondaryButtons?.map((item: SecondaryButton) => (\r\n                  <udp-button\r\n                    variant=\"outlined\"\r\n                    disabled={item.disabled}\r\n                    onClick={item.onClick}\r\n                    endIcon={item.icon}\r\n                  >\r\n                    {item.label}\r\n                  </udp-button>\r\n                ))}\r\n                {this.headerActionButtonLabel && (\r\n                  <udp-button\r\n                    disabled={this.headerActionButtonDisabled}\r\n                    onClick={this.onHeaderActionButtonClick}\r\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\r\n                    startIcon={headerStartIcon}\r\n                    variant=\"contained\"\r\n                  >\r\n                    {this.headerActionButtonLabel}\r\n                  </udp-button>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n          <div class=\"loader-container\">\r\n            <udp-linear-loader class={{ 'is-loading': this.loading }} color=\"primary\" />\r\n          </div>\r\n\r\n          <div class={{ content: true, padding: this.padding }}>\r\n            <slot />\r\n          </div>\r\n          {(this.primaryButtonLabel || this.footerSecondaryButtons?.length > 0) && (\r\n            <div>\r\n              <div class=\"loader-container\"></div>\r\n              <div\r\n                class={{\r\n                  footer: true,\r\n                }}\r\n                ref={el => (this.footerRef = el)}\r\n              >\r\n                {/* Visible buttons container */}\r\n                {!this.showOverflowButton && this.footerSecondaryButtons?.length > 0 && (\r\n                  <div class=\"footer-secondary-buttons-container\">\r\n                    <div class=\"footer-secondary-buttons\">\r\n                      {this.footerSecondaryButtons?.map((item: SecondaryButton) => (\r\n                        <udp-button\r\n                          variant=\"outlined\"\r\n                          disabled={item.disabled}\r\n                          onClick={item.onClick}\r\n                          endIcon={item.icon}\r\n                        >\r\n                          {item.label}\r\n                        </udp-button>\r\n                      ))}\r\n                    </div>\r\n                  </div>\r\n                )}\r\n\r\n                {/* More button when overflowing */}\r\n                {this.showOverflowButton && (\r\n                  <udp-button\r\n                    variant=\"outlined\"\r\n                    onClick={this.onMoreActionButtonClick}\r\n                    color=\"secondary\"\r\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\r\n                    endIcon={overflowIcon}\r\n                  >\r\n                    More\r\n                  </udp-button>\r\n                )}\r\n\r\n                {/* Primary button */}\r\n                {this.primaryButtonLabel && (\r\n                  <udp-button\r\n                    variant=\"contained\"\r\n                    disabled={this.primaryButtonDisabled}\r\n                    onClick={this.onPrimaryButtonClick}\r\n                    endIcon={this.primaryButtonIcon}\r\n                  >\r\n                    {this.primaryButtonLabel}\r\n                  </udp-button>\r\n                )}\r\n\r\n                {/* Overflow menu */}\r\n                {this.showOverflowButton && (\r\n                  <udp-pop-over\r\n                    anchorElement={this.overflowMenuAnchor}\r\n                    isOpen={this.openOverflowMenu}\r\n                    popoverWidth={'200px'}\r\n                    popoverMaxHeight={'300px'}\r\n                    handleOnClose={this.handleCloseOverflowMenu}\r\n                  >\r\n                    <div class=\"menu\">\r\n                      {this.footerSecondaryButtons?.map(item => (\r\n                        <udp-menu-item\r\n                          label={item?.label}\r\n                          iconName={item?.icon}\r\n                          onItemClick={() => {\r\n                            item?.onClick();\r\n                            this.handleCloseOverflowMenu();\r\n                          }}\r\n                          disabled={item?.disabled}\r\n                        />\r\n                      ))}\r\n                    </div>\r\n                  </udp-pop-over>\r\n                )}\r\n\r\n                {/* Hidden measurement container - renders all buttons for measurement */}\r\n                <div\r\n                  ref={el => (this.measurementContainerRef = el)}\r\n                  style={{\r\n                    position: 'absolute',\r\n                    visibility: 'hidden',\r\n                    pointerEvents: 'none',\r\n                    display: 'flex',\r\n                    gap: 'var(--spacing-02, 4px)',\r\n                  }}\r\n                  aria-hidden=\"true\"\r\n                >\r\n                  {this.footerSecondaryButtons?.map((item: SecondaryButton) => (\r\n                    <udp-button\r\n                      variant=\"text\"\r\n                      size=\"medium\"\r\n                      disabled={item.disabled}\r\n                      endIcon={item.icon}\r\n                    >\r\n                      {item.label}\r\n                    </udp-button>\r\n                  ))}\r\n                  {this.primaryButtonLabel && (\r\n                    <udp-button\r\n                      variant=\"contained\"\r\n                      size=\"medium\"\r\n                      disabled={this.primaryButtonDisabled}\r\n                      endIcon={this.primaryButtonIcon}\r\n                    >\r\n                      {this.primaryButtonLabel}\r\n                    </udp-button>\r\n                  )}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/my-component/UI/feedback/udp-notification/alerts/upd-alert-banner.js

@@ -7,7 +7,7 @@ export class UpdAlertBanner {
         this.message = '';
     }
     render() {
-        return (h("div", { key: 'd252b1793bc4caa4e96acebb6e2ec6ba8e52f029', class: `alert-banner ${this.type}` }, h("unity-typography", { key: '7ec2b81da5013172c16f6d61b1454a3264ef66ca', variant: "data-display-three" }, "   ", this.message, " ")));
+        return (h("div", { key: '072252afd7e2269488d606c655df16bf01fbcffb', class: `alert-banner ${this.type}` }, h("unity-typography", { key: '3b789c8eea442c46423777b6bd08785f9a6c34fe', variant: "data-display-three" }, "   ", this.message, " ")));
     }
     static get is() { return "upd-alert-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,11 +13,11 @@ export class UdpNotification {
     }
     render() {
         const statusClass = `status-${this.status}`;
-        return (h("div", { key: '6f9511dcb791934acf07b90000160a764d0fc6e7', class: {
+        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: '3e6f7df67c906e32d6e2bd38262c6441c77d21ed', class: "close-button", onClick: () => this.active = false }, "\u00D7")), h("span", { key: 'ebdd3141d533f86448edfd7c84d2f681f2315bac', class: "message" }, " ", h("unity-typography", { key: 'aae63f399ad043aef3ece93e022d4e9873d2d558', variant: 'body' }, " ", this.message, " "))));
+            } }, this.userCancel && (h("button", { key: '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 is() { return "udp-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/forms/dynamic-form/udp-dynamic-form.js

@@ -250,7 +250,7 @@ export class UdpDynamicForm {
         });
     }
     render() {
-        return h("div", { key: 'e960c3bb0795530b409abbec56a9e50d9e6098e3', class: "form-root" }, this.renderFormFields());
+        return h("div", { key: 'aa1d1ad6ee247fa411a71068468d252a3ac63eab', class: "form-root" }, this.renderFormFields());
     }
     static get is() { return "udp-dynamic-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/forms/edit-view-form/edit-view-form.js

@@ -45,8 +45,8 @@ export class EditViewFormDialog {
         this.fetchedCurrentView = false;
     }
     render() {
-        return (h("fluent-dialog", { key: '13510c696c9ee250e34511d939ec2162e6a4c798', open: this.open, actionOne: () => { this.handleSubmit(); this.closeDialog(); this.resetFetchedCurrentView(); }, actionTwo: () => { this.closeDialog(); this.resetFetchedCurrentView(); }, handleClose: this.handleClose, labelOne: "Save Update", labelTwo: "Cancel", title: this.title, disableOne: !this.name }, h("form", { key: '9a9bc362d32e3738d14b3a7f7120463cc8474236', class: "edit-form" }, h("text-field", { key: '7dd193fc122d44d11a5d879a9a0343a00d3f5139', label: "View Name", value: this.name, onInput: (event) => this.handleNameChange(event) }), this.fetchedCurrentView &&
-            h("div", { key: 'e236df4118070b03b4a39cbc22d7e6e4dbf434ed', class: "toggle-options" }, h("div", { key: '6485d8d5bb333ad83a89312d342d08a5a75a601a' }, h("stencil-toggle", { key: '112c950264146cf27b715d008345dab4386564ee', label: "Private", checked: this.isPrivate === 1, onToggledChange: this.handlePrivateChange }), " "), h("div", { key: 'fdae4c4d5b87b027b72e59a5d53a8df08878d76b' }, h("stencil-toggle", { key: '740f081c7a644a30ce096a3a3e6b847767365712', label: "Default", checked: this.isDefault, onToggledChange: this.handleDefaultChange, style: { marginTop: '10px' } }))))));
+        return (h("fluent-dialog", { key: '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' } }))))));
     }
     static get is() { return "edit-view-form-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/forms/form/stencil-form.js

@@ -228,7 +228,7 @@ export class StencilForm {
         debounce(submitFunction, 1000, { leading: true, trailing: false })();
     }
     render() {
-        return (h("form", { key: 'fd790369f0e37d43c8bafcaccde0e440e0746e08' }, h("slot", { key: 'd748fb1bb8a0946f8966b4799535865b466a1442' })));
+        return (h("form", { key: '09a84ac84e5614cfe34842e3a205ced188626566' }, h("slot", { key: '41a3183b635eda6d09f925ce662c63cc606a4f31' })));
     }
     static get is() { return "stencil-form"; }
     static get encapsulation() { return "shadow"; }