udp-stencil-component-library 25.18.2-beta.9 → 25.18.3-beta.1

package/dist/components/udp-side-sheet2.js

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

package/dist/components/udp-skeleton-loading.js

@@ -1,9 +1 @@
-import { U as UdpSkeletonLoading$1, d as defineCustomElement$1 } from './udp-skeleton-loading2.js';
-
-const UdpSkeletonLoading = UdpSkeletonLoading$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { UdpSkeletonLoading, defineCustomElement };
-//# sourceMappingURL=udp-skeleton-loading.js.map
-
-//# sourceMappingURL=udp-skeleton-loading.js.map
+import{U as o,d as s}from"./udp-skeleton-loading2.js";const t=o,a=s;export{t as UdpSkeletonLoading,a as defineCustomElement}

package/dist/components/udp-skeleton-loading2.js

@@ -1,43 +1 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-
-const udpSkeletonLoadingCss = ".skeleton-loader{background:linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size:1000px 100%;display:inline-block;position:relative;overflow:hidden}.skeleton-loader::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);animation:load 1.5s infinite}@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}";
-
-const UdpSkeletonLoading = /*@__PURE__*/ proxyCustomElement(class UdpSkeletonLoading extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        // You can use properties to define the size, shape, etc.
-        this.width = '100%';
-        this.height = '20px';
-        this.borderRadius = '4px';
-    }
-    render() {
-        return (h("div", { key: '2801b43f47755995952a8ebda27acd6557b340f8', class: "skeleton-loader", style: { width: this.width, height: this.height, borderRadius: this.borderRadius } }));
-    }
-    static get style() { return udpSkeletonLoadingCss; }
-}, [257, "udp-skeleton-loading", {
-        "width": [1],
-        "height": [1],
-        "borderRadius": [1, "border-radius"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["udp-skeleton-loading"];
-    components.forEach(tagName => { switch (tagName) {
-        case "udp-skeleton-loading":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, UdpSkeletonLoading);
-            }
-            break;
-    } });
-}
-
-export { UdpSkeletonLoading as U, defineCustomElement as d };
-//# sourceMappingURL=udp-skeleton-loading2.js.map
-
-//# sourceMappingURL=udp-skeleton-loading2.js.map
+import{p as e,H as t,h as s,t as n}from"./index2.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.width="100%",this.height="20px",this.borderRadius="4px"}render(){return s("div",{key:"2801b43f47755995952a8ebda27acd6557b340f8",class:"skeleton-loader",style:{width:this.width,height:this.height,borderRadius:this.borderRadius}})}static get style(){return".skeleton-loader{background:linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);background-size:1000px 100%;display:inline-block;position:relative;overflow:hidden}.skeleton-loader::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);animation:load 1.5s infinite}@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}"}},[1,"udp-skeleton-loading",{width:[1],height:[1],borderRadius:[1,"border-radius"]}]);function i(){"undefined"!=typeof customElements&&["udp-skeleton-loading"].forEach((e=>{"udp-skeleton-loading"===e&&(customElements.get(n(e))||customElements.define(n(e),o))}))}export{o as U,i as d}

package/dist/components/udp-split-screen.js

