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

package/dist/components/udp-tab-panel.js

@@ -0,0 +1,45 @@
+import { p as proxyCustomElement, H, h } from './index2.js';
+
+const udpTabPanelCss = ":host{display:block}.tab-panel{display:none}.tab-panel.active{display:block}";
+
+const UdpTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class UdpTabPanel extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    render() {
+        const isActive = this.value === this.index;
+        return (h("div", { key: '735bca81299145233b3e2e017eef05a840b0fb69', class: {
+                'tab-panel': true,
+                'active': isActive,
+            }, role: "tabpanel", "aria-hidden": !isActive ? 'true' : 'false' }, h("slot", { key: '68ad651e93008ca12c4d976ca71747a4f4cf4b39' })));
+    }
+    static get style() { return udpTabPanelCss; }
+}, [257, "udp-tab-panel", {
+        "value": [2],
+        "index": [2]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["udp-tab-panel"];
+    components.forEach(tagName => { switch (tagName) {
+        case "udp-tab-panel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, UdpTabPanel$1);
+            }
+            break;
+    } });
+}
+
+const UdpTabPanel = UdpTabPanel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UdpTabPanel, defineCustomElement };
+//# sourceMappingURL=udp-tab-panel.js.map
+
+//# sourceMappingURL=udp-tab-panel.js.map

package/dist/components/udp-tab-panel.js.map

