@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/chip/chip.js

@@ -0,0 +1,581 @@
+import { h, Host, } from "@stencil/core";
+import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
+import { detectFramework } from "../..//shared/utils/framework-detection";
+import { trackComponent } from "../../shared/utils/tracking";
+export class Chip {
+    chip;
+    /** 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 (!isNestedInIfxComponent(this.chip)) {
+            const framework = detectFramework();
+            trackComponent("ifx-chip", await framework);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'd1c400b96e90bc2794760b9e32e9c2f2774a779b', onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: 'eabce9e9321aae90066cfc163bf25e1157ed3157', class: "chip", part: "chip" }, 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 && (h("div", { key: 'e6dd0ee25908c8bbe12b27ff5c06f29d45307827', class: "icon__wrapper" }, h("ifx-icon", { key: 'f2b2c0fad6f500fce21650879feed24f24afbe7c', icon: this.icon }))), 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 && (h("div", { key: '98cd3c639d42910e1fbbb3c358dcb1c1451eca6c', class: "label__selected-options" }, this.getSelectedOptions())), this.selectedOptions.length > 2 && this.variant === "multi" && (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)) && (h("div", { key: 'e6317861a310848af8f5cb20b4713bd515a4a5c7', class: "wrapper__open-button" }, h("ifx-icon", { key: 1, icon: `chevron-down-16` }))), this.selectedOptions.length >= 1 && this.variant === "multi" && (h("div", { key: '8eba943790151e31318a55e6e78146700c65c4ed', class: "wrapper__unselect-button", onClick: !this.readOnly && !this.disabled
+                ? (e) => {
+                    this.handleUnselectButtonClick(e);
+                }
+                : undefined }, h("ifx-icon", { key: 2, icon: `cross16` })))), this.opened && !this.readOnly && (h("div", { key: '62335f91449c2fb42662645008c836b5ab65eb8b', id: "dropdown", role: "listbox", class: "chip__dropdown" }, h("slot", { key: 'c924d75a39a919e45d94c4437a7e0828febc9b94' }))))));
+    }
+    static get is() { return "ifx-chip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "\"\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"small\" | \"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Component size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"medium\""
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Array<string> | string",
+                    "resolved": "string | string[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current selection (mutable)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "undefined"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"single\" | \"multi\"",
+                    "resolved": "\"multi\" | \"single\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selection mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"single\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"outlined\" | \"filled-light\" | \"filled-dark\"",
+                    "resolved": "\"filled-dark\" | \"filled-light\" | \"outlined\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual theme"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "\"outlined\""
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Read-only state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
+            },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA Label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabeled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets Icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "opened": {},
+            "selectedOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxChange",
+                "name": "ifxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on selection change."
+                },
+                "complexType": {
+                    "original": "{\n\t\tpreviousSelection: Array<ChipItemSelectEvent>;\n\t\tcurrentSelection: Array<ChipItemSelectEvent>;\n\t\tname: string;\n\t}",
+                    "resolved": "{ previousSelection: ChipItemSelectEvent[]; currentSelection: ChipItemSelectEvent[]; name: string; }",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "ChipItemSelectEvent": {
+                            "location": "import",
+                            "path": "./interfaces",
+                            "id": "src/components/chip/interfaces.tsx::ChipItemSelectEvent",
+                            "referenceLocation": "ChipItemSelectEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "chip"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "readOnly",
+                "methodName": "handleReadOnlyChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mousedown",
+                "method": "closeDropdownOnOutsideClick",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "ifxChipItemSelect",
+                "method": "updateSelectedOptions",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/chip/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/content-switcher/content-switcher-item.css

@@ -0,0 +1,38 @@
+.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;
+}

package/dist/collection/components/content-switcher/content-switcher-item.js

@@ -0,0 +1,65 @@
+import { Host, h } from "@stencil/core";
+export class ContentSwitcherItem {
+    /** Wether this option is currently selected. */
+    selected = false;
+    /** Value associated with this option. */
+    value;
+    render() {
+        return (h(Host, { key: '5c8f55164bcc5b187c86c4ce294bbffd5081513b' }, h("button", { key: '9ea2f6b9783acc66249247d47be45983fb9dc731', class: "ifx-content-switcher-item" + (this.selected ? " selected" : "") }, h("slot", { key: 'f0083ba3168297577de1b56b00eb04e0016bfaf2' }))));
+    }
+    static get is() { return "ifx-content-switcher-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./content-switcher-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["content-switcher-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether this option is currently selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value associated with this option."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+}