@gov-design-system-ce/components 0.0.1

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

@@ -0,0 +1,362 @@
+import { Host, h } from "@stencil/core";
+import { createID } from "../../../../src/utils/string.utils";
+import { validateProp } from "../../../helpers/Validate/props";
+import { FormCheckboxClass } from "./constants";
+import { toBoolAttrIfDefined } from "../../../helpers/Dom/template";
+import { validateWcagLabelFor, validateWcagRef } from "../../../helpers/Validate/wcag";
+import { canValidateWcagOnRender } from "../../../helpers/Dom/win";
+import { delay } from "../../../utils/utils";
+import { Sizes } from "../../../core/constants/sizes";
+import { govHost, toBoolAttr } from "../../../helpers/Dom/template";
+import { govForm } from "../../../helpers/Dom/form";
+import { FormLabelClass } from "../label/constants";
+export class GovFormCheckbox {
+  constructor() {
+    this.value = undefined;
+    this.checked = false;
+    this.required = false;
+    this.disabled = undefined;
+    this.name = undefined;
+    this.size = undefined;
+    this.identifier = undefined;
+    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(Sizes, newValue, FormCheckboxClass.root);
+  }
+  componentWillLoad() {
+    this.isChecked = this.checked;
+    this.f.passAttrToControl('type', 'checkbox');
+    this.h.passChildAttr(FormLabelClass.root, 'identifier', this.identifier || this.checkboxId);
+  }
+  async componentDidRender() {
+    if (canValidateWcagOnRender()) {
+      await delay(500);
+      await this.validateWcag();
+    }
+  }
+  render() {
+    const { isChecked } = this;
+    return (h(Host, { class: FormCheckboxClass.root, "is-checked": isChecked, size: this.size, invalid: toBoolAttrIfDefined(this.invalid) }, h("input", { id: this.identifier || this.checkboxId, type: "checkbox", value: this.value, name: this.name, checked: this.isChecked, 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" }))));
+  }
+  onFocusHandler(e) {
+    this.govFocus.emit(e);
+  }
+  onBlurHandler(e) {
+    this.govBlur.emit(e);
+  }
+  onChangeHandler(e) {
+    this.isChecked = e.target.checked;
+    e.stopPropagation();
+    this.govChange.emit({
+      checked: this.isChecked,
+      value: this.value,
+    });
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", FormCheckboxClass.root);
+    validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", FormCheckboxClass.root);
+    validateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormCheckboxClass.root);
+  }
+  static get is() { return "gov-form-checkbox"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-form-checkbox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-form-checkbox.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of checkbox"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Checkbox default state"
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "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.\nWhen using this property you need to also set \u201Cnovalidate\u201D attribute to your form element to prevent browser from displaying its own validation errors."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the checkbox component disabled.\nThis prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies."
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the checkbox."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "size": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "SizesType",
+          "resolved": "any",
+          "references": {
+            "SizesType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Checkbox's size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom checkbox identifier."
+        },
+        "attribute": "identifier",
+        "reflect": false
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the entered value does not conform to the format expected by the application."
+        },
+        "attribute": "invalid",
+        "reflect": false
+      },
+      "wcagDescribedBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component that describes the input."
+        },
+        "attribute": "wcag-described-by",
+        "reflect": false
+      },
+      "wcagLabelledBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component that labels the input."
+        },
+        "attribute": "wcag-labelded-by",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isChecked": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "govFocus",
+        "name": "gov-focus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the checkbox has focus."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "govBlur",
+        "name": "gov-blur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the checkbox loses focus."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "govChange",
+        "name": "gov-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the checkbox change value."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "validateWcag": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Validate the WCAG attributes of the component",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "checked",
+        "methodName": "updateCheckedState"
+      }, {
+        "propName": "size",
+        "methodName": "validateSize"
+      }];
+  }
+}
+//# sourceMappingURL=gov-form-checkbox.js.map

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

