@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/select/single-select/select-group.css

@@ -0,0 +1,24 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.group-heading {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  color: #575352;
+  font-family: var(--ifx-font-family);
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 0.875rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  cursor: default;
+  user-select: none;
+  pointer-events: none;
+}
+
+:host(.group--empty) .group-heading {
+  display: none;
+}

package/dist/collection/components/select/single-select/select-group.js

@@ -0,0 +1,94 @@
+import { Host, h, } from "@stencil/core";
+/**
+ * A non-selectable, greyed group header (like HTML `<optgroup>`) that labels a set
+ * of slotted `ifx-select-option`s. Flat — no expand/collapse. Setting `disabled`
+ * disables every option in the group.
+ */
+export class SelectGroup {
+    el;
+    /** The group heading text. */
+    label;
+    /** Disables every option within the group (like `<optgroup disabled>`). */
+    disabled = false;
+    componentDidLoad() {
+        this.applyDisabledToOptions();
+    }
+    disabledChanged() {
+        this.applyDisabledToOptions();
+    }
+    /** When the group is disabled, disable all of its options. */
+    applyDisabledToOptions() {
+        if (!this.disabled)
+            return;
+        this.el
+            .querySelectorAll("ifx-select-option")
+            .forEach((option) => {
+            option.disabled = true;
+        });
+    }
+    render() {
+        return (h(Host, { key: '0ec60791d075e8574499996cb0847ed0ab72b37b', role: "group", "aria-label": this.label }, h("div", { key: '1f66c57eb30bfc4ac40676a8bfb46e7eab912621', class: "group-heading", "aria-hidden": "true" }, this.label), h("div", { key: '2e1ffa171b35984bed1c0550469f3e96ca4cb88c', class: "group-options" }, h("slot", { key: '7bcc6a41183aef571fe4bf605fcc3ace2924d944' }))));
+    }
+    static get is() { return "ifx-select-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["select-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["select-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The group heading text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables every option within the group (like `<optgroup disabled>`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }];
+    }
+}

package/dist/collection/components/select/single-select/select-option.css

@@ -0,0 +1,65 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+:host(:focus-visible) {
+  outline: none;
+}
+
+.option {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  white-space: nowrap;
+  cursor: pointer;
+  list-style: none;
+  height: var(--ifx-select-option-height, 40px);
+  padding: 0 16px;
+  background-color: #ffffff;
+  font-family: var(--ifx-font-family);
+  font-size: 0.875rem;
+  color: #1d1d1d;
+  transition: background-color 0.2s ease-in-out;
+}
+.option:hover {
+  background-color: #f7f7f7;
+}
+.option--selected {
+  color: #0a8276;
+  font-weight: 600;
+}
+.option--disabled {
+  cursor: default;
+  color: #bfbbbb;
+}
+.option--disabled:hover {
+  background-color: transparent;
+}
+.option.search-hidden {
+  display: none !important;
+}
+.option.search-match .search-highlight {
+  font-weight: 600;
+}
+
+:host(:focus-visible) .option {
+  outline: 2px solid #0a8276;
+  outline-offset: -2px;
+}
+
+.option-label {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.option-check {
+  flex-shrink: 0;
+  color: #0a8276;
+}

package/dist/collection/components/select/single-select/select-option.js

@@ -0,0 +1,241 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A single selectable option inside an `ifx-select`. Provided as a slotted child
+ * (optionally wrapped in an `ifx-select-group`). Mirrors the multi-select option
+ * pattern but simplified for single selection — no checkbox, nesting or chevron.
+ */
+export class SelectOption {
+    el;
+    /** Value associated with this option (used for selection and events). */
+    value;
+    /** Whether this option is currently selected. */
+    selected = false;
+    /** Whether this option is disabled and not interactive. */
+    disabled = false;
+    searchTerm = "";
+    isSearchActive = false;
+    componentDidLoad() {
+        this.notifySelect("registered");
+        this.el.addEventListener("ifx-search-filter", this.handleSearchFilter);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener("ifx-search-filter", this.handleSearchFilter);
+        this.notifySelect("removed");
+    }
+    handleClick(event) {
+        if (this.disabled)
+            return;
+        event.stopPropagation();
+        this.select();
+    }
+    handleKeyDown(event) {
+        if (this.disabled)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.select();
+        }
+    }
+    selectedChanged(newVal) {
+        if (newVal) {
+            this.notifySelect("selected");
+        }
+    }
+    select() {
+        // Single-select: selecting is not a toggle. The parent deselects the others.
+        this.selected = true;
+        this.notifySelect("selected");
+    }
+    /** Bubbles a lifecycle/selection notification to the parent `ifx-select`. */
+    notifySelect(reason) {
+        this.el.dispatchEvent(new CustomEvent("ifx-option-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.value, selected: this.selected, reason },
+        }));
+    }
+    /** Plain-text label from the slotted content (used for value display + search). */
+    getTextContent() {
+        return (this.el.textContent || "").trim() || this.value || "";
+    }
+    handleSearchFilter = (event) => {
+        this.searchTerm = (event.detail.searchTerm || "").toLowerCase();
+        this.isSearchActive = event.detail.isActive;
+        // Flat leaf option — no child states to await, so update synchronously
+        // (exact substring match, so numeric queries like "2026" don't match "2020").
+        this.updateSearchClasses();
+    };
+    updateSearchClasses() {
+        const optionDiv = this.el.shadowRoot?.querySelector(".option");
+        if (!optionDiv)
+            return;
+        optionDiv.classList.remove("search-hidden", "search-match");
+        if (!this.isSearchActive) {
+            this.removeHighlighting();
+            return;
+        }
+        const matches = this.getTextContent()
+            .toLowerCase()
+            .includes(this.searchTerm);
+        if (matches) {
+            optionDiv.classList.add("search-match");
+            this.highlightSearchTerm();
+        }
+        else {
+            optionDiv.classList.add("search-hidden");
+            this.removeHighlighting();
+        }
+    }
+    highlightSearchTerm() {
+        if (!this.searchTerm)
+            return;
+        const labelElement = this.el.shadowRoot?.querySelector(".option-label");
+        const slotElement = labelElement?.querySelector("slot");
+        if (!labelElement || !slotElement)
+            return;
+        this.removeHighlighting();
+        const original = this.getTextContent();
+        const index = original.toLowerCase().indexOf(this.searchTerm);
+        if (index === -1)
+            return;
+        const before = original.substring(0, index);
+        const match = original.substring(index, index + this.searchTerm.length);
+        const after = original.substring(index + this.searchTerm.length);
+        const wrapper = document.createElement("span");
+        wrapper.className = "highlighted-text";
+        if (before)
+            wrapper.appendChild(document.createTextNode(before));
+        const strong = document.createElement("strong");
+        strong.className = "search-highlight";
+        strong.textContent = match;
+        wrapper.appendChild(strong);
+        if (after)
+            wrapper.appendChild(document.createTextNode(after));
+        labelElement.setAttribute("data-original-content", "true");
+        slotElement.style.display = "none";
+        labelElement.appendChild(wrapper);
+    }
+    removeHighlighting() {
+        const labelElement = this.el.shadowRoot?.querySelector(".option-label");
+        if (!labelElement)
+            return;
+        const slotElement = labelElement.querySelector("slot");
+        const highlighted = labelElement.querySelector(".highlighted-text");
+        if (highlighted)
+            labelElement.removeChild(highlighted);
+        if (slotElement)
+            slotElement.style.display = "";
+        labelElement.removeAttribute("data-original-content");
+    }
+    render() {
+        return (h(Host, { key: '7b30e6f04c44edb04f3b2fbb99571a1198d0cacc', tabIndex: -1 }, h("div", { key: '0236a2e4cc64351bc65bfd39857faa1470caa792', class: {
+                option: true,
+                "option--disabled": this.disabled,
+                "option--selected": this.selected,
+            }, role: "option", "aria-selected": this.selected ? "true" : "false", "aria-disabled": this.disabled ? "true" : "false", "data-value": this.value, tabIndex: -1 }, h("div", { key: '6172be05b92348fd9291df75ac0cf34fa1246699', class: "option-label" }, h("slot", { key: 'efe2f33c4f2e6d123ed9808867e640996d3f87e8' })), this.selected && h("ifx-icon", { key: '251b90e0ed35b1c685266bf69990a7899e31f958', class: "option-check", icon: "check16" }))));
+    }
+    static get is() { return "ifx-select-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["select-option.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["select-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value associated with this option (used for selection and events)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this option is currently selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this option is disabled and not interactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "searchTerm": {},
+            "isSearchActive": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selected",
+                "methodName": "selectedChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/select/single-select/select.css

@@ -0,0 +1,213 @@
+.ifx-select-container {
+  position: relative;
+  box-sizing: border-box;
+  font-family: var(--ifx-font-family);
+}
+.ifx-select-container.disabled .ifx-label-wrapper {
+  color: #bfbbbb;
+}
+.ifx-select-container.disabled .ifx-select-wrapper {
+  background: #bfbbbb;
+  color: #ffffff;
+  border-color: #bfbbbb;
+  cursor: default;
+  user-select: none;
+}
+.ifx-select-container.readOnly {
+  cursor: text;
+}
+.ifx-select-container.readOnly .ifx-select-wrapper {
+  border: none;
+  border-bottom: 1px solid #bfbbbb;
+  pointer-events: none;
+  padding-left: 0;
+}
+.ifx-select-container.readOnly .ifx-select-wrapper .ifx-clear-button {
+  display: none;
+}
+.ifx-select-container.readOnly .ifx-select-wrapper .icon-wrapper-down,
+.ifx-select-container.readOnly .ifx-select-wrapper .icon-wrapper-up {
+  color: #bfbbbb;
+}
+.ifx-select-container:not(.readOnly):not(.disabled):hover {
+  cursor: pointer;
+}
+.ifx-select-container.small-select .ifx-select-wrapper {
+  height: 36px;
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.ifx-select-container.medium-select .ifx-select-wrapper {
+  height: 40px;
+  padding: 8px 16px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.ifx-select-container.small-select .ifx-select-options {
+  --ifx-select-option-height: 32px;
+}
+.ifx-select-container.medium-select .ifx-select-options {
+  --ifx-select-option-height: 40px;
+}
+
+.ifx-label-wrapper {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+  max-width: 100%;
+}
+.ifx-label-wrapper .required {
+  margin-left: 4px;
+}
+.ifx-label-wrapper .required.error {
+  color: #cd002f;
+}
+
+.single__select-caption {
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: #1d1d1d;
+}
+.single__select-caption.error {
+  color: #cd002f;
+}
+.single__select-caption.disabled {
+  color: #bfbbbb;
+}
+
+.ifx-select-wrapper {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: #ffffff;
+  border: 1px solid #8d8786;
+  border-radius: 1px;
+  font-weight: 400;
+}
+.ifx-select-wrapper:focus-visible {
+  outline: none;
+}
+.ifx-select-wrapper:focus-visible:not(.active):not(:active) {
+  outline: none;
+}
+.ifx-select-wrapper:focus-visible:not(.active):not(:active)::before {
+  content: "";
+  position: absolute;
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 2px solid #0a8276;
+  border-radius: 2px;
+}
+.ifx-select-wrapper.error {
+  border-color: #cd002f;
+}
+.ifx-select-wrapper.active {
+  border-color: #0a8276 !important;
+}
+.ifx-select-wrapper.active .icon-wrapper-up {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 8px;
+}
+.ifx-select-wrapper.active .icon-wrapper-down {
+  display: none;
+}
+.ifx-select-wrapper:not(.disabled):not(.readOnly):hover:not(.active, :focus) {
+  border-color: #575352;
+}
+.ifx-select-wrapper .icon-wrapper-up {
+  display: none;
+}
+.ifx-select-wrapper .icon-wrapper-up:hover {
+  cursor: pointer;
+}
+.ifx-select-wrapper .icon-wrapper-down {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 8px;
+}
+.ifx-select-wrapper .icon-wrapper-down:hover {
+  cursor: pointer;
+}
+.ifx-select-wrapper.is-flipped .ifx-select-dropdown-menu {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+
+.ifx-select-input {
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ifx-select-input.placeholder {
+  color: #8d8786;
+}
+.ifx-select-container.disabled .ifx-select-input.placeholder {
+  color: #ffffff;
+}
+
+.ifx-select-icon-container {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ifx-clear-button {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.ifx-select-dropdown-menu {
+  box-sizing: border-box;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  margin-top: 4px;
+  padding-bottom: 8px;
+  border: 1px solid #eeeded;
+  background-color: #ffffff;
+  box-shadow: 0 1px 1px 0 rgba(29, 29, 29, 0.12), 0 0 1px 0 rgba(29, 29, 29, 0.12);
+  max-height: 300px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+}
+
+.ifx-select-dropdown-search {
+  padding: 12px 16px;
+  border-bottom: 1px solid #eeeded;
+  flex-shrink: 0;
+}
+
+.ifx-select-options {
+  flex: 1;
+  overflow-y: auto;
+  padding-top: 8px;
+}
+.ifx-select-options.show-no-results .ifx-select-no-results {
+  display: block;
+}
+
+.ifx-select-no-results {
+  padding: 8px 16px;
+  color: #8d8786;
+  font-size: 0.875rem;
+  display: none;
+}