@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/cjs/ifx-chip.cjs.entry.js

@@ -0,0 +1,340 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const chipCss = () => `:host{display:inline-block}.chip{position:relative;padding:4px}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border-radius:9999px;background:var(--color-base-white, #fff);cursor:pointer;font-family:var(--ifx-font-family);font:400 0.875rem/1.25rem "Source Sans 3"}.chip__wrapper .icon__wrapper{display:flex}.chip__wrapper.outlined,.chip__wrapper.filled-dark,.chip__wrapper.filled-light{outline:2px solid transparent}.chip__wrapper.outlined:focus-visible,.chip__wrapper.filled-dark:focus-visible,.chip__wrapper.filled-light:focus-visible{outline:2px solid #0a8276;outline-offset:2px}.chip__wrapper.outlined.chip__wrapper--opened .wrapper__open-button,.chip__wrapper.filled-dark.chip__wrapper--opened .wrapper__open-button,.chip__wrapper.filled-light.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.outlined.chip__wrapper--selected .wrapper__label .label__selected-options,.chip__wrapper.filled-dark.chip__wrapper--selected .wrapper__label .label__selected-options,.chip__wrapper.filled-light.chip__wrapper--selected .wrapper__label .label__selected-options{font:400 0.875rem/1.25rem "Source Sans 3";font-family:var(--ifx-font-family)}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only),.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only){background-color:#0a8276;color:white}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only):hover,.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only):hover{background-color:#08665c}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only):hover.disabled,.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only):hover.disabled{background-color:#0a8276}.chip__wrapper.outlined{border:1px solid #8d8786}.chip__wrapper.outlined:hover:not(.read-only){background-color:#eeeded}.chip__wrapper.outlined:active:not(.read-only){background-color:#bfbbbb}.chip__wrapper.outlined.chip__wrapper--selected{color:#0a8276;border:3px solid #0a8276;background:var(--color-base-white, #fff)}.chip__wrapper.outlined.chip__wrapper--selected:focus-visible{outline:2px solid #0a8276;outline-offset:2px}.chip__wrapper.outlined.chip__wrapper--selected.read-only{outline:none}.chip__wrapper.outlined.chip__wrapper--selected.read-only.disabled{border:1px solid #bfbbbb}.chip__wrapper.outlined.disabled{outline:none;color:#bfbbbb;border:1px solid #bfbbbb}.chip__wrapper.outlined.disabled:hover{outline:none;border-color:#bfbbbb;background-color:white}.chip__wrapper.outlined.read-only{border:1px solid #8d8786}.chip__wrapper.outlined.read-only.disabled{border:1px solid #bfbbbb}.chip__wrapper.filled-dark{background-color:#3c3a39;color:white}.chip__wrapper.filled-dark:hover:not(.chip__wrapper--selected,.disabled,.read-only){background-color:#575352}.chip__wrapper.filled-dark:active:not(.chip__wrapper--selected,.disabled,.read-only){background-color:#8d8786;color:black}.chip__wrapper.filled-dark.disabled{outline:none;color:#bfbbbb}.chip__wrapper.filled-dark.disabled:hover:not(.chip__wrapper--selected){background-color:#3c3a39}.chip__wrapper.filled-light{background-color:#eeeded}.chip__wrapper.filled-light:hover:not(.read-only){background-color:#bfbbbb}.chip__wrapper.filled-light:active:not(.read-only){background-color:#8d8786}.chip__wrapper.filled-light.disabled{outline:none;color:#bfbbbb}.chip__wrapper.filled-light.disabled:hover:not(.chip__wrapper--selected){background-color:#eeeded}.chip__wrapper.filled-light.chip__wrapper--selected.read-only.disabled{border:none}.chip__wrapper.filled-light.read-only.disabled{border:none}.chip__wrapper.read-only{cursor:default}.chip__wrapper.read-only:hover,.chip__wrapper.read-only:focus,.chip__wrapper.read-only:focus-visible,.chip__wrapper.read-only:active{outline:none;box-shadow:none}.chip__wrapper.chip__wrapper--small{padding:4px 8px;height:24px}.chip__wrapper.chip__wrapper--medium{padding:4px 12px;height:28px}.chip__wrapper.chip__wrapper--large{padding:8px 12px;height:36px}.wrapper__label{display:inline-flex;align-items:center;gap:4px;font-family:var(--ifx-font-family)}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem "Source Sans 3";font-family:var(--ifx-font-family)}.wrapper__open-button{display:flex;align-items:center}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0 1px 1px 0 rgba(29, 29, 29, 0.12), 0 0 1px 0 rgba(29, 29, 29, 0.12);border:1px solid #eeeded;border-radius:1px;padding:8px 0;min-width:222px;background-color:#ffffff;font-family:var(--ifx-font-family)}`;
+
+const Chip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxChange = index.createEvent(this, "ifxChange", 7);
+    }
+    get chip() { return index.getElement(this); }
+    /** Fires on selection change. */
+    ifxChange;
+    /** Placeholder text */
+    placeholder = "";
+    /** Component size */
+    size = "medium";
+    /** Current selection (mutable) */
+    value = undefined;
+    /** Selection mode */
+    variant = "single";
+    /** Visual theme */
+    theme = "outlined";
+    /** Read-only state */
+    readOnly = false;
+    /** ARIA Label text */
+    ariaLabelText;
+    /** Disabeled state */
+    disabled = false;
+    /** Sets Icon */
+    icon = "";
+    opened = false;
+    selectedOptions = [];
+    handleValueChange(newValue) {
+        this.syncSelectedOptionsWithProp(newValue);
+    }
+    handleReadOnlyChange(newValue) {
+        if (newValue) {
+            this.opened = false;
+        }
+    }
+    closeDropdownOnOutsideClick(event) {
+        const path = event.composedPath();
+        const chipWrapper = this.chip.shadowRoot.querySelector(".chip__wrapper");
+        const chipDropdown = this.chip.shadowRoot.querySelector(".chip__dropdown");
+        if (!path.includes(chipDropdown) &&
+            !path.includes(chipWrapper) &&
+            this.opened) {
+            this.toggleDropdownMenu();
+        }
+    }
+    /* @Listen("keydown") */
+    handleKeyDown(event) {
+        // override behavior of all keys except Tab. Users should be able to tab out of the component.
+        if (event.code !== "Tab") {
+            event.preventDefault();
+        }
+        if (event.target.tagName === "IFX-CHIP") {
+            this.handleWrapperKeyDown(event);
+        }
+        else if (event.target.tagName === "IFX-CHIP-ITEM") {
+            this.handleDropdownKeyDown(event);
+        }
+    }
+    updateSelectedOptions(event) {
+        const eventDetail = event.detail;
+        const previousSelection = [
+            ...this.selectedOptions,
+        ];
+        if (this.variant !== "multi") {
+            if (eventDetail.selected) {
+                this.opened = false;
+                const chipItems = this.getChipItems();
+                chipItems.forEach((chipItem) => {
+                    if (chipItem.selected && chipItem !== event.target) {
+                        chipItem.chipState = {
+                            ...chipItem.chipState,
+                            emitIfxChipItemSelect: false,
+                        };
+                        chipItem.selected = false;
+                    }
+                });
+                this.selectedOptions = [eventDetail];
+            }
+            else {
+                this.selectedOptions = [];
+            }
+            this.value = this.selectedOptions[0]
+                ? this.selectedOptions[0].value
+                : undefined;
+        }
+        else {
+            if (eventDetail.selected) {
+                // Prevent duplicate entries
+                if (!this.selectedOptions.find((option) => option.value === eventDetail.value)) {
+                    this.selectedOptions = [...this.selectedOptions, eventDetail];
+                }
+            }
+            else {
+                this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);
+            }
+            this.value = this.selectedOptions.map((option) => option.value);
+        }
+        if (eventDetail.emitIfxChange) {
+            this.ifxChange.emit({
+                previousSelection: previousSelection,
+                currentSelection: this.selectedOptions,
+                name: this.placeholder,
+            });
+        }
+    }
+    getChipItems() {
+        return this.chip.querySelectorAll("ifx-chip-item");
+    }
+    getSelectedOptions() {
+        if (this.variant !== "multi") {
+            return this.selectedOptions.map((option) => option.label).join("");
+        }
+        return this.selectedOptions
+            .slice(0, 2)
+            .map((option) => option.label)
+            .join(", ");
+    }
+    toggleDropdownMenu() {
+        if (this.readOnly)
+            return;
+        this.opened = !this.opened;
+    }
+    /**
+     * Focuses the chip item at the specified index.
+     * @param index the index of the chip item to focus. -1 will focus the last chip item.
+     */
+    focusChipItemAt(index = 0) {
+        this.opened = true;
+        const chipItems = this.getChipItems();
+        let item;
+        if (index === -1) {
+            item = chipItems.item(chipItems.length - 1);
+        }
+        else if (index >= 0 && index < chipItems.length) {
+            item = chipItems.item(index);
+        }
+        else {
+            console.error(`Invalid index: ${index}`);
+            return;
+        }
+        const shadowItem = item.shadowRoot.querySelector(".chip-item");
+        if (shadowItem) {
+            // Delay needed for the shadow item to be rendered.
+            setTimeout(() => {
+                shadowItem.focus();
+            }, 1);
+        }
+    }
+    focusChip() {
+        const chipWrapper = this.chip.shadowRoot.querySelector(".chip__wrapper");
+        chipWrapper.focus();
+    }
+    handleUnselectButtonClick(event) {
+        event.stopPropagation();
+        this.opened = false;
+        let itemGotUnselected = false;
+        const chipItems = this.getChipItems();
+        chipItems.forEach((chipItem) => {
+            if (chipItem.selected) {
+                itemGotUnselected = true;
+                chipItem.chipState = {
+                    ...chipItem.chipState,
+                    emitIfxChipItemSelect: false,
+                };
+                chipItem.selected = false;
+            }
+        });
+        /* Emit event only if at least one item was unselected. */
+        if (itemGotUnselected) {
+            const previousSelection = this.selectedOptions;
+            this.selectedOptions = [];
+            this.value = [];
+            this.ifxChange.emit({
+                previousSelection: previousSelection,
+                currentSelection: [],
+                name: this.placeholder,
+            });
+        }
+    }
+    handleWrapperClick() {
+        if (!this.readOnly) {
+            this.toggleDropdownMenu();
+        }
+    }
+    handleWrapperKeyDown(event) {
+        // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction
+        if (this.readOnly)
+            return;
+        if (!this.opened) {
+            switch (event.code) {
+                case "Space":
+                case "Enter":
+                case "ArrowDown":
+                    this.focusChipItemAt(0);
+                    break;
+                case "ArrowUp":
+                    this.focusChipItemAt(-1);
+                    break;
+            }
+        }
+        else {
+            switch (event.code) {
+                case "Escape":
+                    this.opened = false;
+                    this.focusChip();
+                    break;
+            }
+        }
+    }
+    handleDropdownKeyDown(event) {
+        const chipitems = this.getChipItems();
+        const targetIndex = Array.from(chipitems).indexOf(event.target);
+        if (targetIndex === -1) {
+            console.error("Target not found in chip items");
+            return;
+        }
+        switch (event.code) {
+            case "ArrowDown":
+                if (targetIndex === chipitems.length - 1)
+                    break;
+                this.focusChipItemAt(targetIndex + 1);
+                break;
+            case "ArrowUp":
+                if (targetIndex === 0)
+                    break;
+                this.focusChipItemAt(targetIndex - 1);
+                break;
+            case "Escape":
+                this.opened = false;
+                this.focusChip();
+                break;
+            case "Space":
+                // selection is handled by the chip-item component
+                if (this.variant === "single") {
+                    // only close dropdown if single select
+                    this.opened = false;
+                    this.focusChip();
+                }
+                break;
+            case "Enter":
+                // selection is handled by the chip-item component
+                this.opened = false;
+                this.focusChip();
+                break;
+        }
+    }
+    syncChipState() {
+        const chipItems = this.getChipItems();
+        let key = 0;
+        chipItems.forEach((chipItem) => {
+            chipItem.chipState = {
+                emitIfxChipItemSelect: true,
+                size: this.size ? this.size : "medium",
+                variant: this.variant === "multi" ? "multi" : "single",
+                key: key++,
+            };
+        });
+    }
+    syncSelectedOptionsWithProp(newValue) {
+        // Clear old selected options
+        this.selectedOptions = [];
+        const generateKey = (() => {
+            let count = 0;
+            return () => count++;
+        })();
+        if (Array.isArray(newValue)) {
+            this.selectedOptions = newValue.map((value) => ({
+                value,
+                label: value,
+                selected: true,
+                key: generateKey(),
+                emitIfxChange: true,
+            }));
+        }
+        else if (typeof newValue === "string") {
+            this.selectedOptions = [
+                {
+                    value: newValue,
+                    label: newValue,
+                    selected: true,
+                    key: generateKey(),
+                    emitIfxChange: true,
+                },
+            ];
+        }
+        this.syncChipState();
+    }
+    componentWillLoad() {
+        this.syncSelectedOptionsWithProp(this.value);
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.chip)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-chip", await framework);
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'd1c400b96e90bc2794760b9e32e9c2f2774a779b', onKeyDown: (event) => this.handleKeyDown(event) }, index.h("div", { key: 'eabce9e9321aae90066cfc163bf25e1157ed3157', class: "chip", part: "chip" }, index.h("div", { key: 'c81cdc1e4b30a847c16682d4728f53e33b74117a', class: `chip__wrapper chip__wrapper--${this.size ? this.size : "medium"}
+                  chip__wrapper--${this.variant === "multi" ? "multi" : "single"}
+                  ${this.opened && !this.readOnly ? "chip__wrapper--opened" : ""}
+                  ${this.selectedOptions.length ? "chip__wrapper--selected" : ""}
+                  ${this.theme ? this.theme : "outlined"}
+                  ${this.disabled ? "disabled" : ""}
+                  ${this.readOnly ? "read-only" : ""}`, tabIndex: 0, onClick: !this.readOnly && !this.disabled
+                ? () => {
+                    this.handleWrapperClick();
+                }
+                : undefined, role: "combobox", "aria-label-text": this.ariaLabelText, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? "listbox" : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? "dropdown" : undefined, "aria-readonly": this.readOnly ? "true" : undefined, "aria-multiselectable": this.variant === "multi" ? "true" : undefined, part: "label-wrapper" }, this.icon && (index.h("div", { key: 'e6dd0ee25908c8bbe12b27ff5c06f29d45307827', class: "icon__wrapper" }, index.h("ifx-icon", { key: 'f2b2c0fad6f500fce21650879feed24f24afbe7c', icon: this.icon }))), index.h("div", { key: '2099276fb9a994e7d24d8676c4a851999c8c30ce', class: "wrapper__label", part: "label" }, this.selectedOptions.length === 0 && `${this.placeholder}`, this.selectedOptions.length !== 0 &&
+            this.variant === "multi" &&
+            this.placeholder !== "" &&
+            `${this.placeholder}:`, this.selectedOptions.length !== 0 && (index.h("div", { key: '98cd3c639d42910e1fbbb3c358dcb1c1451eca6c', class: "label__selected-options" }, this.getSelectedOptions())), this.selectedOptions.length > 2 && this.variant === "multi" && (index.h("ifx-indicator", { key: '82989460d146a10712dd731d579e04d7a25ce348', variant: "number", inverted: this.theme === "outlined" ? false : true, number: this.selectedOptions.length - 2 }))), !this.readOnly &&
+            (this.variant !== "multi" ||
+                (this.variant === "multi" &&
+                    this.selectedOptions.length === 0)) && (index.h("div", { key: 'e6317861a310848af8f5cb20b4713bd515a4a5c7', class: "wrapper__open-button" }, index.h("ifx-icon", { key: 1, icon: `chevron-down-16` }))), this.selectedOptions.length >= 1 && this.variant === "multi" && (index.h("div", { key: '8eba943790151e31318a55e6e78146700c65c4ed', class: "wrapper__unselect-button", onClick: !this.readOnly && !this.disabled
+                ? (e) => {
+                    this.handleUnselectButtonClick(e);
+                }
+                : undefined }, index.h("ifx-icon", { key: 2, icon: `cross16` })))), this.opened && !this.readOnly && (index.h("div", { key: '62335f91449c2fb42662645008c836b5ab65eb8b', id: "dropdown", role: "listbox", class: "chip__dropdown" }, index.h("slot", { key: 'c924d75a39a919e45d94c4437a7e0828febc9b94' }))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }],
+        "readOnly": [{
+                "handleReadOnlyChange": 0
+            }]
+    }; }
+};
+Chip.style = chipCss();
+
+exports.ifx_chip = Chip;

