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

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: '3262baafbf833e25e0b4d1128b24fb503d1dd157', iconName: "overflowMenuVertical", color: "inherit" });
+        return (h("div", { key: '780c5705588899683400da7bce6569ad8ce15d30', class: "backdrop", onClick: this.onCloseBackdrop }, h("div", { key: 'a68811f8a6c59239c60c048453bb63eae7ed7ee0', class: { sheet: true, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, h("div", { key: '82207996d3f164f4e4a27132a64d6ce6b82ac401', class: "title-container" }, h("div", { key: 'e29501f861893b9e61f72509c44c337e7d1a5fb1', class: "close-button" }, h("stencil-icon-button", { key: '8980a42b0d47582a0fd91998cafe5c57982e9c04',
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            icon: Close24, onClick: this.onClose, secondary: true })), h("div", { key: '6b71ecb62ed1bac4560ca3e8e4ff1f643ee98555', class: "title-text" }, h("unity-typography", { key: 'b5f420d289dd23f040100d82def0ff635038cafd', variant: "h6" }, this.title)), (this.headerActionButtonLabel || ((_a = this.headerSecondaryButtons) === null || _a === void 0 ? void 0 : _a.length) > 0) && (h("div", { key: '65b8198f2a63096839fa678b6b69761ea2a93196', 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: 'a9985bcd675163a0a3dc47ea88cfe35e98a830fb', disabled: this.headerActionButtonDisabled, onClick: this.onHeaderActionButtonClick,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            startIcon: headerStartIcon, variant: "contained" }, this.headerActionButtonLabel))))), h("div", { key: '362358edc955be022239e6662a0403baf49a4444', class: "loader-container" }, h("udp-linear-loader", { key: '0f93c37fc52e8400fbdb2d0db0879b49eb605859', class: { 'is-loading': this.loading }, color: "primary" })), h("div", { key: 'a2e70b272eb6f02878845350b7057908fdbb0cb2', class: { content: true, padding: this.padding } }, h("slot", { key: 'c6128fac4e8549fda3c25db826ed0377759a3bbb' })), (this.primaryButtonLabel || ((_c = this.footerSecondaryButtons) === null || _c === void 0 ? void 0 : _c.length) > 0) && (h("div", { key: '2d408d1f87df636effab01487739762b52c8897f' }, h("div", { key: '2fbdee5102a9837cc26d3f0cafb37141ebcc1527', class: "loader-container" }), h("div", { key: '8ba75738ab5ac6c4d33f828988f2d1e85ae1e3d5', 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: '13c00f7ff092655600f11885ce39d9acd4b9b26a', class: "footer-secondary-buttons-container" }, h("div", { key: '9bc81711a693c84bdab3274e67588193dc226203', 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: '92c871d74675c9fd42ac890d9c5efe8e39a6aeb2', 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: '94acda01904ab4265ced91dd6ef6e6d9ab788784', variant: "contained", disabled: this.primaryButtonDisabled, onClick: this.onPrimaryButtonClick, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)), this.showOverflowButton && (h("udp-pop-over", { key: 'c839371b5401fb7433417cba6b705c08c2242c09', anchorElement: this.overflowMenuAnchor, isOpen: this.openOverflowMenu, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleCloseOverflowMenu }, h("div", { key: '368023d9643a123acfa8215dab9ceaa85e613fbf', 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: '2dfb53eb181826fce129e856a4427da9edaeb756', 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: '5e6f99245f8649cbacfee9c34a88967966c2e856', 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: '4551695bcaba3fde5445c7a34f1d67d0444af855', class: `alert-banner ${this.type}` }, h("unity-typography", { key: 'd763dea98c2b14a12753f54d5b99c89be23aaf49', 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: '555f2f94b04009382fac53a32d74f8f84f14a733', class: {
                 'udp-notification': true,
                 'visible': this.active,
                 [statusClass]: true // This will apply the correct class based on the status
-            } }, this.userCancel && (h("button", { key: '3e6f7df67c906e32d6e2bd38262c6441c77d21ed', class: "close-button", onClick: () => this.active = false }, "\u00D7")), h("span", { key: 'ebdd3141d533f86448edfd7c84d2f681f2315bac', class: "message" }, " ", h("unity-typography", { key: 'aae63f399ad043aef3ece93e022d4e9873d2d558', variant: 'body' }, " ", this.message, " "))));
+            } }, this.userCancel && (h("button", { key: 'a9e6b1a2faa49b97d3d39da732a0b3e35045228d', class: "close-button", onClick: () => this.active = false }, "\u00D7")), h("span", { key: 'ed21c8f3e5e3fa53d2a1d4a54835e0f4b63210c4', class: "message" }, " ", h("unity-typography", { key: '9283d1e980b03cd92e5721d7a41209ee0c109cdf', variant: 'body' }, " ", this.message, " "))));
     }
     static get 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: '3ad645e7b28adea7f62b2e9c6e6f99d8cbd4f389', 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: '7d9f36f3e3f076bf8e9b9ea76678c3a65431922c', open: this.open, actionOne: () => { this.handleSubmit(); this.closeDialog(); this.resetFetchedCurrentView(); }, actionTwo: () => { this.closeDialog(); this.resetFetchedCurrentView(); }, handleClose: this.handleClose, labelOne: "Save Update", labelTwo: "Cancel", title: this.title, disableOne: !this.name }, h("form", { key: '582cce3a0ea5f9a4670b2c67f7c4096f3cf97884', class: "edit-form" }, h("text-field", { key: 'c8b700f8db69b68666a03c539f893d29fe507d72', label: "View Name", value: this.name, onInput: (event) => this.handleNameChange(event) }), this.fetchedCurrentView &&
+            h("div", { key: '6ebbde8f024c03916bc1100e964d440868749154', class: "toggle-options" }, h("div", { key: 'f699dfeecb0ddf085d9c3d5a8dfc42c3987ae53e' }, h("stencil-toggle", { key: '8c1e54b90e023140879bafa1377388f8a4a18432', label: "Private", checked: this.isPrivate === 1, onToggledChange: this.handlePrivateChange }), " "), h("div", { key: '562103cb25f1fa01d4e0749f8c0a3cd400c809f6' }, h("stencil-toggle", { key: 'aaafe2ead718dae3489df1dd24027fb3c8a8300d', label: "Default", checked: this.isDefault, onToggledChange: this.handleDefaultChange, style: { marginTop: '10px' } }))))));
     }
     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: 'd4f22ff5b96b35639d98dae8c1d3adfbab8f493f' }, h("slot", { key: '4c460485b67440935235d078c08c92f6736f1a1a' })));
     }
     static get is() { return "stencil-form"; }
     static get encapsulation() { return "shadow"; }