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

package/dist/esm/primary-action-header_3.entry.js

@@ -1,642 +0,0 @@
-import { r as registerInstance, h, c as createEvent, a as getElement } from './index-CaZq3YdB.js';
-import { i as iconMapping } from './iconMapping-CPerGeNF.js';
-import Close24 from '@carbon/icons/es/close/24';
-import '@carbon/icons/es/add/16';
-import '@carbon/icons/es/add/32';
-import '@carbon/icons/es/add--alt/16';
-import '@carbon/icons/es/add--filled/16';
-import '@carbon/icons/es/arrows--horizontal/16';
-import '@carbon/icons/es/attachment/16';
-import '@carbon/icons/es/batch-job/16';
-import '@carbon/icons/es/box/16';
-import '@carbon/icons/es/close/16';
-import '@carbon/icons/es/close/32';
-import '@carbon/icons/es/close--filled/16';
-import '@carbon/icons/es/close--outline/16';
-import '@carbon/icons/es/checkmark/16';
-import '@carbon/icons/es/checkmark/24';
-import '@carbon/icons/es/checkmark/32';
-import '@carbon/icons/es/chevron--left/16';
-import '@carbon/icons/es/chevron--right/16';
-import '@carbon/icons/es/chevron--down/16';
-import '@carbon/icons/es/data-enrichment/16';
-import '@carbon/icons/es/document/16';
-import '@carbon/icons/es/document--add/16';
-import '@carbon/icons/es/document--attachment/16';
-import '@carbon/icons/es/document--pdf/16';
-import '@carbon/icons/es/document--video/16';
-import '@carbon/icons/es/document--audio/16';
-import '@carbon/icons/es/draggable/16';
-import '@carbon/icons/es/edit/16';
-import '@carbon/icons/es/export/16';
-import '@carbon/icons/es/flag/16';
-import '@carbon/icons/es/information/16';
-import '@carbon/icons/es/information/32';
-import '@carbon/icons/es/link/16';
-import '@carbon/icons/es/overflow-menu--vertical/16';
-import '@carbon/icons/es/overflow-menu--vertical/32';
-import '@carbon/icons/es/return/16';
-import '@carbon/icons/es/save/16';
-import '@carbon/icons/es/settings/16';
-import '@carbon/icons/es/subtract/16';
-import '@carbon/icons/es/subtract--alt/16';
-import '@carbon/icons/es/subtract--filled/16';
-import '@carbon/icons/es/trash-can/16';
-import '@carbon/icons/es/user/16';
-import '@carbon/icons/es/view/16';
-import '@carbon/icons/es/warning/16';
-import '@carbon/icons/es/warning/32';
-import '@carbon/icons/es/warning--alt/16';
-import '@carbon/icons/es/warning--alt/32';
-import '@carbon/icons/es/product/16';
-import '@carbon/icons/es/workspace/16';
-import '@carbon/icons/es/arrow--up/16';
-import '@carbon/icons/es/arrow--down/16';
-import '@carbon/icons/es/arrow--right/16';
-import '@carbon/icons/es/arrow--left/16';
-import '@carbon/icons/es/copy/16';
-import '@carbon/icons/es/star/16';
-import '@carbon/icons/es/data-table/16';
-import '@carbon/icons/es/fit-to-width/16';
-import '@carbon/icons/es/search--advanced/16';
-import '@carbon/icons/es/reset/16';
-import '@carbon/icons/es/column/16';
-import '@carbon/icons/es/column--delete/16';
-import '@carbon/icons/es/watson-health/rotate--360/16';
-import '@carbon/icons/es/filter/16';
-import '@carbon/icons/es/app-connectivity/16';
-import '@carbon/icons/es/text--font/16';
-import '@carbon/icons/es/text--long-paragraph/16';
-import '@carbon/icons/es/character--whole-number/16';
-import '@carbon/icons/es/checkbox--checked/16';
-import '@carbon/icons/es/radio-button--checked/16';
-import '@carbon/icons/es/event--schedule/16';
-import '@carbon/icons/es/view--off/16';
-import '@carbon/icons/es/time/16';
-import '@carbon/icons/es/calendar/16';
-import '@carbon/icons/es/list--checked/16';
-import '@carbon/icons/es/list--bulleted/16';
-import '@carbon/icons/es/cloud--upload/16';
-import '@carbon/icons/es/locked/16';
-import '@carbon/icons/es/pause/16';
-import '@carbon/icons/es/unlocked/16';
-import '@carbon/icons/es/send/16';
-import '@carbon/icons/es/email/16';
-import '@carbon/icons/es/checkmark--outline/16';
-import '@carbon/icons/es/migrate--alt/16';
-import '@carbon/icons/es/checkbox--checked--filled/16';
-import '@carbon/icons/es/checkbox/16';
-import '@carbon/icons/es/ZIP/16';
-import '@carbon/icons/es/image/16';
-import '@carbon/icons/es/PPT/16';
-import '@carbon/icons/es/XLS/16';
-
-const primaryActionHeaderCss = ":host{display:block;font-family:var(--font-family-base, sans-serif);background-color:var(--primary-action-header-background, #ffffff);color:var(--primary-action-header-text-color, rgba(0, 0, 0, 0.87));box-shadow:var(--primary-action-header-shadow, 0px 2px 4px -1px rgba(0,0,0,0.2));height:var(--primary-action-header-height, 48px);padding:var(--primary-action-header-padding, 0 var(--spacing-04));box-sizing:border-box}.header-bar{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.title-section{flex-shrink:0;margin-right:var(--spacing-md, 16px)}.tabs{flex-grow:1;display:flex;justify-content:center;align-items:stretch;min-width:0}.tabs udp-tabs{width:100%;display:flex;justify-content:center}.tabs udp-tabs::part(tab-list){}.tabs udp-tabs button{padding:0 16px;margin:0 var(--spacing-xxs, 4px);height:100%;border:none;background-color:transparent;cursor:pointer;font-size:var(--font-size-sm, 0.875rem);color:var(--text-color-secondary, rgba(0, 0, 0, 0.6));text-transform:uppercase;font-weight:var(--font-weight-medium, 500);border-bottom:2px solid transparent;transition:color 0.3s ease, border-bottom-color 0.3s ease}.tabs udp-tabs button:hover{color:var(--primary-color-hover, var(--primary-color, #1976d2))}.tabs udp-tabs button.active{color:var(--primary-color, #1976d2);border-bottom:2px solid var(--primary-color, #1976d2)}.button-section{display:flex;align-items:center;flex-shrink:0;gap:var(--spacing-sm, 8px)}.button-section stencil-icon-button{color:var(--primary-action-header-icon-color, var(--text-color-primary, rgba(0, 0, 0, 0.54)))}.button-section stencil-icon-button:hover{background-color:rgba(0,0,0,0.04)}.button-section custom-button{}";
-
-const PrimaryActionHeader = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.hiddenActionButtons = [];
-        this.hiddenLabels = [];
-        this.actionButtons = [];
-        this.defaultActionButtons = [];
-        this.tabs = true;
-        this.actionButtonLabel = '';
-    }
-    //   @State() activeTabIndex: number = 0;
-    getIconComponent(icon, customIcon) {
-        if (customIcon) {
-            return customIcon;
-        }
-        if (typeof icon === 'string') {
-            return iconMapping[icon];
-        }
-        return icon;
-    }
-    renderIcon(ActualIcon) {
-        if (ActualIcon && ActualIcon.elem === 'svg') {
-            return (h("svg", Object.assign({}, ActualIcon.attrs), ActualIcon.content.map((content, index) => {
-                return h("path", Object.assign({ key: index }, content.attrs));
-            })));
-        }
-        return null;
-    }
-    //   selectTab(index: number) {
-    //     this.activeTabIndex = index;
-    //   }
-    render() {
-        console.log('active tab', this.activeTabIndex);
-        return (h("div", { key: '6619a0d1886bed91baf548f6577ffd29a6583e10', class: "header-bar" }, h("div", { key: '42005c79b8749912231c96e12bdeb03ae5d0e3c5', class: "title-section" }, h("unity-typography", { key: '2c9910a18282fb24d024428ac4f100fe4a884a0f', variant: "h4" }, this.title)), this.tabs && (h("div", { key: '1557c08c085bfc8784322861d56bb6b3d0649ab6', class: "tabs" }, h("udp-tabs", { key: 'd0825c8efaed182864999508c19550e979ee5982' }, h("button", { key: 'a7f4a1ddcde103c52a316ea1460828b39503398f', class: this.activeTabIndex === 0 ? 'active' : '', slot: "tab-title", onClick: () => this.selectTab(0) }, "Demo Grid"), h("button", { key: 'f39ba5df6b9acc160f3951fd3f1a2407e413331b', class: this.activeTabIndex === 1 ? 'active' : '', slot: "tab-title", onClick: () => this.selectTab(1) }, "Other Content")))), h("div", { key: '7a2fd6fd7dc477c7b6bce09394f6ea5763cd22e0', class: "button-section" }, this.defaultActionButtons.map(btn => {
-            // Determine the actual icon to use
-            const ActualIcon = this.getIconComponent(btn.icon, btn.customIcon);
-            const clickHandler = (event) => {
-                if (btn.clickHandler) {
-                    btn.clickHandler(event);
-                }
-                else {
-                    console.log(`${btn.label} Clicked but no custom handler defined`);
-                }
-            };
-            if (!this.hiddenActionButtons.includes(btn.label) && btn.visible) {
-                return (h("stencil-icon-button", { secondary: btn.secondary, onClick: clickHandler, tooltip: btn.tooltip }, this.renderIcon(ActualIcon), !this.hiddenLabels.includes(btn.label) && btn.showLabel && h("span", null, btn.label)));
-            }
-            return null;
-        }), !this.actionButtonLabel && h("div", { key: '1794f324f22d659d1e072e1a5f35e05ea81b9388', class: "right-margin" }), this.actionButtonLabel && (h("udp-button", { key: '8f2fe83b58c869cdfac6db0d48a7d03aaead6ec1', variant: "contained", color: "secondary", onClick: event => this.primaryActionClick(event) }, this.actionButtonLabel)))));
-    }
-};
-PrimaryActionHeader.style = primaryActionHeaderCss;
-
-const udpSideSheetCss = ":host{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;visibility:hidden;transition:visibility 0s 0.2s}:host(.is-visible){visibility:visible;transition-delay:0s}.backdrop{background:rgba(0, 0, 0, 0.5);width:100%;height:100%;position:fixed;top:0;left:0;opacity:0;transition:opacity 0.2s ease-in-out}:host(.is-visible) .backdrop{opacity:1}.sheet{background:white;height:100vh;position:fixed;top:0;display:flex;flex-direction:column;box-shadow:0 0 4px rgba(0, 0, 0, 0.3);transition:transform 0.2s ease-in-out;width:100%}.sheet.right{right:0;transform:translateX(100%)}.sheet.left{left:0;transform:translateX(-100%)}:host(.is-visible) .sheet{transform:translateX(0)}.sheet.sm{max-width:360px}.sheet.md{max-width:600px}.sheet.lg{max-width:960px}.sheet.full{max-width:100%}.sheet.custom-width{}.title-container{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;box-shadow:var(--elevation-01, 0 4px 8px rgba(0, 0, 0, 0.1));gap:var(--spacing-02)}.title-text{flex-grow:1;text-align:left;}.close-button{flex-shrink:0}.header-action-button{flex-shrink:0;display:flex;align-items:center;gap:var(--spacing-02, 4px);padding:var(--spacing-03, 8px) var(--spacing-03, 8px) var(--spacing-03, 8px) 0}.content{overflow-y:auto;flex-grow:1;background-color:var(--gray-01)}.content.padding{padding:var(--spacing-05, 24px)}.footer{padding:var(--spacing-03, 8px);box-shadow:var(--elevation-01, 0 4px 8px rgba(0, 0, 0, 0.1));display:flex;justify-content:flex-end;flex-shrink:0;width:100%;gap:var(--spacing-02, 4px);align-items:center}.footer.secondary-button-overflow{flex-direction:row-reverse}.footer-secondary-buttons-container{flex-grow:2;width:100%}.footer-secondary-buttons{display:flex;justify-content:flex-end;gap:var(--spacing-02, 4px);align-items:center}.footer-secondary-buttons.secondary-button-overflow{flex-grow:1}.loader-container{height:4px;width:100%;background-color:var(--gray-01)}.loader-container udp-linear-loader{visibility:hidden;opacity:0;transition:none}.loader-container udp-linear-loader.is-loading{visibility:visible;opacity:1;}";
-
-const UdpSideSheet = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.udpSideSheetClose = createEvent(this, "udpSideSheetClose");
-        this.udpPrimaryButtonClick = createEvent(this, "udpPrimaryButtonClick");
-        this.udpHeaderActionButtonClick = createEvent(this, "udpHeaderActionButtonClick");
-        /** When true, the side sheet is open and visible */
-        this.open = false;
-        /** Position of the sheet on the screen */
-        this.position = 'right';
-        /** Width preset or a numeric pixel width */
-        this.width = 'md';
-        /** Controls whether default inner padding is applied */
-        this.padding = true;
-        /** When true, shows a top loader */
-        this.loading = false;
-        /** Whether the header action button is disabled */
-        this.headerActionButtonDisabled = false;
-        /** Whether the primary footer button is disabled */
-        this.primaryButtonDisabled = false;
-        /** Whether the footer should show the overflow "More" button */
-        this.showOverflowButton = false;
-        /** Whether the overflow popover is open */
-        this.openOverflowMenu = false;
-        this.visibleSecondaryButtons = [];
-        this.overflowSecondaryButtons = [];
-        /** Saved original document.body.overflow value to restore on close */
-        this.originalBodyOverflow = '';
-        /** Saved original document.body.paddingRight value to restore on close */
-        this.originalBodyPaddingRight = '';
-        /**
-         * Transition end handler used to remove the host element from body after close.
-         *
-         * @private
-         */
-        this.handleTransitionEnd = () => {
-            if (!this.open && this.hostEl.parentElement === document.body) {
-                document.body.removeChild(this.hostEl);
-            }
-        };
-        /**
-         * Close the side sheet and emit close event.
-         *
-         * @private
-         */
-        this.onClose = () => {
-            this.open = false;
-            this.udpSideSheetClose.emit();
-        };
-        /**
-         * Backdrop click handler. Only closes when clicking the backdrop itself.
-         *
-         * @param e - MouseEvent from the backdrop click
-         * @private
-         */
-        this.onCloseBackdrop = (e) => {
-            if (e.target === e.currentTarget) {
-                this.onClose();
-            }
-        };
-        /**
-         * Emit primary footer button click event.
-         *
-         * @private
-         */
-        this.onPrimaryButtonClick = () => {
-            this.udpPrimaryButtonClick.emit();
-        };
-        /**
-         * Emit header action button click event.
-         *
-         * @private
-         */
-        this.onHeaderActionButtonClick = () => {
-            this.udpHeaderActionButtonClick.emit();
-        };
-        /**
-         * Open overflow menu anchored to the clicked element.
-         *
-         * @param event - MouseEvent from the "More" button click
-         * @private
-         */
-        this.onMoreActionButtonClick = (event) => {
-            this.overflowMenuAnchor = event.currentTarget;
-            this.openOverflowMenu = true;
-        };
-        /**
-         * Close the overflow popover.
-         *
-         * @param e - optional KeyboardEvent or MouseEvent (unused)
-         * @private
-         */
-        this.handleCloseOverflowMenu = () => {
-            this.openOverflowMenu = false;
-        };
-    }
-    /**
-     * Watcher for `open` prop. Handles portal append/removal and body scroll lock.
-     *
-     * @param newValue - new value of the `open` prop
-     * @param oldValue - previous value of the `open` prop
-     */
-    handleOpenChange(newValue, oldValue) {
-        if (newValue === oldValue) {
-            return;
-        }
-        if (newValue) {
-            // Calculate scrollbar width before hiding it
-            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-            // Save original values
-            this.originalBodyOverflow = document.body.style.overflow;
-            this.originalBodyPaddingRight = document.body.style.paddingRight;
-            document.body.appendChild(this.hostEl);
-            // Add padding to compensate for scrollbar
-            if (scrollbarWidth > 0) {
-                const currentPadding = parseInt(window.getComputedStyle(document.body).paddingRight) || 0;
-                document.body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;
-            }
-            document.body.style.overflow = 'hidden';
-            requestAnimationFrame(() => {
-                this.hostEl.classList.add('is-visible');
-                // Check overflow after the side sheet is visible
-                setTimeout(() => this.checkOverflow(), 50);
-            });
-        }
-        else {
-            this.hostEl.classList.remove('is-visible');
-            document.body.style.overflow = this.originalBodyOverflow;
-            document.body.style.paddingRight = this.originalBodyPaddingRight;
-            this.hostEl.addEventListener('transitionend', this.handleTransitionEnd, { once: true });
-        }
-    }
-    /**
-     * Watcher for footer secondary buttons changes. Triggers overflow recalculation.
-     */
-    handleSecondaryButtonsChange() {
-        // Recheck overflow when buttons change
-        setTimeout(() => this.checkOverflow(), 50);
-    }
-    /**
-     * Measures footer buttons in an offscreen container and sets `showOverflowButton`.
-     * Safely returns early if required refs are unavailable.
-     */
-    checkOverflow() {
-        if (!this.footerRef || !this.measurementContainerRef) {
-            return;
-        }
-        if (!this.footerSecondaryButtons || this.footerSecondaryButtons.length === 0) {
-            this.showOverflowButton = false;
-            return;
-        }
-        // Get the footer container width (minus padding)
-        const footerWidth = this.footerRef.offsetWidth;
-        const footerStyle = window.getComputedStyle(this.footerRef);
-        const footerPaddingLeft = parseFloat(footerStyle.paddingLeft);
-        const footerPaddingRight = parseFloat(footerStyle.paddingRight);
-        const availableWidth = footerWidth - footerPaddingLeft - footerPaddingRight;
-        // Measure all buttons in the hidden measurement container
-        const measurementButtons = this.measurementContainerRef.querySelectorAll('udp-button');
-        let totalWidth = 0;
-        measurementButtons.forEach((button, index) => {
-            const buttonWidth = button && button instanceof HTMLElement ? button.offsetWidth : 0;
-            totalWidth += buttonWidth;
-            // Add gap spacing between buttons (except for the last one)
-            if (index < measurementButtons.length - 1) {
-                const containerStyle = window.getComputedStyle(this.measurementContainerRef);
-                const gap = parseFloat(containerStyle.gap) || 4; // Default gap from CSS
-                totalWidth += gap;
-            }
-        });
-        // Add a small buffer to prevent edge cases
-        const buffer = 10;
-        const isOverflowing = totalWidth + buffer > availableWidth;
-        this.showOverflowButton = isOverflowing;
-    }
-    /**
-     * Lifecycle: componentDidLoad. Sets up ResizeObserver and initial overflow check.
-     *
-     * @private
-     */
-    componentDidLoad() {
-        {
-            // Set up ResizeObserver to watch for footer size changes
-            this.resizeObserver = new ResizeObserver(() => {
-                this.checkOverflow();
-            });
-            // Initial check after a small delay to ensure DOM is ready
-            requestAnimationFrame(() => {
-                setTimeout(() => {
-                    if (this.footerRef) {
-                        this.resizeObserver.observe(this.footerRef);
-                    }
-                    this.checkOverflow();
-                }, 100);
-            });
-        }
-    }
-    /**
-     * Lifecycle: disconnectedCallback. Restores body styles and disconnects observers.
-     *
-     * @private
-     */
-    disconnectedCallback() {
-        if (document.body.style.overflow === 'hidden') {
-            document.body.style.overflow = this.originalBodyOverflow;
-            document.body.style.paddingRight = this.originalBodyPaddingRight;
-        }
-        // Clean up ResizeObserver
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-    }
-    /**
-     * Render the component UI.
-     *
-     * @returns JSX element tree
-     * @private
-     */
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const widthClass = typeof this.width === 'number' ? 'custom-width' : this.width;
-        const sideSheetStyle = typeof this.width === 'number' ? { maxWidth: `${this.width}px` } : {};
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        const headerStartIcon = Boolean(this.headerActionButtonIcon) ? (h("udp-icon", { iconName: this.headerActionButtonIcon, color: "inherit" })) : undefined;
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        const overflowIcon = h("udp-icon", { key: '6da1f10cce0b9e2b2f597df9249ef45128445801', iconName: "overflowMenuVertical", color: "inherit" });
-        return (h("div", { key: '20237474eebbd73253c97b28229607d10ac91e2f', class: "backdrop", onClick: this.onCloseBackdrop }, h("div", { key: '5b09a3b7e0905a7eef6875499eb863daedcb8969', class: { sheet: true, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, h("div", { key: '99c0fa14ced2b4397b066f9348984cf85c5e6325', class: "title-container" }, h("div", { key: 'a47a3669b74bfc3e7235ab4487fcae6b24675b26', class: "close-button" }, h("stencil-icon-button", { key: '46a52c8e2f4ac95b4ef668e05905fdde9f8d0ee4',
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            icon: Close24, onClick: this.onClose, secondary: true })), h("div", { key: '267ede825a8d9fab576c7bb0eeac782b8195372c', class: "title-text" }, h("unity-typography", { key: 'b3001278f39e3311e2b736dd47d91ecb04601981', variant: "h6" }, this.title)), (this.headerActionButtonLabel || ((_a = this.headerSecondaryButtons) === null || _a === void 0 ? void 0 : _a.length) > 0) && (h("div", { key: '5751cfe92eb7b01c836085d50429f19234844b31', class: "header-action-button" }, (_b = this.headerSecondaryButtons) === null || _b === void 0 ? void 0 :
-            _b.map((item) => (h("udp-button", { variant: "outlined", disabled: item.disabled, onClick: item.onClick, endIcon: item.icon }, item.label))), this.headerActionButtonLabel && (h("udp-button", { key: 'a8f34ed12616418ee42cb5eec10e92add96598a6', disabled: this.headerActionButtonDisabled, onClick: this.onHeaderActionButtonClick,
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            startIcon: headerStartIcon, variant: "contained" }, this.headerActionButtonLabel))))), h("div", { key: '94364ba51f35c7a46fddb17792c7905dfd6ebc45', class: "loader-container" }, h("udp-linear-loader", { key: 'e12b1130a11b4a9de87aa8da219f538354508e9f', class: { 'is-loading': this.loading }, color: "primary" })), h("div", { key: 'eb842f58defdcd74ef6a28815f11f21c68c8c2ee', class: { content: true, padding: this.padding } }, h("slot", { key: 'd7731b049a94fb19d38c045ea76c2bf78062ec1b' })), (this.primaryButtonLabel || ((_c = this.footerSecondaryButtons) === null || _c === void 0 ? void 0 : _c.length) > 0) && (h("div", { key: '0991510d62b3fefd3027f15b96e46d44a8ac66e1' }, h("div", { key: '148a2ebb2385c9e04c5957fff1d9be90a57d441c', class: "loader-container" }), h("div", { key: 'ffe55575f51be1c9136cc1bdf8eb3a43e14b01da', class: {
-                footer: true,
-            }, ref: el => (this.footerRef = el) }, !this.showOverflowButton && ((_d = this.footerSecondaryButtons) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", { key: '47b70ed64e9246d63819afcdb93d40eb6559a9a8', class: "footer-secondary-buttons-container" }, h("div", { key: 'ef8f34e7c4c01c4a9f689a1cffe648837663a46c', class: "footer-secondary-buttons" }, (_e = this.footerSecondaryButtons) === null || _e === void 0 ? void 0 : _e.map((item) => (h("udp-button", { variant: "outlined", disabled: item.disabled, onClick: item.onClick, endIcon: item.icon }, item.label)))))), this.showOverflowButton && (h("udp-button", { key: 'aa388701ba4d91be157b3ee4ad434d50b8d03efe', variant: "outlined", onClick: this.onMoreActionButtonClick, color: "secondary",
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            endIcon: overflowIcon }, "More")), this.primaryButtonLabel && (h("udp-button", { key: 'cb644736d0d39dcd89cd2fe2d721810781a581d2', variant: "contained", disabled: this.primaryButtonDisabled, onClick: this.onPrimaryButtonClick, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)), this.showOverflowButton && (h("udp-pop-over", { key: '7de1a458880803c3a3b912aaa567c9df82748531', anchorElement: this.overflowMenuAnchor, isOpen: this.openOverflowMenu, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleCloseOverflowMenu }, h("div", { key: 'dc0dc7b56615ede816650bf970e6059b8ea30c2d', class: "menu" }, (_f = this.footerSecondaryButtons) === null || _f === void 0 ? void 0 : _f.map(item => (h("udp-menu-item", { label: item === null || item === void 0 ? void 0 : item.label, iconName: item === null || item === void 0 ? void 0 : item.icon, onItemClick: () => {
-                item === null || item === void 0 ? void 0 : item.onClick();
-                this.handleCloseOverflowMenu();
-            }, disabled: item === null || item === void 0 ? void 0 : item.disabled })))))), h("div", { key: 'a7aecadc65eb2fb3a106c19f6101e4c6c158c960', ref: el => (this.measurementContainerRef = el), style: {
-                position: 'absolute',
-                visibility: 'hidden',
-                pointerEvents: 'none',
-                display: 'flex',
-                gap: 'var(--spacing-02, 4px)',
-            }, "aria-hidden": "true" }, (_g = this.footerSecondaryButtons) === null || _g === void 0 ? void 0 :
-            _g.map((item) => (h("udp-button", { variant: "text", size: "medium", disabled: item.disabled, endIcon: item.icon }, item.label))), this.primaryButtonLabel && (h("udp-button", { key: '64be9bf39748c7c301d4f4d264fae98ed0e40302', variant: "contained", size: "medium", disabled: this.primaryButtonDisabled, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)))))))));
-    }
-    get hostEl() { return getElement(this); }
-    static get watchers() { return {
-        "open": ["handleOpenChange"],
-        "footerSecondaryButtons": ["handleSecondaryButtonsChange"]
-    }; }
-};
-UdpSideSheet.style = udpSideSheetCss;
-
-const udpTabsCss = ".tab-container{display:flex;flex-direction:column}.tab-header{background-color:#ffffff;position:relative;display:flex;align-items:center}.tab-scroll-container{display:flex;position:relative;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0}.tab-scroll-container::-webkit-scrollbar{height:4px}.tab-scroll-container::-webkit-scrollbar-track{background:transparent}.tab-scroll-container::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.2);border-radius:4px}.tab-scroll-container::-webkit-scrollbar-thumb:hover{background-color:rgba(0, 0, 0, 0.3)}.tab-header::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--divider-color, #e0e0e0)}.tab-header button{padding:16px;font-size:14px;text-align:center;border:none;background:none;cursor:pointer;outline:none;transition:all 0.22s ease;color:#555555;font-weight:600;opacity:0.9;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px}.tab-header.fill .tab-scroll-container{width:100%}.tab-header.fill .tab-scroll-container button{flex-grow:1}.tab-header button.active{color:var(--secondary-color, #344861);opacity:1.0}.tab-header button.scroll-arrow{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:40px;padding:0;background:#ffffff;cursor:pointer;font-size:16px;font-weight:bold;color:#757575;z-index:2;transition:color 0.2s ease;flex-shrink:0;opacity:1;gap:0}.tab-header button.scroll-arrow:hover{color:#000}.tab-header button.scroll-arrow.left{left:0}.tab-header button.scroll-arrow.right{right:0}.scroll-fade{position:absolute;top:0;bottom:0;width:30px;z-index:1;pointer-events:none}.scroll-fade.left{left:40px;background:linear-gradient(\n    to right,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  )}.scroll-fade.right{right:40px;background:linear-gradient(\n    to left,\n    #ffffff,\n    rgba(255, 255, 255, 0)\n  )}.tab-header button udp-icon{font-size:1.2em;line-height:1}.tab-header button.icon-start{flex-direction:row}.tab-header button.icon-end{flex-direction:row-reverse}.tab-header button.icon-top{flex-direction:column;gap:4px}.tab-header button.icon-bottom{flex-direction:column-reverse;gap:4px}.slider{position:absolute;bottom:0;left:0;height:2px;background-color:var(--secondary-color, #344861);transition:transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),\n    width 0.22s cubic-bezier(0.4, 0, 0.2, 1);z-index:1}.tab-header button.disabled{opacity:0.5;cursor:not-allowed}.tab-header button.disabled.active{color:#757575;opacity:0.5}";
-
-const UdpTabs = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.udpTabChange = createEvent(this, "udpTabChange");
-        /**
-         * Specifies the layout variant of the tab header.
-         *
-         * - `'standard'`: Tabs will be sized based on their content.
-         * - `'fill'`: Tabs will stretch to fill the available horizontal space.
-         */
-        this.variant = 'fill';
-        /**
-         * (Optional) An array of tab configuration objects.
-         * If provided, this will be used to render tabs instead of slotted `<udp-tab>` components.
-         * This mode is typically used with controlled tabs.
-         */
-        this.tabs = [];
-        this.internalActiveTab = 0; // For uncontrolled mode
-        this.tabDetails = []; // Unified details from prop or slot
-        this.sliderStyle = {
-            width: '0',
-            transform: 'translateX(0)',
-        };
-        this.showScrollLeft = false;
-        this.showScrollRight = false;
-        this.slottedTabs = []; // Renamed from `tabs`
-        this.buttonRefs = [];
-    }
-    /**
-     * Returns true if the component is in controlled mode.
-     */
-    get isControlled() {
-        return this.value != null;
-    }
-    /**
-     * Returns true if tabs are being provided by the `tabs` prop.
-     */
-    get useTabsProp() {
-        return this.tabs && this.tabs.length > 0;
-    }
-    /**
-     * Returns the currently active tab index,
-     * respecting controlled or uncontrolled mode.
-     */
-    get activeTab() {
-        return this.isControlled ? this.value : this.internalActiveTab;
-    }
-    handleSlotChange() {
-        // If we're using the tabs prop, slot changes are irrelevant
-        if (this.useTabsProp)
-            return;
-        this.initializeTabs();
-    }
-    handleResize() {
-        requestAnimationFrame(() => {
-            this.updateSliderPosition();
-            this.checkScroll();
-        });
-    }
-    componentDidLoad() {
-        this.initializeTabs();
-    }
-    /**
-     * Watcher for uncontrolled state changes.
-     */
-    onActiveTabChange(newValue) {
-        this.updateActiveTabs();
-        this.updateSliderPosition();
-        this.scrollTabIntoView(newValue);
-    }
-    /**
-     * Watcher for controlled state changes.
-     */
-    onValueChange(newValue) {
-        this.updateActiveTabs();
-        this.updateSliderPosition();
-        this.scrollTabIntoView(newValue);
-    }
-    /**
-     * Watcher for tabs prop changes.
-     */
-    onTabsPropChange() {
-        this.initializeTabs();
-    }
-    onVariantChange() {
-        requestAnimationFrame(() => {
-            this.updateSliderPosition();
-            this.checkScroll();
-        });
-    }
-    initializeTabs() {
-        var _a, _b;
-        this.buttonRefs = [];
-        if (this.useTabsProp) {
-            // --- Prop-based ---
-            this.tabDetails = this.tabs.map(t => (Object.assign({}, t))); // Use data from prop
-            this.slottedTabs = []; // Ensure we're not tracking slotted tabs
-        }
-        else {
-            // --- Slot-based ---
-            this.slottedTabs = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'udp-tab');
-            this.tabDetails = this.slottedTabs.map(tab => ({
-                label: tab.label,
-                icon: tab.icon,
-                iconPlacement: tab.iconPlacement,
-                hidden: tab.hidden,
-                disabled: tab.disabled,
-            }));
-        }
-        // --- Common Logic ---
-        // In uncontrolled mode, check if the default active tab is invalid.
-        if (!this.isControlled) {
-            if (((_a = this.tabDetails[this.internalActiveTab]) === null || _a === void 0 ? void 0 : _a.hidden) || ((_b = this.tabDetails[this.internalActiveTab]) === null || _b === void 0 ? void 0 : _b.disabled)) {
-                const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);
-                this.internalActiveTab = firstValidIndex > -1 ? firstValidIndex : 0;
-            }
-        }
-        this.updateActiveTabs();
-        requestAnimationFrame(() => {
-            this.updateSliderPosition();
-            this.checkScroll();
-        });
-    }
-    updateActiveTabs() {
-        // Only update slotted tabs if we're in slot mode
-        if (!this.useTabsProp) {
-            const currentActiveTab = this.activeTab;
-            this.slottedTabs.forEach((tab, index) => {
-                tab.active = index === currentActiveTab;
-            });
-        }
-        // If in prop mode, the <button> 'active' class is handled by render()
-    }
-    updateSliderPosition() {
-        const activeButton = this.buttonRefs[this.activeTab]; // Use getter
-        if (!activeButton) {
-            this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };
-            return;
-        }
-        this.sliderStyle = {
-            width: `${activeButton.offsetWidth}px`,
-            transform: `translateX(${activeButton.offsetLeft}px)`,
-        };
-    }
-    checkScroll() {
-        if (!this.scrollContainerRef)
-            return;
-        const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainerRef;
-        const isOverflowing = scrollWidth > clientWidth;
-        this.showScrollLeft = isOverflowing && scrollLeft > 1;
-        this.showScrollRight = isOverflowing && scrollLeft < scrollWidth - clientWidth - 1;
-    }
-    tabClicked(tabIndex) {
-        var _a;
-        if ((_a = this.tabDetails[tabIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
-            return;
-        }
-        if (this.isControlled) {
-            // In controlled mode, emit the event for the parent to handle.
-            // The `onValueChange` watcher will handle UI updates when the prop changes.
-            this.udpTabChange.emit(tabIndex);
-        }
-        else {
-            // In uncontrolled mode, update state directly.
-            // The `onActiveTabChange` watcher will handle UI updates.
-            this.internalActiveTab = tabIndex;
-        }
-    }
-    scrollTabIntoView(tabIndex) {
-        const tabButton = this.buttonRefs[tabIndex];
-        const container = this.scrollContainerRef;
-        if (!tabButton || !container)
-            return;
-        const { scrollLeft, clientWidth } = container;
-        const tabLeft = tabButton.offsetLeft;
-        const tabRight = tabLeft + tabButton.offsetWidth;
-        const safeZonePadding = 70;
-        const safeZoneLeft = scrollLeft + safeZonePadding;
-        const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;
-        if (tabLeft < safeZoneLeft) {
-            container.scrollTo({
-                left: tabLeft - safeZonePadding,
-                behavior: 'smooth',
-            });
-        }
-        else if (tabRight > safeZoneRight) {
-            container.scrollTo({
-                left: tabRight - clientWidth + safeZonePadding,
-                behavior: 'smooth',
-            });
-        }
-    }
-    scrollToStart() {
-        if (!this.scrollContainerRef)
-            return;
-        this.scrollContainerRef.scrollTo({ left: 0, behavior: 'smooth' });
-    }
-    scrollToEnd() {
-        if (!this.scrollContainerRef)
-            return;
-        const container = this.scrollContainerRef;
-        const { scrollWidth, clientWidth } = container;
-        const maxScrollLeft = scrollWidth - clientWidth;
-        container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });
-    }
-    render() {
-        const currentActiveTab = this.activeTab; // Use getter
-        return (h("div", { key: '5300dbcdc9fff54d87fe64e3bbcc3b6a1f04c331', class: "tab-container" }, h("div", { key: '83041e378183364889aa8d14114c9315ead1028c', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: '87d95478e27c13440e15e3d6b8cf4047d3e97e53', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: 'a81987c97a0459533f17b68103788af401f06378', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: 'a52b3b7fba6022c4864f0cb89d24e34ade18a969', class: "scroll-fade left" }), h("div", { key: '0dc7ce8d4269539cfcd011736df876e6a64feebe', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index) => {
-            if (tab.hidden) {
-                return null;
-            }
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            const iconEl = tab.icon ? h("udp-icon", { iconName: tab.icon, color: 'inherit' }) : null;
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            const labelEl = h("span", null, tab.label);
-            return (h("button", { class: {
-                    'active': index === currentActiveTab,
-                    'has-icon': !!tab.icon,
-                    [`icon-${tab.iconPlacement}`]: !!tab.icon,
-                    'disabled': tab.disabled,
-                }, disabled: tab.disabled, onClick: () => this.tabClicked(index), role: "tab", "aria-selected": index === currentActiveTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index] = el) }, iconEl, labelEl));
-        }), h("div", { key: '0892dff1735729462a927e9f7d0127b402a43918', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: 'edf6fc21360de9fd919e4d71aefec6e3c7ed9fdd', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '88adff5cab4b8baff5a1e4c6ed5f2fe44064f05e', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: '7704e98608f492cb4f599b706b302e003d84bb46', iconName: "chevronRight16", color: "inherit" })))), !this.isControlled && !this.useTabsProp && (h("div", { key: 'fd61baeb3e79a387c1367813fbaa99f496ae4d62' }, h("slot", { key: '872c0a2ead48abea1c946b7389c307a53d560705' })))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "internalActiveTab": ["onActiveTabChange"],
-        "value": ["onValueChange"],
-        "tabs": ["onTabsPropChange"],
-        "variant": ["onVariantChange"]
-    }; }
-};
-UdpTabs.style = udpTabsCss;
-
-export { PrimaryActionHeader as primary_action_header, UdpSideSheet as udp_side_sheet, UdpTabs as udp_tabs };
-//# sourceMappingURL=primary-action-header.udp-side-sheet.udp-tabs.entry.js.map