@rededor/cura 0.5.4 → 1.0.0-alpha.0

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

@@ -1,366 +1,398 @@
-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 CuraRadio {
-  constructor() {
-    this.sizes = {
-      "large": { size: 20 },
-      "medium": { size: 14 },
-      "small": { size: 10 },
-    };
-    this.isDarkbackground = () => this.background === 'dark';
-    this.handleClick = () => {
-      if (this.disabled)
-        return;
-      this.checked = !this.checked;
-      this.onchange.emit({ value: this.value, checked: this.checked });
-    };
-    this.checked = false;
-    this.status = 'default';
-    this.disabled = false;
-    this.required = false;
-    this.label = '';
-    this.ontabindex = undefined;
-    this.position = 'left';
-    this.value = '';
-    this.name = '';
-    this.background = 'light';
-    this.size = 'medium';
-    this.color = 'accent';
-    this.styles = {};
-  }
-  sizeHandler() {
-    this.styles = Object.assign(Object.assign({}, this.styles), { '--size-after': `${this.sizes[this.size].size}px`, '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
-  }
-  setColors() {
-    const colors = [
-      { name: '--info-base', background: 'info-base' },
-      { name: '--color-light', background: `${this.color}-light` },
-      { name: '--color-base', background: `${this.color}-base` },
-      { name: '--color-dark', background: `${this.color}-dark` },
-      { name: '--neutral-purewhite', background: 'neutral-purewhite' },
-      { name: '--success-lighter', background: 'success-lighter' },
-      { name: '--success-base', background: 'success-base' },
-      { name: '--error-lighter', background: 'error-lighter' },
-      { name: '--error-base', background: 'error-base' },
-      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
-      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },
-      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },
-      { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },
-      { 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-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },
-      { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },
-    ];
-    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();
-  }
-  getClasses() {
-    const classes = {};
-    classes['container'] = true;
-    classes['checked'] = this.checked;
-    classes['disabled'] = this.disabled;
-    classes['position'] = this.position === 'right';
-    classes[this.status] = true;
-    return classes;
-  }
-  assignColor(type) {
-    if (this.disabled)
-      return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';
-    const statusColors = {
-      success: {
-        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',
-        message: this.isDarkbackground() ? 'success-base' : 'success-dark'
-      },
-      error: {
-        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',
-        message: this.isDarkbackground() ? 'error-base' : 'error-dark'
-      },
-      default: {
-        label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',
-        message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'
-      }
-    };
-    return statusColors[this.status][type];
-  }
-  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("input", { type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
-  }
-  static get is() { return "cura-radio"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-radio.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-radio.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 radio button.\nMutable property allowing state change."
-        },
-        "attribute": "checked",
-        "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 radio button.\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 radio button."
-        },
-        "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 radio button."
-        },
-        "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 radio button."
-        },
-        "attribute": "label",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "ontabindex": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Specifies the tabindex of the radio button."
-        },
-        "attribute": "ontabindex",
-        "reflect": true
-      },
-      "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 radio button.\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 radio button."
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name attribute of the radio button."
-        },
-        "attribute": "name",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "background": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'dark' | 'light'",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Background theme of the radio button.\nCan be 'dark' or 'light'."
-        },
-        "attribute": "background",
-        "reflect": false,
-        "defaultValue": "'light'"
-      },
-      "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 radio button.\nCan be 'small', 'medium', or 'large'."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'medium'"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Color theme of the radio button."
-        },
-        "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 }",
-          "resolved": "{ value: string; checked: 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"
-      }];
-  }
+    constructor() {
+        this.sizes = {
+            "large": { size: 20 },
+            "medium": { size: 14 },
+            "small": { size: 10 },
+        };
+        this.isDarkbackground = () => this.background === 'dark';
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.checked = !this.checked;
+            this.internals.setFormValue(this.value);
+            this.onchange.emit({ value: this.value, checked: this.checked });
+        };
+        this.checked = false;
+        this.status = 'default';
+        this.disabled = false;
+        this.required = false;
+        this.label = '';
+        this.ontabindex = undefined;
+        this.position = 'left';
+        this.value = '';
+        this.name = '';
+        this.background = 'light';
+        this.size = 'medium';
+        this.color = 'accent';
+        this.styles = {};
+    }
+    sizeHandler() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--size-after': `${this.sizes[this.size].size}px`, '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
+    }
+    setColors() {
+        const colors = [
+            { name: '--info-base', background: 'info-base' },
+            { name: '--color-light', background: `${this.color}-light` },
+            { name: '--color-base', background: `${this.color}-base` },
+            { name: '--color-dark', background: `${this.color}-dark` },
+            { name: '--neutral-purewhite', background: 'neutral-purewhite' },
+            { name: '--success-lighter', background: 'success-lighter' },
+            { name: '--success-base', background: 'success-base' },
+            { name: '--error-lighter', background: 'error-lighter' },
+            { name: '--error-base', background: 'error-base' },
+            { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
+            { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },
+            { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },
+            { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },
+            { 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-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },
+            { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },
+        ];
+        colors.forEach(color => {
+            this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);
+        });
+        this.styles = Object.assign({}, this.styles);
+    }
+    /**
+   * 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.internals.setFormValue(this.value);
+    }
+    /**
+   * Callback to reset the switch state when the form is reset.
+   */
+    formResetCallback() {
+        this.value = '';
+        this.checked = 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;
+    }
+    connectedCallback() {
+        this.sizeHandler();
+        this.setColors();
+    }
+    getClasses() {
+        const classes = {};
+        classes['container'] = true;
+        classes['checked'] = this.checked;
+        classes['disabled'] = this.disabled;
+        classes['position'] = this.position === 'right';
+        classes[this.status] = true;
+        return classes;
+    }
+    assignColor(type) {
+        if (this.disabled)
+            return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';
+        const statusColors = {
+            success: {
+                label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',
+                message: this.isDarkbackground() ? 'success-base' : 'success-dark'
+            },
+            error: {
+                label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',
+                message: this.isDarkbackground() ? 'error-base' : 'error-dark'
+            },
+            default: {
+                label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',
+                message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'
+            }
+        };
+        return statusColors[this.status][type];
+    }
+    render() {
+        return (h(Host, { key: '8f28f0ad3ec32f97cd39f5c574f7c779b326c3c0' }, h("div", { key: 'd94d37293c9165c13e082bbc7f78e7b35606147d', class: this.getClasses(), style: this.styles }, h("div", { key: 'fd743a9a24a22e59d0f9066d65dbe3c5b21c57b7', class: "info" }, h("div", { key: '080b345ff308b6cb0fbf1913aa6a1c872e3c325c', class: "label-wrapper" }, h("cura-label", { key: '9c0f0d376470b12273a359c65a91954cfa96b1a9', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '117eaafe86a8c2f6b190a7cefaaf2d882d658940', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '162ba073fc2722b4f1c2a3e8cfa42ae1940b4c99', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '453713a040379257a9be7c9cd327ffbd8ad3affb' }))), h("input", { key: '19ad607763975886902d6e88fd44bf3e1da75c8a', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
+    }
+    static get is() { return "cura-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-radio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-radio.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 radio button.\nMutable property allowing state change."
+                },
+                "attribute": "checked",
+                "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 radio button.\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 radio button."
+                },
+                "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 radio button."
+                },
+                "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 radio button."
+                },
+                "attribute": "label",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "ontabindex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the tabindex of the radio button."
+                },
+                "attribute": "ontabindex",
+                "reflect": true
+            },
+            "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 radio button.\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 radio button."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute of the radio button."
+                },
+                "attribute": "name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark' | 'light'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background theme of the radio button.\nCan be 'dark' or 'light'."
+                },
+                "attribute": "background",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "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 radio button.\nCan be 'small', 'medium', or 'large'."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color theme of the radio button."
+                },
+                "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 }",
+                    "resolved": "{ value: string; checked: 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"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=cura-radio.js.map