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

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

@@ -0,0 +1,636 @@
+import { r as registerInstance, h, c as createEvent, a as getElement } from './index-n-1ZSeAs.js';
+import { i as iconMapping } from './iconMapping-C_IYrnjG.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/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';
+
+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: '99d654de19e576e1a0fede6da796dbf07f4c2de2', class: "header-bar" }, h("div", { key: 'f878ea5c57689e293c0886b3bf9ada382ee7b863', class: "title-section" }, h("unity-typography", { key: 'dd956d099211c8752fa6a6d363eac5fcbd3587fd', variant: "h4" }, this.title)), this.tabs && (h("div", { key: 'f98791a93586f920f34abeece842bfda302f1967', class: "tabs" }, h("udp-tabs", { key: '7777a0ae4205c53b17d844c2c46515835fffe6c5' }, h("button", { key: '22dcc16b780dae5a9b988f367df96128513eb83a', class: this.activeTabIndex === 0 ? 'active' : '', slot: "tab-title", onClick: () => this.selectTab(0) }, "Demo Grid"), h("button", { key: 'e05765f4d3b5c48f25f80bb5ef8d9b113d1c7c77', class: this.activeTabIndex === 1 ? 'active' : '', slot: "tab-title", onClick: () => this.selectTab(1) }, "Other Content")))), h("div", { key: '87fd2188266c9fd98686643a1cb2b889c6fb2d7e', 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: 'd00acc20658c36946f70170b299224081359e5cd', class: "right-margin" }), this.actionButtonLabel && (h("udp-button", { key: 'f1c77f3e5906de99c5a516d9fea73ad03490e807', 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: '8e59af17cf1b7020e45a13929dd9e46278a9a068', iconName: "overflowMenuVertical", color: "inherit" });
+        return (h("div", { key: 'bbd54f9f207337e25c445e1dd43e777e61ebaa76', class: "backdrop", onClick: this.onCloseBackdrop }, h("div", { key: '463d433bf00b07005353a55fd677617d514300a6', class: { sheet: true, [this.position]: true, [widthClass]: true }, style: sideSheetStyle }, h("div", { key: '70075153a5213fb6fcf9aa9cfb76092d878c5887', class: "title-container" }, h("div", { key: '60e47f939481d0034c2ba21a6b0b1fd0e9d6c287', class: "close-button" }, h("stencil-icon-button", { key: 'a75372ccf0f85bcac71603564855e0012f60bae0',
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            icon: Close24, onClick: this.onClose, secondary: true })), h("div", { key: 'f5b7ad789cdae7a39a1d2f4625ccd1b29ca0691e', class: "title-text" }, h("unity-typography", { key: '0a9b9c05421673e376ebf4ff48e9d54b5f38b816', variant: "h6" }, this.title)), (this.headerActionButtonLabel || ((_a = this.headerSecondaryButtons) === null || _a === void 0 ? void 0 : _a.length) > 0) && (h("div", { key: '824c51aa4f6a3d22cb846448b9d04940f1bfe73b', class: "header-action-button" }, (_b = this.headerSecondaryButtons) === null || _b === void 0 ? void 0 :
+            _b.map((item) => (h("udp-button", { variant: "outlined", disabled: item.disabled, onClick: item.onClick, endIcon: item.icon }, item.label))), this.headerActionButtonLabel && (h("udp-button", { key: '01a18162e4c3ca98c3e3bb3fb79f2d8f288a657e', disabled: this.headerActionButtonDisabled, onClick: this.onHeaderActionButtonClick,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            startIcon: headerStartIcon, variant: "contained" }, this.headerActionButtonLabel))))), h("div", { key: '2fc8c688b4a53b82c497943594cbd58396ff6deb', class: "loader-container" }, h("udp-linear-loader", { key: '301925168c0cbf064987a121948317ff5ebeb728', class: { 'is-loading': this.loading }, color: "primary" })), h("div", { key: '61de55a5e32c71982d3d90dc242d75c2e14d8a1e', class: { content: true, padding: this.padding } }, h("slot", { key: '14aea9d974a1af2325d7bc7574cea561218c02fb' })), (this.primaryButtonLabel || ((_c = this.footerSecondaryButtons) === null || _c === void 0 ? void 0 : _c.length) > 0) && (h("div", { key: '1b036a85a6a499a8cbda3333d51ff96afb66a7f5' }, h("div", { key: 'e2c38b8ce3c6c8b80da87c4a938cf9bf0bcd1e1d', class: "loader-container" }), h("div", { key: '4510dc03ffa1eeb3776dfb7de10e641acf18cb2b', class: {
+                footer: true,
+            }, ref: el => (this.footerRef = el) }, !this.showOverflowButton && ((_d = this.footerSecondaryButtons) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", { key: 'ee00d11046a044b0a0c2fa51e45adfa9678fa4c1', class: "footer-secondary-buttons-container" }, h("div", { key: '953c029aab16c60de3b8f717a10bf7bf3d042489', class: "footer-secondary-buttons" }, (_e = this.footerSecondaryButtons) === null || _e === void 0 ? void 0 : _e.map((item) => (h("udp-button", { variant: "outlined", disabled: item.disabled, onClick: item.onClick, endIcon: item.icon }, item.label)))))), this.showOverflowButton && (h("udp-button", { key: '44c23081cb66dd26598c1f77c89a2b49e6fcc6e3', variant: "outlined", onClick: this.onMoreActionButtonClick, color: "secondary",
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            endIcon: overflowIcon }, "More")), this.primaryButtonLabel && (h("udp-button", { key: 'cf898a3b44e55d43f6c9556429de2f230508f2c1', variant: "contained", disabled: this.primaryButtonDisabled, onClick: this.onPrimaryButtonClick, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)), this.showOverflowButton && (h("udp-pop-over", { key: '1685cb92b649360b680f75d7009d2394fc5db160', anchorElement: this.overflowMenuAnchor, isOpen: this.openOverflowMenu, popoverWidth: '200px', popoverMaxHeight: '300px', handleOnClose: this.handleCloseOverflowMenu }, h("div", { key: '80993bf78dc2c248e0b33578c2418413467c0379', class: "menu" }, (_f = this.footerSecondaryButtons) === null || _f === void 0 ? void 0 : _f.map(item => (h("udp-menu-item", { label: item === null || item === void 0 ? void 0 : item.label, iconName: item === null || item === void 0 ? void 0 : item.icon, onItemClick: () => {
+                item === null || item === void 0 ? void 0 : item.onClick();
+                this.handleCloseOverflowMenu();
+            }, disabled: item === null || item === void 0 ? void 0 : item.disabled })))))), h("div", { key: '41a63c50ea0c6f348e962368b9b6867b8d7310d4', ref: el => (this.measurementContainerRef = el), style: {
+                position: 'absolute',
+                visibility: 'hidden',
+                pointerEvents: 'none',
+                display: 'flex',
+                gap: 'var(--spacing-02, 4px)',
+            }, "aria-hidden": "true" }, (_g = this.footerSecondaryButtons) === null || _g === void 0 ? void 0 :
+            _g.map((item) => (h("udp-button", { variant: "text", size: "medium", disabled: item.disabled, endIcon: item.icon }, item.label))), this.primaryButtonLabel && (h("udp-button", { key: '520a7ecd6b5859e2ff541bbd79be522c0b905cd6', variant: "contained", size: "medium", disabled: this.primaryButtonDisabled, endIcon: this.primaryButtonIcon }, this.primaryButtonLabel)))))))));
+    }
+    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: '1d30cc5bec9a2d221238e7f0742c6933c1cd2858', class: "tab-container" }, h("div", { key: '2334c1b333fc1703919b23b59c16e9d4f48018ca', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: '36bda38b88870aed704a1b4ca7c73a086bc5218f', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: 'da40645390a32e708c2913409c3b6047e00890f5', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: 'cca33cbb7286875c127511a897c6f80f2e35ed37', class: "scroll-fade left" }), h("div", { key: '2de3d5622a2b541ccd777a49f97135f6097a2475', 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: '14de43d3d5f2d28a35ed8bd135482ac6ea0201d9', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: 'c55a70f8934e38d287b9509eac9d3e2cf425e2e8', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: 'b82affbdb252a3a85cd61a843212438daed45cbe', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: '1e0ce9f3bef37725edad166bd6d8db1511125676', iconName: "chevronRight16", color: "inherit" })))), !this.isControlled && !this.useTabsProp && (h("div", { key: '3b8199ffc2b0de1232eb545456ae5de954a2418b' }, h("slot", { key: 'd2ead3e7e50ff8c9ad152ed5f4398405787512a4' })))));
+    }
+    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