@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js

@@ -1,432 +1,462 @@
-import { h, Host } from '@stencil/core';
-import { formsSizes } from '../cura-forms.definitions';
+import { h, Host } from "@stencil/core";
+import { formsSizes } from "../cura-forms.definitions";
 export class CuraCheckbox {
-  constructor() {
-    this.isDarkbackground = () => this.background === 'dark';
-    this.isDarkIconColor = () => this.iconColor === 'dark';
+    constructor() {
+        this.isDarkBackground = () => this.background === 'dark';
+        this.isDarkIconColor = () => this.iconColor === 'dark';
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.indeterminate = false;
+            this.checked = !this.checked;
+            this.internals.setFormValue(this.value);
+            this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });
+        };
+        this.checked = false;
+        this.indeterminate = false;
+        this.status = 'default';
+        this.disabled = false;
+        this.required = false;
+        this.label = undefined;
+        this.ontabindex = 0;
+        this.position = 'left';
+        this.value = undefined;
+        this.name = undefined;
+        this.size = 'medium';
+        this.background = 'light';
+        this.iconColor = 'dark';
+        this.color = 'accent';
+        this.styles = {};
+    }
+    sizeHandler() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
+    }
     /**
-     * Handles click event on the checkbox.
-     * Emits onchange event with value, checked, and indeterminate states.
+     * Watches changes in color and background properties to update styles.
      */
