udp-stencil-component-library 25.18.1-beta.4 → 25.18.1-beta.6

package/dist/cjs/add-map-feature-popup_4.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Ci0lUvCK.js');
+var index = require('./index-DrMNAZCL.js');
 var es = require('@carbon/icons/es');
 var udpMapUtils = require('./udp-map-utils-BXqQmr-h.js');
 var common = require('./common-By_kzIQM.js');

package/dist/cjs/advanced-search-builder.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Ci0lUvCK.js');
+var index = require('./index-DrMNAZCL.js');
 var udpOperatorHelper = require('./udpOperatorHelper-MMG_hrZS.js');
 
 const generateFilterString = (data) => {

package/dist/cjs/advanced-search_50.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Ci0lUvCK.js');
+var index = require('./index-DrMNAZCL.js');
 var catalogStore = require('./catalog-store-yJKDPXXM.js');
 var Close24 = require('@carbon/icons/es/close/24');
 var uuid = require('uuid');
@@ -662,7 +662,7 @@ const AmbientDemoContainer = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'a5c238df1343ab96d334fb0b013c393835b1c11e', class: "container" }, index.h("div", { key: '8c43e8fbc425796685da07ceb134adf8e2bc0a65', class: "title-container" }, " ", index.h("unity-typography", { key: '9ea72535c3f58822abfde8260e17a1dfc97227ae', variant: "button" }, " ", this.title, " "), " "), index.h("slot", { key: '52edab7acd8f01735b9a7341b9fca3a0ae7a9508' })));
+        return (index.h("div", { key: 'e2dc6db3f12a7cc3cbd9e0e5e59bb63abe1ff839', class: "container" }, index.h("div", { key: '1097924d31d84a42f3dfa4411efa02ca2d578b23', class: "title-container" }, " ", index.h("unity-typography", { key: '3c126bce0e92f7b57016dd206a83935bd216c9fe', variant: "button" }, " ", this.title, " "), " "), index.h("slot", { key: '0df19aa562c08c1b24453f8b8c4b57a153f11d3b' })));
     }
 };
 AmbientDemoContainer.style = ambientDemoContainerCss;
@@ -4547,7 +4547,7 @@ const AppBar = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'a96a536ce64d82b2a05a305539b0d40cb9372e14', class: "header" }, index.h("stencil-icon-button", { key: '391ce32825452e7da4bba0423b7f373b8bd9c4a4', noBackground: true, darkIcon: false, icon: Menu24__default.default }), index.h("unity-typography", { key: 'bb88b074aa8ec47ef03aeb64a0b6b23794f0296f', variant: 'data-display-one' }, " ", index.h("slot", { key: '6b7dc252193ce4b63d1a42634c81ef5a704f7581' }), "   "), index.h("a", { key: 'd5bc1a1c3a12ea3d6d93b82859c81f0ea1d1845e', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), index.h("div", { key: 'bc6e26c729d46424d07935029f6d9a84cb658548', class: "header__logo" }), index.h("div", { key: '3827e3e7fe86a3c6a7f15d654b70655b8b77a748', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), index.h("div", { key: 'b81cb8f52041214a74bd02d89f17bbdd2128463a', class: "header__global" }, index.h("udp-avatar", { key: '8c9ab84ee004cc0eb1405e7f491f4cafc4863a58', username: this.username }))));
+        return (index.h("div", { key: '90d237af2bda122e231ed0d4934f41a2c7b21992', class: "header" }, index.h("stencil-icon-button", { key: 'a35a9b3355284d972f5fd564c0b133ed32114b63', noBackground: true, darkIcon: false, icon: Menu24__default.default }), index.h("unity-typography", { key: 'bd93a6c415dcab2421175e13c9e7a0807f78b85e', variant: 'data-display-one' }, " ", index.h("slot", { key: '6c4b317a6fd338dfdda3a77991ed78fd1702b995' }), "   "), index.h("a", { key: 'b2066316b5184675a04c2481fe1856785211b390', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), index.h("div", { key: '3ba55346dea1a86fd90c63d366661dfb5e77d871', class: "header__logo" }), index.h("div", { key: '4cc724ff9b5f73262503172656b2439313552285', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), index.h("div", { key: '7c3a3275ca99c1a328d86dd2b90a2bafe3290d5a', class: "header__global" }, index.h("udp-avatar", { key: '9a4db5288bce2550d56acfd124b57165e08b8d08', username: this.username }))));
     }
 };
 AppBar.style = appBarCss;
