@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/switch/switch.css

@@ -0,0 +1,116 @@
+/**
+* Switch Component Styles
+* 
+* Styling Approach
+* ----------------
+* - **Design Tokens**: Uses `@infineon/design-system-tokens` for consistent spacing, colors
+* - **SCSS**: Compiled by Stencil's SASS plugin (configured in stencil.config.ts)
+* - **Shadow DOM**: Styles are scoped via Shadow DOM, `:host` targets the component root
+* - **BEM-like naming**: `.switch__element` pattern for component-scoped class names
+*/
+:host {
+  display: inline-block;
+  user-select: none;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.container.gap {
+  gap: 16px;
+}
+
+.switch__checkbox-container {
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 32px;
+  height: 16px;
+  background-color: #ffffff;
+  border: 1px solid #575352;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  outline: none;
+}
+.switch__checkbox-container:focus {
+  outline: 4px solid #0a8276;
+  outline-offset: 2px;
+}
+.switch__checkbox-container:focus:not(:focus-visible) {
+  outline: none;
+}
+.switch__checkbox-container:focus-visible {
+  outline: 2px solid #0a8276;
+  outline-offset: 2px;
+}
+.switch__checkbox-container.disabled {
+  cursor: default;
+  border-color: #bfbbbb;
+}
+
+.switch__label-wrapper {
+  font-family: var(--ifx-font-family);
+  color: #1d1d1d;
+}
+.switch__label-wrapper label:hover {
+  cursor: pointer;
+}
+.switch__label-wrapper.disabled {
+  color: #bfbbbb;
+}
+.switch__label-wrapper.disabled label:hover {
+  cursor: default;
+}
+.switch__label-wrapper.readOnly {
+  color: #575352;
+}
+.switch__label-wrapper.readOnly label:hover {
+  cursor: default;
+}
+
+.switch__checkbox-wrapper .switch {
+  width: 16px;
+  height: 16px;
+  background-color: #575352;
+  border-radius: 50%;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+}
+.switch__checkbox-wrapper .switch.disabled {
+  background-color: #bfbbbb;
+  border-color: #bfbbbb;
+  cursor: default;
+}
+.switch__checkbox-wrapper .switch.checked {
+  transform: translateX(16px);
+  background-color: #ffffff;
+}
+.switch__checkbox-wrapper .switch.checked.disabled {
+  cursor: default;
+}
+
+.switch__checkbox-container:hover .toggle-switch {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
+
+.switch__checkbox-container.checked {
+  background-color: #0a8276;
+  border-color: #0a8276;
+}
+.switch__checkbox-container.checked.disabled {
+  background-color: #bfbbbb;
+  border-color: #bfbbbb;
+  cursor: default;
+}
+.switch__checkbox-container.checked.readOnly {
+  background-color: #575352;
+  border-color: #575352;
+}
+
+.switch__checkbox-container.readOnly {
+  border-color: #bfbbbb;
+  cursor: default;
+}

package/dist/collection/components/switch/switch.js

@@ -0,0 +1,419 @@
+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";
+/**
+ * A toggle switch component for binary on/off states.
+ *
+ * This component is form-associated, meaning it can participate in HTML forms
+ * just like native form controls. It supports form validation, form reset,
+ * and browser autofill/restore functionality.
+ *
+ *
+ * Code organization follows the Stencil Style Guide:
+ * https://stenciljs.com/docs/style-guide
+ *
+ * 1. Own Properties (internal, not exposed)
+ * 2. @Element (reference to host)
+ * 3. @State (internal reactive state)
+ * 4. @Prop (public API properties)
+ * 5. @Event (emitted events)
+ * 6. Lifecycle methods
+ * 7. @Listen decorators
+ * 8. @Method (public methods)
+ * 9. Private methods
+ * 10. render()
+ *
+ * Framework Integration:
+ * - Vue: Supports v-model binding on the 'checked' property
+ * - Angular: Supports [(ngModel)] and reactive forms (formControl)
+ * - React: Standard prop binding and event handling
+ *
+ * Configuration in stencil.config.ts enables framework-specific bindings.
+ */
+export class Switch {
+    // 1. Own Properties - internal only, not exposed on host element
+    initialChecked;
+    // 2. Reference to Host Element - used for shadow DOM queries and nesting checks
+    el;
+    // 3. State Variables - internal reactive state
+    // (none - this component uses @Prop instead)
+    // 4. Public Properties - exposed as both properties and attributes
+    /**
+     * Sets the checked state of the switch.
+     * @default false
+     */
+    checked = false;
+    // @Watch goes right after the @Prop it monitors - keeps related code together
+    onCheckedChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.checked = newValue;
+            this.updateFormValue();
+        }
+    }
+    /**
+     * Disables user interaction when true.
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Makes the switch read-only.
+     * @default false
+     */
+    readOnly = false;
+    /**
+     * Form field name.
+     * @default ""
+     */
+    name = "";
+    /**
+     * Form field value when checked.
+     * If not set, defaults to "on" (standard checkbox behavior).
+     * @default "on"
+     */
+    value = "on";
+    // ElementInternals for form association - enables participation in HTML forms
+    internals;
+    // 5. Events - custom events emitted by the component
+    /**
+     * Emitted when checked state changes.
+     */
+    ifxChange;
+    // 6. Lifecycle Methods - ordered by execution flow
+    componentWillLoad() {
+        // Remember initial state for form reset
+        this.initialChecked = this.checked;
+        // Set initial form value when component loads
+        this.updateFormValue();
+    }
+    async componentDidLoad() {
+        // Only track top-level components to avoid duplicate analytics
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-switch", await framework);
+        }
+        this.toggleLabelGap();
+    }
+    /**
+     * Form-Associated Lifecycle Callbacks
+     * ------------------------------------
+     * These are called by the browser to integrate with native form behavior.
+     * See: https://stenciljs.com/docs/form-associated
+     *
+     * Note: formAssociatedCallback and formDisabledCallback are not implemented
+     * as they're not needed for this component. They would only be useful if we
+     * needed to react to form association changes or support fieldset-level disabling.
+     */
+    /**
+     * Called when the form is reset.
+     * Resets the switch to its initial state and clears form value.
+     */
+    formResetCallback() {
+        this.checked = this.initialChecked;
+        this.updateFormValue();
+    }
+    /**
+     * Called when the browser restores form state (e.g., browser autofill or back button).
+     * @param state - The saved state to restore
+     * @param mode - "restore" (browser restart/navigation) or "autocomplete" (autofill)
+     */
+    formStateRestoreCallback(state, _mode) {
+        if (state) {
+            this.checked = true;
+            this.updateFormValue();
+        }
+        else {
+            this.checked = false;
+            this.internals.setFormValue(null);
+        }
+    }
+    // 7. Listeners
+    // (none - this component handles events inline in render)
+    // 8. Public Methods - MUST be async, exposed on host element
+    /**
+     * Returns the current checked state.
+     */
+    async isChecked() {
+        return this.checked;
+    }
+    /**
+     * Sets the checked state.
+     * @param checked - New checked state.
+     */
+    async setChecked(checked) {
+        this.checked = checked;
+        return Promise.resolve();
+    }
+    /**
+     * Toggles the checked state.
+     * @returns Resolves when the toggle is complete.
+     */
+    async toggle() {
+        return Promise.resolve(this.toggleSwitch());
+    }
+    // 9. Private Methods - internal helpers, not callable externally
+    handleKeyDown(event) {
+        if (this.disabled || this.readOnly)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            this.toggleSwitch();
+        }
+    }
+    toggleSwitch() {
+        if (this.disabled || this.readOnly)
+            return;
+        this.checked = !this.checked;
+        this.updateFormValue();
+        this.ifxChange.emit(this.checked);
+        return this.checked;
+    }
+    /**
+     * Updates the form value based on the current checked state.
+     * Called whenever checked state changes to keep form data in sync.
+     */
+    updateFormValue() {
+        if (this.checked) {
+            this.internals.setFormValue(this.value);
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
+    }
+    toggleLabelGap() {
+        const slot = this.el.shadowRoot.querySelector("slot");
+        const container = this.el.shadowRoot.querySelector(".container");
+        if (slot.assignedNodes().length) {
+            container.classList.add("gap");
+        }
+        else {
+            container.classList.remove("gap");
+        }
+    }
+    // 10. render() - always last, called when state/props change
+    render() {
+        return (h("div", { key: '9c1bcd3ef1d073d117ea30a3403b3a523c6a1b8f', class: "container", role: "switch", "aria-checked": this.checked ? "true" : "false", "aria-disabled": this.disabled || this.readOnly ? "true" : "false", "aria-readonly": this.readOnly ? "true" : "false", "aria-labelledby": "switch-label", tabIndex: this.disabled ? -1 : 0, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: 'f6ecd560e30a8e8274d631769ed2caafd88d052a', class: `switch__checkbox-container ${this.checked ? "checked" : ""} ${this.readOnly ? "readOnly" : this.disabled ? "disabled" : ""}` }, h("div", { key: '5d1c4d4dbe78e98a75a7aea071c95686f63517a7', class: "switch__checkbox-wrapper" }, h("input", { key: '5811a455d03b91a0f01b0a81fd71d9d3df725770', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled && !this.readOnly, checked: this.checked, value: this.value }), h("div", { key: '1a7af5766ad6c3d36384ed85fc6cd668570a7a14', class: `switch ${this.checked ? "checked" : ""} ${this.readOnly ? "readOnly" : this.disabled ? "disabled" : ""}` }))), h("div", { key: '823964c09843b68b74c065371391c3afaae5c878', class: `switch__label-wrapper ${this.readOnly ? "readOnly" : this.disabled ? "disabled" : ""}` }, h("label", { key: 'd6c95ecf19ead9a6bc70f7d15f773e2779daa4ce', htmlFor: "switch" }, h("slot", { key: 'ca9f2a9eb9559f1932093cf31d4581bd81282a24', onSlotchange: () => this.toggleLabelGap() })))));
+    }
+    static get is() { return "ifx-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["switch.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Sets the checked state of the switch."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Disables user interaction when true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Makes the switch read-only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-only",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"\""
+                        }],
+                    "text": "Form field name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "\"\""
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"on\""
+                        }],
+                    "text": "Form field value when checked.\nIf not set, defaults to \"on\" (standard checkbox behavior)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "\"on\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxChange",
+                "name": "ifxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when checked state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "isChecked": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns the current checked state.",
+                    "tags": []
+                }
+            },
+            "setChecked": {
+                "complexType": {
+                    "signature": "(checked: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "checked",
+                            "type": "boolean",
+                            "docs": "- New checked state."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the checked state.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "checked - New checked state."
+                        }]
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Toggles the checked state.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Resolves when the toggle is complete."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "onCheckedChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/table-advanced-version/buttonCellRenderer.js

