@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/esm/ifx-tabs.entry.js

@@ -0,0 +1,378 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CY4s4b6R.js';
+import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
+import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';
+
+const tabsCss = () => `:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family);width:100%}.tabs.horizontal{flex-direction:column}.tabs-container{display:flex;align-items:center;position:relative;width:fit-content;max-width:100%;min-width:0;gap:8px}.tabs-container.position-sticky{width:100%}.scroll-button{flex-shrink:0;z-index:10;transition:all 0.3s ease-in-out}.scroll-button.hidden{display:none;pointer-events:none}.scroll-button.scroll-left.hidden{width:0;min-width:0;max-width:0;margin:0;padding:0;border:0;opacity:0;overflow:hidden}.scroll-button.scroll-right.hidden{visibility:hidden;pointer-events:none}.tabs.vertical{flex-direction:row}.tabs-list{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:fit-content;max-width:100%;min-width:0;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list.scrollable{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}.tabs-list.scrollable::-webkit-scrollbar{display:none}.tabs-list:focus-within .active-border{display:none}.active-border{position:absolute;left:0;width:0;transition:left 0.3s ease-in-out, width 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0a8276}.tabs.vertical .tabs-list{border-bottom:none;width:auto;align-items:start;height:fit-content;grid-auto-flow:row;grid-auto-rows:auto;grid-auto-columns:initial}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px;flex:3 1 0;min-width:0}.tabs .tabs-list.position-sticky,.tabs .tabs-container.position-sticky{position:sticky;top:0;background-color:#ffffff;z-index:1000;box-shadow:0 1px 1px 0 rgba(29, 29, 29, 0.12), 0 0 1px 0 rgba(29, 29, 29, 0.12);transition:ease all 0.5s}.tabs .tabs-list.position-sticky.at-top .tab-item .subline,.tabs .tabs-list.position-sticky.at-top .tab-item .subline-wrapper,.tabs .tabs-container.position-sticky.at-top .tab-item .subline,.tabs .tabs-container.position-sticky.at-top .tab-item .subline-wrapper{display:none}.tabs .tabs-list.position-sticky{align-self:flex-start}.tabs:not(.vertical) .tab-item.full-width{flex:1}.tabs:not(.vertical).full-width-enabled .scroll-button{display:none}.tabs:not(.vertical).full-width-enabled .tabs-list{flex:1}.tabs:not(.vertical).full-width-enabled .tabs-list.scrollable{overflow-x:visible}.tabs:not(.vertical).full-width-enabled .tabs-container{width:100%}.tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;max-width:100%;padding:12px 16px;gap:4px;flex-shrink:0;cursor:pointer}@media (max-width: 768px){.tab-item{font-size:0.875rem;padding:8px 8px}}.tab-item.icon__right .top{flex-direction:row-reverse;justify-content:center}.tab-item.icon__right .top:has(.label),.tab-item.icon__right .top:has(.number){flex-direction:row;justify-content:center}.tab-item:hover{color:#0a8276}.tab-item:hover .label{color:#1d1d1d}.tab-item:active,.tab-item.active{color:#0a8276}.tab-item:active .label,.tab-item.active .label{color:#1d1d1d}.tab-item:focus,.tab-item.focus{outline:2px solid #0a8276;outline-offset:-2px;border-radius:2px}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item:focus .label,.tab-item.focus .label{color:#1d1d1d}.tab-item.disabled{color:#bfbbbb;pointer-events:none}.tab-item .top{display:flex;justify-content:center;flex-direction:row;align-items:center;gap:4px;width:100%;max-width:100%;min-width:0;overflow:hidden}.tab-item .chip{min-width:0;overflow:hidden}.tab-item .chip ifx-chip{min-width:0;max-width:100%}.tab-item .header-wrapper{display:flex;overflow:hidden;max-width:100%;flex:0 1 auto;min-width:0}.tab-item .header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;width:100%}.tab-item .subline-wrapper{display:flex;width:100%}.tab-item .subline-wrapper.left{justify-content:flex-start}.tab-item .subline-wrapper.center{justify-content:center}.tab-item .subline{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;color:#575352;font-size:0.75rem;font-style:normal;font-weight:400;line-height:1rem}.tab-item:hover .subline,.tab-item[aria-selected=true] .subline,.tab-item.active .subline{color:#0a8276}.tab-item.disabled .subline{color:#bfbbbb}.tabs.vertical .tab-item{border-right:2px solid transparent;justify-content:flex-start;align-items:flex-start;flex:none;max-width:100%;width:100%;text-align:left;align-self:start}.tabs.vertical .tab-item .top,.tabs.vertical .tab-item .subline-wrapper{justify-content:flex-start}.number-wrapper{position:relative;display:inline-flex;border-radius:9999px;overflow:hidden;vertical-align:middle;align-items:center;justify-content:center;flex-shrink:0}.tab-item.disabled .number-wrapper::after{content:"";position:absolute;inset:0;background:#bfbbbb;mix-blend-mode:lighten}ifx-chip::part(chip){display:flex}ifx-chip::part(label-wrapper),ifx-chip::part(label){max-width:25ch;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}ifx-chip::part(label){display:block;text-align:center}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0a8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}`;
+
+const IfxTabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ifxChange = createEvent(this, "ifxChange", 1);
+    }
+    get el() { return getElement(this); }
+    /** Orientation of tab list, either horizontal or vertical. */
+    orientation = "horizontal";
+    /** Index of the currently active tab. */
+    activeTabIndex = 0;
+    /** Stretches tabs to evenly fill the available horizontal space. */
+    fullWidth = false;
+    /** Text of the Advanced-Tab-Label */
+    label;
+    /** Number of the Advanced-Tab-Number */
+    number = 0;
+    /** Subline under the header, only for advanced variant. */
+    subline;
+    /** Subline position, either left or center. */
+    sublinePosition = "left";
+    /** Makes the tab header stick to the top of its scrolling oontainer */
+    positionSticky = false;
+    internalOrientation;
+    internalActiveTabIndex = 0;
+    tabObjects = [];
+    canScrollLeft = false;
+    canScrollRight = false;
+    atTop = false;
+    internalFocusedTabIndex = 0;
+    tabRefs = [];
+    tabHeaderRefs = [];
+    tabsListElement;
+    tabFocusHandlers = new Map();
+    /** Emitted when the active tab changes (e.g., user selects a different tab). */
+    ifxChange;
+    updateBorderOnWindowResize() {
+        this.updateBorderAndFocus();
+        this.updateScrollButtons();
+    }
+    setActiveAndFocusedTab(index) {
+        if (index >= this.tabObjects.length) {
+            index = this.tabObjects.length - 1;
+        }
+        if (index < 0) {
+            index = 0;
+        }
+        if (!this.tabObjects[index]?.disabled) {
+            this.internalActiveTabIndex = index;
+            this.internalFocusedTabIndex = index;
+            // Scroll the active tab into view
+            setTimeout(() => this.scrollTabIntoView(index), 0);
+        }
+    }
+    handleTabHeaderChange(e) {
+        const tabIndex = parseInt(e.target.getAttribute("slot").replace("tab-", ""), 10);
+        const tab = e.target;
+        this.tabObjects[tabIndex] = {
+            ...this.tabObjects[tabIndex],
+            header: tab.header,
+            disabled: tab.disabled === true,
+            icon: tab.icon,
+            iconPosition: tab.iconPosition,
+            subline: tab.subline,
+            sublinePosition: tab.sublinePosition,
+            label: tab.label,
+            number: tab.number,
+        };
+        this.tabObjects = [...this.tabObjects];
+    }
+    handleScroll() {
+        const container = this.el.shadowRoot.querySelector(".tabs-container") ||
+            this.el.shadowRoot.querySelector(".tabs-list");
+        if (container) {
+            const removeSubline = container.getBoundingClientRect().top;
+            this.atTop = removeSubline <= 0;
+        }
+    }
+    activeTabIndexChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.setActiveAndFocusedTab(newValue);
+        }
+    }
+    componentWillLoad() {
+        this.internalOrientation =
+            this.orientation.toLowerCase() === "vertical" ? "vertical" : "horizontal";
+        this.onSlotChange();
+        this.setActiveAndFocusedTab(this.activeTabIndex);
+        this.updateTabStyles();
+        this.handleScroll();
+    }
+    updateTabStyles() {
+        this.tabHeaderRefs.forEach((tab, index) => {
+            tab.classList.toggle("active", index === this.internalActiveTabIndex);
+            tab.setAttribute("aria-selected", index === this.internalActiveTabIndex ? "true" : "false");
+        });
+    }
+    // needed for smooth border transition
+    reRenderBorder() {
+        const borderElement = this.el.shadowRoot.querySelector(".active-border");
+        if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {
+            if (this.orientation === "horizontal") {
+                borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;
+                borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;
+                borderElement.style.top = "";
+                borderElement.style.height = "";
+            }
+            else {
+                borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;
+                borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;
+                borderElement.style.left = "";
+                borderElement.style.width = "";
+            }
+        }
+    }
+    // when a slot is removed / added
+    onSlotChange() {
+        const tabs = Array.from(this.el.children).filter((child) => child.matches("ifx-tab"));
+        this.tabObjects = Array.from(tabs).map((tab) => {
+            return {
+                header: tab?.header,
+                disabled: tab?.disabled === true,
+                icon: tab?.icon,
+                iconPosition: tab?.iconPosition,
+                subline: tab?.subline,
+                sublinePosition: tab?.sublinePosition,
+                label: tab?.label,
+                number: tab?.number,
+            };
+        });
+        this.tabRefs = Array.from(tabs);
+        this.tabRefs.forEach((tab, index) => {
+            tab.setAttribute("slot", `tab-${index}`);
+        });
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-tabs", await framework);
+        }
+        this.updateBorderAndFocus();
+        this.updateScrollButtons();
+        // Add keyboard event listeners for each tab header
+        this.setupTabFocusListeners();
+        this.handleScroll();
+    }
+    setupTabFocusListeners() {
+        // Clear any existing handlers
+        this.tabFocusHandlers.clear();
+        this.tabHeaderRefs.forEach((tab, index) => {
+            const handler = () => {
+                this.internalFocusedTabIndex = index;
+            };
+            // Store the handler so we can remove it later
+            this.tabFocusHandlers.set(tab, handler);
+            tab.addEventListener("focus", handler);
+        });
+    }
+    disconnectedCallback() {
+        // Remove keyboard event listeners when component is unmounted
+        this.tabFocusHandlers.forEach((handler, tab) => {
+            tab.removeEventListener("focus", handler);
+        });
+        this.tabFocusHandlers.clear();
+    }
+    componentDidUpdate() {
+        this.updateBorderAndFocus();
+        requestAnimationFrame(() => {
+            this.updateScrollButtons();
+        });
+    }
+    updateBorderAndFocus() {
+        this.reRenderBorder();
+        this.updateTabFocusability();
+    }
+    updateTabFocusability() {
+        this.tabHeaderRefs.forEach((tab, index) => {
+            tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;
+        });
+    }
+    focusNextTab() {
+        let nextIndex = this.internalFocusedTabIndex + 1;
+        while (nextIndex < this.tabHeaderRefs.length &&
+            this.tabObjects[nextIndex].disabled) {
+            nextIndex++;
+        }
+        if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {
+            this.internalFocusedTabIndex = nextIndex;
+            this.tabHeaderRefs[nextIndex].focus();
+        }
+    }
+    focusPreviousTab() {
+        let prevIndex = this.internalFocusedTabIndex - 1;
+        while (prevIndex >= 0 && this.tabObjects[prevIndex].disabled) {
+            prevIndex--;
+        }
+        if (prevIndex >= 0 && prevIndex < this.tabHeaderRefs.length) {
+            this.internalFocusedTabIndex = prevIndex;
+            this.tabHeaderRefs[prevIndex].focus();
+        }
+    }
+    getSublineAlignment(tab) {
+        const value = (tab?.sublinePosition ??
+            this.sublinePosition ??
+            "left").trim();
+        return value === "center" ? "center" : "left";
+    }
+    getTabItemClass(index) {
+        const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;
+        const isDisabled = this.tabObjects[index].disabled;
+        const iconPosition = this.tabObjects[index].iconPosition;
+        const subline = this.tabObjects[index].subline;
+        const sublinePosition = this.tabObjects[index].sublinePosition;
+        const label = this.tabObjects[index].label;
+        const number = this.tabObjects[index].number;
+        return `tab-item ${this.fullWidth ? "full-width" : ""} ${isActive ? "active" : ""} ${isDisabled ? "disabled" : ""} ${"icon__" + iconPosition} ${subline ? "subline" : ""} ${sublinePosition ? "sublinePosition" : ""} ${label ? "label" : ""} ${number ? "number" : ""}`;
+    }
+    handleClick(tab, index) {
+        if (!tab.disabled) {
+            const previousTabIndex = this.internalActiveTabIndex;
+            this.internalActiveTabIndex = index;
+            this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: index });
+            // Center the clicked tab
+            setTimeout(() => this.scrollTabIntoView(index), 0);
+        }
+    }
+    handleKeyDown(ev) {
+        if (ev.key === "Tab") {
+            if (ev.shiftKey) {
+                // Shift + Tab
+                if (this.internalFocusedTabIndex === 0) {
+                    // Allow default behavior to move focus out of component
+                    return;
+                }
+                else {
+                    ev.preventDefault();
+                    this.focusPreviousTab();
+                }
+            }
+            else {
+                // Tab
+                if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {
+                    // Allow default behavior to move focus out of component
+                    return;
+                }
+                else {
+                    ev.preventDefault();
+                    this.focusNextTab();
+                }
+            }
+        }
+        else if (ev.key === "Enter") {
+            const path = ev.composedPath();
+            const isTabHeader = path.some((el) => this.tabHeaderRefs.includes(el));
+            if (!isTabHeader) {
+                return;
+            }
+            if (this.internalFocusedTabIndex !== -1 &&
+                !this.tabObjects[this.internalFocusedTabIndex].disabled) {
+                const previousTabIndex = this.internalActiveTabIndex;
+                this.internalActiveTabIndex = this.internalFocusedTabIndex;
+                this.ifxChange.emit({
+                    previousTab: previousTabIndex,
+                    currentTab: this.internalFocusedTabIndex,
+                });
+                // Center the activated tab
+                setTimeout(() => this.scrollTabIntoView(this.internalFocusedTabIndex), 0);
+            }
+        }
+    }
+    updateScrollButtons() {
+        if (this.shouldDisableScrolling()) {
+            this.canScrollLeft = false;
+            this.canScrollRight = false;
+            return;
+        }
+        const container = this.tabsListElement;
+        if (!container) {
+            this.canScrollLeft = false;
+            this.canScrollRight = false;
+            return;
+        }
+        const maxScroll = container.scrollWidth - container.clientWidth;
+        // No real overflow
+        if (maxScroll <= 1) {
+            this.canScrollLeft = false;
+            this.canScrollRight = false;
+            return;
+        }
+        const currentScroll = container.scrollLeft;
+        this.canScrollLeft = currentScroll > 1;
+        this.canScrollRight = currentScroll < maxScroll - 1;
+    }
+    shouldDisableScrolling() {
+        return (!this.tabsListElement ||
+            this.internalOrientation === "vertical" ||
+            this.fullWidth);
+    }
+    scrollLeft() {
+        if (!this.canScrollLeft || !this.tabsListElement)
+            return;
+        const scrollAmount = Math.min(200, this.tabsListElement.scrollLeft);
+        this.tabsListElement.scrollBy({ left: -scrollAmount, behavior: "smooth" });
+    }
+    scrollRight() {
+        if (!this.canScrollRight || !this.tabsListElement)
+            return;
+        const maxScroll = this.tabsListElement.scrollWidth - this.tabsListElement.clientWidth;
+        const currentScroll = this.tabsListElement.scrollLeft;
+        const scrollAmount = Math.min(200, maxScroll - currentScroll);
+        this.tabsListElement.scrollBy({ left: scrollAmount, behavior: "smooth" });
+    }
+    onTabsListScroll() {
+        this.updateScrollButtons();
+    }
+    scrollTabIntoView(index) {
+        if (this.shouldDisableScrolling() || !this.tabHeaderRefs[index]) {
+            return;
+        }
+        const tabElement = this.tabHeaderRefs[index];
+        const container = this.tabsListElement;
+        const tabRect = this.getTabCenterInfo(tabElement);
+        const containerRect = this.getContainerCenterInfo(container);
+        if (Math.abs(tabRect.center - containerRect.center) > 50) {
+            let desiredScrollLeft = this.calculateCenteredScrollPosition(tabRect, containerRect);
+            // 🔥 clamp tiny values
+            if (desiredScrollLeft < 1) {
+                desiredScrollLeft = 0;
+            }
+            const maxScroll = container.scrollWidth - container.clientWidth;
+            if (maxScroll - desiredScrollLeft < 1) {
+                desiredScrollLeft = maxScroll;
+            }
+            container.scrollTo({ left: desiredScrollLeft });
+        }
+    }
+    getTabCenterInfo(tabElement) {
+        const left = tabElement.offsetLeft;
+        const width = tabElement.offsetWidth;
+        return {
+            left,
+            width,
+            center: left + width / 2,
+        };
+    }
+    getContainerCenterInfo(container) {
+        const scrollLeft = container.scrollLeft;
+        const width = container.clientWidth;
+        return {
+            scrollLeft,
+            width,
+            center: scrollLeft + width / 2,
+        };
+    }
+    calculateCenteredScrollPosition(tabRect, containerRect) {
+        const desiredScrollLeft = tabRect.center - containerRect.width / 2;
+        const maxScrollLeft = this.tabsListElement.scrollWidth - containerRect.width;
+        return Math.max(0, Math.min(desiredScrollLeft, maxScrollLeft));
+    }
+    render() {
+        return (h("div", { key: '5691a9fe2958ed309b4f66c967d543b16a09ccaf', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation} ${this.fullWidth ? "full-width-enabled" : ""}` }, this.internalOrientation === "horizontal" ? (h("div", { class: `tabs-container ${this.positionSticky ? "position-sticky" : ""} ${this.atTop ? "at-top" : ""}` }, h("ifx-icon-button", { shape: "round", variant: "tertiary", icon: "chevronLeft16", size: "s", disabled: false, "aria-label": "Scroll tabs left", onClick: () => this.scrollLeft(), class: `scroll-button scroll-left ${!this.canScrollLeft ? "hidden" : ""}` }), h("ul", { role: "tablist", class: "tabs-list scrollable", ref: (el) => (this.tabsListElement = el), onScroll: () => this.onTabsListScroll() }, this.tabObjects?.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? "true" : "false", "aria-disabled": tab.disabled ? "true" : "false", role: "tab" }, h("div", { class: "top" }, tab?.icon ? h("ifx-icon", { icon: tab.icon }) : "", tab?.header ? (h("div", { class: "header-wrapper" }, h("p", { class: "header" }, tab.header))) : (""), tab?.number ? (h("div", { class: "number-wrapper" }, h("ifx-indicator", { class: "number", variant: "number", number: tab.number, inverted: false }))) : (""), tab?.label ? (h("div", { class: "chip" }, h("span", { class: "label-wrapper" }, h("ifx-chip", { class: "label", placeholder: tab.label, size: "small", variant: "single", theme: "outlined", icon: "", "read-only": "true", "aria-label": "Chip", disabled: tab.disabled, tabindex: "-1" })))) : ("")), (tab?.subline || this.subline) && (h("span", { class: `subline-wrapper ${this.getSublineAlignment(tab)}` }, h("p", { class: "subline" }, tab?.subline ?? this.subline)))))), h("div", { class: "active-border" })), h("ifx-icon-button", { shape: "round", variant: "tertiary", icon: "chevronRight16", size: "s", disabled: false, "aria-label": "Scroll tabs right", onClick: () => this.scrollRight(), class: `scroll-button scroll-right ${!this.canScrollRight ? "hidden" : ""}` }))) : (h("ul", { role: "tablist", class: `tabs-list ${this.positionSticky ? "position-sticky" : ""} ${this.atTop ? "at-top" : ""}` }, this.tabObjects?.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? "true" : "false", "aria-disabled": tab.disabled ? "true" : "false", role: "tab" }, h("div", { class: "top" }, tab?.icon ? h("ifx-icon", { icon: tab.icon }) : "", tab?.header ? (h("div", { class: "header-wrapper" }, h("p", { class: "header" }, tab.header))) : (""), tab?.number ? (h("div", { class: "number-wrapper" }, h("ifx-indicator", { class: "number", variant: "number", number: tab.number, inverted: false }))) : (""), tab?.label ? (h("div", { class: "chip" }, h("span", { class: "label-wrapper" }, h("ifx-chip", { class: "label", placeholder: tab.label, size: "small", variant: "single", theme: "outlined", icon: "", "read-only": "true", "aria-label": "Chip", disabled: tab.disabled, tabindex: "-1" })))) : ("")), (tab?.subline || this.subline) && (h("span", { class: `subline-wrapper ${this.getSublineAlignment(tab)}` }, h("p", { class: "subline" }, tab?.subline ?? this.subline)))))), h("div", { class: "active-border" }))), h("div", { key: 'fe72e4dd9de7d2a0a490235a3bb18a5d61a8fdbe', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: {
+                display: index === this.internalActiveTabIndex ? "block" : "none",
+            } }, h("slot", { name: `tab-${index}` })))))));
+    }
+    static get watchers() { return {
+        "activeTabIndex": [{
+                "activeTabIndexChanged": 0
+            }]
+    }; }
+};
+IfxTabs.style = tabsCss();
+
+export { IfxTabs as ifx_tabs };

package/dist/esm/ifx-templates-ui.entry.js

@@ -0,0 +1,56 @@
+import { r as registerInstance, a as getElement, e as getAssetPath, h } from './index-CY4s4b6R.js';
+
+const templatesUiCss = () => `*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}`;
+
+const TemplatesUI = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);
+    wizardTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);
+    toggleTemplate(currTemp) {
+        const templates = this.el.shadowRoot
+            .querySelector(".templates__wrapper")
+            .querySelectorAll("ifx-template");
+        templates.forEach((template) => {
+            template.toggleTemplate(currTemp);
+        });
+    }
+    handleError(e) {
+        const alertWrapper = this.el.shadowRoot.querySelector(".alert__wrapper");
+        if (e.detail) {
+            alertWrapper.classList.add("show");
+        }
+        else {
+            alertWrapper.classList.remove("show");
+        }
+    }
+    filterTemplates(e) {
+        const title = this.el.shadowRoot.querySelector(".templates__title");
+        const backBtn = this.el.shadowRoot.querySelector(".back__btn-wrapper");
+        if (e.detail) {
+            title.classList.add("hide");
+            if (e.detail !== "details") {
+                backBtn.classList.add("show");
+            }
+            this.toggleTemplate(e.detail);
+        }
+        else {
+            title.classList.remove("hide");
+            backBtn.classList.remove("show");
+            this.toggleTemplate(null);
+        }
+    }
+    closeAlert() {
+        const alertWrapper = this.el.shadowRoot.querySelector(".alert__wrapper");
+        alertWrapper.classList.remove("show");
+    }
+    render() {
+        return (h("div", { key: 'f30661dd835f27ed2a53867b5035653a6e13d06e', class: "templates__container" }, h("div", { key: 'c62f94398ea8aa2023297a5cfb7863cb7cb82b5f', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: 'c43a1e3a405afdd7f2bc417b9877d5833d3cba75', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '3bb40c0e4143f96c293be948ed1c92e8d8d0290c', class: "alert__wrapper" }, h("ifx-alert", { key: '15fb2f5f2bb6c03d72ca6e8e82f8f82127ee7b40', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '2b24399234e8b18fb43515851221922ded2c26e2', class: "templates__title" }, "Choose your template"), h("div", { key: '2f5e132ad3a82c7ee4a57eb2d34f3eb814b071c2', class: "templates__wrapper" }, h("ifx-template", { key: 'b30f5715c2da6a94bb87b5266e4aab3e7afb0628', name: "template-01", thumbnail: this.tableTemplate }), h("ifx-template", { key: '518920d3551319d985fbfe523d834cfb917eb007', name: "template-02", thumbnail: this.wizardTemplate }))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+TemplatesUI.style = templatesUiCss();
+
+export { TemplatesUI as ifx_templates_ui };

package/dist/esm/ifx-text-field.entry.js

@@ -0,0 +1,129 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CY4s4b6R.js';
+import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
+import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';
+
+const textFieldCss = () => `:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container .delete-icon{position:absolute;right:16px}.textInput__container:not(.readOnly,.disabled) .delete-icon:hover{cursor:pointer}.textInput__container.disabled:not(.readOnly) #text-field{color:#ffffff}.textInput__container.disabled:not(.readOnly) .delete-icon{color:#ffffff}.textInput__container.disabled:not(.readOnly) .textInput__top-wrapper label{color:#bfbbbb}.textInput__container.disabled:not(.readOnly) .textInput__top-wrapper .required{color:#bfbbbb}.textInput__container.disabled:not(.readOnly) .textInput__bottom-wrapper input{border:1px solid #bfbbbb;background-color:#bfbbbb}.textInput__container.disabled:not(.readOnly) .textInput__bottom-wrapper input::placeholder{font-size:1rem;color:#ffffff}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;color:#1d1d1d;flex:none;order:0;flex-grow:0}.textInput__container .textInput__top-wrapper label .optional-required{margin-left:4px}.textInput__container .textInput__top-wrapper label .optional{margin-left:4px}.textInput__container .textInput__top-wrapper label .required{color:#575352;margin-left:4px}.textInput__container .textInput__top-wrapper label .required.error{color:#cd002f}.textInput__container .input-container{position:relative;display:flex;align-items:center;width:100%}.textInput__container .textInput__bottom-wrapper{flex-grow:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper input{width:100%;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;height:40px;background-color:#ffffff;color:#1d1d1d;font-family:var(--ifx-font-family);font-size:1rem;line-height:1.5rem;border:1px solid #8d8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0;text-overflow:ellipsis}.textInput__container .textInput__bottom-wrapper input.input-s{height:36px;font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.input-s::placeholder{font-size:1rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.icon{padding-left:40px}.textInput__container .textInput__bottom-wrapper input.error{border:1px solid #cd002f}.textInput__container .textInput__bottom-wrapper input.error:focus{outline:none}.textInput__container .textInput__bottom-wrapper input.readOnly{border:none;border-radius:var(--borderRadius-12, 1px);border-bottom:1px solid var(--color-engineering-300, #bfbbbb);background:var(--color-base-white, #fff);padding-left:0}.textInput__container .textInput__bottom-wrapper input.readOnly::placeholder{color:#1d1d1d}.textInput__container .textInput__bottom-wrapper input.success{border:1px solid #4ca460}.textInput__container .textInput__bottom-wrapper input.success:focus{outline:none}.textInput__container .textInput__bottom-wrapper input:focus:not(.error,.success):not(.readOnly){outline:none;border:1px solid #0a8276}.textInput__container .textInput__bottom-wrapper input.readOnly:focus,.textInput__container .textInput__bottom-wrapper input[readonly]:focus{outline:none;box-shadow:none;border:none;border-bottom:1px solid var(--color-engineering-300, #bfbbbb)}.textInput__container .textInput__bottom-wrapper input:hover:not(:disabled,:focus,.error,.success):not(.readOnly){border:1px solid #575352}.textInput__container .textInput__bottom-wrapper .input-icon{position:absolute;top:50%;transform:translateY(-50%);left:16px;transition:0.3s;color:#8d8786}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;color:#1d1d1d;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error{color:#cd002f}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled{color:#bfbbbb}`;
+
+const TextField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ifxInput = createEvent(this, "ifxInput", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    inputElement;
+    initialValue = "";
+    get el() { return getElement(this); }
+    /** Placeholder text shown when the field is empty. */
+    placeholder = "Placeholder";
+    /** Name attribute used when submitting the text field in a form. */
+    name;
+    /** Current value of the text field (can be updated programmatically). */
+    value = "";
+    /** If true, shows the text field in an error state. */
+    error = false;
+    /** Label text shown above the text field. */
+    label = "";
+    /** Optional icon shown inside or next to the text field. */
+    icon = "";
+    /** Helper text shown below the text field. */
+    caption = "";
+    /** Size of the text field (e.g. s, m, l). */
+    size = "m";
+    /** Whether a value is required (used for validation). */
+    required = false;
+    /** If true, shows the text field in a success/valid state. */
+    success = false;
+    /** If true, the text field is disabled and not interactive. */
+    disabled = false;
+    /** If true, the text field is read-only but focusable. */
+    readOnly = false;
+    /** Maximum number of characters allowed. */
+    maxlength;
+    /** If true, shows a delete/clear icon to remove the current value. */
+    showDeleteIcon = false;
+    /** Native autocomplete attribute value. */
+    autocomplete = "on";
+    /** Input type for the field (text or password). */
+    type = "text";
+    /** Internal ID used to link label and input elements. */
+    internalId = "text-field";
+    internalType;
+    /** Fired when the user types or the value changes. */
+    ifxInput;
+    // @Prop({ reflect: true })
+    // resetOnSubmit: boolean = false;
+    internals;
+    valueWatcher(newValue) {
+        const normalizedValue = newValue ?? "";
+        if (this.inputElement && normalizedValue !== this.inputElement.value) {
+            this.inputElement.value = normalizedValue;
+        }
+        this.syncFormValue(normalizedValue);
+    }
+    syncFormValue(value = this.value ?? "") {
+        this.internals.setFormValue(value);
+    }
+    /** Resets the text field value and clears the underlying input element. */
+    async reset() {
+        this.value = "";
+        if (this.inputElement) {
+            this.inputElement.value = "";
+        }
+        this.syncFormValue("");
+    }
+    formResetCallback() {
+        this.value = this.initialValue;
+        if (this.inputElement) {
+            this.inputElement.value = this.initialValue;
+        }
+        this.syncFormValue(this.initialValue);
+    }
+    handleDeleteContent() {
+        if (!this.disabled && !this.readOnly) {
+            this.reset();
+            this.ifxInput.emit(this.value);
+        }
+    }
+    handleInput() {
+        const query = this.inputElement.value;
+        this.value = query;
+        this.ifxInput.emit(this.value);
+    }
+    handleTypeProp() {
+        this.internalType =
+            this.type === "text" || this.type === "password" ? this.type : "text";
+    }
+    componentWillLoad() {
+        this.handleTypeProp();
+        this.initialValue = this.value ?? "";
+        this.syncFormValue(this.initialValue);
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-text-field", await framework);
+        }
+    }
+    render() {
+        return (h("div", { key: 'e036d5d5ae2432cfab635503a23f4c7602e11413', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.readOnly ? "readOnly" : ""} ${this.disabled && !this.error ? "disabled" : ""}` }, h("div", { key: '55c06b14b80e2be6d04f3a13beabe09de9653a1a', class: "textInput__top-wrapper" }, this.label && (h("label", { key: 'a86b27abe030413baebbf7661eb0eca81678ac65', htmlFor: this.internalId }, h("span", { key: '95ae82198df9bf88085eef21dd890aacbc9690a0' }, this.label), this.required && (h("span", { key: '093fae8e12942b09dc11272538963b1865d827d7', class: `required ${this.error && !this.readOnly ? "error" : ""}` }, "*"))))), h("div", { key: '4127821b00f0561df74b22aca8fd7018929f71e3', class: "textInput__bottom-wrapper" }, h("div", { key: '803c3309e58f2ea6be0422b221c9dcdd405d058b', class: "input-container" }, this.icon && h("ifx-icon", { key: 'bcaf9640edafbd1a06030580bb7acd47ee6e35dc', class: "input-icon", icon: this.icon }), h("input", { key: 'd60901bed92b149d062115c874ece8ab00618e73', ref: (el) => (this.inputElement = el), disabled: this.disabled && !this.error, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, readonly: this.readOnly, maxlength: this.maxlength, class: `${this.icon ? "icon" : ""}
+                ${this.error ? "error" : ""} 
+								${this.readOnly ? "readOnly" : ""} 
+              ${this.size === "s" ? "input-s" : ""}
+              ${this.success ? "success" : ""}` }), this.showDeleteIcon && this.value && (h("ifx-icon", { key: 'aec05d3c8c4bc167891570bc642f11b410947c97', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && (h("div", { key: 'bc4721ea2a96a58da3f5da91a52b9feb84b3ce64', class: `textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? "error" : ""} ${this.disabled && !this.readOnly && !this.error ? "disabled" : ""}` }, this.caption)))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "valueWatcher": 0
+            }]
+    }; }
+};
+TextField.style = textFieldCss();
+
+export { TextField as ifx_text_field };