@gov-design-system-ce/components 0.0.16 → 0.0.18

package/dist/collection/components/gov-form/checkbox/gov-form-checkbox.js

@@ -22,62 +22,70 @@ export class GovFormCheckbox {
     this.invalid = undefined;
     this.wcagDescribedBy = undefined;
     this.wcagLabelledBy = undefined;
-    this.isChecked = undefined;
     this.checkboxId = createID("GovCheckbox");
     this.h = govHost(this.host);
     this.f = govForm(this.h);
   }
-  updateCheckedState(newValue) {
-    this.isChecked = newValue;
-    this.govChange.emit({
-      checked: this.isChecked,
-      value: this.value,
-    });
-  }
   validateSize(newValue) {
     validateProp(FormCheckboxSizes, newValue, FormCheckboxClass.root);
   }
   componentWillLoad() {
-    this.isChecked = this.checked;
     this.f.passAttrToControl("type", "checkbox");
   }
   async componentDidRender() {
-    this.f.passAttrToLabel('identifier', this.identifier || this.checkboxId);
-    this.f.passAttrToLabel('required', String(this.required));
+    this.f.passAttrToLabel("identifier", this.identifier || this.checkboxId);
+    this.f.passAttrToLabel("required", String(this.required));
     if (canValidateWcagOnRender()) {
       await delay(500);
       await this.validateWcag();
     }
   }
   render() {
-    const { isChecked } = this;
     const wrapCheckbox = (children) => {
       if (this.noLabel) {
         return (h("label", null, children));
       }
       return children;
     };
-    return (h(Host, { class: FormCheckboxClass.root, "is-checked": isChecked, size: this.size, invalid: toBoolAttrIfDefined(this.invalid) }, wrapCheckbox(h(Fragment, null, h("input", { id: this.identifier || this.checkboxId, type: "checkbox", value: this.value, name: this.name, checked: this.isChecked, onClick: this.onClickHandler.bind(this), onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, "aria-checked": toBoolAttr(this.isChecked), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) }), h("span", null, h("slot", { name: "label" }), h("gov-icon", { class: FormCheckboxClass.check, name: "check-lg" }))))));
+    return (h(Host, { class: FormCheckboxClass.root, checked: this.checked, size: this.size, invalid: toBoolAttrIfDefined(this.invalid) }, wrapCheckbox(h(Fragment, null, h("input", { id: this.identifier || this.checkboxId, type: "checkbox", value: this.value, name: this.name, checked: this.checked, onClick: this.onClickHandler.bind(this), onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, ref: el => (this.inputRef = el), "aria-checked": toBoolAttr(this.checked), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) }), h("span", null, h("slot", { name: "label" }), h("gov-icon", { class: FormCheckboxClass.check, name: "check-lg" }))))));
   }
   onFocusHandler(e) {
     e.stopPropagation();
-    this.govFocus.emit(e);
+    this.govFocus.emit({
+      component: FormCheckboxClass.root,
+      value: this.value,
+      checked: this.checked,
+      originalEvent: e,
+    });
   }
   onBlurHandler(e) {
     e.stopPropagation();
-    this.govBlur.emit(e);
+    this.govBlur.emit({
+      component: FormCheckboxClass.root,
+      value: this.value,
+      checked: this.checked,
+      originalEvent: e,
+    });
   }
   onClickHandler(e) {
     e.stopPropagation();
   }
   onChangeHandler(e) {
-    this.isChecked = e.target.checked;
+    this.checked = e.target.checked;
     e.stopPropagation();
     this.govChange.emit({
-      checked: this.isChecked,
+      component: FormCheckboxClass.root,
       value: this.value,
+      checked: this.checked,
+      originalEvent: e,
     });
   }
+  /**
+   * Returns the reference of the native element
+   */
+  async getRef() {
+    return this.inputRef;
+  }
   /**
    * Validate the WCAG attributes of the component
    */
@@ -118,7 +126,7 @@ export class GovFormCheckbox {
       },
       "checked": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -203,7 +211,7 @@ export class GovFormCheckbox {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Checkbox's size."
+          "text": "Checkboxes size."
         },
         "attribute": "size",
         "reflect": false,
