@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/radio-button-group/radio-button-group.js

@@ -0,0 +1,278 @@
+import { h, } 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 RadioButtonGroup {
+    errorStates = new Map();
+    el;
+    /** Layout direction of the checkbox group (horizontal or vertical). */
+    alignment = "vertical";
+    /** Size of the checkbox group (e.g. small, medium). */
+    size;
+    /** Whether to show the group label above the checkboxes. */
+    showGroupLabel;
+    /** Text used as the group label. */
+    groupLabelText = "Group Label Text";
+    /** Whether to show a caption under the group. */
+    showCaption;
+    /** Text used for the caption below the group. */
+    captionText;
+    /** Whether to show an icon next to the caption text. */
+    showCaptionIcon;
+    /** Whether selecting at least one checkbox is required. */
+    required = false;
+    hasErrors = false;
+    handleRadioButtonError(event) {
+        const radioButton = event.target;
+        if (radioButton.tagName.toLowerCase() === "ifx-radio-button") {
+            this.errorStates.set(radioButton, event.detail);
+            this.updateHasErrors();
+        }
+    }
+    /** Method to set the error state of all radio-butttons in the group */
+    async setGroupError(error) {
+        const radioButtons = Array.from(this.el.querySelectorAll("ifx-radio-button"));
+        radioButtons.forEach((radioButton) => {
+            radioButton.error = error;
+        });
+    }
+    componentWillLoad() {
+        this.initializeState();
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-radio-button-group", await framework);
+        }
+    }
+    handleSlotChange = () => {
+        this.initializeState();
+    };
+    initializeState() {
+        this.errorStates.clear();
+        const radioButtons = Array.from(this.el.querySelectorAll("ifx-radio-button"));
+        radioButtons.forEach((radioButton) => {
+            if (!this.errorStates.has(radioButton)) {
+                this.errorStates.set(radioButton, radioButton.error || false);
+            }
+        });
+        this.updateHasErrors();
+    }
+    updateHasErrors() {
+        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
+    }
+    render() {
+        return (h("div", { key: '04cc6baab4aab398b0a827f4c824d047368f92e8', class: "radio-button-group-container" }, this.showGroupLabel && (h("div", { key: '1f72da5b0269cdc66368da264a0c8549a8f61deb', class: "group-label" }, this.groupLabelText, this.required && (h("span", { key: '346b1392c9b0a36f4002b16ff2928d235f33dd13', class: `required ${this.hasErrors ? "error" : ""}` }, "*")))), h("div", { key: 'cb07b32ae38f0867ba17ff6fa211b3c98e4ac29c', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '3a7ae6a066ce46844c2381fcaf41938b7c9ee347', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? "error" : "default"}` }, this.showCaptionIcon ? (h("div", { class: "caption-icon" }, h("ifx-icon", { icon: "c-info-16" }))) : (""), h("div", { class: "caption-text" }, this.captionText))) : ("")));
+    }
+    static get is() { return "ifx-radio-button-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio-button-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio-button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"horizontal\" | \"vertical\"",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction of the checkbox group (horizontal or vertical)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alignment",
+                "defaultValue": "\"vertical\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the checkbox group (e.g. small, medium)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            },
+            "showGroupLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the group label above the checkboxes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-group-label"
+            },
+            "groupLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text used as the group label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group-label-text",
+                "defaultValue": "\"Group Label Text\""
+            },
+            "showCaption": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a caption under the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-caption"
+            },
+            "captionText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text used for the caption below the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caption-text"
+            },
+            "showCaptionIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show an icon next to the caption text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-caption-icon"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether selecting at least one checkbox is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasErrors": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setGroupError": {
+                "complexType": {
+                    "signature": "(error: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "error",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to set the error state of all radio-butttons in the group",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "ifxError",
+                "method": "handleRadioButtonError",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/search-bar/search-bar.css

@@ -0,0 +1,60 @@
+:host {
+  width: 100%;
+  display: flex;
+}
+
+.search-bar {
+  box-sizing: border-box;
+  height: 40px;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  font-family: var(--ifx-font-family);
+}
+.search-bar.closed {
+  display: flex;
+  width: auto;
+  justify-content: flex-start;
+}
+.search-bar .search-bar-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+}
+.search-bar .search-bar-wrapper a {
+  text-decoration: none;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.5rem;
+  color: #0a8276;
+  cursor: pointer;
+}
+.search-bar .search-bar-wrapper a:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0a8276;
+}
+.search-bar .search-bar-wrapper ifx-search-field {
+  width: 100%;
+}
+.search-bar .search-bar__icon-wrapper {
+  display: none;
+  flex-direction: row;
+  align-items: center;
+}
+.search-bar .search-bar__icon-wrapper ifx-icon:hover {
+  cursor: pointer;
+}
+.search-bar .search-bar__icon-wrapper:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0a8276;
+}
+.search-bar.closed .search-bar__icon-wrapper {
+  display: flex;
+}
+.search-bar.closed .search-bar-wrapper {
+  display: none;
+}

package/dist/collection/components/search-bar/search-bar.js

@@ -0,0 +1,323 @@
+import { h, } from "@stencil/core";
+import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
+import { detectFramework } from "../..//shared/utils/framework-detection";
+import { trackComponent } from "../../shared/utils/tracking";
+import { sanitizeHref } from "../../shared/utils/url-utils";
+export class SearchBar {
+    el;
+    /**
+     * Controls whether the search bar is expanded (open) or collapsed.
+     * This is mirrored into internal state and drives the visible UI.
+     */
+    isOpen = true;
+    /**
+     * Disables user interaction with the search field and close control.
+     */
+    disabled = false;
+    /**
+     * Current input value of the search field.
+     * This is updated when the field emits input events.
+     */
+    value;
+    /**
+     * Maximum allowed length for the search input.
+     */
+    maxlength;
+    /**
+     * Autocomplete behavior passed to the underlying search field.
+     */
+    autocomplete = "on";
+    /**
+     * Toggles the close button outside the input field
+     */
+    showCloseButton = true;
+    /**
+     * Emits when the search input value changes.
+     */
+    ifxInput;
+    /**
+     * Emits when the search bar is opened or closed.
+     * Payload is the new open state.
+     */
+    ifxOpen;
+    internalState;
+    pendingFocus = false;
+    /**
+     * Opens the search bar when triggered programatically
+     * Emits `ifxOpen` with `false` and updates internal state.
+     */
+    async open() {
+        this.pendingFocus = true;
+        this.internalState = true;
+    }
+    /**
+    * Closes the search bar when triggered programatically
+    * Emits `ifxOpen` with `true` and updates internal state.
+    */
+    async close() {
+        this.internalState = false;
+        this.ifxOpen.emit(false);
+    }
+    handlePropChange() {
+        this.internalState = this.isOpen;
+    }
+    handleCloseButton = () => {
+        const newState = !this.internalState;
+        if (newState)
+            this.pendingFocus = true;
+        this.internalState = newState;
+        this.ifxOpen.emit(newState);
+    };
+    setInitialState() {
+        this.internalState = this.isOpen;
+    }
+    componentWillLoad() {
+        this.setInitialState();
+        //this.ifxOpen.emit(this.internalState);
+    }
+    componentDidUpdate() {
+        if (this.pendingFocus) {
+            this.pendingFocus = false;
+            const searchField = this.el.shadowRoot?.querySelector('ifx-search-field');
+            if (typeof searchField?.setFocus === 'function') {
+                searchField.setFocus();
+            }
+        }
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-search-bar", await framework);
+        }
+    }
+    handleInput(event) {
+        this.value = event.detail;
+    }
+    handleOpenSearchKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.handleCloseButton();
+        }
+    };
+    render() {
+        return (h("div", { key: 'e6fb09717914d5b2bf1f14ce678f409042031343', role: "search", "aria-label": "a search field for user input", "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? "open" : "closed"}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), this.showCloseButton &&
+            h("a", { "aria-label": "Close button", href: sanitizeHref("javascript:void(0)"), onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton, role: "button", tabindex: "0", "aria-label": "Open search bar", onKeyDown: this.handleOpenSearchKeyDown }, h("ifx-icon", { icon: "search-16" })))));
+    }
+    static get is() { return "ifx-search-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["search-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["search-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the search bar is expanded (open) or collapsed.\nThis is mirrored into internal state and drives the visible UI."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-open",
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables user interaction with the search field and close control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current input value of the search field.\nThis is updated when the field emits input events."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum allowed length for the search input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Autocomplete behavior passed to the underlying search field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "\"on\""
+            },
+            "showCloseButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the close button outside the input field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-close-button",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxInput",
+                "name": "ifxInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the search input value changes."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxOpen",
+                "name": "ifxOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the search bar is opened or closed.\nPayload is the new open state."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the search bar when triggered programatically\nEmits `ifxOpen` with `false` and updates internal state.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the search bar when triggered programatically\nEmits `ifxOpen` with `true` and updates internal state.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "handlePropChange"
+            }];
+    }
+}