@@ -0,0 +1 @@
+{"file":"udp-tab-panel.js","mappings":";;AAAA,MAAM,cAAc,GAAG,8EAA8E;;MCOxFA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;IAWtB,MAAM,GAAA;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;QAE1C,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,QAAQ,EAAE,QAAQ;AACnB,aAAA,EACD,IAAI,EAAC,UAAU,EAAA,aAAA,EAEF,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,EAEzC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["UdpTabPanel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.css?tag=udp-tab-panel&encapsulation=shadow","src/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.tab-panel {\n  display: none;\n}\n\n.tab-panel.active {\n  display: block;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'udp-tab-panel',\n  styleUrl: 'udp-tab-panel.css',\n  shadow: true,\n})\nexport class UdpTabPanel {\n  /**\n   * The active tab index, provided by the parent.\n   */\n  @Prop() value: number;\n\n  /**\n   * The index this panel corresponds to.\n   */\n  @Prop() index: number;\n\n  render() {\n    const isActive = this.value === this.index;\n\n    return (\n      <div\n        class={{\n          'tab-panel': true,\n          'active': isActive,\n        }}\n        role=\"tabpanel\"\n        // Use aria-hidden for accessibility and :host styling\n        aria-hidden={!isActive ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/udp-tab2.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
 
-const udpTabCss = ".tab-panel{display:none;background-color:#ffffff}.tab-panel.active{display:block}";
+const udpTabCss = ".tab-panel{display:none}.tab-panel.active{display:block}";
 
 const UdpTab = /*@__PURE__*/ proxyCustomElement(class UdpTab extends H {
     constructor(registerHost) {
@@ -8,22 +8,38 @@ const UdpTab = /*@__PURE__*/ proxyCustomElement(class UdpTab extends H {
         if (registerHost !== false) {
             this.__registerHost();
         }
-    }
-    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 (h("div", { key: '775798db38994b9a9dcfdb94a8cc588bafed47f9', class: { 'tab-panel': true, 'active': this.active } }, h("slot", { key: '6f67d3f672d0600eeb84b9dfcc2c12f2fc931ef7' })));
+        return (h("div", { key: '0dbc41862f8bb01ecfec94ca44f082f0e4e7104f', class: { 'tab-panel': true, 'active': this.active }, role: "tabpanel" }, h("slot", { key: 'facc5f18260ea67c405dca1a90dcdc48e5ec995c' })));
     }
-    static get watchers() { return {
-        "active": ["activeChanged"]
-    }; }
     static get style() { return udpTabCss; }
 }, [260, "udp-tab", {
-        "title": [1],
-        "active": [4]
-    }, undefined, {
-        "active": ["activeChanged"]
+        "label": [1],
+        "active": [516],
+        "icon": [1],
+        "iconPlacement": [1, "icon-placement"],
+        "hidden": [4],
+        "disabled": [4]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/udp-tab2.js.map

@@ -1 +1 @@
-{"file":"udp-tab2.js","mappings":";;AAAA,MAAM,SAAS,GAAG,mFAAmF;;MCMxF,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;IAKjB,aAAa,GAAA;;;IAIb,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,EAAA,EACtD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/tabs/tab/udp-tab.css?tag=udp-tab","src/components/my-component/UI/tabs/tab/udp-tab.tsx"],"sourcesContent":[".tab-panel {\n    display: none;\n    background-color: #ffffff;\n  }\n  \n  .tab-panel.active {\n    display: block;\n  }\n  \n\n  ","import { Component, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'udp-tab',\n  styleUrl: 'udp-tab.css',\n})\nexport class UdpTab {\n  @Prop() title: string;\n  @Prop() active: boolean;\n\n  @Watch('active')\n  activeChanged() {\n    // Handle the active state change, if needed\n  }\n\n  render() {\n    return (\n      <div class={{ 'tab-panel': true, 'active': this.active }}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"udp-tab2.js","mappings":";;AAAA,MAAM,SAAS,GAAG,0DAA0D;;MCM/D,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AAJnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAUE;;;AAGG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAOhD;;;AAGG;AACK,QAAA,IAAa,CAAA,aAAA,GAAwC,OAAO;AACpE;;;AAGG;AACK,QAAA,IAAM,CAAA,MAAA,GAAa,KAAK;AAEhC;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AASnC;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,UAAU,EAAA,EACvE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/tabs/tab/udp-tab.css?tag=udp-tab","src/components/my-component/UI/tabs/tab/udp-tab.tsx"],"sourcesContent":[".tab-panel {\n    display: none;\n  }\n\n  .tab-panel.active {\n    display: block;\n  }\n\n\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'udp-tab',\n  styleUrl: 'udp-tab.css',\n})\nexport class UdpTab {\n  /**\n   * The title of the tab, displayed in the tab-header.\n   */\n  @Prop() label: string;\n\n  /**\n   * True if this is the active tab.\n   * This is set by the parent <udp-tabs> component.\n   */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /**\n   * Optional icon to display in the tab.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Placement of the icon relative to the title.\n   * @default 'start'\n   */\n  @Prop() iconPlacement?: 'start' | 'end' | 'top' | 'bottom' = 'start';\n  /**\n   * If true, the tab will be hidden from the tab list.\n   * @default false\n   */\n  @Prop() hidden?: boolean = false;\n\n  /**\n   * If true, the tab will be unselectable.\n   * @default false\n   */\n  @Prop() disabled?: boolean = false;\n\n  render() {\n    return (\n      <div class={{ 'tab-panel': true, 'active': this.active }} role=\"tabpanel\">\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/udp-tabs2.js

@@ -1,6 +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-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}.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) {
@@ -8,29 +9,266 @@ const UdpTabs = /*@__PURE__*/ proxyCustomElement(class UdpTabs extends H {
         if (registerHost !== false) {
             this.__registerHost();
         }
-        this.activeTab = 0;
+        this.__attachShadow();
+        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) {
-        this.activeTab = 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() {
-        return (h("div", { key: '11b569eb074151f849159aa15af92129c8992929' }, h("div", { key: '3c6d9178dd37fd5fd5b91ec44e287241ee256e1c', class: "tab-header" }, h("slot", { key: 'e9289d5d3fa6e2da92b81de71e55276b3455f37c', name: "tab-title" })), h("div", { key: 'ed2038f48697251f5dfd3856d26711313376af10' }, h("slot", { key: '2b6d109cef169e2f50fb876387efc334464dc9da' }))));
+        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 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: '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 {
+        "internalActiveTab": ["onActiveTabChange"],
+        "value": ["onValueChange"],
+        "tabs": ["onTabsPropChange"],
+        "variant": ["onVariantChange"]
+    }; }
     static get style() { return udpTabsCss; }
-}, [260, "udp-tabs", {
-        "activeTab": [32]
+}, [257, "udp-tabs", {
+        "variant": [1],
+        "value": [2],
+        "tabs": [16],
+        "internalActiveTab": [32],
+        "tabDetails": [32],
+        "sliderStyle": [32],
+        "showScrollLeft": [32],
+        "showScrollRight": [32]
+    }, [[0, "slotchange", "handleSlotChange"], [9, "resize", "handleResize"]], {
+        "internalActiveTab": ["onActiveTabChange"],
+        "value": ["onValueChange"],
+        "tabs": ["onTabsPropChange"],
+        "variant": ["onVariantChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["udp-tabs"];
+    const components = ["udp-tabs", "udp-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "udp-tabs":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, UdpTabs);
             }
             break;
+        case "udp-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 

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

@@ -1 +1 @@
-{"file":"udp-tabs2.js","mappings":";;AAAA,MAAM,UAAU,GAAG,imBAAimB;;MCMvmB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AAJpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAKW,QAAA,IAAS,CAAA,SAAA,GAAW,CAAC;AAoB/B;AAlBC,IAAA,UAAU,CAAC,QAAgB,EAAA;AACzB,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ;;IAG3B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,EAAA,CAEf,CACH,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/tabs/tab/tabs/udp-tabs.css?tag=udp-tabs","src/components/my-component/UI/tabs/tab/tabs/udp-tabs.tsx"],"sourcesContent":[".tab-header {\n    display: flex;\n    background-color: #ffffff;\n    border-bottom: 1px solid #e0e0e0;\n  }\n  \n  .tab-header button {\n    flex-grow: 1;\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.3s ease;\n  }\n  \n  .tab-header button.active {\n    border-bottom: 2px solid 'var(--secondary-color)';\n    font-weight: 600;\n  }\n  \n  .tab-content {\n    display: flex;\n    flex-direction: column;\n    padding: 16px;\n    background-color: #ffffff;\n  }\n  \n  .tab-header button {\n    cursor: pointer;\n    border: none;\n    padding: 16px;\n    background-color: transparent;\n    color: #757575;\n  }\n  \n  .tab-header button.active {\n    border-bottom: 2px solid #344861;\n    color: #344861;\n    font-weight: 600;\n  }\n  ","import { Component, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'udp-tabs',\n  styleUrl: 'udp-tabs.css',\n})\nexport class UdpTabs {\n  @State() activeTab: number = 0;\n\n  tabClicked(tabIndex: number) {\n    this.activeTab = tabIndex;\n  }\n\n  render() {\n    return (\n      <div>\n        <div class=\"tab-header\">\n          <slot name=\"tab-title\">\n            {/* Titles go here */}\n          </slot>\n        </div>\n        <div>\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"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.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}