wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/checkbox/vds-checkbox.js

@@ -0,0 +1,374 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+import { CheckboxEvent } from "./vds-checkbox.utils";
+export class VdsBasicCheckbox {
+    constructor() {
+        /** Sets the checkbox in checked state */
+        this.checked = false;
+        /** Sets the checkbodx in indeterminate state */
+        this.indeterminate = false;
+        /** Sets the checkbox in disabled state */
+        this.disabled = false;
+        /** Sets the checkbox in error state */
+        this.error = false;
+        /** Sets the checkbox's size */
+        this.size = "medium";
+        /** Toggles the required sign in the field */
+        this.isRequired = false;
+        this.state = "unchecked";
+    }
+    componentWillRender() {
+        this.setCheckboxState();
+    }
+    componentDidLoad() {
+        if (this.internals && !!this.internals.setFormValue) {
+            this.internals.setFormValue(this.checked.toString());
+        }
+    }
+    /**
+     * Executes every time checked value changes.
+     * Sets indeterminate value to false in order to guarantee a change in value.
+     * Sets form value in order to work properly with native forms
+     *
+     * @returns void
+     */
+    setCheckedStates() {
+        this.indeterminate = false;
+        if (this.internals && !!this.internals.setFormValue) {
+            this.internals.setFormValue(this.checked.toString());
+        }
+    }
+    /**
+     * Executes every time the checkbox is being click.
+     * Executes toggleCheck method.
+     *
+     * @param event - MouseEvent
+     * @returns void
+     */
+    handleClick(event) {
+        this.toggleCheck(event);
+    }
+    /**
+    * Toggles checkbox value.
+    * Emits checkboxChange event with CheckboxEvent value.
+    * Emits check event with checked value.
+    *
+    * @param evt - KeyboardEvent | MouseEvent
+    * @returns Promise<void>
+    */
+    toggleCheck(evt) {
+        if (!this.disabled) {
+            const inputEvent = new InputEvent("input");
+            this.checked = !this.checked;
+            this.value = this.checked.toString();
+            this.indeterminate = false;
+            this.checkboxChange.emit(new CheckboxEvent(this.checked, evt === null || evt === void 0 ? void 0 : evt.altKey, evt === null || evt === void 0 ? void 0 : evt.ctrlKey, evt === null || evt === void 0 ? void 0 : evt.metaKey, evt === null || evt === void 0 ? void 0 : evt.shiftKey));
+            this.check.emit(this.checked);
+            this.hostEl.dispatchEvent(inputEvent);
+        }
+        return Promise.resolve();
+    }
+    /**
+     * Determine state of the checkbox based on the indeterminate and checked properties.
+     * When indetermanate is true, state is indeterminate.
+     * When indetermanate is false and checked is true, state is checked.
+     * When indetermanate is false and checked is false, state is unchecked.
+     *
+     * @returns void
+     */
+    setCheckboxState() {
+        this.state = this.indeterminate ? "indeterminate" : this.checked ? "checked" : "unchecked";
+    }
+    /**
+     * Returns the icon prop based on the state and calculate the size.
+     *
+     * @returns HTMLStencilElement
+     */
+    renderCheckbox() {
+        const size = this.size === "large" ? "1.5rem" : "1.25rem";
+        const disabledClass = this.disabled ? "checkbox-icon-disabled" : "";
+        switch (this.state) {
+            case "checked":
+                return h("vds-icon", { class: `checkbox-icon checkbox-icon-checked ${disabledClass}`, svgIcon: `checked`, size: size });
+            case "indeterminate":
+                return h("vds-icon", { class: `checkbox-icon checkbox-icon-indeterminate ${disabledClass}`, svgIcon: `indeterminate`, size: size });
+            default:
+                return h("vds-icon", { class: `checkbox-icon ${disabledClass}`, svgIcon: `unchecked`, size: size });
+                ;
+        }
+    }
+    /**
+    * Returns the vds-label for the checkbox when there is a label provided.
+    *
+    * @returns HTMLStencilElement
+    */
+    renderLabel() {
+        return h("vds-label", { class: "checkbox-label", labelValue: this.labelValue, required: this.isRequired, size: this.size, disabled: this.disabled });
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '158a1cbb863a187b74fb8204a3442c4b09a9f47d', state: this.state }, h("div", { key: '05070e9ca5dcb87e504788916612836172a23f44', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds__checkbox__container", `vds__checkbox__container--size-${this.size}`, this.checked && !this.indeterminate ? "vds__checkbox--checked" : "", this.indeterminate ? "vds__checkbox--indeterminate" : "", this.disabled ? "vds__checkbox--disabled" : "", this.error ? "vds__checkbox--error" : "") }, h("div", { key: 'f795947b47273c5d8c36df25930d244094f42760', class: "vds__checkbox" }, h("input", { key: 'fba6450c787d038173300e57fe38b06690f0974e', type: "checkbox", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderCheckbox()), this.labelValue && this.renderLabel())));
+    }
+    static get is() { return "vds-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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 checkbox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "checked": {
+                "type": "boolean",
+                "attribute": "checked",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the checkbox in checked state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "attribute": "indeterminate",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the checkbodx in indeterminate 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 checkbox in disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "attribute": "error",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the checkbox in error state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the checkbox's size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "isRequired": {
+                "type": "boolean",
+                "attribute": "is-required",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the required sign in the field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the value in the input. Usually uses checked prop as string. \nUsed to manage Reactive forms and other native functionality"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkboxChange",
+                "name": "checkboxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event which is triggered when checkbox state changes. This event also captures if\nany of the special keys (shift, ctrl, meta or alt) where pressed when the checkbox state\nchanged. Use CheckboxEvent.isChecked() or\ncheckbox.on('checkboxEvent', (event : CustomEvent<CheckboxEvent>) => {\n\tif(event.detail == true) {\n\t\tconsole.log('Checked');\n\t\t}\nconsole.log(event.detail.altKey);\nconsole.log(event.detail.shiftKey);\nconsole.log(event.detail.ctrlKey);\n})"
+                },
+                "complexType": {
+                    "original": "CheckboxEvent",
+                    "resolved": "CheckboxEvent",
+                    "references": {
+                        "CheckboxEvent": {
+                            "location": "import",
+                            "path": "./vds-checkbox.utils",
+                            "id": "src/components/checkbox/vds-checkbox.utils.ts::CheckboxEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "check",
+                "name": "check",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes a custom change to target property using checked and indeterminate (use for React components)"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleCheck": {
+                "complexType": {
+                    "signature": "(evt?: KeyboardEvent | MouseEvent) => Promise<void>",
+                    "parameters": [{
+                            "name": "evt",
+                            "type": "KeyboardEvent | MouseEvent",
+                            "docs": "- KeyboardEvent | MouseEvent"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        },
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles checkbox value.\nEmits checkboxChange event with CheckboxEvent value.\nEmits check event with checked value.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "evt - KeyboardEvent | MouseEvent"
+                        }, {
+                            "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-checkbox.js.map

package/dist/collection/components/checkbox/vds-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/vds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h } from \"@stencil/core\";\nimport { HTMLStencilElement, Prop, Method, Event, EventEmitter, Element, AttachInternals, Watch } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { CheckboxEvent } from \"./vds-checkbox.utils\";\n@Component({\n  tag: \"vds-checkbox\",\n  styleUrl: \"vds-checkbox.scss\",\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicCheckbox {\n  /** Sets the text to be shown in the checkbox */\n  @Prop({ reflect: true, mutable: true }) labelValue: string;\n  /** Sets the checkbox in checked state */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /** Sets the checkbodx in indeterminate state */\n  @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n  /** Sets the checkbox in disabled state */\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  /** Sets the checkbox in error state */\n  @Prop({ reflect: true, mutable: true }) error: boolean = false;\n  /** Sets the checkbox's size */\n  @Prop({ mutable: true }) size: \"medium\" | \"large\" = \"medium\";\n  /** Toggles the required sign in the field */\n  @Prop({ mutable: true }) isRequired: boolean = false;\n  /** Sets the value in the input. Usually uses checked prop as string. \n   *  Used to manage Reactive forms and other native functionality */\n  @Prop({ reflect: true, mutable: true }) value: string;\n\n  @Element() hostEl: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n /**\n  * Event which is triggered when checkbox state changes. This event also captures if\n  * any of the special keys (shift, ctrl, meta or alt) where pressed when the checkbox state\n  * changed. Use CheckboxEvent.isChecked() or\n  * checkbox.on('checkboxEvent', (event : CustomEvent<CheckboxEvent>) => {\n  *\t\tif(event.detail == true) {\n  *\t\t\tconsole.log('Checked');\n  * \t\t}\n  * console.log(event.detail.altKey);\n  * console.log(event.detail.shiftKey);\n  * console.log(event.detail.ctrlKey);\n  * })\n  *\n  */\n  @Event() checkboxChange: EventEmitter<CheckboxEvent>;\n  /** Makes a custom change to target property using checked and indeterminate (use for React components) */\n  @Event() check: EventEmitter<boolean>;\n\n  private state: \"checked\" | \"unchecked\" | \"indeterminate\" = \"unchecked\";\n\n  componentWillRender(): void {\n    this.setCheckboxState();\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 indeterminate value to false in order to guarantee a change in value.\n   * Sets form value in order to work properly with native forms\n   *\n   * @returns void\n   */\n  @Watch(\"checked\")\n  setCheckedStates(): void {\n    this.indeterminate = false;\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time the checkbox is being click.\n   * Executes toggleCheck method.\n   *\n   * @param event - MouseEvent\n   * @returns void\n   */\n\thandleClick(event: MouseEvent): void {\n\t\tthis.toggleCheck(event);\n\t}\n\n   /**\n   * Toggles checkbox value.\n   * Emits checkboxChange event with CheckboxEvent value.\n   * Emits check event with checked value.\n   *\n   * @param evt - KeyboardEvent | MouseEvent\n   * @returns Promise<void>\n   */\n  @Method()\n  toggleCheck(evt?: KeyboardEvent | MouseEvent): Promise<void> {\n    if (!this.disabled) {\n      const inputEvent = new InputEvent(\"input\");\n\t\t\tthis.checked = !this.checked;\n      this.value = this.checked.toString();\n\t\t\tthis.indeterminate = false;\n\t\t\tthis.checkboxChange.emit(\n\t\t\t\tnew CheckboxEvent(\n\t\t\t\t\tthis.checked,\n\t\t\t\t\tevt?.altKey,\n\t\t\t\t\tevt?.ctrlKey,\n\t\t\t\t\tevt?.metaKey,\n\t\t\t\t\tevt?.shiftKey\n\t\t\t\t)\n\t\t\t);\n\t\t\tthis.check.emit(this.checked);\n      this.hostEl.dispatchEvent(inputEvent);\n\t\t}\n    return Promise.resolve();\n  }\n\n  /**\n   * Determine state of the checkbox based on the indeterminate and checked properties.\n   * When indetermanate is true, state is indeterminate.\n   * When indetermanate is false and checked is true, state is checked.\n   * When indetermanate is false and checked is false, state is unchecked.\n   *\n   * @returns void\n   */\n  private setCheckboxState(): void {\n    this.state = this.indeterminate ? \"indeterminate\" : 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 renderCheckbox(): HTMLStencilElement {\n    const size = this.size === \"large\" ? \"1.5rem\" : \"1.25rem\";\n    const disabledClass = this.disabled ? \"checkbox-icon-disabled\" : \"\";\n    switch(this.state) {\n      case \"checked\":\n        return <vds-icon class={`checkbox-icon checkbox-icon-checked ${disabledClass}`} svgIcon={`checked`} size={size}></vds-icon>;\n      case \"indeterminate\":\n        return <vds-icon class={`checkbox-icon checkbox-icon-indeterminate ${disabledClass}`} svgIcon={`indeterminate`} size={size}></vds-icon>\n      default:\n        return <vds-icon class={`checkbox-icon ${disabledClass}`} svgIcon={`unchecked`} size={size}></vds-icon>;; \n    }\n  }\n\n   /**\n   * Returns the vds-label for the checkbox when there is a label provided.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderLabel(): HTMLStencilElement {\n    return <vds-label class={\"checkbox-label\"} labelValue={this.labelValue} required={this.isRequired} size={this.size} disabled={this.disabled}></vds-label>\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host state={this.state}>\n        <div\n          onClick={(evt): void => {this.handleClick(evt)}}\n          class={combineClasses(\n            \"vds__checkbox__container\",\n            `vds__checkbox__container--size-${this.size}`,\n            this.checked && !this.indeterminate ? \"vds__checkbox--checked\" : \"\",\n            this.indeterminate ? \"vds__checkbox--indeterminate\" : \"\",\n            this.disabled ? \"vds__checkbox--disabled\" : \"\",\n            this.error ? \"vds__checkbox--error\" : \"\",\n          )}\n        >\n          <div class=\"vds__checkbox\">\n            <input\n              type={\"checkbox\"}\n              checked={this.checked}\n              value={this.value}\n              id={this.hostEl?.id}\n              disabled={this.disabled} />\n            {this.renderCheckbox()}\n          </div>\n          {this.labelValue && this.renderLabel()}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/checkbox/vds-checkbox.stories.js

@@ -0,0 +1,52 @@
+export default {
+    title: 'VDS/Components/Checkboxes/Checkbox',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=28693-3522"
+        }
+    },
+    argTypes: {
+        size: {
+            options: ["medium", "large"],
+            control: { type: "select" }
+        },
+    },
+};
+const styles = `
+    div {
+       margin: 20px;
+       width: 400px; 
+    }
+`;
+const codeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<div>
+    <vds-checkbox
+        size="${args.size}"
+        label-value="${args.labelValue}"
+        checked="${args.checked}"
+        indeterminate="${args.indeterminate}"
+        disabled="${args.disabled}"
+        error="${args.error}"
+        is-required="${args.isRequired}"
+    >
+    </vds-checkbox>
+</div>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    size: "medium",
+    labelValue: "Label 1",
+    checked: false,
+    indeterminate: false,
+    disabled: false,
+    error: false,
+    isRequired: false,
+};
+//# sourceMappingURL=vds-checkbox.stories.js.map

package/dist/collection/components/checkbox/vds-checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/vds-checkbox.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACX,KAAK,EAAE,oCAAoC;IAC3C,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,sFAAsF;SAC9F;KACF;IACH,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,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;yBACN,IAAI,CAAC,aAAa;oBACvB,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,KAAK;uBACJ,IAAI,CAAC,UAAU;;;;CAIrC,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,aAAa,EAAE,KAAK;IACpB,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,KAAK;CACpB,CAAA","sourcesContent":["export default {\n    title: 'VDS/Components/Checkboxes/Checkbox',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=28693-3522\"\n        }\n      },\n    argTypes: {\n        size: {\n            options: [\"medium\", \"large\"],\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-checkbox\n        size=\"${args.size}\"\n        label-value=\"${args.labelValue}\"\n        checked=\"${args.checked}\"\n        indeterminate=\"${args.indeterminate}\"\n        disabled=\"${args.disabled}\"\n        error=\"${args.error}\"\n        is-required=\"${args.isRequired}\"\n    >\n    </vds-checkbox>\n</div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    labelValue: \"Label 1\",\n    checked: false,\n    indeterminate: false,\n    disabled: false,\n    error: false,\n    isRequired: false,\n}"]}

package/dist/collection/components/checkbox/vds-checkbox.utils.js

@@ -0,0 +1,33 @@
+/**
+ * Custom checkbox change event to capture
+ * extra keys being pressed when user clicks on the checkbox
+ */
+export class CheckboxEvent extends Boolean {
+    constructor(_value = false, _altKey = false, _ctrlKey = false, _metaKey = false, _shiftKey = false) {
+        super(_value);
+        this._value = _value;
+        this._altKey = _altKey;
+        this._ctrlKey = _ctrlKey;
+        this._metaKey = _metaKey;
+        this._shiftKey = _shiftKey;
+    }
+    valueOf() {
+        return !!this._value;
+    }
+    isChecked() {
+        return !!this._value;
+    }
+    get altKey() {
+        return this._altKey;
+    }
+    get ctrlKey() {
+        return this._ctrlKey;
+    }
+    get metaKey() {
+        return this._metaKey;
+    }
+    get shiftKey() {
+        return this._shiftKey;
+    }
+}
+//# sourceMappingURL=vds-checkbox.utils.js.map

package/dist/collection/components/checkbox/vds-checkbox.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-checkbox.utils.js","sourceRoot":"","sources":["../../../src/components/checkbox/vds-checkbox.utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAO;IACzC,YACS,SAAS,KAAK,EACd,UAAU,KAAK,EACf,WAAW,KAAK,EAChB,WAAW,KAAK,EAChB,YAAY,KAAK;QAEzB,KAAK,CAAC,MAAM,CAAC,CAAC;QANN,WAAM,GAAN,MAAM,CAAQ;QACd,YAAO,GAAP,OAAO,CAAQ;QACf,aAAQ,GAAR,QAAQ,CAAQ;QAChB,aAAQ,GAAR,QAAQ,CAAQ;QAChB,cAAS,GAAT,SAAS,CAAQ;IAG1B,CAAC;IAED,OAAO;QACN,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;IACtB,CAAC;IAED,SAAS;QACR,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;IACtB,CAAC;IAED,IAAI,MAAM;QACT,OAAO,IAAI,CAAC,OAAO,CAAC;IACrB,CAAC;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC,QAAQ,CAAC;IACtB,CAAC;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC,QAAQ,CAAC;IACtB,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;CACD","sourcesContent":["/**\n * Custom checkbox change event to capture\n * extra keys being pressed when user clicks on the checkbox\n */\nexport class CheckboxEvent extends Boolean {\n\tconstructor(\n\t\tprivate _value = false,\n\t\tprivate _altKey = false,\n\t\tprivate _ctrlKey = false,\n\t\tprivate _metaKey = false,\n\t\tprivate _shiftKey = false\n\t) {\n\t\tsuper(_value);\n\t}\n\n\tvalueOf(): boolean {\n\t\treturn !!this._value;\n\t}\n\n\tisChecked(): boolean {\n\t\treturn !!this._value;\n\t}\n\n\tget altKey(): boolean {\n\t\treturn this._altKey;\n\t}\n\n\tget ctrlKey(): boolean {\n\t\treturn this._ctrlKey;\n\t}\n\n\tget metaKey(): boolean {\n\t\treturn this._metaKey;\n\t}\n\n\tget shiftKey(): boolean {\n\t\treturn this._shiftKey;\n\t}\n}\n\n"]}