package/dist/cjs/ifx-content-switcher-item.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const contentSwitcherItemCss = () => `.ifx-content-switcher-item{all:unset;height:36px;box-sizing:border-box;border-radius:9999px;border:3px solid transparent;padding:7px 20px;font-family:var(--ifx-font-family);font-weight:600;font-size:14px;line-height:20px;display:flex;justify-content:center;align-items:center;gap:8px;background-color:transparent}.ifx-content-switcher-item.selected{color:#0a8276;background-color:#ffffff;border:3px solid #0a8276}.ifx-content-switcher-item:hover{color:#08665c;background-color:#ffffff;border:3px solid #08665c;cursor:pointer}.ifx-content-switcher-item:active{color:#08665c;background-color:#ffffff;border:3px solid #06534b}.ifx-content-switcher-item:focus{color:#08665c;background-color:#ffffff;border:3px solid #08665c}`;
+
+const ContentSwitcherItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Wether this option is currently selected. */
+    selected = false;
+    /** Value associated with this option. */
+    value;
+    render() {
+        return (index.h(index.Host, { key: '5c8f55164bcc5b187c86c4ce294bbffd5081513b' }, index.h("button", { key: '9ea2f6b9783acc66249247d47be45983fb9dc731', class: "ifx-content-switcher-item" + (this.selected ? " selected" : "") }, index.h("slot", { key: 'f0083ba3168297577de1b56b00eb04e0016bfaf2' }))));
+    }
+};
+ContentSwitcherItem.style = contentSwitcherItemCss();
+
+exports.ifx_content_switcher_item = ContentSwitcherItem;