@@ -0,0 +1,72 @@
+export class ButtonCellRenderer {
+    eGui;
+    eButton; // Change to a generic HTMLElement to accommodate custom elements
+    eventListener;
+    init(params) {
+        this.createButton(params);
+    }
+    getGui() {
+        return this.eGui;
+    }
+    refresh(params) {
+        this.updateButton(params);
+        return true;
+    }
+    createButton(params) {
+        const config = params.data[params.colDef.field];
+        const options = params.colDef.cellRendererParams || {};
+        this.eGui = document.createElement("div");
+        this.eButton = document.createElement("ifx-button");
+        if (this.hasRequiredKeys(config)) {
+            this.setButtonAttributes(config);
+            this.eGui.appendChild(this.eButton);
+            this.attachEventListener(options, params);
+        }
+        else {
+            this.eGui.textContent = config ? String(config) : "";
+        }
+    }
+    updateButton(params) {
+        const config = params.data[params.colDef.field];
+        const options = params.colDef.cellRendererParams || {};
+        if (this.hasRequiredKeys(config)) {
+            this.setButtonAttributes(config);
+            this.detachEventListener();
+            this.attachEventListener(options, params);
+        }
+        else {
+            this.eGui.textContent = config ? String(config) : "";
+        }
+    }
+    setButtonAttributes(config) {
+        this.eButton.setAttribute("disabled", config.disabled.toString());
+        this.eButton.setAttribute("variant", config.variant);
+        this.eButton.setAttribute("theme", config.theme);
+        this.eButton.setAttribute("type", config.type);
+        this.eButton.setAttribute("size", config.size);
+        this.eButton.setAttribute("full-width", config.fullWidth.toString());
+        this.eButton.setAttribute("target", config.target);
+        this.eButton.setAttribute("href", config.href);
+        this.eButton.textContent = config.text;
+    }
+    attachEventListener(options, params) {
+        this.eventListener = (event) => {
+            if (options.onButtonClick) {
+                options.onButtonClick(params, event);
+            }
+        };
+        this.eButton.addEventListener("click", this.eventListener);
+    }
+    detachEventListener() {
+        if (this.eventListener) {
+            this.eButton.removeEventListener("click", this.eventListener);
+        }
+    }
+    hasRequiredKeys(config) {
+        return (config &&
+            config.text !== "" &&
+            config.variant !== "" &&
+            config.size !== "" &&
+            config.type !== "");
+    }
+}