@@ -297,11 +305,6 @@ export class GovFormCheckbox {
       }
     };
   }
-  static get states() {
-    return {
-      "isChecked": {}
-    };
-  }
   static get events() {
     return [{
         "method": "govFocus",
@@ -314,11 +317,12 @@ export class GovFormCheckbox {
           "text": "Emitted when the checkbox has focus."
         },
         "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
+          "original": "FormCheckboxEvent",
+          "resolved": "FormCheckboxEvent",
           "references": {
-            "FocusEvent": {
-              "location": "global"
+            "FormCheckboxEvent": {
+              "location": "import",
+              "path": "./gov-form-checkbox.types"
             }
           }
         }
@@ -333,11 +337,12 @@ export class GovFormCheckbox {
           "text": "Emitted when the checkbox loses focus."
         },
         "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
+          "original": "FormCheckboxEvent",
+          "resolved": "FormCheckboxEvent",
           "references": {
-            "FocusEvent": {
-              "location": "global"
+            "FormCheckboxEvent": {
+              "location": "import",
+              "path": "./gov-form-checkbox.types"
             }
           }
         }
@@ -352,12 +357,12 @@ export class GovFormCheckbox {
           "text": "Emitted when the checkbox change value."
         },
         "complexType": {
-          "original": "GovFormCheckboxChangeEvent",
-          "resolved": "GovFormCheckboxChangeEvent",
+          "original": "FormCheckboxEvent",
+          "resolved": "FormCheckboxEvent",
           "references": {
-            "GovFormCheckboxChangeEvent": {
+            "FormCheckboxEvent": {
               "location": "import",
-              "path": "./interfaces"
+              "path": "./gov-form-checkbox.types"
             }
           }
         }
@@ -365,6 +370,25 @@ export class GovFormCheckbox {
   }
   static get methods() {
     return {
+      "getRef": {
+        "complexType": {
+          "signature": "() => Promise<HTMLInputElement>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLInputElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<HTMLInputElement>"
+        },
+        "docs": {
+          "text": "Returns the reference of the native element",
+          "tags": []
+        }
+      },
       "validateWcag": {
         "complexType": {
           "signature": "() => Promise<void>",
@@ -386,9 +410,6 @@ export class GovFormCheckbox {
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{
-        "propName": "checked",
-        "methodName": "updateCheckedState"
-      }, {
         "propName": "size",
         "methodName": "validateSize"
       }];

package/dist/collection/components/gov-form/checkbox/gov-form-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"gov-form-checkbox.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/checkbox/gov-form-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch, Method } from \"@stencil/core\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { FormCheckboxClass, FormCheckboxSizes, FormCheckboxSizesType } from \"./constants\"\nimport { toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { delay } from \"../../../utils/utils\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { govHost, toBoolAttr } from \"../../../helpers/Dom/template\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { GovFormCheckboxChangeEvent } from \"./interfaces\"\nimport Fragment from \"../../../helpers/Fragment\"\n\n@Component({\n\ttag: \"gov-form-checkbox\",\n\tstyleUrl: \"gov-form-checkbox.scss\",\n})\nexport class GovFormCheckbox {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\n\tprivate readonly checkboxId: string\n\n\tconstructor() {\n\t\tthis.checkboxId = createID(\"GovCheckbox\")\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormCheckboxElement\n\t/**\n\t * Value of checkbox\n\t */\n\t@Prop() readonly value: string\n\t/**\n\t * Checkbox default state\n\t */\n\t@Prop({ reflect: true }) readonly checked: boolean = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the checkbox component disabled.\n\t * This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Name of the checkbox.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Checkbox's size.\n\t */\n\t@Prop() readonly size?: FormCheckboxSizesType = \"m\"\n\t/**\n\t * Custom checkbox identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * When you can't use the form label.\n\t */\n\t@Prop({ attribute: \"no-label\" }) readonly noLabel: boolean = false\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Emitted when the checkbox has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the checkbox loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the checkbox change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<GovFormCheckboxChangeEvent>\n\n\t@State() isChecked: boolean\n\n\t@Watch(\"checked\")\n\tupdateCheckedState(newValue: boolean): void {\n\t\tthis.isChecked = newValue\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormCheckboxSizes, newValue, FormCheckboxClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.isChecked = this.checked\n\n\t\tthis.f.passAttrToControl(\"type\", \"checkbox\")\n\t}\n\n\tasync componentDidRender() {\n\t\tthis.f.passAttrToLabel('identifier', this.identifier || this.checkboxId)\n\t\tthis.f.passAttrToLabel('required', String(this.required))\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { isChecked } = this\n\t\tconst wrapCheckbox = (children) => {\n\t\t\tif (this.noLabel) {\n\t\t\t\treturn (\n\t\t\t\t\t<label>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</label>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn children\n\t\t}\n\n\t\treturn (\n\t\t\t<Host class={FormCheckboxClass.root} is-checked={isChecked} size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t{wrapCheckbox(\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={this.identifier || this.checkboxId}\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\tchecked={this.isChecked}\n\t\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\taria-checked={toBoolAttr(this.isChecked)}\n\t\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<slot name=\"label\" />\n\t\t\t\t\t\t\t<gov-icon class={FormCheckboxClass.check} name=\"check-lg\"></gov-icon>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onClickHandler(e: PointerEvent) {\n\t\te.stopPropagation()\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.isChecked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormCheckboxClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormCheckboxClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormCheckboxClass.root)\n\t}\n}\n"]}
+{"version":3,"file":"gov-form-checkbox.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/checkbox/gov-form-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, Watch, Method } from \"@stencil/core\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { FormCheckboxClass, FormCheckboxSizes, FormCheckboxSizesType } from \"./constants\"\nimport { toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { delay } from \"../../../utils/utils\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { govHost, toBoolAttr } from \"../../../helpers/Dom/template\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport Fragment from \"../../../helpers/Fragment\"\nimport { FormCheckboxEvent } from \"./gov-form-checkbox.types\"\n\n@Component({\n\ttag: \"gov-form-checkbox\",\n\tstyleUrl: \"gov-form-checkbox.scss\",\n})\nexport class GovFormCheckbox {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\tprivate inputRef?: HTMLInputElement\n\n\tprivate readonly checkboxId: string\n\n\tconstructor() {\n\t\tthis.checkboxId = createID(\"GovCheckbox\")\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormCheckboxElement\n\t/**\n\t * Value of checkbox\n\t */\n\t@Prop() readonly value: string\n\t/**\n\t * Checkbox default state\n\t */\n\t@Prop({ reflect: true, mutable: true }) checked = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the checkbox component disabled.\n\t * This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Name of the checkbox.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Checkboxes size.\n\t */\n\t@Prop() readonly size?: FormCheckboxSizesType = \"m\"\n\t/**\n\t * Custom checkbox identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * When you can't use the form label.\n\t */\n\t@Prop({ attribute: \"no-label\" }) readonly noLabel: boolean = false\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Emitted when the checkbox has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FormCheckboxEvent>\n\t/**\n\t * Emitted when the checkbox loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FormCheckboxEvent>\n\t/**\n\t * Emitted when the checkbox change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<FormCheckboxEvent>\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormCheckboxSizes, newValue, FormCheckboxClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.f.passAttrToControl(\"type\", \"checkbox\")\n\t}\n\n\tasync componentDidRender() {\n\t\tthis.f.passAttrToLabel(\"identifier\", this.identifier || this.checkboxId)\n\t\tthis.f.passAttrToLabel(\"required\", String(this.required))\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst wrapCheckbox = (children) => {\n\t\t\tif (this.noLabel) {\n\t\t\t\treturn (\n\t\t\t\t\t<label>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</label>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn children\n\t\t}\n\n\t\treturn (\n\t\t\t<Host class={FormCheckboxClass.root} checked={this.checked} size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t{wrapCheckbox(\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={this.identifier || this.checkboxId}\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\tchecked={this.checked}\n\t\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\tref={el => (this.inputRef = el as HTMLInputElement)}\n\t\t\t\t\t\t\taria-checked={toBoolAttr(this.checked)}\n\t\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<slot name=\"label\" />\n\t\t\t\t\t\t\t<gov-icon class={FormCheckboxClass.check} name=\"check-lg\"></gov-icon>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Fragment>,\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormCheckboxClass.root,\n\t\t\tvalue: this.value,\n\t\t\tchecked: this.checked,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormCheckboxClass.root,\n\t\t\tvalue: this.value,\n\t\t\tchecked: this.checked,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onClickHandler(e: PointerEvent) {\n\t\te.stopPropagation()\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.checked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormCheckboxClass.root,\n\t\t\tvalue: this.value,\n\t\t\tchecked: this.checked,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\t/**\n\t * Returns the reference of the native element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLInputElement> {\n\t\treturn this.inputRef\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormCheckboxClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormCheckboxClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormCheckboxClass.root)\n\t}\n}\n"]}

package/dist/collection/components/gov-form/checkbox/gov-form-checkbox.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=gov-form-checkbox.types.js.map

package/dist/collection/components/gov-form/checkbox/gov-form-checkbox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-form-checkbox.types.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/checkbox/gov-form-checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import { GovBaseEvent } from \"../../../types/event.types\"\n\nexport interface FormCheckboxEvent extends GovBaseEvent {\n\tchecked: boolean,\n\tvalue: string\n}\n"]}

package/dist/collection/components/gov-form/file/gov-form-file.js

@@ -1,13 +1,13 @@
-import { Host, h } from '@stencil/core';
-import { createID } from '../../../utils/string.utils';
-import { FormFileClass } from './constants';
-import { toBoolAttrIfDefined } from '../../../helpers/Dom/template';
-import { validateWcagLabelFor, validateWcagRef } from '../../../helpers/Validate/wcag';
-import { canValidateWcagOnRender } from '../../../helpers/Dom/win';
-import { fileAcceptValidation, fileSizeValidation, formatBytes } from '../../../utils/file.utils';
-import { delay } from '../../../utils/utils';
-import { govHost } from '../../../helpers/Dom/template';
-import { govForm } from '../../../helpers/Dom/form';
+import { Host, h } from "@stencil/core";
+import { createID } from "../../../utils/string.utils";
+import { FormFileClass } from "./constants";
+import { toBoolAttrIfDefined } from "../../../helpers/Dom/template";
+import { validateWcagLabelFor, validateWcagRef } from "../../../helpers/Validate/wcag";
+import { canValidateWcagOnRender } from "../../../helpers/Dom/win";
+import { fileAcceptValidation, fileSizeValidation, formatBytes } from "../../../utils/file.utils";
+import { delay } from "../../../utils/utils";
+import { govHost } from "../../../helpers/Dom/template";
+import { govForm } from "../../../helpers/Dom/form";
 export class GovFormFile {
   constructor() {
     this.expanded = false;
@@ -19,26 +19,26 @@ export class GovFormFile {
     this.maxFileSize = -1;
     this.identifier = undefined;
     this.invalid = undefined;
-    this.errorSize = 'Soubor je větší než povolená velikost {FILE_SIZE}';
-    this.errorAccept = 'Soubor tohoto typu není povolen';
-    this.attachmentsLabel = 'Přílohy';
+    this.errorSize = "Soubor je větší než povolená velikost {FILE_SIZE}";
+    this.errorAccept = "Soubor tohoto typu není povolen";
+    this.attachmentsLabel = "Přílohy";
     this.wcagDescribedBy = undefined;
     this.wcagLabelledBy = undefined;
-    this.wcagRemoveLabel = 'Odebrat soubor {FILE_NAME}';
-    this.wcagAttachmentsLabel = 'Přílohy';
+    this.wcagRemoveLabel = "Odebrat soubor {FILE_NAME}";
+    this.wcagAttachmentsLabel = "Přílohy";
     this.files = [];
-    this.fileId = createID('GovInputFile');
+    this.fileId = createID("GovInputFile");
     this.h = govHost(this.host);
     this.f = govForm(this.h);
   }
   registerListeners() {
     function highlight() {
-      this.areaRef.classList.add('highlight');
+      this.areaRef.classList.add("highlight");
     }
     function unhighlight() {
-      this.areaRef.classList.remove('highlight');
+      this.areaRef.classList.remove("highlight");
     }
-    this.inputRef.addEventListener('change', e => {
+    this.inputRef.addEventListener("change", e => {
       e.preventDefault();
       e.stopPropagation();
       const files = e.target.files;
@@ -46,13 +46,13 @@ export class GovFormFile {
     }, false);
     //this.inputRef.addEventListener('focus')
     if (this.expanded) {
-      const events = ['dragover', 'dragleave'];
-      const inEvents = ['dragenter', 'dragover', 'mouseenter'];
-      const outEvents = ['dragleave', 'drop', 'mouseleave'];
+      const events = ["dragover", "dragleave"];
+      const inEvents = ["dragenter", "dragover", "mouseenter"];
+      const outEvents = ["dragleave", "drop", "mouseleave"];
       events.map(eventName => this.inputRef.addEventListener(eventName, this.preventDefaults.bind(this), false));
       inEvents.map(eventName => this.inputRef.addEventListener(eventName, highlight.bind(this), false));
       outEvents.forEach(eventName => this.inputRef.addEventListener(eventName, unhighlight.bind(this), false));
-      this.areaRef.addEventListener('drop', this.handleDrop.bind(this), false);
+      this.areaRef.addEventListener("drop", this.handleDrop.bind(this), false);
     }
   }
   preventDefaults(e) {
@@ -67,23 +67,29 @@ export class GovFormFile {
     Array.from(files).map(file => {
       const isFile = this.files.find(item => item.file.name === file.name && item.file.size === file.size) || null;
       if (isFile === null) {
-        const isSizeValid = typeof this.maxFileSize === 'number' && this.maxFileSize > 0 ? fileSizeValidation(file, this.maxFileSize) : true;
+        const isSizeValid = typeof this.maxFileSize === "number" && this.maxFileSize > 0 ? fileSizeValidation(file, this.maxFileSize) : true;
         const isAcceptValid = fileAcceptValidation(file, this.accept);
         const newFile = {
-          id: createID('GovFormFile'),
+          id: createID("GovFormFile"),
           file,
           acceptValid: isAcceptValid,
           sizeValid: isSizeValid,
         };
         this.files = [...this.files, newFile];
-        this.govAddFile.emit(newFile);
+        this.govAddFile.emit({
+          component: FormFileClass.root,
+          file: newFile,
+        });
       }
     });
-    this.govFiles.emit(this.files);
+    this.govFiles.emit({
+      component: FormFileClass.root,
+      files: this.files,
+    });
   }
   componentWillLoad() {
-    this.f.passAttrToControl('type', 'File');
-    this.f.passAttrToLabel('required', String(this.required));
+    this.f.passAttrToControl("type", "File");
+    this.f.passAttrToLabel("required", String(this.required));
   }
   async componentDidRender() {
     if (canValidateWcagOnRender()) {
@@ -93,7 +99,7 @@ export class GovFormFile {
     this.registerListeners();
   }
   render() {
-    return (h(Host, { class: this.h.classes([FormFileClass.root]), invalid: toBoolAttrIfDefined(this.invalid), expanded: toBoolAttrIfDefined(this.expanded) }, h("div", { class: FormFileClass.area, ref: el => (this.areaRef = el) }, h("slot", null), h("input", { class: FormFileClass.input, ref: el => (this.inputRef = el), id: this.identifier || this.fileId, type: "file", name: this.name, accept: this.accept, onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) })), this.h.hasSlot('attachments') ? (h("div", { class: FormFileClass.attachments }, h("slot", { name: 'attachments' }))) : null, this.files.length && this.displayAttachments ? (h("div", { class: FormFileClass.attachments }, h("gov-attachments", { label: this.wcagAttachmentsLabel, "wcag-label": this.wcagAttachmentsLabel }, this.files.map(item => (h("gov-attachments-item", { "wcag-remove-labelled-by": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, h("span", { class: 'sr-only', id: item.id }, this.wcagRemoveLabel.replace('{FILE_NAME}', item.file.name)), item.file.name, item.acceptValid === false ? (h("gov-form-message", { slot: "message", variant: "error" }, h("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (h("gov-form-message", { slot: "message", variant: "error" }, h("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), this.errorSize.replace('{FILE_SIZE}', formatBytes(this.maxFileSize * 1024)))) : null, h("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
+    return (h(Host, { class: this.h.classes([FormFileClass.root]), invalid: toBoolAttrIfDefined(this.invalid), expanded: toBoolAttrIfDefined(this.expanded) }, h("div", { class: FormFileClass.area, ref: el => (this.areaRef = el) }, h("slot", null), h("input", { class: FormFileClass.input, ref: el => (this.inputRef = el), id: this.identifier || this.fileId, type: "file", name: this.name, accept: this.accept, onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) })), this.h.hasSlot("attachments") ? (h("div", { class: FormFileClass.attachments }, h("slot", { name: "attachments" }))) : null, this.files.length && this.displayAttachments ? (h("div", { class: FormFileClass.attachments }, h("gov-attachments", { label: this.wcagAttachmentsLabel, "wcag-label": this.wcagAttachmentsLabel }, this.files.map(item => (h("gov-attachments-item", { "wcag-remove-labelled-by": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, h("span", { class: "sr-only", id: item.id }, this.wcagRemoveLabel.replace("{FILE_NAME}", item.file.name)), item.file.name, item.acceptValid === false ? (h("gov-form-message", { slot: "message", variant: "error" }, h("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (h("gov-form-message", { slot: "message", variant: "error" }, h("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), this.errorSize.replace("{FILE_SIZE}", formatBytes(this.maxFileSize * 1024)))) : null, h("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
   }
   onRemoveFileHandler(file) {
     const index = this.files.findIndex(item => item.id === file.id);
@@ -102,27 +108,51 @@ export class GovFormFile {
       const removeFile = this.files[index];
       files.splice(index, 1);
       this.files = [...files];
-      this.govRemovFile.emit(removeFile);
-      this.govFiles.emit(this.files);
+      this.govRemoveFile.emit({
+        component: FormFileClass.root,
+        file: removeFile,
+      });
+      this.govFiles.emit({
+        component: FormFileClass.root,
+        files,
+      });
     }
   }
   onFocusHandler(e) {
     e.stopPropagation();
-    this.govFocus.emit(e);
+    this.govFocus.emit({
+      component: FormFileClass.root,
+      originalEvent: e,
+    });
   }
   onBlurHandler(e) {
     e.stopPropagation();
-    this.govBlur.emit(e);
+    this.govBlur.emit({
+      component: FormFileClass.root,
+      originalEvent: e,
+    });
   }
   onChangeHandler(e) {
     e.stopPropagation();
   }
+  /**
+   * Returns the reference of the native element
+   */
+  async getRef() {
+    return this.inputRef;
+  }
+  /**
+   * Returns the reference of the native area element
+   */
+  async getAreaRef() {
+    return this.areaRef;
+  }
   /**
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    validateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormFileClass.root);
-    validateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', FormFileClass.root);
+    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", FormFileClass.root);
+    validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", FormFileClass.root);
     validateWcagLabelFor(this.identifier || this.fileId, this.wcagLabelledBy, FormFileClass.root);
   }
   static get is() { return "gov-form-file"; }
@@ -314,7 +344,7 @@ export class GovFormFile {
         },
         "attribute": "error-size",
         "reflect": false,
-        "defaultValue": "'Soubor je v\u011Bt\u0161\u00ED ne\u017E povolen\u00E1 velikost {FILE_SIZE}'"
+        "defaultValue": "\"Soubor je v\u011Bt\u0161\u00ED ne\u017E povolen\u00E1 velikost {FILE_SIZE}\""
       },
       "errorAccept": {
         "type": "string",
@@ -332,7 +362,7 @@ export class GovFormFile {
         },
         "attribute": "error-accept",
         "reflect": false,
-        "defaultValue": "'Soubor tohoto typu nen\u00ED povolen'"
+        "defaultValue": "\"Soubor tohoto typu nen\u00ED povolen\""
       },
       "attachmentsLabel": {
         "type": "string",
@@ -350,7 +380,7 @@ export class GovFormFile {
         },
         "attribute": "attachments-label",
         "reflect": false,
-        "defaultValue": "'P\u0159\u00EDlohy'"
+        "defaultValue": "\"P\u0159\u00EDlohy\""
       },
       "wcagDescribedBy": {
         "type": "string",
@@ -402,7 +432,7 @@ export class GovFormFile {
         },
         "attribute": "wcag-remove-label",
         "reflect": false,
-        "defaultValue": "'Odebrat soubor {FILE_NAME}'"
+        "defaultValue": "\"Odebrat soubor {FILE_NAME}\""
       },
       "wcagAttachmentsLabel": {
         "type": "string",
@@ -420,7 +450,7 @@ export class GovFormFile {
         },
         "attribute": "wcag-attachments-label",
         "reflect": false,
-        "defaultValue": "'P\u0159\u00EDlohy'"
+        "defaultValue": "\"P\u0159\u00EDlohy\""
       }
     };
   }
@@ -441,11 +471,12 @@ export class GovFormFile {
           "text": "Emitted when the File has focus."
         },
         "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
+          "original": "GovFormFileEvent",
+          "resolved": "GovFormFileEvent",
           "references": {
-            "FocusEvent": {
-              "location": "global"
+            "GovFormFileEvent": {
+              "location": "import",
+              "path": "./gov-form-file.types"
             }
           }
         }
@@ -460,11 +491,12 @@ export class GovFormFile {
           "text": "Emitted when the File loses focus."
         },
         "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
+          "original": "GovFormFileEvent",
+          "resolved": "GovFormFileEvent",
           "references": {
-            "FocusEvent": {
-              "location": "global"
+            "GovFormFileEvent": {
+              "location": "import",
+              "path": "./gov-form-file.types"
             }
           }
         }
@@ -479,10 +511,10 @@ export class GovFormFile {
           "text": "Called when the list of inserted files is changed"
         },
         "complexType": {
-          "original": "GovFormFileItem[]",
-          "resolved": "GovFormFileItem[]",
+          "original": "GovFormFileEvent",
+          "resolved": "GovFormFileEvent",
           "references": {
-            "GovFormFileItem": {
+            "GovFormFileEvent": {
               "location": "import",
               "path": "./gov-form-file.types"
             }
@@ -499,17 +531,17 @@ export class GovFormFile {
           "text": "Called when a new file is added"
         },
         "complexType": {
-          "original": "GovFormFileItem",
-          "resolved": "GovFormFileItem",
+          "original": "GovFormFileEvent",
+          "resolved": "GovFormFileEvent",
           "references": {
-            "GovFormFileItem": {
+            "GovFormFileEvent": {
               "location": "import",
               "path": "./gov-form-file.types"
             }
           }
         }
       }, {
-        "method": "govRemovFile",
+        "method": "govRemoveFile",
         "name": "gov-remove-file",
         "bubbles": true,
         "cancelable": true,
@@ -519,10 +551,10 @@ export class GovFormFile {
           "text": "Called when a file is removed from the list"
         },
         "complexType": {
-          "original": "GovFormFileItem",
-          "resolved": "GovFormFileItem",
+          "original": "GovFormFileEvent",
+          "resolved": "GovFormFileEvent",
           "references": {
-            "GovFormFileItem": {
+            "GovFormFileEvent": {
               "location": "import",
               "path": "./gov-form-file.types"
             }
@@ -532,6 +564,44 @@ export class GovFormFile {
   }
   static get methods() {
     return {
+      "getRef": {
+        "complexType": {
+          "signature": "() => Promise<HTMLInputElement>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLInputElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<HTMLInputElement>"
+        },
+        "docs": {
+          "text": "Returns the reference of the native element",
+          "tags": []
+        }
+      },
+      "getAreaRef": {
+        "complexType": {
+          "signature": "() => Promise<HTMLDivElement>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLDivElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<HTMLDivElement>"
+        },
+        "docs": {
+          "text": "Returns the reference of the native area element",
+          "tags": []
+        }
+      },
       "validateWcag": {
         "complexType": {
           "signature": "() => Promise<void>",