package/dist/cjs/ifx-content-switcher.cjs.entry.js

@@ -0,0 +1,188 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const contentSwitcherCss = () => `.ifx-content-switcher{background-color:#ffffff;border:1px solid #bfbbbb;border-radius:9999px;height:36px;width:fit-content;box-sizing:border-box;display:flex;flex-direction:row;align-items:center}.ifx-content-switcher ::slotted(ifx-content-switcher-item){position:relative}.ifx-content-switcher ::slotted(ifx-content-switcher-item:first-child){left:-1px;margin-right:-1px}.ifx-content-switcher ::slotted(ifx-content-switcher-item:last-child){right:-1px;margin-left:-1px}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider){width:1px;height:20px;background-color:#8d8786;margin:0px 1px;visibility:visible}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider.hidden){visibility:hidden}`;
+
+const ContentSwitcher = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxChange = index.createEvent(this, "ifxChange", 7);
+    }
+    get el() { return index.getElement(this); }
+    items;
+    activeIndex = -1;
+    hoverIndex = -1;
+    focusIndex = -1;
+    dividers = [];
+    /** Fired when the selected option changes. */
+    ifxChange;
+    eventHandlers = new Map();
+    componentWillLoad() {
+        this.items = Array.from(this.el.children);
+        this.initializeDividers();
+        this.addEventListeners();
+        this.ensureSingleSelectedItem();
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-content-switcher", await framework);
+        }
+    }
+    disconnectedCallback() {
+        this.removeEventListeners();
+    }
+    /**
+     * Initialize the dividers between items.
+     */
+    initializeDividers() {
+        this.items.forEach((item, index) => {
+            if (index < this.items.length - 1) {
+                const divider = document.createElement("div");
+                divider.classList.add("ifx-content-switcher-divider");
+                item.after(divider);
+                this.dividers.push(divider);
+            }
+        });
+    }
+    /**
+     * Add event listeners for each item.
+     */
+    addEventListeners() {
+        this.items.forEach((item, index) => {
+            const handlers = {
+                click: () => this.selectItem(index),
+                mouseenter: () => this.handleHover(index, true),
+                mouseleave: () => this.handleHover(index, false),
+                focus: () => this.handleFocus(index, true),
+                blur: () => this.handleFocus(index, false),
+            };
+            Object.keys(handlers).forEach((event) => {
+                item.addEventListener(event, handlers[event]);
+            });
+            this.eventHandlers.set(item, handlers);
+        });
+    }
+    /**
+     * Remove all event listeners.
+     */
+    removeEventListeners() {
+        this.eventHandlers.forEach((handlers, item) => {
+            Object.keys(handlers).forEach((event) => {
+                item.removeEventListener(event, handlers[event]);
+            });
+        });
+        this.eventHandlers.clear();
+    }
+    ensureSingleSelectedItem() {
+        this.items.forEach((item, index) => {
+            const isSelected = item.getAttribute("selected") === "true" ||
+                item.selected;
+            if (isSelected) {
+                if (this.activeIndex < 0) {
+                    this.selectItem(index);
+                }
+                else {
+                    item.removeAttribute("selected");
+                    item.selected = false;
+                }
+            }
+        });
+    }
+    /**
+     * Handle hover events on an item.
+     * @param index - Index of the item.
+     * @param isActive - Whether the item is hovered.
+     */
+    handleHover(index, isActive) {
+        this.hoverIndex = isActive ? index : -1;
+        this.updateDividersOfItem(index);
+    }
+    /**
+     * Handle hover events on an item.
+     * @param index - Index of the item.
+     * @param isActive - Whether the item is focused.
+     */
+    handleFocus(index, isActive) {
+        this.focusIndex = isActive ? index : -1;
+        this.updateDividersOfItem(index);
+    }
+    /**
+     * Update visibility of dividers adjacent to a specific item.
+     * @param itemIndex - Index of the item.
+     */
+    updateDividersOfItem(itemIndex) {
+        if (itemIndex < this.items.length - 1) {
+            this.updateDividerVisibility(itemIndex);
+        }
+        if (itemIndex > 0) {
+            this.updateDividerVisibility(itemIndex - 1);
+        }
+    }
+    /**
+     * Update visibility of a specific divider.
+     * @param dividerIndex - Index of the divider.
+     */
+    updateDividerVisibility(dividerIndex) {
+        const hiddenDividers = new Set([
+            this.activeIndex,
+            this.activeIndex - 1,
+            this.hoverIndex,
+            this.hoverIndex - 1,
+            this.focusIndex,
+            this.focusIndex - 1,
+        ]);
+        this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));
+    }
+    /**
+     * Set the visibility of a specific divider.
+     * @param dividerIndex - Index of the divider.
+     * @param hidden - Whether the divider should be hidden.
+     */
+    setDividerVisibility(dividerIndex, hidden) {
+        if (this.dividers[dividerIndex]) {
+            this.dividers[dividerIndex].classList.toggle("hidden", hidden);
+        }
+    }
+    /**
+     * Select a specific item.
+     * @param itemIndex - Index of the item to be selected.
+     */
+    selectItem(itemIndex) {
+        if (itemIndex === this.activeIndex)
+            return;
+        const oldIndex = this.activeIndex;
+        if (oldIndex >= 0) {
+            this.items[oldIndex].removeAttribute("selected");
+        }
+        this.activeIndex = itemIndex;
+        this.items[itemIndex].setAttribute("selected", "true");
+        this.ifxChange.emit({
+            oldValue: this.getValueOfItem(oldIndex),
+            newValue: this.getValueOfItem(itemIndex),
+        });
+        this.updateDividersOfItem(oldIndex);
+        this.updateDividersOfItem(itemIndex);
+    }
+    /**
+     * Get the value property of the item at a specific index.
+     * Falls back to the index if no value is set.
+     *
+     * @param index - Index of the item.
+     * @returns The value of the item.
+     */
+    getValueOfItem(index) {
+        if (this.items[index] == null)
+            return index.toLocaleString();
+        return this.items[index].getAttribute("value") || index.toLocaleString();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e929f11dfd991a2ef368c31e6b4ccba98a535e86' }, index.h("div", { key: '4097344a1536530a7970264a8eb50743d863e667', class: "ifx-content-switcher", role: "group" }, index.h("slot", { key: '1577704c964d50f55451b037772261a24e39b3a6' }))));
+    }
+};
+ContentSwitcher.style = contentSwitcherCss();
+
+exports.ifx_content_switcher = ContentSwitcher;