@@ -1,92 +1 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
-
-const udpSplitScreenCss = ".container{display:flex;height:100%;width:100%}.container:not(.open){display:none}.panel{flex-grow:1;overflow:auto;cursor:default;}.resizer{background-color:transparent;height:100vh;cursor:ew-resize;position:relative;display:flex;align-items:center;justify-content:center;padding:0 2px;box-sizing:content-box;transition:background-color 0.3s ease;}.resizer:hover{background-color:var(--primary-color);cursor:ew-resize;}.resizer:hover::before{background-color:transparent;}.resizer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:100%;background-color:rgb(219, 219, 219);transition:background-color 0.3s ease;}.drag-handle{content:'';font-size:24px;color:#666;user-select:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}";
-
-const UdpSplitScreen$1 = /*@__PURE__*/ proxyCustomElement(class UdpSplitScreen extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.isOpen = true;
-        this.panelWidth = 75;
-        this.isDragging = false; // Track dragging state
-        this.handleDrag = (event) => {
-            console.log("Dragging");
-            const bounds = this.element.getBoundingClientRect();
-            const newWidth = ((event.clientX - bounds.left) / bounds.width) * 100;
-            const adjustedWidth = Math.max(2, Math.min(newWidth, 98)); // Keep your existing constraints
-            localStorage.setItem('panelWidth', this.panelWidth.toString());
-            if (this.panelWidth !== adjustedWidth) {
-                this.panelWidth = adjustedWidth;
-                localStorage.setItem('panelWidth', this.panelWidth.toString());
-            }
-        };
-    }
-    async toggleOpen() {
-        this.isOpen = !this.isOpen;
-    }
-    componentDidLoad() {
-        this.element.addEventListener('mousedown', (event) => {
-            this.isDragging = true;
-            //this.element.style.cursor = 'grabbing'; // Change to grabbing when dragging starts
-            // Prevent default to avoid any text selection or other default actions
-            event.preventDefault();
-        });
-        // Attach mousemove and mouseup at the document level to ensure smooth dragging
-        document.addEventListener('mousemove', (event) => {
-            if (!this.isDragging)
-                return;
-            if (this.isDragging) {
-                const bounds = this.element.getBoundingClientRect();
-                const newWidth = ((event.clientX - bounds.left) / bounds.width) * 100;
-                this.panelWidth = Math.max(2, Math.min(newWidth, 98)); // Adjusted for a bit of margin
-            }
-            this.handleDrag(event);
-        });
-        document.addEventListener('mouseup', () => {
-            if (this.isDragging) {
-                this.isDragging = false;
-                //this.element.style.cursor = 'ew-resize'; // Revert cursor when dragging ends
-            }
-        });
-    }
-    async componentWillLoad() {
-        const savedWidth = localStorage.getItem('panelWidth');
-        if (savedWidth) {
-            this.panelWidth = parseFloat(savedWidth);
-        }
-    }
-    render() {
-        return (h("div", { key: 'c1a7e0eba3ac1fcc5fd02ebcfd24ad866ddd5a43', ref: (el) => this.element = el, class: { 'container': true, 'open': this.isOpen } }, h("div", { key: 'ba41dc15748286b532e98574db37413ec8428110', class: "panel", style: { width: `${this.panelWidth}%` } }, h("slot", { key: 'a5789cb6914ad71421a23bbedff897ab3af03356', name: "first-panel" })), h("div", { key: 'bc81bfcfe169236f7102ad340b5e87b169cbb368', class: "resizer", onMouseDown: (event) => event.preventDefault() }, h("div", { key: 'eb72ee3c6aeed6c26d07d72f0818bcce3d1b0dc6', class: "drag-handle" })), h("div", { key: '606d564838ffaad254738b761d9d4e1f382888f6', class: "panel", style: { width: `${100 - this.panelWidth}%` } }, h("slot", { key: '682ce28bd7d62692855eb5254da515119dab9214', name: "second-panel" }, this.panelContent))));
-    }
-    static get style() { return udpSplitScreenCss; }
-}, [257, "udp-split-screen", {
-        "panelContent": [1, "panel-content"],
-        "isOpen": [32],
-        "panelWidth": [32],
-        "isDragging": [32],
-        "toggleOpen": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["udp-split-screen"];
-    components.forEach(tagName => { switch (tagName) {
-        case "udp-split-screen":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, UdpSplitScreen$1);
-            }
-            break;
-    } });
-}
-
-const UdpSplitScreen = UdpSplitScreen$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { UdpSplitScreen, defineCustomElement };
-//# sourceMappingURL=udp-split-screen.js.map
-
-//# sourceMappingURL=udp-split-screen.js.map
+import{p as e,H as t,h as s,t as o}from"./index2.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.isOpen=!0,this.panelWidth=75,this.isDragging=!1,this.handleDrag=e=>{console.log("Dragging");const t=this.element.getBoundingClientRect(),s=Math.max(2,Math.min((e.clientX-t.left)/t.width*100,98));localStorage.setItem("panelWidth",""+this.panelWidth),this.panelWidth!==s&&(this.panelWidth=s,localStorage.setItem("panelWidth",""+this.panelWidth))}}async toggleOpen(){this.isOpen=!this.isOpen}componentDidLoad(){this.element.addEventListener("mousedown",(e=>{this.isDragging=!0,e.preventDefault()})),document.addEventListener("mousemove",(e=>{if(this.isDragging){if(this.isDragging){const t=this.element.getBoundingClientRect();this.panelWidth=Math.max(2,Math.min((e.clientX-t.left)/t.width*100,98))}this.handleDrag(e)}})),document.addEventListener("mouseup",(()=>{this.isDragging&&(this.isDragging=!1)}))}async componentWillLoad(){const e=localStorage.getItem("panelWidth");e&&(this.panelWidth=parseFloat(e))}render(){return s("div",{key:"c1a7e0eba3ac1fcc5fd02ebcfd24ad866ddd5a43",ref:e=>this.element=e,class:{container:!0,open:this.isOpen}},s("div",{key:"ba41dc15748286b532e98574db37413ec8428110",class:"panel",style:{width:this.panelWidth+"%"}},s("slot",{key:"a5789cb6914ad71421a23bbedff897ab3af03356",name:"first-panel"})),s("div",{key:"bc81bfcfe169236f7102ad340b5e87b169cbb368",class:"resizer",onMouseDown:e=>e.preventDefault()},s("div",{key:"eb72ee3c6aeed6c26d07d72f0818bcce3d1b0dc6",class:"drag-handle"})),s("div",{key:"606d564838ffaad254738b761d9d4e1f382888f6",class:"panel",style:{width:100-this.panelWidth+"%"}},s("slot",{key:"682ce28bd7d62692855eb5254da515119dab9214",name:"second-panel"},this.panelContent)))}static get style(){return".container{display:flex;height:100%;width:100%}.container:not(.open){display:none}.panel{flex-grow:1;overflow:auto;cursor:default;}.resizer{background-color:transparent;height:100vh;cursor:ew-resize;position:relative;display:flex;align-items:center;justify-content:center;padding:0 2px;box-sizing:content-box;transition:background-color 0.3s ease;}.resizer:hover{background-color:var(--primary-color);cursor:ew-resize;}.resizer:hover::before{background-color:transparent;}.resizer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:100%;background-color:rgb(219, 219, 219);transition:background-color 0.3s ease;}.drag-handle{content:'';font-size:24px;color:#666;user-select:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}"}},[257,"udp-split-screen",{panelContent:[1,"panel-content"],isOpen:[32],panelWidth:[32],isDragging:[32],toggleOpen:[64]}]),a=n,i=function(){"undefined"!=typeof customElements&&["udp-split-screen"].forEach((e=>{"udp-split-screen"===e&&(customElements.get(o(e))||customElements.define(o(e),n))}))};export{a as UdpSplitScreen,i as defineCustomElement}