@@ -7653,7 +7653,7 @@ const DynamicContainerWithMenu = class {
         this.udpChipClicked.emit(chipText);
     }
     render() {
-        return (index.h("div", { key: '71f418211a987ee241e9037c29c4bd3204cb1836', class: "container" }, index.h("div", { key: '5da39f24ea892e4176fbedd85b3a3a6f1ee17aa4', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index$1) => (index.h("stencil-chip", { color: "secondary", key: index$1, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), index.h("div", { key: 'af27dfc93010680c2617a7da6fb6cf6c51bb8727', class: "overflow" }, index.h("udp-pop-over", { key: '4c2a5beda6b819e7e452aecf384a82719c4a1eb7', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, index.h("div", { key: 'd4cf442f4ee12e97517e69b883fd6c52d11c4837', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index$1) => (index.h("stencil-chip", { key: index$1, text: child.label, "show-delete": "false" }, " "))))))));
+        return (index.h("div", { key: '3dbaff6a6f132f9a88d1e20be8b2bd6addfe29e1', class: "container" }, index.h("div", { key: '19612cdc163703220caf60859a78cf05a2bc6f2a', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index$1) => (index.h("stencil-chip", { color: "secondary", key: index$1, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), index.h("div", { key: 'f5311d566d4ee2f3e5f3000de81dbb85bf62f6bb', class: "overflow" }, index.h("udp-pop-over", { key: 'df064bb0a2757b1452aad74d80413113cf56016e', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, index.h("div", { key: '1ea5b82d8578de30740af913f9f3109b971b3ef1', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index$1) => (index.h("stencil-chip", { key: index$1, text: child.label, "show-delete": "false" }, " "))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -8497,32 +8497,195 @@ const udpTabCss = ".tab-panel{display:none;background-color:#ffffff}.tab-panel.a
 const UdpTab = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-    }
-    activeChanged() {
-        // Handle the active state change, if needed
+        /**
+         * True if this is the active tab.
+         * This is set by the parent <udp-tabs> component.
+         */
+        this.active = false;
+        /**
+         * Placement of the icon relative to the title.
+         * @default 'start'
+         */
+        this.iconPlacement = 'start';
+        /**
+         * If true, the tab will be hidden from the tab list.
+         * @default false
+         */
+        this.hidden = false;
+        /**
+         * If true, the tab will be unselectable.
+         * @default false
+         */
+        this.disabled = false;
     }
     render() {
-        return (index.h("div", { key: '775798db38994b9a9dcfdb94a8cc588bafed47f9', class: { 'tab-panel': true, 'active': this.active } }, index.h("slot", { key: '6f67d3f672d0600eeb84b9dfcc2c12f2fc931ef7' })));
+        return (index.h("div", { key: '0dbc41862f8bb01ecfec94ca44f082f0e4e7104f', class: { 'tab-panel': true, 'active': this.active }, role: "tabpanel" }, index.h("slot", { key: 'facc5f18260ea67c405dca1a90dcdc48e5ec995c' })));
     }
-    static get watchers() { return {
-        "active": ["activeChanged"]
-    }; }
 };
 UdpTab.style = udpTabCss;
 
-const udpTabsCss = ".tab-header{display:flex;background-color:#ffffff;border-bottom:1px solid #e0e0e0}.tab-header button{flex-grow:1;padding:16px;font-size:14px;text-align:center;border:none;background:none;cursor:pointer;outline:none;transition:all 0.3s ease}.tab-header button.active{border-bottom:2px solid 'var(--secondary-color)';font-weight:600}.tab-content{display:flex;flex-direction:column;padding:16px;background-color:#ffffff}.tab-header button{cursor:pointer;border:none;padding:16px;background-color:transparent;color:#757575}.tab-header button.active{border-bottom:2px solid #344861;color:#344861;font-weight:600}";
+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}.tab-content{padding:16px;background-color:#ffffff}.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) {
         index.registerInstance(this, hostRef);
+        /**
+         * 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';
         this.activeTab = 0;
+        this.tabDetails = []; // Uses new interface
+        this.sliderStyle = {
+            width: '0',
+            transform: 'translateX(0)',
+        };
+        this.showScrollLeft = false;
+        this.showScrollRight = false;
+        this.tabs = [];
+        this.buttonRefs = [];
+    }
+    handleSlotChange() {
+        this.initializeTabs();
+    }
+    handleResize() {
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    componentDidLoad() {
+        this.initializeTabs();
+    }
+    onActiveTabChange() {
+        this.updateActiveTabs();
+        this.updateSliderPosition();
+    }
+    onVariantChange() {
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    initializeTabs() {
+        var _a, _b;
+        this.buttonRefs = [];
+        // Get ALL tabs from the slot
+        this.tabs = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'udp-tab');
+        this.tabDetails = this.tabs.map(tab => ({
+            title: tab.title,
+            icon: tab.icon,
+            iconPlacement: tab.iconPlacement,
+            hidden: tab.hidden,
+            disabled: tab.disabled,
+        }));
+        // Check if the current activeTab (default 0) is invalid
+        if (((_a = this.tabDetails[this.activeTab]) === null || _a === void 0 ? void 0 : _a.hidden) || ((_b = this.tabDetails[this.activeTab]) === null || _b === void 0 ? void 0 : _b.disabled)) {
+            // If it is, find the first valid tab to select
+            const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);
+            // If we found one, set it. If not (all tabs invalid), set to -1
+            this.activeTab = firstValidIndex;
+        }
+        this.updateActiveTabs();
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    updateActiveTabs() {
+        this.tabs.forEach((tab, index) => {
+            tab.active = index === this.activeTab;
+        });
+    }
+    updateSliderPosition() {
+        const activeButton = this.buttonRefs[this.activeTab];
+        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;
+        }
         this.activeTab = 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;
+        // Check if the tab's left edge is hidden by the left fade
+        if (tabLeft < safeZoneLeft) {
+            // Scroll to position the tab's left edge at the start of the safe zone
+            container.scrollTo({
+                left: tabLeft - safeZonePadding,
+                behavior: 'smooth'
+            });
+        }
+        // Check if the tab's right edge is hidden by the right fade
+        else if (tabRight > safeZoneRight) {
+            // Scroll to position the tab's right edge at the end of the safe zone
+            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() {
-        return (index.h("div", { key: '11b569eb074151f849159aa15af92129c8992929' }, index.h("div", { key: '3c6d9178dd37fd5fd5b91ec44e287241ee256e1c', class: "tab-header" }, index.h("slot", { key: 'e9289d5d3fa6e2da92b81de71e55276b3455f37c', name: "tab-title" })), index.h("div", { key: 'ed2038f48697251f5dfd3856d26711313376af10' }, index.h("slot", { key: '2b6d109cef169e2f50fb876387efc334464dc9da' }))));
+        return (index.h("div", { key: '173d42a32bb4ed0cbd57950e38bb75ab216efda1', class: "tab-container" }, index.h("div", { key: '369754b2aeed74f35f5e7be39b6617081c41cad2', class: `tab-header ${this.variant}` }, this.showScrollLeft && (index.h("button", { key: '68fefbbb9e8c95f54b3a78d700698d61b1c0b8bc', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, index.h("udp-icon", { key: 'f2230bcf77a4ef6cfc972f3219023c8da4607e2e', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && index.h("div", { key: '69476b6d664f2b42b7a102275999f131e1b397f0', class: "scroll-fade left" }), index.h("div", { key: 'a12d5b22ec762e52091770b1ed276a7df8267437', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index$1) => {
+            if (tab.hidden) {
+                return null;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const iconEl = tab.icon ? index.h("udp-icon", { iconName: tab.icon, color: 'inherit' }) : null;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const titleEl = index.h("span", null, tab.title);
+            return (index.h("button", { class: {
+                    'active': index$1 === this.activeTab,
+                    'has-icon': !!tab.icon,
+                    [`icon-${tab.iconPlacement}`]: !!tab.icon,
+                    'disabled': tab.disabled,
+                }, disabled: tab.disabled, onClick: () => this.tabClicked(index$1), role: "tab", "aria-selected": index$1 === this.activeTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index$1] = el) }, iconEl, titleEl));
+        }), index.h("div", { key: '6726c5fd74d32e9385aa83aaf88ab92e9d83d858', class: "slider", style: this.sliderStyle })), this.showScrollRight && index.h("div", { key: 'ce175b2bb6465211587af95995375d315a0e6fed', class: "scroll-fade right" }), this.showScrollRight && (index.h("button", { key: '63dbc5cd40921b7b39c75377986ba37b5d69c93a', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, index.h("udp-icon", { key: 'b191a3a90cdecf10abf94dc98fbf16bd973ee1e1', iconName: "chevronRight16", color: "inherit" })))), index.h("div", { key: '3ffe241125e1fa6969cf9fcce49350d63f82bee6', class: "tab-content" }, index.h("slot", { key: 'a6fe2932604e485e85f0a860ee58633f8bf161b6' }))));
     }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "activeTab": ["onActiveTabChange"],
+        "variant": ["onVariantChange"]
+    }; }
 };
 UdpTabs.style = udpTabsCss;