@@ -0,0 +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 \"../../../../src/utils/string.utils\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { FormCheckboxClass, SizesType } 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 { Sizes } from \"../../../core/constants/sizes\"\nimport {GovForm}from \"../../../helpers/Dom/form.d\"\nimport {govHost, toBoolAttr}from \"../../../helpers/Dom/template\"\nimport {GovHost}from \"../../../helpers/Dom/template.d\"\nimport {govForm}from \"../../../helpers/Dom/form\"\nimport { FormLabelClass } from \"../label/constants\"\n\n@Component({\n\ttag: \"gov-form-checkbox\",\n\tstyleUrl: \"gov-form-checkbox.scss\",\n})\nexport class GovFormCheckbox {\n\tprivate 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: SizesType = undefined\n\t/**\n\t * Custom checkbox identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\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-labelded-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\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(Sizes, newValue, FormCheckboxClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.isChecked = this.checked\n\n\t\tthis.f.passAttrToControl('type', 'checkbox')\n\t\tthis.h.passChildAttr(FormLabelClass.root, 'identifier', this.identifier || this.checkboxId)\n\t}\n\n\tasync componentDidRender() {\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\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<input id={this.identifier || this.checkboxId}\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tchecked={this.isChecked}\n\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\taria-checked={toBoolAttr(this.isChecked)}\n\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)} />\n\t\t\t\t<span>\n\t\t\t\t\t<slot name=\"label\"/>\n\t\t\t\t\t<gov-icon class={FormCheckboxClass.check} name=\"check\"></gov-icon>\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.govBlur.emit(e)\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"]}

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

