@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/cjs/ifx-checkbox-group.cjs.entry.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const checkboxGroupCss = () => `.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-family:var(--ifx-font-family);font-size:1rem;color:#1d1d1d;line-height:1.5rem;font-weight:400;margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.group-label .required{color:#575352;margin-left:4px}.group-label .required.error{color:#cd002f}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1d1d1d}.caption.error{color:#cd002f}.caption-text{font-family:var(--ifx-font-family);font-weight:400;font-size:0.75rem;line-height:1rem;flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}`;
+
+const CheckboxGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    errorStates = new Map();
+    get el() { return index.getElement(this); }
+    /** Layout direction of the radio group */
+    alignment = "vertical";
+    /** Size of the radio group */
+    size;
+    /** Wether to show the group label. */
+    showGroupLabel;
+    /** Text used for the group label. */
+    groupLabelText = "Group Label Text";
+    /** Wether to show a caption under the group. */
+    showCaption;
+    /** Text used for the caption. */
+    captionText;
+    /** Wether to show an icon next to the caption. */
+    showCaptionIcon;
+    /** Wether selecting an option is required. */
+    required = false;
+    hasErrors = false;
+    handleCheckboxError(event) {
+        const checkbox = event.target;
+        if (checkbox.tagName.toLowerCase() === "ifx-checkbox") {
+            this.errorStates.set(checkbox, event.detail);
+            this.updateHasErrors();
+        }
+    }
+    /** Method to set the error state of all checkboxes in the group. */
+    async setGroupError(error) {
+        const checkboxes = Array.from(this.el.querySelectorAll("ifx-checkbox"));
+        checkboxes.forEach((checkbox) => {
+            checkbox.error = error;
+        });
+    }
+    componentWillLoad() {
+        this.initializeState();
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-checkbox-group", await framework);
+        }
+    }
+    handleSlotChange = () => {
+        this.initializeState();
+    };
+    initializeState() {
+        this.errorStates.clear();
+        const checkboxes = Array.from(this.el.querySelectorAll("ifx-checkbox"));
+        checkboxes.forEach((checkbox) => {
+            if (!this.errorStates.has(checkbox)) {
+                this.errorStates.set(checkbox, checkbox.error || false);
+            }
+        });
+        this.updateHasErrors();
+    }
+    updateHasErrors() {
+        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
+    }
+    render() {
+        return (index.h("div", { key: 'a4a815fd6b0cb1b6591511d95939245d351a63a1', class: "checkbox-group-container" }, this.showGroupLabel && (index.h("div", { key: 'aa9416441f0500252c51cc3237bbd319c8eec7b8', class: "group-label" }, this.groupLabelText, this.required && (index.h("span", { key: '9a53ca9b0490b9b13439ed6d65b76a0ec51acf5c', class: `required ${this.hasErrors ? "error" : ""}` }, "*")))), index.h("div", { key: '7c2208dd6194ad6ee639c4a46252a7b34a48163c', class: `checkbox-group ${this.alignment} ${this.size}` }, index.h("slot", { key: 'aa1958a310ad945f4c32276893fd7863c295ec80', onSlotchange: this.handleSlotChange })), this.showCaption ? (index.h("div", { class: `caption ${this.hasErrors ? "error" : "default"}` }, this.showCaptionIcon ? (index.h("div", { class: "caption-icon" }, index.h("ifx-icon", { icon: "c-info-16" }))) : (""), index.h("div", { class: "caption-text" }, this.captionText))) : ("")));
+    }
+};
+CheckboxGroup.style = checkboxGroupCss();
+
+exports.ifx_checkbox_group = CheckboxGroup;

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