package/dist/cjs/ifx-counter.cjs.entry.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const counterCss = () => `:host{display:inline-block;user-select:none}.counter{display:flex;align-items:center;gap:16px}.counter__btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffff;border:1px solid #bfbbbb;color:#bfbbbb;font-family:var(--ifx-font-family);padding:4px;cursor:pointer;box-sizing:border-box}.counter__btn ifx-icon{display:flex;width:16px;height:16px}.counter__btn--minus,.counter__btn--plus{border-color:#0a8276;color:#0a8276}.counter__btn:focus-visible{outline:2px solid #0a8276;outline-offset:2px}.counter__btn:disabled{border-color:#bfbbbb;color:#bfbbbb;cursor:default}.counter__value{width:56px;height:36px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;color:#1d1d1d;font-family:var(--ifx-font-family);font-size:var(--ifx-font-size-s);font-style:normal;font-weight:var(--ifx-font-weight-regular);letter-spacing:var(--ifx-letter-spacing-default);line-height:var(--ifx-line-height-s);text-align:center;border:1px solid #575352;border-radius:1px;background:#ffffff;padding:8px 12px}.counter__value:focus-visible{outline:2px solid #0a8276;outline-offset:2px}`;
+
+const Counter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxChange = index.createEvent(this, "ifxChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    initialValue = 0;
+    /** The current value of the counter. Must be a non-negative number. */
+    value = 0;
+    /** Used as the form field name when the counter is in a form. */
+    name = "";
+    internals;
+    /** Emitted when the counter value changes. Returns the new value as a number. */
+    ifxChange;
+    valueChanged(value) {
+        const nextValue = Math.max(0, value);
+        if (nextValue !== value) {
+            this.value = nextValue;
+            return;
+        }
+        this.updateFormValue();
+    }
+    componentWillLoad() {
+        this.value = Math.max(0, this.value);
+        this.initialValue = this.value;
+        this.updateFormValue();
+    }
+    formResetCallback() {
+        this.value = this.initialValue;
+        this.updateFormValue();
+    }
+    updateValue(value) {
+        const nextValue = Math.max(0, value);
+        if (nextValue === this.value) {
+            return;
+        }
+        this.value = nextValue;
+        this.ifxChange.emit(this.value);
+    }
+    updateFormValue() {
+        this.internals.setFormValue(String(this.value));
+    }
+    increment = () => {
+        this.updateValue(this.value + 1);
+    };
+    decrement = () => {
+        this.updateValue(this.value - 1);
+    };
+    render() {
+        const isDecrementDisabled = this.value === 0;
+        return (index.h("div", { key: 'ca004400b1e98c3ad0804228fc74a4db3c1a7b82', class: "counter" }, index.h("button", { key: 'e73683708ed0a50102f1cf202f46d5ce2192d471', class: "counter__btn counter__btn--minus", type: "button", "aria-label": "Decrease value", disabled: isDecrementDisabled, onClick: this.decrement }, index.h("ifx-icon", { key: '04aac1ab49d277faa5e9df43fd3b09f527b5ddf5', icon: "minus-16" })), index.h("output", { key: '5f9277a1ffa11e8205abf22b6e3538482933b169', class: "counter__value", "aria-label": "Counter value" }, index.h("span", { key: '7918088f5203bc1f6963f25cfc919f3e1c9c538d', class: "counter__value-inner" }, this.value)), index.h("button", { key: 'b04061984cd9d3dde05e3e140d1d494feca7689e', class: "counter__btn counter__btn--plus", type: "button", "aria-label": "Increase value", onClick: this.increment }, index.h("ifx-icon", { key: '9cd8bcf6edced6e11097e55c44c4811863b03c92', icon: "plus-16" }))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+Counter.style = counterCss();
+
+exports.ifx_counter = Counter;