@@ -0,0 +1,78 @@
+import { Sizes } from "./constants";
+import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+// @ts-ignore
+import readme from "./readme.md";
+import { bindProps, removeUndefinedValues } from "../../../../.storybook/helpers";
+const StoryConfiguration = {
+  title: "Design system/Switch",
+  args: {
+    size: GlobalSizes._M,
+    label: 'This is label of switch',
+    errorMessage: '',
+    message: '',
+    disabled: false,
+  },
+  argTypes: {
+    size: {
+      control: "select",
+      options: removeUndefinedValues(Sizes),
+    },
+    label: "string",
+    errorMessage: "string",
+    message: "string",
+    disabled: "boolean",
+  },
+  parameters: {
+    notes: readme,
+  },
+};
+const propsControl = ["size", "disabled"];
+const propsInput = ["disabled"];
+const Template = (args) => {
+  let message;
+  const control = document.createElement('gov-form-control');
+  const label = document.createElement('gov-form-label');
+  const el = document.createElement("gov-form-switch");
+  label.innerHTML = args.label;
+  label.setAttribute('slot', 'label');
+  if (args.message || args.errorMessage) {
+    message = document.createElement('gov-form-message');
+    message.innerHTML = args.errorMessage || args.message;
+    message.setAttribute('slot', 'bottom');
+  }
+  if (args.message) {
+    message.setAttribute('variant', 'secondary');
+    control.appendChild(message);
+  }
+  if (args.errorMessage) {
+    control.setAttribute('invalid', 'true');
+    const icon = document.createElement('i');
+    icon.classList.add("fa-solid");
+    icon.classList.add("fa-warning");
+    icon.setAttribute('slot', 'icon');
+    message.setAttribute('variant', 'error');
+    message.appendChild(icon);
+    control.appendChild(message);
+  }
+  el.appendChild(label);
+  control.appendChild(el);
+  bindProps(control, propsControl, args);
+  bindProps(el, propsInput, args);
+  return control;
+};
+export const Playground = Template.bind({});
+Playground.args = {};
+export const Invalid = Template.bind({});
+Invalid.args = {
+  errorMessage: 'This field is required'
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true
+};
+export const WithMessage = Template.bind({});
+WithMessage.args = {
+  message: 'Here you can put your name'
+};
+export default StoryConfiguration;
+//# sourceMappingURL=gov-form-checkbox.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-form-checkbox.stories.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/checkbox/gov-form-checkbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Sizes } from \"./constants\"\nimport { Sizes as GlobalSizes } from \"../../../core/constants/sizes\"\n// @ts-ignore\nimport readme from \"./readme.md\"\nimport { bindProps, removeUndefinedValues } from \"../../../../.storybook/helpers\"\n\nconst StoryConfiguration = {\n\ttitle: \"Design system/Switch\",\n\targs: {\n\t\tsize: GlobalSizes._M,\n\t\tlabel: 'This is label of switch',\n\t\terrorMessage: '',\n\t\tmessage: '',\n\t\tdisabled: false,\n\t},\n\targTypes: {\n\t\tsize: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: removeUndefinedValues(Sizes),\n\t\t},\n\t\tlabel: \"string\",\n\t\terrorMessage: \"string\",\n\t\tmessage: \"string\",\n\t\tdisabled: \"boolean\",\n\t},\n\tparameters: {\n\t\tnotes: readme,\n\t},\n}\n\nconst propsControl = [\"size\", \"disabled\"]\nconst propsInput = [\"disabled\"]\n\nconst Template = (args) => {\n\tlet message\n\tconst control = document.createElement('gov-form-control')\n\tconst label = document.createElement('gov-form-label')\n\tconst el = document.createElement(\"gov-form-switch\")\n\n\tlabel.innerHTML = args.label\n\tlabel.setAttribute('slot', 'label')\n\n\tif(args.message || args.errorMessage) {\n\t\tmessage = document.createElement('gov-form-message')\n\t\tmessage.innerHTML = args.errorMessage || args.message\n\t\tmessage.setAttribute('slot', 'bottom')\n\t}\n\n\tif(args.message) {\n\t\tmessage.setAttribute('variant', 'secondary')\n\t\tcontrol.appendChild(message)\n\t}\n\n\tif(args.errorMessage) {\n\t\tcontrol.setAttribute('invalid', 'true')\n\t\tconst icon = document.createElement('i')\n\t\ticon.classList.add(\"fa-solid\")\n\t\ticon.classList.add(\"fa-warning\")\n\t\ticon.setAttribute('slot', 'icon')\n\t\tmessage.setAttribute('variant', 'error')\n\t\tmessage.appendChild(icon)\n\t\tcontrol.appendChild(message)\n\t}\n\n\tel.appendChild(label)\n\n\tcontrol.appendChild(el)\n\n\tbindProps(control, propsControl, args)\n\tbindProps(el, propsInput, args)\n\n\treturn control\n}\n\nexport const Playground = Template.bind({})\nPlayground.args = {}\n\nexport const Invalid = Template.bind({})\nInvalid.args = {\n\terrorMessage: 'This field is required'\n}\n\nexport const Disabled = Template.bind({})\nDisabled.args = {\n\tdisabled: true\n}\n\nexport const WithMessage = Template.bind({})\nWithMessage.args = {\n\tmessage: 'Here you can put your name'\n}\nexport default StoryConfiguration\n"]}

package/dist/collection/components/gov-form/control/constants.js

@@ -0,0 +1,7 @@
+import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+export const Sizes = [undefined, GlobalSizes._M, GlobalSizes._L, GlobalSizes._XL];
+export const FormControlClass = {
+  root: 'gov-form-control',
+  bottom: 'gov-form-control__bottom',
+};
+//# sourceMappingURL=constants.js.map

package/dist/collection/components/gov-form/control/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/control/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAEpE,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,GAAG,CAAU,CAAA;AAG1F,MAAM,CAAC,MAAM,gBAAgB,GAAG;EAC/B,IAAI,EAAE,kBAAkB;EACxB,MAAM,EAAE,0BAA0B;CAClC,CAAA","sourcesContent":["import { Sizes as GlobalSizes } from \"../../../core/constants/sizes\"\n\nexport const Sizes = [undefined, GlobalSizes._M, GlobalSizes._L, GlobalSizes._XL] as const\nexport type SizesType = typeof Sizes[number]\n\nexport const FormControlClass = {\n\troot: 'gov-form-control',\n\tbottom: 'gov-form-control__bottom',\n}\n"]}