wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,352 @@
+import { Host, h } from "@stencil/core";
+import { getIconSize } from "../../utils/icon-attr.utils";
+import { combineClasses } from "../../utils/combine-classes";
+export class VdsRadioButton {
+    constructor() {
+        /** Defines the size of the radio */
+        this.size = "medium";
+        /** Sets the radio in checked state */
+        this.checked = false;
+        /** Sets the radio in disabled state */
+        this.disabled = false;
+        /** Sets the radio in error state */
+        this.error = false;
+        /** Aligns the label in relation to the radio-button*/
+        this.labelAlignment = "end";
+        this.state = "unchecked";
+    }
+    componentWillRender() {
+        this.setRadioState();
+    }
+    componentDidLoad() {
+        if (this.internals && !!this.internals.setFormValue) {
+            this.internals.setFormValue(this.checked.toString());
+        }
+    }
+    /**
+     * Executes every time checked value changes.
+     * Sets form value in order to work properly with native forms
+     *
+     * @returns void
+     */
+    setCheckedStates() {
+        if (this.internals && !!this.internals.setFormValue) {
+            this.internals.setFormValue(this.checked.toString());
+        }
+    }
+    /**
+     * Executes every time the radio-button is being click.
+     *
+     * @param event - MouseEvent
+     * @returns void
+     */
+    handleClick(_) {
+        if (!this.disabled) {
+            this.checked = true;
+            this.emitValues();
+        }
+    }
+    /**
+    * Toggles radio-button value.
+    * When parameter is not provided, if true get set to false. When false get set to true.
+    * Emits check event with checked value.
+    *
+    * @param checked - Boolean (Optional)
+    * @returns Promise<void>
+    */
+    toggleCheck(checked = undefined) {
+        if (!this.disabled) {
+            this.checked = checked === undefined ? !this.checked : checked;
+            this.emitValues();
+        }
+        return Promise.resolve();
+    }
+    /**
+     * Emits event values when radio button state changed.
+     * Emits check event with checked prop.
+     * Emits input event with value prop.
+     *
+     * @returns void
+     */
+    emitValues() {
+        const inputEvent = new InputEvent("input");
+        this.value = this.value ? this.value : this.checked.toString();
+        this.check.emit(this.checked);
+        this.radioCheck.emit({
+            checked: this.checked,
+            value: this.value,
+            element: this.hostEl
+        });
+        this.hostEl.dispatchEvent(inputEvent);
+    }
+    /**
+     * Determine state of the radio based on the checked property.
+     * When checked is true, state is checked.
+     * When checked is false, state is unchecked.
+     *
+     * @returns void
+     */
+    setRadioState() {
+        this.state = this.checked ? "checked" : "unchecked";
+    }
+    /**
+     * Returns the icon prop based on the state and calculate the size.
+     *
+     * @returns HTMLStencilElement
+     */
+    renderRadioButton() {
+        const size = getIconSize(this.size);
+        switch (this.state) {
+            case "checked":
+                return h("vds-icon", { class: "radio-button-icon radio-button-icon-checked", svgIcon: `radio-checked`, size: size });
+            default:
+                return h("vds-icon", { class: "radio-button-icon", svgIcon: `radio-unchecked`, size: size });
+        }
+    }
+    /**
+    * Returns the vds-label for the radio-button when there is a label provided.
+    *
+    * @returns HTMLStencilElement
+    */
+    renderLabel() {
+        return h("vds-label", { class: "radio-button-label", labelValue: this.labelValue, size: this.size, disabled: this.disabled });
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '301fe21bdd8c41ac010dee0dc79421494ce21ddf', state: this.state, class: this.disabled ? "vds-radio-button--disabled" : "" }, h("div", { key: '314329a23fb040bfc155b4e5212e6a0b706030fe', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds-radio-button__container", `vds-radio-button__container--size-${this.size}`, `vds-radio-button__container--label-alignment-${this.labelAlignment}`, this.checked ? "vds-radio-button--checked" : "", this.disabled ? "vds-radio-button--disabled" : "", this.error ? "vds-radio-button--error" : "") }, h("div", { key: '8943a2759b06f8d02ad2ee42e4fffb30d2024b36', class: "vds-radio-button" }, h("input", { key: 'de670feeedf20951f7e337eb2e5a5296a38cf63a', type: "radio", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderRadioButton()), this.labelValue && this.renderLabel())));
+    }
+    static get is() { return "vds-radio-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-radio-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-radio-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"large\" | \"medium\"",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the size of the radio"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "\"medium\""
+            },
+            "checked": {
+                "type": "boolean",
+                "attribute": "checked",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the radio in checked state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the radio in disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "attribute": "error",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the radio in error state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "It\u2019s useful for identifying in a radio group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "labelAlignment": {
+                "type": "string",
+                "attribute": "label-alignment",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"start\" | \"end\"",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aligns the label in relation to the radio-button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"end\""
+            },
+            "labelValue": {
+                "type": "string",
+                "attribute": "label-value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text to be shown in the radio-button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "check",
+                "name": "check",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes a custom change to target property using checked (use for React components)"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "radioCheck",
+                "name": "radioCheck",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits radio button checked value"
+                },
+                "complexType": {
+                    "original": "RadioButtonChecked",
+                    "resolved": "RadioButtonChecked",
+                    "references": {
+                        "RadioButtonChecked": {
+                            "location": "import",
+                            "path": "./vds-radio-button.utils",
+                            "id": "src/components/radio-button/vds-radio-button.utils.ts::RadioButtonChecked"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleCheck": {
+                "complexType": {
+                    "signature": "(checked?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "checked",
+                            "type": "boolean",
+                            "docs": "- Boolean (Optional)"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles radio-button value. \nWhen parameter is not provided, if true get set to false. When false get set to true.\nEmits check event with checked value.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "checked - Boolean (Optional)"
+                        }, {
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "setCheckedStates"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=vds-radio-button.js.map

package/dist/collection/components/radio-button/vds-radio-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/vds-radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,eAAe,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvH,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAS7D,MAAM,OAAO,cAAc;IAN3B;QAQE,oCAAoC;QACI,SAAI,GAAuB,QAAQ,CAAC;QAC5E,sCAAsC;QACE,YAAO,GAAY,KAAK,CAAC;QACjE,uCAAuC;QACd,aAAQ,GAAY,KAAK,CAAC;QACnD,oCAAoC;QACI,UAAK,GAAY,KAAK,CAAC;QAG/D,sDAAsD;QAC9C,mBAAc,GAAoB,KAAK,CAAC;QAaxC,UAAK,GAA4B,WAAW,CAAC;KA6ItD;IA3IC,mBAAmB;QACjB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;YACpD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvD,CAAC;IACH,CAAC;IAED;;;;;OAKG;IAEH,gBAAgB;QACd,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;YACpD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvD,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACJ,WAAW,CAAC,CAAa;QACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACJ,CAAC;IAEC;;;;;;;MAOE;IAEH,WAAW,CAAC,UAAmB,SAAS;QACtC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;YAC5D,IAAI,CAAC,UAAU,EAAE,CAAA;QACrB,CAAC;QACC,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;IAC3B,CAAC;IAED;;;;;;OAMG;IACK,UAAU;QAChB,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;QAC/D,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,MAAmC;SAClD,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,CAAC;IAED;;;;;;OAMG;IACK,aAAa;QACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;IACtD,CAAC;IAED;;;;OAIG;IACK,iBAAiB;QACvB,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpC,QAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,KAAK,SAAS;gBACZ,OAAO,gBAAU,KAAK,EAAC,6CAA6C,EAAC,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,GAAa,CAAC;YACzH;gBACE,OAAO,gBAAU,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAa,CAAC;QACnG,CAAC;IACH,CAAC;IAEA;;;;MAIE;IACK,WAAW;QACjB,OAAO,iBACL,KAAK,EAAE,oBAAoB,EAC3B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAc,CAAA;IACzC,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE;YAC/E,4DACE,OAAO,EAAE,CAAC,GAAG,EAAQ,EAAE,GAAE,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA,CAAA,CAAC,EAC/C,KAAK,EAAE,cAAc,CACnB,6BAA6B,EAC7B,qCAAqC,IAAI,CAAC,IAAI,EAAE,EAChD,gDAAgD,IAAI,CAAC,cAAc,EAAE,EACrE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAC/C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,EACjD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,CAC5C;gBAED,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,8DACE,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,MAAA,IAAI,CAAC,MAAM,0CAAE,EAAE,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;oBAC5B,IAAI,CAAC,iBAAiB,EAAE,CACrB;gBACL,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,CAClC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, AttachInternals, EventEmitter, Event, Watch, Method } from '@stencil/core';\nimport { getIconSize } from '../../utils/icon-attr.utils';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { RadioButtonChecked } from './vds-radio-button.utils';\n\n@Component({\n  tag: 'vds-radio-button',\n  styleUrl: 'vds-radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsRadioButton {\n\n  /** Defines the size of the radio */ \n  @Prop({ mutable: true, reflect: true }) size: \"large\" | \"medium\" = \"medium\";\n  /** Sets the radio in checked state */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Sets the radio in disabled state */\n  @Prop({ mutable: true }) disabled: boolean = false;\n  /** Sets the radio in error state */\n  @Prop({ mutable: true, reflect: true }) error: boolean = false;\n  /** It’s useful for identifying in a radio group */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  /** Aligns the label in relation to the radio-button*/\n  @Prop() labelAlignment: \"start\" | \"end\" = \"end\";\n  /** Sets the text to be shown in the radio-button */\n  @Prop({ reflect: true, mutable: true }) labelValue: string;\n\n  @Element() hostEl: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /** Makes a custom change to target property using checked (use for React components) */\n  @Event() check: EventEmitter<boolean>;\n  /** Emits radio button checked value */\n  @Event() radioCheck: EventEmitter<RadioButtonChecked>;\n\n  private state: \"checked\" | \"unchecked\" = \"unchecked\";\n\n  componentWillRender(): void {\n    this.setRadioState();\n  }\n\n  componentDidLoad(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time checked value changes.\n   * Sets form value in order to work properly with native forms\n   *\n   * @returns void\n   */\n  @Watch(\"checked\")\n  setCheckedStates(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time the radio-button is being click.\n   *\n   * @param event - MouseEvent\n   * @returns void\n   */\n\thandleClick(_: MouseEvent): void {\n    if (!this.disabled) {\n      this.checked = true;\n      this.emitValues();\n    }\n\t}\n\n   /**\n   * Toggles radio-button value. \n   * When parameter is not provided, if true get set to false. When false get set to true.\n   * Emits check event with checked value.\n   *\n   * @param checked - Boolean (Optional)\n   * @returns Promise<void>\n   */\n  @Method()\n  toggleCheck(checked: boolean = undefined): Promise<void> {\n    if (!this.disabled) {\n\t\t\tthis.checked = checked === undefined ? !this.checked : checked;\n      this.emitValues()\n\t\t}\n    return Promise.resolve();\n  }\n\n  /**\n   * Emits event values when radio button state changed.\n   * Emits check event with checked prop.\n   * Emits input event with value prop.\n   *\n   * @returns void\n   */\n  private emitValues(): void {\n    const inputEvent = new InputEvent(\"input\");\n    this.value = this.value ? this.value : this.checked.toString();\n    this.check.emit(this.checked);\n    this.radioCheck.emit({\n      checked: this.checked,\n      value: this.value,\n      element: this.hostEl as HTMLVdsRadioButtonElement\n    });\n    this.hostEl.dispatchEvent(inputEvent);\n  }\n\n  /**\n   * Determine state of the radio based on the checked property.\n   * When checked is true, state is checked.\n   * When checked is false, state is unchecked.\n   *\n   * @returns void\n   */\n  private setRadioState(): void {\n    this.state = this.checked ? \"checked\" : \"unchecked\";\n  }\n\n  /**\n   * Returns the icon prop based on the state and calculate the size.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderRadioButton(): HTMLStencilElement {\n    const size = getIconSize(this.size);\n    switch(this.state) {\n      case \"checked\":\n        return <vds-icon class=\"radio-button-icon radio-button-icon-checked\" svgIcon={`radio-checked`} size={size}></vds-icon>;\n      default:\n        return <vds-icon class=\"radio-button-icon\" svgIcon={`radio-unchecked`} size={size}></vds-icon>;\n    }\n  }\n\n   /**\n   * Returns the vds-label for the radio-button when there is a label provided.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderLabel(): HTMLStencilElement {\n    return <vds-label\n      class={\"radio-button-label\"}\n      labelValue={this.labelValue}\n      size={this.size}\n      disabled={this.disabled}></vds-label>\n  }\n\n  render() {\n    return (\n      <Host state={this.state} class={this.disabled ? \"vds-radio-button--disabled\" : \"\"}>\n        <div\n          onClick={(evt): void => {this.handleClick(evt)}}\n          class={combineClasses(\n            \"vds-radio-button__container\",\n            `vds-radio-button__container--size-${this.size}`,\n            `vds-radio-button__container--label-alignment-${this.labelAlignment}`,\n            this.checked ? \"vds-radio-button--checked\" : \"\",\n            this.disabled ? \"vds-radio-button--disabled\" : \"\",\n            this.error ? \"vds-radio-button--error\" : \"\"\n          )}\n        >\n          <div class=\"vds-radio-button\">\n            <input\n              type={\"radio\"}\n              checked={this.checked}\n              value={this.value}\n              id={this.hostEl?.id}\n              disabled={this.disabled} />\n            {this.renderRadioButton()}\n          </div>\n          {this.labelValue && this.renderLabel()}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/radio-button/vds-radio-button.stories.js

@@ -0,0 +1,50 @@
+export default {
+    title: 'VDS/Components/Radios/RadioButton',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+    },
+    argTypes: {
+        size: {
+            options: ["medium", "large"],
+            control: { type: "select" }
+        },
+        labelAlignment: {
+            options: ["start", "end"],
+            control: { type: "select" }
+        },
+    },
+};
+const styles = `
+    div {
+       margin: 20px;
+       width: 400px; 
+    }
+`;
+const codeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<div>
+    <vds-radio-button
+        size="${args.size}"
+        label-value="${args.labelValue}"
+        checked="${args.checked}"
+        disabled="${args.disabled}"
+        error="${args.error}"
+        label-alignment="${args.labelAlignment}"
+    >
+    </vds-radio-button>
+</div>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    size: "medium",
+    labelValue: "Label 1",
+    checked: false,
+    disabled: false,
+    error: false,
+    labelAlignment: "end"
+};
+//# sourceMappingURL=vds-radio-button.stories.js.map

package/dist/collection/components/radio-button/vds-radio-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/vds-radio-button.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACX,KAAK,EAAE,mCAAmC;IAC1C,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACH,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;YACzB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;CAKd,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;SACF,MAAM;;;gBAGC,IAAI,CAAC,IAAI;uBACF,IAAI,CAAC,UAAU;mBACnB,IAAI,CAAC,OAAO;oBACX,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,KAAK;2BACA,IAAI,CAAC,cAAc;;;;CAI7C,CAAC;AACF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,KAAK;IACZ,cAAc,EAAE,KAAK;CACxB,CAAA","sourcesContent":["export default {\n    title: 'VDS/Components/Radios/RadioButton',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n      },\n    argTypes: {\n        size: {\n            options: [\"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n        labelAlignment: {\n            options: [\"start\", \"end\"],\n            control: { type: \"select\" }\n        },\n    },\n};\n\nconst styles = `\n    div {\n       margin: 20px;\n       width: 400px; \n    }\n`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<div>\n    <vds-radio-button\n        size=\"${args.size}\"\n        label-value=\"${args.labelValue}\"\n        checked=\"${args.checked}\"\n        disabled=\"${args.disabled}\"\n        error=\"${args.error}\"\n        label-alignment=\"${args.labelAlignment}\"\n    >\n    </vds-radio-button>\n</div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    labelValue: \"Label 1\",\n    checked: false,\n    disabled: false,\n    error: false,\n    labelAlignment: \"end\"\n}"]}

package/dist/collection/components/radio-button/vds-radio-button.utils.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=vds-radio-button.utils.js.map

package/dist/collection/components/radio-button/vds-radio-button.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-radio-button.utils.js","sourceRoot":"","sources":["../../../src/components/radio-button/vds-radio-button.utils.ts"],"names":[],"mappings":"","sourcesContent":["export interface RadioButtonChecked {\n    checked: boolean,\n    value: string,\n    element: HTMLVdsRadioButtonElement\n}\n"]}