npm - udp-stencil-component-library - Versions diffs - 25.18.1-beta.6 → 25.18.1-beta.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/dist/components/udp-tabs2.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h } from './index2.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index2.js';
 import { d as defineCustomElement$1 } from './udp-icon2.js';
-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 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 = /*@__PURE__*/ proxyCustomElement(class UdpTabs extends H {
     constructor(registerHost) {
@@ -10,6 +10,7 @@ const UdpTabs = /*@__PURE__*/ proxyCustomElement(class UdpTabs extends H {
             this.__registerHost();
         }
         this.__attachShadow();
+        this.udpTabChange = createEvent(this, "udpTabChange");
         /**
          * Specifies the layout variant of the tab header.
          *
@@ -17,18 +18,46 @@ const UdpTabs = /*@__PURE__*/ proxyCustomElement(class UdpTabs extends H {
          * - `'fill'`: Tabs will stretch to fill the available horizontal space.
          */
         this.variant = 'fill';
-        this.activeTab = 0;
-        this.tabDetails = []; // Uses new interface
+        /**
+         * (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.tabs = [];
+        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() {
@@ -40,9 +69,27 @@ const UdpTabs = /*@__PURE__*/ proxyCustomElement(class UdpTabs extends H {
     componentDidLoad() {
         this.initializeTabs();
     }
-    onActiveTabChange() {
+    /**
+     * 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(() => {
@@ -53,21 +100,29 @@ const UdpTabs = /*@__PURE__*/ proxyCustomElement(class UdpTabs extends H {
     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;
+        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(() => {
@@ -76,12 +131,17 @@ const UdpTabs = /*@__PURE__*/ proxyCustomElement(class UdpTabs extends H {
         });
     }
     updateActiveTabs() {
-        this.tabs.forEach((tab, index) => {
-            tab.active = index === this.activeTab;
-        });
+        // 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];
+        const activeButton = this.buttonRefs[this.activeTab]; // Use getter
         if (!activeButton) {
             this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };
             return;
@@ -104,7 +164,18 @@ const UdpTabs = /*@__PURE__*/ proxyCustomElement(class UdpTabs extends H {
         if ((_a = this.tabDetails[tabIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
             return;
         }
-        this.activeTab = tabIndex;
+        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)
@@ -115,20 +186,16 @@ const UdpTabs = /*@__PURE__*/ proxyCustomElement(class UdpTabs extends H {
         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'
+                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'
+                behavior: 'smooth',
             });
         }
     }
@@ -146,37 +213,44 @@ const UdpTabs = /*@__PURE__*/ proxyCustomElement(class UdpTabs extends H {
         container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });
     }
     render() {
-        return (h("div", { key: '173d42a32bb4ed0cbd57950e38bb75ab216efda1', class: "tab-container" }, h("div", { key: '369754b2aeed74f35f5e7be39b6617081c41cad2', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: '68fefbbb9e8c95f54b3a78d700698d61b1c0b8bc', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: 'f2230bcf77a4ef6cfc972f3219023c8da4607e2e', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: '69476b6d664f2b42b7a102275999f131e1b397f0', class: "scroll-fade left" }), h("div", { key: 'a12d5b22ec762e52091770b1ed276a7df8267437', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index) => {
+        const currentActiveTab = this.activeTab; // Use getter
+        return (h("div", { key: 'dd8ac7e3d101993b8df00c97bf561e2502e9f3c1', class: "tab-container" }, h("div", { key: '5f70a5c0da906152b130f6eaa98b81bf80485920', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: 'e1a3a7d3650ae3703734a51b251600bf12dbed0c', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: '36e6294b1a775a30906cc0236f8104ad03998c01', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: '8dca0bd111f13c1890fbc010efbabb2aa0440c13', class: "scroll-fade left" }), h("div", { key: '966f761c7f3cc45eb5b6737e8dbb63dc75a68325', 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 titleEl = h("span", null, tab.title);
+            const labelEl = h("span", null, tab.label);
             return (h("button", { class: {
-                    'active': index === this.activeTab,
+                    '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 === this.activeTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index] = el) }, iconEl, titleEl));
-        }), h("div", { key: '6726c5fd74d32e9385aa83aaf88ab92e9d83d858', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: 'ce175b2bb6465211587af95995375d315a0e6fed', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '63dbc5cd40921b7b39c75377986ba37b5d69c93a', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: 'b191a3a90cdecf10abf94dc98fbf16bd973ee1e1', iconName: "chevronRight16", color: "inherit" })))), h("div", { key: '3ffe241125e1fa6969cf9fcce49350d63f82bee6', class: "tab-content" }, h("slot", { key: 'a6fe2932604e485e85f0a860ee58633f8bf161b6' }))));
+                }, 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: 'df383b17c3e36fc7f261ff6a6c1220a4f923477f', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: '7f8ae28f6662266a113adbb7ca40a4ef7d0b8427', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '0ad034fb7dc24388476e0c37bc9cf4196f4145bc', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: '4cdbf5880b2e30dc6541228323a31e2dd34eabae', iconName: "chevronRight16", color: "inherit" })))), !this.isControlled && !this.useTabsProp && (h("div", { key: '2097c674562eb5acfdadda5a05e6f2eed8821f99' }, h("slot", { key: '375c96eb85f6581426f72bf1c544538df4c6fdd6' })))));
     }
     get el() { return this; }
     static get watchers() { return {
-        "activeTab": ["onActiveTabChange"],
+        "internalActiveTab": ["onActiveTabChange"],
+        "value": ["onValueChange"],
+        "tabs": ["onTabsPropChange"],
         "variant": ["onVariantChange"]
     }; }
     static get style() { return udpTabsCss; }
 }, [257, "udp-tabs", {
         "variant": [1],
-        "activeTab": [32],
+        "value": [2],
+        "tabs": [16],
+        "internalActiveTab": [32],
         "tabDetails": [32],
         "sliderStyle": [32],
         "showScrollLeft": [32],
         "showScrollRight": [32]
     }, [[0, "slotchange", "handleSlotChange"], [9, "resize", "handleResize"]], {
-        "activeTab": ["onActiveTabChange"],
+        "internalActiveTab": ["onActiveTabChange"],
+        "value": ["onValueChange"],
+        "tabs": ["onTabsPropChange"],
         "variant": ["onVariantChange"]
     }]);
 function defineCustomElement() {

package/dist/components/udp-tabs2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"udp-tabs2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/tabs/tab/tabs/udp-tabs.css?tag=udp-tabs&encapsulation=shadow","src/components/my-component/UI/tabs/tab/tabs/udp-tabs.tsx"],"sourcesContent":[".tab-container {\n display: flex;\n flex-direction: column;\n}\n\n.tab-header {\n background-color: #ffffff;\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.tab-scroll-container {\n display: flex;\n position: relative;\n overflow-x: auto;\n overflow-y: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.tab-scroll-container::-webkit-scrollbar {\n height: 4px;\n}\n.tab-scroll-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.tab-scroll-container::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n.tab-scroll-container::-webkit-scrollbar-thumb:hover {\n background-color: rgba(0, 0, 0, 0.3);\n}\n\n.tab-header::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: var(--divider-color, #e0e0e0);\n}\n\n/* This is the base style for tab buttons /\n.tab-header button {\n padding: 16px;\n font-size: 14px;\n text-align: center;\n border: none;\n background: none;\n cursor: pointer;\n outline: none;\n transition: all 0.22s ease;\n color: #555555;;\n font-weight: 600;\n opacity: 0.9;\n white-space: nowrap;\n\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.tab-header.fill .tab-scroll-container {\n width: 100%;\n}\n.tab-header.fill .tab-scroll-container button {\n flex-grow: 1;\n}\n\n.tab-header button.active {\n color: var(--secondary-color, #344861);\n opacity: 1.0;\n}\n\n.tab-header button.scroll-arrow {\n position: absolute;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 40px;\n padding: 0;\n\n background: #ffffff;\n cursor: pointer;\n font-size: 16px;\n font-weight: bold;\n color: #757575;\n z-index: 2;\n transition: color 0.2s ease;\n\n flex-shrink: 0;\n opacity: 1;\n gap: 0;\n}\n\n.tab-header button.scroll-arrow:hover {\n color: #000;\n}\n\n.tab-header button.scroll-arrow.left {\n left: 0;\n}\n\n.tab-header button.scroll-arrow.right {\n right: 0;\n\n}\n\n.scroll-fade {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 30px;\n z-index: 1;\n pointer-events: none;\n}\n\n.scroll-fade.left {\n left: 40px;\n background: linear-gradient(\n to right,\n #ffffff,\n rgba(255, 255, 255, 0)\n );\n}\n\n.scroll-fade.right {\n right: 40px;\n background: linear-gradient(\n to left,\n #ffffff,\n rgba(255, 255, 255, 0)\n );\n}\n\n.tab-header button udp-icon {\n font-size: 1.2em;\n line-height: 1;\n}\n\n.tab-header button.icon-start {\n flex-direction: row;\n}\n.tab-header button.icon-end {\n flex-direction: row-reverse;\n}\n.tab-header button.icon-top {\n flex-direction: column;\n gap: 4px;\n}\n.tab-header button.icon-bottom {\n flex-direction: column-reverse;\n gap: 4px;\n}\n\n.tab-content {\n padding: 16px;\n background-color: #ffffff;\n}\n\n.slider {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 2px;\n background-color: var(--secondary-color, #344861);\n\n transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),\n width 0.22s cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 1;\n}\n\n.tab-header button.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.tab-header button.disabled.active {\n color: #757575;\n opacity: 0.5;\n}\n","import { Component, h, State, Element, Watch, Listen, Prop } from '@stencil/core';\n\ninterface TabDetail {\n title: string;\n icon?: string;\n iconPlacement?: 'start' \| 'end' \| 'top' \| 'bottom';\n hidden?: boolean;\n disabled?: boolean;\n}\n\n@Component({\n tag: 'udp-tabs',\n styleUrl: 'udp-tabs.css',\n shadow: true,\n})\nexport class UdpTabs {\n @Element() el: HTMLElement;\n\n /\n Specifies the layout variant of the tab header.\n \n - `'standard'`: Tabs will be sized based on their content.\n * - `'fill'`: Tabs will stretch to fill the available horizontal space.\n */\n @Prop() variant: 'fill' \| 'standard' = 'fill';\n\n @State() activeTab: number = 0;\n @State() tabDetails: TabDetail[] = []; // Uses new interface\n @State() sliderStyle: { width: string; transform: string } = {\n width: '0',\n transform: 'translateX(0)',\n };\n @State() showScrollLeft: boolean = false;\n @State() showScrollRight: boolean = false;\n\n private tabs: HTMLUdpTabElement[] = [];\n private buttonRefs: HTMLButtonElement[] = [];\n private scrollContainerRef?: HTMLDivElement;\n\n @Listen('slotchange')\n handleSlotChange() {\n this.initializeTabs();\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n requestAnimationFrame(() => {\n this.updateSliderPosition();\n this.checkScroll();\n });\n }\n\n componentDidLoad() {\n this.initializeTabs();\n }\n\n @Watch('activeTab')\n onActiveTabChange() {\n this.updateActiveTabs();\n this.updateSliderPosition();\n }\n\n @Watch('variant')\n onVariantChange() {\n requestAnimationFrame(() => {\n this.updateSliderPosition();\n this.checkScroll();\n });\n }\n\n private initializeTabs() {\n this.buttonRefs = [];\n // Get ALL tabs from the slot\n this.tabs = Array.from(this.el.children).filter(\n (child): child is HTMLUdpTabElement => child.tagName.toLowerCase() === 'udp-tab',\n );\n\n this.tabDetails = this.tabs.map(tab => ({\n title: tab.title,\n icon: tab.icon,\n iconPlacement: tab.iconPlacement,\n hidden: tab.hidden,\n disabled: tab.disabled,\n }));\n\n // Check if the current activeTab (default 0) is invalid\n if (this.tabDetails[this.activeTab]?.hidden \|\| this.tabDetails[this.activeTab]?.disabled) {\n // If it is, find the first valid tab to select\n const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);\n // If we found one, set it. If not (all tabs invalid), set to -1\n this.activeTab = firstValidIndex;\n }\n\n this.updateActiveTabs();\n\n requestAnimationFrame(() => {\n this.updateSliderPosition();\n this.checkScroll();\n });\n }\n\n private updateActiveTabs() {\n this.tabs.forEach((tab, index) => {\n tab.active = index === this.activeTab;\n });\n }\n\n private updateSliderPosition() {\n const activeButton = this.buttonRefs[this.activeTab];\n if (!activeButton) {\n this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };\n return;\n }\n\n this.sliderStyle = {\n width: `${activeButton.offsetWidth}px`,\n transform: `translateX(${activeButton.offsetLeft}px)`,\n };\n }\n\n private checkScroll() {\n if (!this.scrollContainerRef) return;\n const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainerRef;\n const isOverflowing = scrollWidth > clientWidth;\n this.showScrollLeft = isOverflowing && scrollLeft > 1;\n this.showScrollRight = isOverflowing && scrollLeft < scrollWidth - clientWidth - 1;\n }\n\n private tabClicked(tabIndex: number) {\n if (this.tabDetails[tabIndex]?.disabled) {\n return;\n }\n\n this.activeTab = tabIndex;\n\n const tabButton = this.buttonRefs[tabIndex];\n const container = this.scrollContainerRef;\n\n if (!tabButton \|\| !container) return;\n\n const { scrollLeft, clientWidth } = container;\n const tabLeft = tabButton.offsetLeft;\n const tabRight = tabLeft + tabButton.offsetWidth;\n\n const safeZonePadding = 70;\n\n const safeZoneLeft = scrollLeft + safeZonePadding;\n const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;\n\n // Check if the tab's left edge is hidden by the left fade\n if (tabLeft < safeZoneLeft) {\n // Scroll to position the tab's left edge at the start of the safe zone\n container.scrollTo({\n left: tabLeft - safeZonePadding,\n behavior: 'smooth'\n });\n }\n // Check if the tab's right edge is hidden by the right fade\n else if (tabRight > safeZoneRight) {\n // Scroll to position the tab's right edge at the end of the safe zone\n container.scrollTo({\n left: tabRight - clientWidth + safeZonePadding,\n behavior: 'smooth'\n });\n }\n }\n\n private scrollToStart() {\n if (!this.scrollContainerRef) return;\n this.scrollContainerRef.scrollTo({ left: 0, behavior: 'smooth' });\n }\n\n private scrollToEnd() {\n if (!this.scrollContainerRef) return;\n const container = this.scrollContainerRef;\n const { scrollWidth, clientWidth } = container;\n const maxScrollLeft = scrollWidth - clientWidth;\n container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });\n }\n\n render() {\n return (\n <div class=\"tab-container\">\n <div class={`tab-header ${this.variant}`}>\n {this.showScrollLeft && (\n <button\n class=\"scroll-arrow left\"\n onClick={() => this.scrollToStart()}\n aria-label=\"Scroll to first tab\"\n >\n <udp-icon iconName=\"chevronLeft16\" color=\"inherit\" />\n </button>\n )}\n\n {this.showScrollLeft && <div class=\"scroll-fade left\"></div>}\n\n <div\n class=\"tab-scroll-container\"\n ref={el => (this.scrollContainerRef = el)}\n onScroll={() => this.checkScroll()}\n >\n {this.tabDetails.map((tab, index) => {\n if (tab.hidden) {\n return null;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const iconEl = tab.icon ? <udp-icon iconName={tab.icon} color={'inherit'} /> : null;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const titleEl = <span>{tab.title}</span>;\n\n return (\n <button\n class={{\n 'active': index === this.activeTab,\n 'has-icon': !!tab.icon,\n [`icon-${tab.iconPlacement}`]: !!tab.icon,\n 'disabled': tab.disabled,\n }}\n disabled={tab.disabled}\n onClick={() => this.tabClicked(index)}\n role=\"tab\"\n aria-selected={index === this.activeTab ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n ref={el => (this.buttonRefs[index] = el)}\n >\n {iconEl}\n {titleEl}\n </button>\n );\n })}\n\n <div class=\"slider\" style={this.sliderStyle}></div>\n </div>\n\n {this.showScrollRight && <div class=\"scroll-fade right\"></div>}\n\n {this.showScrollRight && (\n <button\n class=\"scroll-arrow right\"\n onClick={() => this.scrollToEnd()}\n aria-label=\"Scroll to last tab\"\n >\n <udp-icon iconName=\"chevronRight16\" color=\"inherit\" />\n </button>\n )}\n </div>\n <div class=\"tab-content\">\n <slot></slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"udp-tabs2.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,w9EAAw9E;;MCe99E,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQE;;;;;AAKG;AACK,QAAA,IAAO,CAAA,OAAA,GAAwB,MAAM;AAS7C;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAgB,EAAE;AAQrB,QAAA,IAAA,CAAA,iBAAiB,GAAW,CAAC,CAAC;AAC9B,QAAA,IAAA,CAAA,UAAU,GAAgB,EAAE,CAAC;QAC7B,IAAA,CAAA,WAAW,GAAyC;AAC3D,YAAA,KAAK,EAAE,GAAG;AACV,YAAA,SAAS,EAAE,eAAe;SAC3B;AACQ,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAC/B,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAEjC,QAAA,IAAA,CAAA,WAAW,GAAwB,EAAE,CAAC;AACtC,QAAA,IAAU,CAAA,UAAA,GAAwB,EAAE;AA6R7C;AA1RC;;AAEG;AACH,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI;;AAG3B;;AAEG;AACH,IAAA,IAAY,WAAW,GAAA;QACrB,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;;AAG1C;;;AAGG;AACH,IAAA,IAAY,SAAS,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB;;IAIhE,gBAAgB,GAAA;;QAEd,IAAI,IAAI,CAAC,WAAW;YAAE;QACtB,IAAI,CAAC,cAAc,EAAE;;IAIvB,YAAY,GAAA;QACV,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,oBAAoB,EAAE;YAC3B,IAAI,CAAC,WAAW,EAAE;AACpB,SAAC,CAAC;;IAGJ,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,EAAE;;AAGvB;;AAEG;AAEH,IAAA,iBAAiB,CAAC,QAAgB,EAAA;QAChC,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,oBAAoB,EAAE;AAC3B,QAAA,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC;;AAGlC;;AAEG;AAEH,IAAA,aAAa,CAAC,QAAgB,EAAA;QAC5B,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,oBAAoB,EAAE;AAC3B,QAAA,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC;;AAGlC;;AAEG;IAEH,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,EAAE;;IAIvB,eAAe,GAAA;QACb,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,oBAAoB,EAAE;YAC3B,IAAI,CAAC,WAAW,EAAE;AACpB,SAAC,CAAC;;IAGI,cAAc,GAAA;;AACpB,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;AAEpB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;;YAEpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAU,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,CAAC,EAAG,CAAC,CAAC;AACjD,YAAA,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;;aACjB;;AAEL,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,MAAM,CACpD,CAAC,KAAK,KAAiC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,CACjF;AAED,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK;gBAC7C,KAAK,EAAE,GAAG,CAAC,KAAK;gBAChB,IAAI,EAAE,GAAG,CAAC,IAAI;gBACd,aAAa,EAAE,GAAG,CAAC,aAAa;gBAChC,MAAM,EAAE,GAAG,CAAC,MAAM;gBAClB,QAAQ,EAAE,GAAG,CAAC,QAAQ;AACvB,aAAA,CAAC,CAAC;;;;AAKL,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,MAAI,MAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,CAAA,EAAE;gBACxG,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC;AACtF,gBAAA,IAAI,CAAC,iBAAiB,GAAG,eAAe,GAAG,EAAE,GAAG,eAAe,GAAG,CAAC;;;QAIvE,IAAI,CAAC,gBAAgB,EAAE;QAEvB,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,oBAAoB,EAAE;YAC3B,IAAI,CAAC,WAAW,EAAE;AACpB,SAAC,CAAC;;IAGI,gBAAgB,GAAA;;AAEtB,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACrB,YAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS;YACvC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,KAAI;AACtC,gBAAA,GAAG,CAAC,MAAM,GAAG,KAAK,KAAK,gBAAgB;AACzC,aAAC,CAAC;;;;IAKE,oBAAoB,GAAA;AAC1B,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACrD,IAAI,CAAC,YAAY,EAAE;AACjB,YAAA,IAAI,CAAC,WAAW,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE;YACjE;;QAGF,IAAI,CAAC,WAAW,GAAG;AACjB,YAAA,KAAK,EAAE,CAAA,EAAG,YAAY,CAAC,WAAW,CAAI,EAAA,CAAA;AACtC,YAAA,SAAS,EAAE,CAAA,WAAA,EAAc,YAAY,CAAC,UAAU,CAAK,GAAA,CAAA;SACtD;;IAGK,WAAW,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,kBAAkB;YAAE;QAC9B,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,kBAAkB;AACxE,QAAA,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW;QAC/C,IAAI,CAAC,cAAc,GAAG,aAAa,IAAI,UAAU,GAAG,CAAC;AACrD,QAAA,IAAI,CAAC,eAAe,GAAG,aAAa,IAAI,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC;;AAG5E,IAAA,UAAU,CAAC,QAAgB,EAAA;;AACjC,QAAA,IAAI,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,EAAE;YACvC;;AAGF,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;;;AAGrB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC;;aAC3B;;;AAGL,YAAA,IAAI,CAAC,iBAAiB,GAAG,QAAQ;;;AAI7B,IAAA,iBAAiB,CAAC,QAAgB,EAAA;QACxC,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;AAC3C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,kBAAkB;AAEzC,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS;YAAE;AAE9B,QAAA,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,SAAS;AAC7C,QAAA,MAAM,OAAO,GAAG,SAAS,CAAC,UAAU;AACpC,QAAA,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,WAAW;QAEhD,MAAM,eAAe,GAAG,EAAE;AAC1B,QAAA,MAAM,YAAY,GAAG,UAAU,GAAG,eAAe;AACjD,QAAA,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,eAAe;AAEhE,QAAA,IAAI,OAAO,GAAG,YAAY,EAAE;YAC1B,SAAS,CAAC,QAAQ,CAAC;gBACjB,IAAI,EAAE,OAAO,GAAG,eAAe;AAC/B,gBAAA,QAAQ,EAAE,QAAQ;AACnB,aAAA,CAAC;;AACG,aAAA,IAAI,QAAQ,GAAG,aAAa,EAAE;YACnC,SAAS,CAAC,QAAQ,CAAC;AACjB,gBAAA,IAAI,EAAE,QAAQ,GAAG,WAAW,GAAG,eAAe;AAC9C,gBAAA,QAAQ,EAAE,QAAQ;AACnB,aAAA,CAAC;;;IAIE,aAAa,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,kBAAkB;YAAE;AAC9B,QAAA,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;IAG3D,WAAW,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,kBAAkB;YAAE;AAC9B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,kBAAkB;AACzC,QAAA,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,SAAS;AAC9C,QAAA,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW;AAC/C,QAAA,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;IAGjE,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC;AAExC,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,CAAE,CAAA,EAAA,EACrC,IAAI,CAAC,cAAc,KAClB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,gBACxB,qBAAqB,EAAA,EAEhC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAC,eAAe,EAAC,KAAK,EAAC,SAAS,EAAG,CAAA,CAC9C,CACV,EAEA,IAAI,CAAC,cAAc,IAAI,4DAAK,KAAK,EAAC,kBAAkB,EAAO,CAAA,EAE5D,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC,EACzC,QAAQ,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAEjC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAI;AAClC,YAAA,IAAI,GAAG,CAAC,MAAM,EAAE;AACd,gBAAA,OAAO,IAAI;;;AAIb,YAAA,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,GAAG,CAAA,CAAA,UAAA,EAAA,EAAU,QAAQ,EAAE,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,GAAI,GAAG,IAAI;;AAEnF,YAAA,MAAM,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,GAAG,CAAC,KAAK,CAAQ;AAExC,YAAA,QACE,CACE,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE;oBACL,QAAQ,EAAE,KAAK,KAAK,gBAAgB;AACpC,oBAAA,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI;oBACtB,CAAC,CAAA,KAAA,EAAQ,GAAG,CAAC,aAAa,CAAA,CAAE,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI;oBACzC,UAAU,EAAE,GAAG,CAAC,QAAQ;AACzB,iBAAA,EACD,QAAQ,EAAE,GAAG,CAAC,QAAQ,EACtB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACrC,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,KAAK,KAAK,gBAAgB,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC7C,GAAG,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC9C,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EAAA,EAEvC,MAAM,EACN,OAAO,CACD;AAEb,SAAC,CAAC,EAEF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAA,CAAQ,CAC/C,EAEL,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,mBAAmB,EAAO,CAAA,EAE7D,IAAI,CAAC,eAAe,KACnB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,gBACtB,oBAAoB,EAAA,EAE/B,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAC,gBAAgB,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,CAC/C,CACV,CACG,EAEL,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,WAAW,KACtC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACP,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/tabs/tab/tabs/udp-tabs.css?tag=udp-tabs&encapsulation=shadow","src/components/my-component/UI/tabs/tab/tabs/udp-tabs.tsx"],"sourcesContent":[".tab-container {\n display: flex;\n flex-direction: column;\n}\n\n.tab-header {\n background-color: #ffffff;\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.tab-scroll-container {\n display: flex;\n position: relative;\n overflow-x: auto;\n overflow-y: hidden;\n flex: 1;\n min-width: 0;\n}\n\n.tab-scroll-container::-webkit-scrollbar {\n height: 4px;\n}\n.tab-scroll-container::-webkit-scrollbar-track {\n background: transparent;\n}\n.tab-scroll-container::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n.tab-scroll-container::-webkit-scrollbar-thumb:hover {\n background-color: rgba(0, 0, 0, 0.3);\n}\n\n.tab-header::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n background-color: var(--divider-color, #e0e0e0);\n}\n\n/* This is the base style for tab buttons /\n.tab-header button {\n padding: 16px;\n font-size: 14px;\n text-align: center;\n border: none;\n background: none;\n cursor: pointer;\n outline: none;\n transition: all 0.22s ease;\n color: #555555;;\n font-weight: 600;\n opacity: 0.9;\n white-space: nowrap;\n\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.tab-header.fill .tab-scroll-container {\n width: 100%;\n}\n.tab-header.fill .tab-scroll-container button {\n flex-grow: 1;\n}\n\n.tab-header button.active {\n color: var(--secondary-color, #344861);\n opacity: 1.0;\n}\n\n.tab-header button.scroll-arrow {\n position: absolute;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 40px;\n padding: 0;\n\n background: #ffffff;\n cursor: pointer;\n font-size: 16px;\n font-weight: bold;\n color: #757575;\n z-index: 2;\n transition: color 0.2s ease;\n\n flex-shrink: 0;\n opacity: 1;\n gap: 0;\n}\n\n.tab-header button.scroll-arrow:hover {\n color: #000;\n}\n\n.tab-header button.scroll-arrow.left {\n left: 0;\n}\n\n.tab-header button.scroll-arrow.right {\n right: 0;\n\n}\n\n.scroll-fade {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 30px;\n z-index: 1;\n pointer-events: none;\n}\n\n.scroll-fade.left {\n left: 40px;\n background: linear-gradient(\n to right,\n #ffffff,\n rgba(255, 255, 255, 0)\n );\n}\n\n.scroll-fade.right {\n right: 40px;\n background: linear-gradient(\n to left,\n #ffffff,\n rgba(255, 255, 255, 0)\n );\n}\n\n.tab-header button udp-icon {\n font-size: 1.2em;\n line-height: 1;\n}\n\n.tab-header button.icon-start {\n flex-direction: row;\n}\n.tab-header button.icon-end {\n flex-direction: row-reverse;\n}\n.tab-header button.icon-top {\n flex-direction: column;\n gap: 4px;\n}\n.tab-header button.icon-bottom {\n flex-direction: column-reverse;\n gap: 4px;\n}\n\n.slider {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 2px;\n background-color: var(--secondary-color, #344861);\n\n transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),\n width 0.22s cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 1;\n}\n\n.tab-header button.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.tab-header button.disabled.active {\n color: #757575;\n opacity: 0.5;\n}\n","import { Component, h, State, Element, Watch, Listen, Prop, Event, EventEmitter } from '@stencil/core';\n\ninterface TabDetail {\n label: string;\n icon?: string;\n iconPlacement?: 'start' \| 'end' \| 'top' \| 'bottom';\n hidden?: boolean;\n disabled?: boolean;\n}\n\n@Component({\n tag: 'udp-tabs',\n styleUrl: 'udp-tabs.css',\n shadow: true,\n})\nexport class UdpTabs {\n @Element() el: HTMLElement;\n\n /\n Specifies the layout variant of the tab header.\n \n - `'standard'`: Tabs will be sized based on their content.\n * - `'fill'`: Tabs will stretch to fill the available horizontal space.\n /\n @Prop() variant: 'fill' \| 'standard' = 'fill';\n\n /\n (Controlled) The index of the currently active tab.\n * If this prop is provided, the component will be in \"controlled\" mode.\n * The parent must listen for `udpTabChange` to update this value.\n /\n @Prop() value?: number;\n\n /\n (Optional) An array of tab configuration objects.\n * If provided, this will be used to render tabs instead of slotted `<udp-tab>` components.\n * This mode is typically used with controlled tabs.\n /\n @Prop() tabs: TabDetail[] = [];\n\n /\n (Controlled) Emits the index of the tab that was clicked.\n * This is only emitted in \"controlled\" mode (when `value` is provided).\n /\n @Event() udpTabChange: EventEmitter<number>;\n\n @State() internalActiveTab: number = 0; // For uncontrolled mode\n @State() tabDetails: TabDetail[] = []; // Unified details from prop or slot\n @State() sliderStyle: { width: string; transform: string } = {\n width: '0',\n transform: 'translateX(0)',\n };\n @State() showScrollLeft: boolean = false;\n @State() showScrollRight: boolean = false;\n\n private slottedTabs: HTMLUdpTabElement[] = []; // Renamed from `tabs`\n private buttonRefs: HTMLButtonElement[] = [];\n private scrollContainerRef?: HTMLDivElement;\n\n /\n Returns true if the component is in controlled mode.\n /\n private get isControlled(): boolean {\n return this.value != null;\n }\n\n /\n Returns true if tabs are being provided by the `tabs` prop.\n /\n private get useTabsProp(): boolean {\n return this.tabs && this.tabs.length > 0;\n }\n\n /\n Returns the currently active tab index,\n * respecting controlled or uncontrolled mode.\n /\n private get activeTab(): number {\n return this.isControlled ? this.value : this.internalActiveTab;\n }\n\n @Listen('slotchange')\n handleSlotChange() {\n // If we're using the tabs prop, slot changes are irrelevant\n if (this.useTabsProp) return;\n this.initializeTabs();\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n requestAnimationFrame(() => {\n this.updateSliderPosition();\n this.checkScroll();\n });\n }\n\n componentDidLoad() {\n this.initializeTabs();\n }\n\n /\n Watcher for uncontrolled state changes.\n /\n @Watch('internalActiveTab')\n onActiveTabChange(newValue: number) {\n this.updateActiveTabs();\n this.updateSliderPosition();\n this.scrollTabIntoView(newValue);\n }\n\n /\n Watcher for controlled state changes.\n /\n @Watch('value')\n onValueChange(newValue: number) {\n this.updateActiveTabs();\n this.updateSliderPosition();\n this.scrollTabIntoView(newValue);\n }\n\n /\n Watcher for tabs prop changes.\n */\n @Watch('tabs')\n onTabsPropChange() {\n this.initializeTabs();\n }\n\n @Watch('variant')\n onVariantChange() {\n requestAnimationFrame(() => {\n this.updateSliderPosition();\n this.checkScroll();\n });\n }\n\n private initializeTabs() {\n this.buttonRefs = [];\n\n if (this.useTabsProp) {\n // --- Prop-based ---\n this.tabDetails = this.tabs.map(t => ({ ...t })); // Use data from prop\n this.slottedTabs = []; // Ensure we're not tracking slotted tabs\n } else {\n // --- Slot-based ---\n this.slottedTabs = Array.from(this.el.children).filter(\n (child): child is HTMLUdpTabElement => child.tagName.toLowerCase() === 'udp-tab',\n );\n\n this.tabDetails = this.slottedTabs.map(tab => ({\n label: tab.label,\n icon: tab.icon,\n iconPlacement: tab.iconPlacement,\n hidden: tab.hidden,\n disabled: tab.disabled,\n }));\n }\n\n // --- Common Logic ---\n // In uncontrolled mode, check if the default active tab is invalid.\n if (!this.isControlled) {\n if (this.tabDetails[this.internalActiveTab]?.hidden \|\| this.tabDetails[this.internalActiveTab]?.disabled) {\n const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);\n this.internalActiveTab = firstValidIndex > -1 ? firstValidIndex : 0;\n }\n }\n\n this.updateActiveTabs();\n\n requestAnimationFrame(() => {\n this.updateSliderPosition();\n this.checkScroll();\n });\n }\n\n private updateActiveTabs() {\n // Only update slotted tabs if we're in slot mode\n if (!this.useTabsProp) {\n const currentActiveTab = this.activeTab;\n this.slottedTabs.forEach((tab, index) => {\n tab.active = index === currentActiveTab;\n });\n }\n // If in prop mode, the <button> 'active' class is handled by render()\n }\n\n private updateSliderPosition() {\n const activeButton = this.buttonRefs[this.activeTab]; // Use getter\n if (!activeButton) {\n this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };\n return;\n }\n\n this.sliderStyle = {\n width: `${activeButton.offsetWidth}px`,\n transform: `translateX(${activeButton.offsetLeft}px)`,\n };\n }\n\n private checkScroll() {\n if (!this.scrollContainerRef) return;\n const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainerRef;\n const isOverflowing = scrollWidth > clientWidth;\n this.showScrollLeft = isOverflowing && scrollLeft > 1;\n this.showScrollRight = isOverflowing && scrollLeft < scrollWidth - clientWidth - 1;\n }\n\n private tabClicked(tabIndex: number) {\n if (this.tabDetails[tabIndex]?.disabled) {\n return;\n }\n\n if (this.isControlled) {\n // In controlled mode, emit the event for the parent to handle.\n // The `onValueChange` watcher will handle UI updates when the prop changes.\n this.udpTabChange.emit(tabIndex);\n } else {\n // In uncontrolled mode, update state directly.\n // The `onActiveTabChange` watcher will handle UI updates.\n this.internalActiveTab = tabIndex;\n }\n }\n\n private scrollTabIntoView(tabIndex: number) {\n const tabButton = this.buttonRefs[tabIndex];\n const container = this.scrollContainerRef;\n\n if (!tabButton \|\| !container) return;\n\n const { scrollLeft, clientWidth } = container;\n const tabLeft = tabButton.offsetLeft;\n const tabRight = tabLeft + tabButton.offsetWidth;\n\n const safeZonePadding = 70;\n const safeZoneLeft = scrollLeft + safeZonePadding;\n const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;\n\n if (tabLeft < safeZoneLeft) {\n container.scrollTo({\n left: tabLeft - safeZonePadding,\n behavior: 'smooth',\n });\n } else if (tabRight > safeZoneRight) {\n container.scrollTo({\n left: tabRight - clientWidth + safeZonePadding,\n behavior: 'smooth',\n });\n }\n }\n\n private scrollToStart() {\n if (!this.scrollContainerRef) return;\n this.scrollContainerRef.scrollTo({ left: 0, behavior: 'smooth' });\n }\n\n private scrollToEnd() {\n if (!this.scrollContainerRef) return;\n const container = this.scrollContainerRef;\n const { scrollWidth, clientWidth } = container;\n const maxScrollLeft = scrollWidth - clientWidth;\n container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });\n }\n\n render() {\n const currentActiveTab = this.activeTab; // Use getter\n\n return (\n <div class=\"tab-container\">\n <div class={`tab-header ${this.variant}`}>\n {this.showScrollLeft && (\n <button\n class=\"scroll-arrow left\"\n onClick={() => this.scrollToStart()}\n aria-label=\"Scroll to first tab\"\n >\n <udp-icon iconName=\"chevronLeft16\" color=\"inherit\" />\n </button>\n )}\n\n {this.showScrollLeft && <div class=\"scroll-fade left\"></div>}\n\n <div\n class=\"tab-scroll-container\"\n ref={el => (this.scrollContainerRef = el)}\n onScroll={() => this.checkScroll()}\n >\n {this.tabDetails.map((tab, index) => {\n if (tab.hidden) {\n return null;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const iconEl = tab.icon ? <udp-icon iconName={tab.icon} color={'inherit'} /> : null;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n const labelEl = <span>{tab.label}</span>;\n\n return (\n <button\n class={{\n 'active': index === currentActiveTab,\n 'has-icon': !!tab.icon,\n [`icon-${tab.iconPlacement}`]: !!tab.icon,\n 'disabled': tab.disabled,\n }}\n disabled={tab.disabled}\n onClick={() => this.tabClicked(index)}\n role=\"tab\"\n aria-selected={index === currentActiveTab ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n ref={el => (this.buttonRefs[index] = el)}\n >\n {iconEl}\n {labelEl}\n </button>\n );\n })}\n\n <div class=\"slider\" style={this.sliderStyle}></div>\n </div>\n\n {this.showScrollRight && <div class=\"scroll-fade right\"></div>}\n\n {this.showScrollRight && (\n <button\n class=\"scroll-arrow right\"\n onClick={() => this.scrollToEnd()}\n aria-label=\"Scroll to last tab\"\n >\n <udp-icon iconName=\"chevronRight16\" color=\"inherit\" />\n </button>\n )}\n </div>\n\n {!this.isControlled && !this.useTabsProp && (\n <div>\n <slot></slot>\n </div>\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/docs.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-11-06T23:59:52",
+  "timestamp": "2025-11-07T23:09:31",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.2",
@@ -46597,7 +46597,7 @@
           "setter": false
         },
         {
-          "name": "title",
+          "name": "label",
           "type": "string",
           "complexType": {
             "original": "string",
@@ -46605,7 +46605,7 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "title",
+          "attr": "label",
           "reflectToAttr": false,
           "docs": "The title of the tab, displayed in the tab-header.",
           "docsTags": [],
@@ -46636,6 +46636,72 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.tsx",
+      "encapsulation": "shadow",
+      "tag": "udp-tab-panel",
+      "readme": "# udp-tab-panel\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "index",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "index",
+          "reflectToAttr": false,
+          "docs": "The index this panel corresponds to.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "value",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "value",
+          "reflectToAttr": false,
+          "docs": "The active tab index, provided by the parent.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/my-component/UI/tabs/tab/tabs/udp-tabs.tsx",
       "encapsulation": "shadow",
@@ -46645,6 +46711,62 @@
       "docsTags": [],
       "usage": {},
       "props": [
+        {
+          "name": "tabs",
+          "type": "TabDetail[]",
+          "complexType": {
+            "original": "TabDetail[]",
+            "resolved": "TabDetail[]",
+            "references": {
+              "TabDetail": {
+                "location": "global",
+                "id": "global::TabDetail"
+              }
+            }
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "(Optional) An array of tab configuration objects.\nIf provided, this will be used to render tabs instead of slotted `<udp-tab>` components.\nThis mode is typically used with controlled tabs.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "[]"
+            }
+          ],
+          "default": "[]",
+          "values": [
+            {
+              "type": "TabDetail[]"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "value",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "value",
+          "reflectToAttr": false,
+          "docs": "(Controlled) The index of the currently active tab.\nIf this prop is provided, the component will be in \"controlled\" mode.\nThe parent must listen for `udpTabChange` to update this value.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "variant",
           "type": "\"fill\" | \"standard\"",
@@ -46681,7 +46803,22 @@
         }
       ],
       "methods": [],
-      "events": [],
+      "events": [
+        {
+          "event": "udpTabChange",
+          "detail": "number",
+          "bubbles": true,
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "(Controlled) Emits the index of the tab that was clicked.\nThis is only emitted in \"controlled\" mode (when `value` is provided).",
+          "docsTags": []
+        }
+      ],
       "listeners": [
         {
           "event": "slotchange",