-    this.handleClick = () => {
-      if (this.disabled)
-        return;
-      this.indeterminate = false;
-      this.checked = !this.checked;
-      this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });
-    };
-    this.checked = false;
-    this.indeterminate = false;
-    this.status = 'default';
-    this.disabled = false;
-    this.required = false;
-    this.label = undefined;
-    this.ontabindex = 0;
-    this.position = 'left';
-    this.value = undefined;
-    this.name = undefined;
-    this.size = 'medium';
-    this.background = 'light';
-    this.iconColor = 'dark';
-    this.color = 'accent';
-    this.styles = {};
-  }
-  sizeHandler() {
-    this.styles = Object.assign(Object.assign({}, this.styles), { '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
-  }
-  /**
-   * Watches changes in color and background properties to update styles.
-   */
-  setColors() {
-    const colors = [
-      { name: '--color-base', background: `${this.color}-base` },
-      { name: '--color-lighter', background: `${this.color}-lighter` },
-      { name: '--color-light', background: `${this.color}-light` },
-      { name: '--color-dark', background: `${this.color}-dark` },
-      { name: '--info-base', background: 'info-base' },
-      { name: '--error-base', background: 'error-base' },
-      { name: '--success-lighter', background: 'success-lighter' },
-      { name: '--success-base', background: 'success-base' },
-      { name: '--success-dark', background: 'success-dark' },
-      { name: '--error-lighter', background: 'error-lighter' },
-      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },
-      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
-      { name: '--neutral-lighter-neutral-purewhite', background: this.isDarkbackground() ? 'neutral-lighter' : 'neutral-purewhite' },
-      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },
-      { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },
-      { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },
-      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
-      { name: '--success-base-lighter', background: this.isDarkbackground() ? 'success-base' : 'success-lighter' },
-      { name: '--success-dark-base', background: this.isDarkbackground() ? 'success-dark' : 'success-base' },
-      { name: '--error-base-lighter', background: this.isDarkbackground() ? 'error-base' : 'error-lighter' },
-      { name: '--error-dark-base', background: this.isDarkbackground() ? 'error-dark' : 'error-base' },
-    ];
-    colors.forEach(color => {
-      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);
-    });
-    this.styles = Object.assign({}, this.styles);
-  }
-  connectedCallback() {
-    this.sizeHandler();
-    this.setColors();
-  }
-  /**
-   * Retrieves classes based on component state for conditional styling.
-   */
-  getClasses() {
-    const classes = {};
-    classes['container'] = true;
-    classes['checked'] = this.checked;
-    classes['disabled'] = this.disabled;
-    classes['indeterminate'] = this.indeterminate;
-    classes['position'] = this.position === 'right';
-    classes[this.status] = true;
-    return classes;
-  }
-  /**
- * Assigns color based on status and background theme.
- * @param defaultColor Default color.
- */
-  assignColor(type) {
-    if (this.disabled)
-      return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';
-    const statusColors = {
-      success: {
-        icon: 'success-dark',
-        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',
-        message: this.isDarkbackground() ? 'success-base' : 'success-dark'
-      },
-      error: {
-        icon: 'error-dark',
-        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',
-        message: this.isDarkbackground() ? 'error-base' : 'error-dark'
-      },
-      default: {
-        icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',
-        label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',
-        message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'
-      }
-    };
-    return statusColors[this.status][type];
-  }
-  /**
-   * Retrieves icon element based on checkbox state.
-   */
-  getIcon() {
-    const iconName = this.indeterminate ? 'minus' : "check";
-    const iconColor = this.assignColor('icon');
-    const iconSize = this.size === 'large' ? 20 : "micro";
-    return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
-  }
-  render() {
-    return (h(Host, null, h("div", { class: this.getClasses(), style: this.styles }, h("div", { class: "info" }, h("div", { class: "label-wrapper" }, h("cura-label", { class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", null))), h("div", { class: "checkbox", onClick: this.handleClick, tabIndex: this.ontabindex }, h("input", { type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
-  }
-  static get is() { return "cura-checkbox"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-checkbox.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-checkbox.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "checked": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Reflects the checked state of the checkbox.\nMutable property allowing state change."
-        },
-        "attribute": "checked",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "indeterminate": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Reflects the indeterminate state of the checkbox.\nMutable property allowing state change."
-        },
-        "attribute": "indeterminate",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "status": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "'error' | 'success' | 'default'",
-          "resolved": "\"default\" | \"error\" | \"success\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Status of the checkbox.\nCan be 'error', 'success', or 'default'."
-        },
-        "attribute": "status",
-        "reflect": true,
-        "defaultValue": "'default'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Reflects the disabled state of the checkbox."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Reflects the required state of the checkbox."
-        },
-        "attribute": "required",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Text label associated with the checkbox."
-        },
-        "attribute": "label",
-        "reflect": true
-      },
-      "ontabindex": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Specifies the tabindex of the checkbox."
-        },
-        "attribute": "ontabindex",
-        "reflect": true,
-        "defaultValue": "0"
-      },
-      "position": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'left' | 'right'",
-          "resolved": "\"left\" | \"right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Position of the label relative to the checkbox.\nCan be 'left' or 'right'."
-        },
-        "attribute": "position",
-        "reflect": true,
-        "defaultValue": "'left'"
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Value associated with the checkbox."
-        },
-        "attribute": "value",
-        "reflect": true
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name attribute of the checkbox."
-        },
-        "attribute": "name",
-        "reflect": true
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'medium' | 'large'",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of the checkbox.\nCan be 'small', 'medium', or 'large'."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'medium'"
-      },
-      "background": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'dark' | 'light'",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Background theme of the checkbox.\nCan be 'dark' or 'light'."
-        },
-        "attribute": "background",
-        "reflect": false,
-        "defaultValue": "'light'"
-      },
-      "iconColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'dark' | 'light'",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "iconColor theme of the checkbox.\nCan be 'dark' or 'light'."
-        },
-        "attribute": "icon-color",
-        "reflect": false,
-        "defaultValue": "'dark'"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Color theme of the checkbox."
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'accent'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "styles": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "onchange",
-        "name": "onchange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ value: string, checked: boolean, indeterminate: boolean }",
-          "resolved": "{ value: string; checked: boolean; indeterminate: boolean; }",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "size",
-        "methodName": "sizeHandler"
-      }, {
-        "propName": "color",
-        "methodName": "setColors"
-      }, {
-        "propName": "background",
-        "methodName": "setColors"
-      }, {
-        "propName": "background",
-        "methodName": "assignColor"
-      }, {
-        "propName": "iconColor",
-        "methodName": "assignColor"
-      }];
-  }
+    setColors() {
+        const colors = [
+            { name: '--color-base', background: `${this.color}-base` },
+            { name: '--color-lighter', background: `${this.color}-lighter` },
+            { name: '--color-light', background: `${this.color}-light` },
+            { name: '--color-dark', background: `${this.color}-dark` },
+            { name: '--info-base', background: 'info-base' },
+            { name: '--error-base', background: 'error-base' },
+            { name: '--success-lighter', background: 'success-lighter' },
+            { name: '--success-base', background: 'success-base' },
+            { name: '--success-dark', background: 'success-dark' },
+            { name: '--error-lighter', background: 'error-lighter' },
+            { name: '--neutral-black', background: 'neutral-black' },
+            { name: '--primary-base-neutral-white', background: this.isDarkBackground() ? 'primary-base' : 'neutral-white' },
+            { name: '--neutral-base-neutral-medium', background: this.isDarkBackground() ? 'neutral-base' : 'neutral-medium' },
+            { name: '--neutral-black-neutral-purewhite', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-purewhite' },
+            { name: '--neutral-black-neutral-white', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-white' },
+            { name: '--neutral-darker-neutral-base', background: this.isDarkBackground() ? 'neutral-darker' : 'neutral-base' },
+            { name: '--neutral-base-neutral-base', background: this.isDarkBackground() ? 'primary-base' : 'neutral-base' },
+            { name: '--neutral-purewhite-neutral-dark', background: this.isDarkBackground() ? 'neutral-purewhite' : 'neutral-dark' },
+            { name: '--primary-base-neutral-medium', background: this.isDarkBackground() ? 'primary-base' : 'neutral-medium' },
+            { name: '--success-base-lighter', background: this.isDarkBackground() ? 'success-base' : 'success-lighter' },
+            { name: '--success-dark-base', background: this.isDarkBackground() ? 'success-dark' : 'success-base' },
+            { name: '--error-base-lighter', background: this.isDarkBackground() ? 'error-base' : 'error-lighter' },
+            { name: '--error-dark-base', background: this.isDarkBackground() ? 'error-dark' : 'error-base' },
+        ];
+        colors.forEach(color => {
+            this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);
+        });
+        this.styles = Object.assign({}, this.styles);
+    }
+    connectedCallback() {
+        this.sizeHandler();
+        this.setColors();
+    }
+    /**
+     * Callback for form association.
+     */
+    formAssociatedCallback(form) {
+        form.ariaLabel = this.label;
+    }
+    /**
+     * Callback to restore the switch state from the form.
+     */
+    formStateRestoreCallback(state) {
+        this.value = state.value;
+        this.checked = state.checked;
+        this.indeterminate = state.indeterminate;
+        this.internals.setFormValue(this.value);
+    }
+    /**
+     * Callback to reset the switch state when the form is reset.
+     */
+    formResetCallback() {
+        this.value = '';
+        this.checked = false;
+        this.indeterminate = false;
+        this.internals.setValidity({});
+        this.internals.setFormValue(this.value);
+    }
+    /**
+     * Callback to update the switch's disabled state when the form's disabled state changes.
+     */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    getClasses() {
+        const classes = {};
+        classes['container'] = true;
+        classes['checked'] = this.checked;
+        classes['disabled'] = this.disabled;
+        classes[this.background] = true;
+        classes['indeterminate'] = this.indeterminate;
+        classes['position'] = this.position === 'right';
+        classes[this.status] = true;
+        return classes;
+    }
+    /**
+     * Assigns color based on status and background theme.
+     * @param defaultColor Default color.
+     */
+    assignColor(type) {
+        if (this.disabled)
+            return this.isDarkBackground() ? 'neutral-dark' : 'neutral-dark';
+        const statusColors = {
+            success: {
+                icon: 'success-dark',
+                label: this.isDarkBackground() ? 'success-lighter' : 'success-darker',
+                message: this.isDarkBackground() ? 'success-base' : 'success-dark',
+            },
+            error: {
+                icon: 'error-dark',
+                label: this.isDarkBackground() ? 'error-lighter' : 'neutral-darker',
+                message: this.isDarkBackground() ? 'error-base' : 'error-dark',
+            },
+            default: {
+                icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',
+                label: this.isDarkBackground() ? 'neutral-white' : 'neutral-black',
+                message: this.isDarkBackground() ? 'primary-lighter' : 'neutral-dark',
+            },
+        };
+        return statusColors[this.status][type];
+    }
+    /**
+     * Retrieves icon element based on checkbox state.
+     */
+    getIcon() {
+        const iconName = this.indeterminate ? 'minus' : 'check';
+        const iconColor = this.assignColor('icon');
+        const iconSize = this.size === 'large' ? 20 : 'micro';
+        return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
+    }
+    render() {
+        return (h(Host, { key: '9f96ab8f12502dc777ee00d02d8306ecd3ce9776' }, h("div", { key: '4a782c31e4d97df0c7cc1d60a3c83125d01d31f6', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'c2de03821506646ffbe84cd7106ab91c1cdeba55', class: "info" }, h("div", { key: '9a8985036acf8770541b69e35ff449572a6afb0e', class: "label-wrapper" }, h("cura-label", { key: 'a128e382aa3f25c849fbe488f3820aa9b3cdb775', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '84e4817990f7499f047af339ce1ed9efc0ed060c', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '33527a9347eb8971d869b7e5ec492c3a7057b123', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'cda5d0d9eca328fd20663f941a41325eb1ad0e29' }))), h("div", { key: '588b04e6c9c74daf8406d0cca1e50bd39d1703c9', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '209fee01eb3051602e5a9633de4fdea59d986a53', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+    }
+    static get is() { return "cura-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflects the checked state of the checkbox.\nMutable property allowing state change."
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflects the indeterminate state of the checkbox.\nMutable property allowing state change."
+                },
+                "attribute": "indeterminate",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'error' | 'success' | 'default'",
+                    "resolved": "\"default\" | \"error\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Status of the checkbox.\nCan be 'error', 'success', or 'default'."
+                },
+                "attribute": "status",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflects the disabled state of the checkbox."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflects the required state of the checkbox."
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text label associated with the checkbox."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "ontabindex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the tabindex of the checkbox."
+                },
+                "attribute": "ontabindex",
+                "reflect": true,
+                "defaultValue": "0"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the label relative to the checkbox.\nCan be 'left' or 'right'."
+                },
+                "attribute": "position",
+                "reflect": true,
+                "defaultValue": "'left'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value associated with the checkbox."
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute of the checkbox."
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the checkbox.\nCan be 'small', 'medium', or 'large'."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark' | 'light'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background theme of the checkbox.\nCan be 'dark' or 'light'."
+                },
+                "attribute": "background",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "iconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark' | 'light'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "iconColor theme of the checkbox.\nCan be 'dark' or 'light'."
+                },
+                "attribute": "icon-color",
+                "reflect": false,
+                "defaultValue": "'dark'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color theme of the checkbox."
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'accent'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onchange",
+                "name": "onchange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string; checked: boolean; indeterminate: boolean }",
+                    "resolved": "{ value: string; checked: boolean; indeterminate: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "sizeHandler"
+            }, {
+                "propName": "color",
+                "methodName": "setColors"
+            }, {
+                "propName": "background",
+                "methodName": "setColors"
+            }, {
+                "propName": "background",
+                "methodName": "assignColor"
+            }, {
+                "propName": "iconColor",
+                "methodName": "assignColor"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=cura-checkbox.js.map