package/dist/collection/components/table-advanced-version/checkboxCellRenderer.js

@@ -0,0 +1,67 @@
+export class CheckboxCellRenderer {
+    eGui;
+    eCheckbox;
+    eventListener;
+    init(params) {
+        this.createCheckbox(params);
+    }
+    getGui() {
+        return this.eGui;
+    }
+    refresh(params) {
+        this.updateCheckbox(params);
+        return true;
+    }
+    createCheckbox(params) {
+        const config = params.data[params.colDef.field];
+        const options = params.colDef.cellRendererParams || {};
+        this.eGui = document.createElement("div");
+        this.eGui.style.display = "flex";
+        this.eGui.style.alignItems = "center";
+        this.eGui.style.justifyContent = "center";
+        this.eCheckbox = document.createElement("ifx-checkbox");
+        if (this.hasRequiredKeys(config)) {
+            this.setCheckboxAttributes(config);
+            this.eGui.appendChild(this.eCheckbox);
+            this.attachEventListener(options, params);
+        }
+        else {
+            this.eGui.textContent = config ? String(config) : "No checkbox data";
+        }
+    }
+    updateCheckbox(params) {
+        const config = params.data[params.colDef.field];
+        const options = params.colDef.cellRendererParams || {};
+        if (this.hasRequiredKeys(config)) {
+            this.setCheckboxAttributes(config);
+            this.detachEventListener();
+            this.attachEventListener(options, params);
+        }
+        else {
+            this.eGui.textContent = config ? String(config) : "";
+        }
+    }
+    setCheckboxAttributes(config) {
+        this.eCheckbox.setAttribute("disabled", config.disabled.toString());
+        this.eCheckbox.setAttribute("error", config.error.toString());
+        this.eCheckbox.setAttribute("size", config.size);
+        this.eCheckbox.setAttribute("checked", config.checked.toString());
+        this.eCheckbox.setAttribute("indeterminate", config.indeterminate.toString());
+    }
+    attachEventListener(options, params) {
+        this.eventListener = (event) => {
+            if (options.onCheckboxClick) {
+                options.onCheckboxClick(params, event);
+            }
+        };
+        this.eCheckbox.addEventListener("click", this.eventListener);
+    }
+    detachEventListener() {
+        if (this.eventListener) {
+            this.eCheckbox.removeEventListener("click", this.eventListener);
+        }
+    }
+    hasRequiredKeys(config) {
+        return config && config.size !== "";
+    }
+}