@@ -0,0 +1,255 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const checkboxCss = () => `:host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:top;padding:0px;gap:8px;font-family:var(--ifx-font-family);vertical-align:bottom}.checkbox__container .checkbox__input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0 0 0 0)}.checkbox__container .checkbox__wrapper{box-sizing:border-box;display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#ffffff;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0;align-self:flex-start}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#cd002f}.checkbox__container .checkbox__wrapper.readOnly{border-color:#bfbbbb}.checkbox__container .checkbox__wrapper:not(.disabled):not(.readOnly):hover{background-color:#eeeded;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#bfbbbb;border-color:#bfbbbb;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate){background-color:#0a8276;border-radius:1px;border-color:rgba(0, 0, 0, 0);flex:none;order:0;flex-grow:0;color:#ffffff}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).error{background-color:#cd002f}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).readOnly{background-color:#3c3a39}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).disabled{background:#bfbbbb;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):not(.disabled):not(.readOnly):hover{background-color:#08665c;border:none;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:"";display:block;width:10.5px;height:0.75px;background-color:#1d1d1d;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .checkbox__wrapper.indeterminate.readOnly{background-color:#3c3a39;border-color:#3c3a39}.checkbox__container .checkbox__wrapper.indeterminate.readOnly:before{background-color:#ffffff}.checkbox__container .checkbox__wrapper.indeterminate.disabled{background-color:#ffffff;border-color:#bfbbbb}.checkbox__container .checkbox__input:focus-visible+.checkbox__wrapper{border:1px solid #575352;outline:2px solid #0a8276;outline-offset:2px}.checkbox__container .checkbox__input:focus-visible+.checkbox__wrapper.checked:not(.indeterminate){border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1d1d1d;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;max-width:100%}.checkbox__container .label.label-m{font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#bfbbbb}.checkbox__container .label.error{color:#1d1d1d}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}`;
+
+const Checkbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxChange = index.createEvent(this, "ifxChange", 7);
+        this.ifxError = index.createEvent(this, "ifxError", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    inputElement;
+    get el() { return index.getElement(this); }
+    /**
+     * Indicates whether the checkbox is disabled. When true, the checkbox cannot be interacted with and will have a disabled appearance.
+     */
+    disabled = false;
+    /**
+     * Indicates whether the checkbox is in a read-only state. When true, the checkbox will have a read-only appearance.
+     */
+    readOnly = false;
+    /**
+ * The name attribute of the input element.
+ */
+    name;
+    /**
+     * The state of the checkbox. When true, the checkbox is checked; when false, it is unchecked.
+     */
+    checked = false;
+    /**
+     * Indicates whether the checkbox is in an indeterminate state. When true, the checkbox will have an indeterminate appearance, which is typically used to indicate a "partially selected" state in a group of checkboxes.
+     */
+    indeterminate = false;
+    /**
+     * Indicates whether the checkbox is in an error state. When true, the checkbox will have an error appearance.
+     */
+    error = false;
+    /**
+     * The size of the checkbox. Can be "m" for medium (default) or "s" for small. This prop controls the overall dimensions of the checkbox and its label.
+     */
+    size = "m";
+    /**
+     * The value associated with the checkbox.
+     * This value is typically submitted with a form when the checkbox is checked.
+     * If not specified, it defaults to "on" when the checkbox is checked.
+     */
+    value;
+    internalIndeterminate;
+    internals;
+    // Store the initial checked state for form reset
+    initialChecked;
+    /**
+     * Event emitted when the checkbox state changes.
+     * Emits the new checked state as a boolean value.
+     */
+    ifxChange;
+    /**
+     * Event emitted when the error state changes.
+     * Emits the new error state as a boolean value.
+     */
+    ifxError;
+    /**
+     * Method to get the current checked state of the checkbox.
+     * @returns A promise that resolves to a boolean indicating whether the checkbox is checked.
+     */
+    async isChecked() {
+        return this.checked;
+    }
+    /**
+     * Method to set the checked state of the checkbox.
+     * @param newVal A boolean value to set the checked state of the checkbox.
+     * @returns A promise that resolves when the checked state has been updated.
+     */
+    async setChecked(newVal) {
+        this.checked = newVal;
+    }
+    /**
+     * @deprecated Use `setChecked` instead.
+     */
+    async toggleCheckedState(newVal) {
+        this.checked = newVal;
+    }
+    /**
+     * Toggles the checked state.
+     * @returns Resolves when the toggle is complete.
+     */
+    async toggle() {
+        this.handleCheckbox();
+        return Promise.resolve(this.checked);
+    }
+    valueChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.checked = newValue;
+            this.inputElement.checked = this.checked; // update the checkbox's checked property
+        }
+    }
+    errorChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.ifxError.emit(newValue);
+        }
+    }
+    indeterminateChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.internalIndeterminate = newValue;
+            this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property
+            // Update form value when indeterminate state changes
+            if (newValue) {
+                // Indeterminate state should not submit a value
+                this.internals.setFormValue(null);
+            }
+            else if (this.checked) {
+                // If becoming determinate and checked, set the form value
+                const formValue = this.value !== undefined ? this.value : "on";
+                this.internals.setFormValue(formValue);
+            }
+        }
+    }
+    componentWillLoad() {
+        this.checked = this.checked;
+        this.internalIndeterminate = this.indeterminate;
+        // Store initial checked state for form reset
+        this.initialChecked = this.checked;
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-checkbox", await framework);
+        }
+        // Set initial form value if checkbox is checked and not indeterminate
+        if (this.checked && !this.internalIndeterminate) {
+            const formValue = this.value !== undefined ? this.value : "on";
+            this.internals.setFormValue(formValue);
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
+    }
+    componentDidRender() {
+        this.inputElement.indeterminate = this.internalIndeterminate;
+    }
+    /**
+     * Callback for form association.
+     * Called whenever the form is reset.
+     * Resets the checkbox to its initial state.
+     */
+    formResetCallback() {
+        // Reset to initial checked state
+        this.checked = this.initialChecked;
+        if (this.inputElement) {
+            this.inputElement.checked = this.initialChecked;
+        }
+        // Update form value based on initial state
+        if (this.initialChecked) {
+            const formValue = this.value !== undefined ? this.value : "on";
+            this.internals.setFormValue(formValue);
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
+    }
+    handleCheckbox(fromInput = false) {
+        if (this.readOnly || (this.disabled && !this.error)) {
+            if (fromInput) {
+                this.inputElement.checked = this.checked;
+            }
+            return;
+        }
+        if (fromInput) {
+            if (this.inputElement.indeterminate) {
+                this.inputElement.indeterminate = false;
+                this.internalIndeterminate = false;
+            }
+            this.checked = this.inputElement.checked;
+        }
+        else if (!this.inputElement.indeterminate) {
+            this.checked = !this.checked;
+            this.inputElement.checked = this.checked;
+        }
+        if (this.checked && !this.internalIndeterminate) {
+            if (this.value !== undefined) {
+                this.internals.setFormValue(this.value);
+            }
+            else {
+                this.internals.setFormValue("on");
+            }
+        }
+        else {
+            this.internals.setFormValue(null);
+        }
+        this.ifxChange.emit(this.checked);
+    }
+    setInputElement(el) {
+        this.inputElement = el;
+    }
+    render() {
+        const slot = this.el.innerHTML;
+        let hasSlot = false;
+        if (slot) {
+            hasSlot = true;
+        }
+        return (index.h("div", { key: '5d0b165002d30e0bc960bcfad6c70c7e558b65df', class: "checkbox__container" }, index.h("input", { key: '55292c11c7fce3fc06401931b232bab24fc45da2', type: "checkbox", name: this.name, class: "checkbox__input", ref: (el) => this.setInputElement(el), checked: this.checked, onChange: () => this.handleCheckbox(true), id: "checkbox", value: `${this.value}`, disabled: this.disabled && !this.readOnly && !this.error, readonly: this.readOnly }), index.h("label", { key: 'decb826017b1c77a024ff4100e7bee5f6269aae1', htmlFor: "checkbox", class: `checkbox__wrapper 
+						${this.getCheckedClassName()}
+						${this.size === "m" ? "checkbox-m" : ""}
+						${this.indeterminate ? "indeterminate" : ""}
+						${this.readOnly ? "readOnly" : ""}
+                        ${this.error && !this.readOnly ? "error" : ""}
+                        ${this.checked && !this.readOnly ? "checked" : ""}
+                        ${this.disabled && !this.readOnly && !this.error ? "disabled" : ""}
+						` }, this.checked && !this.internalIndeterminate && (index.h("ifx-icon", { key: 'dd35641c17dac394a27b0f393de17607770b4244', icon: "check-16" }))), hasSlot && (index.h("label", { key: '13d31ca7d3e92635298d3134330ef0e142457c46', id: "label", htmlFor: "checkbox", class: `
+							label ${this.size === "m" ? "label-m" : ""}
+                            ${this.readOnly ? "readOnly" : ""}
+                            ${this.error && !this.readOnly ? "error" : ""}
+                            ${this.disabled && !this.readOnly && !this.error ? "disabled" : ""}` }, index.h("slot", { key: '4026e2c03dac508e347c69291f25463fcbef47ab' })))));
+    }
+    getCheckedClassName() {
+        if (this.error) {
+            if (this.checked) {
+                return "checked error";
+            }
+            else {
+                return "error";
+            }
+        }
+        else if (this.checked) {
+            return "checked";
+        }
+        else
+            return "";
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": [{
+                "valueChanged": 0
+            }],
+        "error": [{
+                "errorChanged": 0
+            }],
+        "indeterminate": [{
+                "indeterminateChanged": 0
+            }]
+    }; }
+};
+Checkbox.style = checkboxCss();
+
+exports.ifx_checkbox = Checkbox;