@gov-design-system-ce/components 0.0.1 → 0.0.3

package/dist/collection/components/gov-form/group/gov-form-group.css

@@ -48,15 +48,15 @@
  -  Variables - Typography
  */
 /*
- -  Variables - Sizes
+ -  Variables - Variants
  */
-/* "Constants" for general usage */
 /*
- -  Variables - Variants
+ -  Variables - Container
  */
 /*
- -  Variables - Layout
+ -  Variables - Sizes
  */
+/* "Constants" for general usage */
 /*
  -  Variables - Accordion
  */
@@ -72,6 +72,9 @@
 /*
  -  Variables - Buttons (&& Badges)
  */
+/*
+ -  Variables - Breadcrumbs
+ */
 /*
  -  Variables - Classes
  */
@@ -84,9 +87,6 @@
 /*
  -  Variables - Card
  */
-/*
- -  Variables - Container
- */
 /*
  -  Variables - Message
  */
@@ -99,6 +99,9 @@
 /*
  -  Variables - Grid
  */
+/*
+ -  Variables - Tiles
+ */
 /*
  -  Variables - Modal & Prompt
  */
@@ -118,6 +121,9 @@
 /*
  -  Variables - Tooltip
  */
+/*
+ -  Variables - Loading
+ */
 /*
  -	Variables - Forms
  */
@@ -145,6 +151,9 @@
 /*
  -	Variables - Form checkbox & radio
  */
+/*
+ -  Variables - Form group
+ */
 /*
  -	Variables - Form file
  */
@@ -157,12 +166,21 @@
 /*
  -  Variables - Stepper
  */
+/*
+ -  Variables - Side nav
+ */
 /*
  -  Variables - Grid & Tile
  */
 /*
  -  Variables - Pagination
  */
+/*
+ -  Variables - Nav
+ */
+/*
+ -  Variables - Layout
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;
@@ -173,6 +191,30 @@
     transform: rotate(360deg);
   }
 }
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
 .gov-form-group {
-  display: block;
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.gov-form-group[gap="2xs"] {
+  gap: 0.25rem;
+}
+.gov-form-group[gap=xs] {
+  gap: 0.5rem;
+}
+.gov-form-group[gap=s] {
+  gap: 0.75rem;
+}
+.gov-form-group[gap=m] {
+  gap: 1rem;
+}
+.gov-form-group[gap=l] {
+  gap: 1.25rem;
 }

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

@@ -1,5 +1,5 @@
-import { h, Host } from "@stencil/core";
-import { FormGroupClass } from "./constants";
+import { h, Host } from '@stencil/core';
+import { FormGroupClass } from './constants';
 export class GovFormGroup {
   render() {
     return (h(Host, { class: FormGroupClass.root }, h("slot", null)));

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

@@ -1 +1 @@
-{"version":3,"file":"gov-form-group.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/group/gov-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAM5C,MAAM,OAAO,YAAY;EAExB,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,cAAc,CAAC,IAAI;MAC/B,eAAa,CACP,CACP,CAAA;EACF,CAAC;;;;;;;;CACD","sourcesContent":["import { Component, h, Host } from \"@stencil/core\"\nimport { FormGroupClass } from \"./constants\"\n\n@Component({\n\ttag: \"gov-form-group\",\n\tstyleUrl: \"gov-form-group.scss\"\n})\nexport class GovFormGroup {\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormGroupClass.root}>\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"gov-form-group.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/group/gov-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAM5C,MAAM,OAAO,YAAY;EACxB,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,cAAc,CAAC,IAAI;MAC/B,eAAa,CACP,CACP,CAAA;EACF,CAAC;;;;;;;;CACD","sourcesContent":["import { Component, h, Host } from '@stencil/core'\nimport { FormGroupClass } from './constants'\n\n@Component({\n\ttag: 'gov-form-group',\n\tstyleUrl: 'gov-form-group.scss',\n})\nexport class GovFormGroup {\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormGroupClass.root}>\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -1,8 +1,23 @@
-import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
-import { Variants as GlobalVariants } from "../../../core/constants/variants";
+import { Sizes as GlobalSizes } from '../../../core/constants/sizes';
+import { Variants as GlobalVariants } from '../../../core/constants/variants';
 export const Sizes = [undefined, GlobalSizes._M, GlobalSizes._L, GlobalSizes._XL];
 export const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY];
-export const InputTypes = [undefined, 'color', 'date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week'];
+export const InputTypes = [
+  undefined,
+  'color',
+  'date',
+  'datetime-local',
+  'email',
+  'month',
+  'number',
+  'password',
+  'search',
+  'tel',
+  'text',
+  'time',
+  'url',
+  'week',
+];
 export const Types = [undefined, 'reset'];
 export const FormInputClass = {
   root: 'gov-form-input',

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/input/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAE7E,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,QAAQ,GAAG,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,SAAS,CAAU,CAAA;AAG9F,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAU,CAAA;AAGzK,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,OAAO,CAAU,CAAA;AAGlD,MAAM,CAAC,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,gBAAgB;CACtB,CAAA","sourcesContent":["import { Sizes as GlobalSizes } from \"../../../core/constants/sizes\"\nimport { Variants as GlobalVariants } from \"../../../core/constants/variants\"\n\nexport const Sizes = [undefined, GlobalSizes._M, GlobalSizes._L, GlobalSizes._XL] as const\nexport type SizesType = typeof Sizes[number]\n\nexport const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY] as const\nexport type VariantType = typeof Variants[number]\n\nexport const InputTypes = [undefined, 'color', 'date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week'] as const\nexport type InputType = typeof InputTypes[number]\n\nexport const Types = [undefined, 'reset'] as const\nexport type Type = typeof Types[number]\n\nexport const FormInputClass = {\n\troot: 'gov-form-input',\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/input/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAE7E,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,QAAQ,GAAG,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,SAAS,CAAU,CAAA;AAG9F,MAAM,CAAC,MAAM,UAAU,GAAG;EACzB,SAAS;EACT,OAAO;EACP,MAAM;EACN,gBAAgB;EAChB,OAAO;EACP,OAAO;EACP,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,KAAK;EACL,MAAM;EACN,MAAM;EACN,KAAK;EACL,MAAM;CACG,CAAA;AAGV,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,OAAO,CAAU,CAAA;AAGlD,MAAM,CAAC,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,gBAAgB;CACtB,CAAA","sourcesContent":["import { Sizes as GlobalSizes } from '../../../core/constants/sizes'\nimport { Variants as GlobalVariants } from '../../../core/constants/variants'\n\nexport const Sizes = [undefined, GlobalSizes._M, GlobalSizes._L, GlobalSizes._XL] as const\nexport type SizesType = (typeof Sizes)[number]\n\nexport const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY] as const\nexport type VariantType = (typeof Variants)[number]\n\nexport const InputTypes = [\n\tundefined,\n\t'color',\n\t'date',\n\t'datetime-local',\n\t'email',\n\t'month',\n\t'number',\n\t'password',\n\t'search',\n\t'tel',\n\t'text',\n\t'time',\n\t'url',\n\t'week',\n] as const\nexport type InputType = (typeof InputTypes)[number]\n\nexport const Types = [undefined, 'reset'] as const\nexport type Type = (typeof Types)[number]\n\nexport const FormInputClass = {\n\troot: 'gov-form-input',\n}\n"]}

package/dist/collection/components/gov-form/input/gov-form-input.css

@@ -48,15 +48,15 @@
  -  Variables - Typography
  */
 /*
- -  Variables - Sizes
+ -  Variables - Variants
  */
-/* "Constants" for general usage */
 /*
- -  Variables - Variants
+ -  Variables - Container
  */
 /*
- -  Variables - Layout
+ -  Variables - Sizes
  */
+/* "Constants" for general usage */
 /*
  -  Variables - Accordion
  */
@@ -72,6 +72,9 @@
 /*
  -  Variables - Buttons (&& Badges)
  */
+/*
+ -  Variables - Breadcrumbs
+ */
 /*
  -  Variables - Classes
  */
@@ -84,9 +87,6 @@
 /*
  -  Variables - Card
  */
-/*
- -  Variables - Container
- */
 /*
  -  Variables - Message
  */
@@ -99,6 +99,9 @@
 /*
  -  Variables - Grid
  */
+/*
+ -  Variables - Tiles
+ */
 /*
  -  Variables - Modal & Prompt
  */
@@ -118,6 +121,9 @@
 /*
  -  Variables - Tooltip
  */
+/*
+ -  Variables - Loading
+ */
 /*
  -	Variables - Forms
  */
@@ -145,6 +151,9 @@
 /*
  -	Variables - Form checkbox & radio
  */
+/*
+ -  Variables - Form group
+ */
 /*
  -	Variables - Form file
  */
@@ -157,12 +166,21 @@
 /*
  -  Variables - Stepper
  */
+/*
+ -  Variables - Side nav
+ */
 /*
  -  Variables - Grid & Tile
  */
 /*
  -  Variables - Pagination
  */
+/*
+ -  Variables - Nav
+ */
+/*
+ -  Variables - Layout
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;
@@ -173,11 +191,21 @@
     transform: rotate(360deg);
   }
 }
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
 /*
 *   Input
 */
+/*
+ *   Input & Textarea & Select Shared Definitions
+ */
 .gov-form-input {
+  position: relative;
   display: flex;
+  width: 100%;
   align-items: center;
 }
 .gov-form-input .element {
@@ -190,9 +218,9 @@
   width: 100%;
   border: var(--gov-form-input-border-width, 0.0625rem solid var(--gov-color-secondary-700));
   border-radius: var(--gov-border-radius, 0.1875rem);
-  background-color: var(--gov-form-bg-color, var(--gov-color-secondary-100));
+  background-color: var(--gov-form-bg-color, var(--gov-color-neutral-white));
   color: var(--gov-form-input-color, var(--gov-color-secondary-700));
-  font-family: "Roboto", sans-serif;
+  font-family: var(--gov-font-family, "Roboto", sans-serif);
 }
 .gov-form-input input:focus,
 .gov-form-input select:focus,
@@ -300,7 +328,7 @@
   font-size: var(--gov-text-m-font-size);
   line-height: var(--gov-text-m-line-height);
   letter-spacing: var(--gov-text-m-letter-spacing);
-  gap: 0.5rem 1rem;
+  gap: 0.5rem var(--gov-form-input-core-m-icon-size, 1rem);
 }
 [size=m].gov-form-input input,
 [size=m].gov-form-input select {
@@ -308,31 +336,32 @@
   font-size: var(--gov-text-m-font-size);
   line-height: var(--gov-text-m-line-height);
   letter-spacing: var(--gov-text-m-letter-spacing);
-  padding: 0.4375rem 0.75rem;
+  height: var(--gov-form-input-core-m-height, 2.5rem);
+  padding: var(--gov-form-input-core-m-padding, 0.4375rem 0.75rem);
 }
 [size=m].gov-form-input *[slot=left-icon],
 [size=m].gov-form-input *[slot=right-icon] {
-  width: 1rem;
-  height: 1rem;
+  width: var(--gov-form-input-core-m-icon-size, 1rem);
+  height: var(--gov-form-input-core-m-icon-size, 1rem);
 }
 [size=m].gov-form-input *[slot=left-icon] {
-  left: 0.75rem;
+  left: calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2);
 }
 [size=m].gov-form-input *[slot=left-icon] ~ input {
-  padding-left: 2.5rem;
+  padding-left: var(--gov-form-input-core-m-icon-padding, 2.5rem);
 }
 [size=m].gov-form-input *[slot=right-icon] {
-  right: 0.75rem;
+  right: calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2);
 }
 [size=m].gov-form-input *[slot=right-icon] ~ input, [size=m].gov-form-input *[slot=right-icon] ~ select {
-  padding-right: 2.5rem;
+  padding-right: var(--gov-form-input-core-m-icon-padding, 2.5rem);
 }
 [size=l].gov-form-input {
   font-weight: var(--gov-text-m-font-weight);
   font-size: var(--gov-text-m-font-size);
   line-height: var(--gov-text-m-line-height);
   letter-spacing: var(--gov-text-m-letter-spacing);
-  gap: 0.5rem 1rem;
+  gap: 0.5rem var(--gov-form-input-core-l-icon-size, 1rem);
 }
 [size=l].gov-form-input input,
 [size=l].gov-form-input select {
@@ -340,31 +369,32 @@
   font-size: var(--gov-text-m-font-size);
   line-height: var(--gov-text-m-line-height);
   letter-spacing: var(--gov-text-m-letter-spacing);
-  padding: 0.6875rem 0.75rem;
+  height: var(--gov-form-input-core-l-height, 3rem);
+  padding: var(--gov-form-input-core-l-padding, 0.6875rem 0.75rem);
 }
 [size=l].gov-form-input *[slot=left-icon],
 [size=l].gov-form-input *[slot=right-icon] {
-  width: 1rem;
-  height: 1rem;
+  width: var(--gov-form-input-core-l-icon-size, 1rem);
+  height: var(--gov-form-input-core-l-icon-size, 1rem);
 }
 [size=l].gov-form-input *[slot=left-icon] {
-  left: 0.75rem;
+  left: calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2);
 }
 [size=l].gov-form-input *[slot=left-icon] ~ input {
-  padding-left: 2.5rem;
+  padding-left: var(--gov-form-input-core-l-icon-padding, 2.5rem);
 }
 [size=l].gov-form-input *[slot=right-icon] {
-  right: 0.75rem;
+  right: calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2);
 }
 [size=l].gov-form-input *[slot=right-icon] ~ input, [size=l].gov-form-input *[slot=right-icon] ~ select {
-  padding-right: 2.5rem;
+  padding-right: var(--gov-form-input-core-l-icon-padding, 2.5rem);
 }
 [size=xl].gov-form-input {
   font-weight: var(--gov-text-l-font-weight);
   font-size: var(--gov-text-l-font-size);
   line-height: var(--gov-text-l-line-height);
   letter-spacing: var(--gov-text-l-letter-spacing);
-  gap: 0.5rem 1.25rem;
+  gap: 0.5rem var(--gov-form-input-core-xl-icon-size, 1.25rem);
 }
 [size=xl].gov-form-input input,
 [size=xl].gov-form-input select {
@@ -372,24 +402,25 @@
   font-size: var(--gov-text-l-font-size);
   line-height: var(--gov-text-l-line-height);
   letter-spacing: var(--gov-text-l-letter-spacing);
-  padding: 0.9375rem 1rem 0.875rem;
+  height: var(--gov-form-input-core-xl-height, 3.5rem);
+  padding: var(--gov-form-input-core-xl-padding, 0.9375rem 1rem 0.875rem);
 }
 [size=xl].gov-form-input *[slot=left-icon],
 [size=xl].gov-form-input *[slot=right-icon] {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--gov-form-input-core-xl-icon-size, 1.25rem);
+  height: var(--gov-form-input-core-xl-icon-size, 1.25rem);
 }
 [size=xl].gov-form-input *[slot=left-icon] {
-  left: 0.875rem;
+  left: calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2);
 }
 [size=xl].gov-form-input *[slot=left-icon] ~ input {
-  padding-left: 3rem;
+  padding-left: var(--gov-form-input-core-xl-icon-padding, 3rem);
 }
 [size=xl].gov-form-input *[slot=right-icon] {
-  right: 0.875rem;
+  right: calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2);
 }
 [size=xl].gov-form-input *[slot=right-icon] ~ input, [size=xl].gov-form-input *[slot=right-icon] ~ select {
-  padding-right: 3rem;
+  padding-right: var(--gov-form-input-core-xl-icon-padding, 3rem);
 }
 
 .gov-form-input[type=reset] input {

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

@@ -1,13 +1,13 @@
-import { Host, h } from "@stencil/core";
-import { createID } from "../../../../src/utils/string.utils";
-import { govHost, toBoolAttrIfDefined, toOnOffAttrIfDefined } from "../../../helpers/Dom/template";
-import { FormInputClass, Variants } from "./constants";
-import { Sizes } from "../../../core/constants/sizes";
-import { validateProp } from "../../../helpers/Validate/props";
-import { canValidateWcagOnRender } from "../../../helpers/Dom/win";
-import { delay } from "../../../utils/utils";
-import { validateWcagLabelFor, validateWcagRef } from "../../../helpers/Validate/wcag";
-import { govForm } from "../../../helpers/Dom/form";
+import { Host, h } from '@stencil/core';
+import { createID } from '../../../../src/utils/string.utils';
+import { govHost, toBoolAttrIfDefined, toOnOffAttrIfDefined } from '../../../helpers/Dom/template';
+import { FormInputClass, Variants } from './constants';
+import { Sizes } from '../../../core/constants/sizes';
+import { validateProp } from '../../../helpers/Validate/props';
+import { canValidateWcagOnRender } from '../../../helpers/Dom/win';
+import { delay } from '../../../utils/utils';
+import { validateWcagLabelFor, validateWcagRef } from '../../../helpers/Validate/wcag';
+import { govForm } from '../../../helpers/Dom/form';
 var Tags;
 (function (Tags) {
   Tags["INPUT"] = "input";
@@ -19,7 +19,7 @@ export class GovFormInput {
     this.identifier = undefined;
     this.variant = undefined;
     this.success = undefined;
-    this.size = undefined;
+    this.size = Sizes._M;
     this.name = undefined;
     this.multiline = undefined;
     this.rows = undefined;
@@ -33,7 +33,7 @@ export class GovFormInput {
     this.autocomplete = undefined;
     this.autocorrect = undefined;
     this.type = undefined;
-    this.inputType = "text";
+    this.inputType = 'text';
     this.role = undefined;
     this.invalid = undefined;
     this.wcagDescribedBy = undefined;
@@ -43,7 +43,7 @@ export class GovFormInput {
     this.wcagExpanded = undefined;
     this.focused = undefined;
     this.h = govHost(this.host);
-    this.inputId = createID("GovInput");
+    this.inputId = createID('GovInput');
     this.f = govForm(govHost(this.host));
   }
   validateVariant(newValue) {
@@ -55,7 +55,7 @@ export class GovFormInput {
   componentWillLoad() {
     this.validateVariant(this.variant);
     this.validateSize(this.size);
-    this.f.passAttrToControl('input-type', this.multiline ? Tags.TEXTAREA : Tags.INPUT);
+    this.f.passAttrToControl('type', this.multiline ? Tags.TEXTAREA : Tags.INPUT);
   }
   async componentDidRender() {
     if (canValidateWcagOnRender()) {
@@ -65,11 +65,7 @@ export class GovFormInput {
   }
   render() {
     const Tag = this.multiline ? Tags.TEXTAREA : Tags.INPUT;
-    return (h(Host, { class: FormInputClass.root, size: this.size, variant: this.variant, type: this.type }, this.h.hasSlot("prefix") && h("slot", { name: "prefix" }), h("span", { class: "element" }, this.h.hasSlot("left-icon") &&
-      h("slot", { name: "left-icon" }), this.h.hasSlot("right-icon") && !(this.success || this.invalid) &&
-      h("slot", { name: "right-icon" }), this.success && !this.multiline &&
-      h("gov-icon", { slot: "right-icon", class: "icon-validation", name: "check" }), this.invalid && !this.multiline &&
-      h("gov-icon", { slot: "right-icon", class: "icon-validation", name: "exclamation" }), h(Tag, { type: this.inputType, disabled: this.disabled, id: this.identifier || this.inputId, name: this.name, onFocus: this.onFocusHandler.bind(this), onInput: this.onInputHandler.bind(this), onBlur: this.onBlurHandler.bind(this), onKeyUp: this.onKeyUpHandler.bind(this), ref: el => this.inputRef = el, placeholder: this.placeholder, value: this.value, readonly: toBoolAttrIfDefined(this.readonly), autocomplete: toOnOffAttrIfDefined(this.autocomplete), autocorrect: toOnOffAttrIfDefined(this.autocorrect), minlength: this.minlength, maxlength: this.maxlength, required: this.required, rows: this.rows, cols: this.cols, role: this.role, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns, "aria-expanded": toBoolAttrIfDefined(this.wcagExpanded), "aria-autocomplete": this.wcagAutocomplete })), this.h.hasSlot("sufix") && h("slot", { name: "sufix" })));
+    return (h(Host, { class: FormInputClass.root, size: this.size, variant: this.variant, type: this.type }, this.h.hasSlot('prefix') && h("slot", { name: "prefix" }), h("span", { class: "element" }, this.h.hasSlot('left-icon') && h("slot", { name: "left-icon" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && h("slot", { name: "right-icon" }), this.success && !this.multiline && h("gov-icon", { slot: "right-icon", class: "icon-validation", name: "check" }), this.invalid && !this.multiline && h("gov-icon", { slot: "right-icon", class: "icon-validation", name: "exclamation" }), h(Tag, { type: this.inputType, disabled: this.disabled, id: this.identifier || this.inputId, name: this.name, onFocus: this.onFocusHandler.bind(this), onInput: this.onInputHandler.bind(this), onBlur: this.onBlurHandler.bind(this), onKeyUp: this.onKeyUpHandler.bind(this), ref: el => (this.inputRef = el), placeholder: this.placeholder, value: this.value, readonly: toBoolAttrIfDefined(this.readonly), autocomplete: toOnOffAttrIfDefined(this.autocomplete), autocorrect: toOnOffAttrIfDefined(this.autocorrect), minlength: this.minlength, maxlength: this.maxlength, required: this.required, rows: this.rows, cols: this.cols, role: this.role, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns, "aria-expanded": toBoolAttrIfDefined(this.wcagExpanded), "aria-autocomplete": this.wcagAutocomplete })), this.h.hasSlot('sufix') && h("slot", { name: "sufix" })));
   }
   onFocusHandler(e) {
     this.focused = true;
@@ -117,9 +113,9 @@ export class GovFormInput {
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", FormInputClass.root);
-    validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", FormInputClass.root);
-    validateWcagRef(this.wcagOwns, "wcag-owns", FormInputClass.root);
+    validateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormInputClass.root);
+    validateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', FormInputClass.root);
+    validateWcagRef(this.wcagOwns, 'wcag-owns', FormInputClass.root);
     validateWcagLabelFor(this.identifier || this.inputId, this.wcagLabelledBy, FormInputClass.root);
   }
   static get is() { return "gov-form-input"; }
@@ -230,7 +226,7 @@ export class GovFormInput {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "undefined"
+        "defaultValue": "Sizes._M"
       },
       "name": {
         "type": "string",
@@ -484,7 +480,7 @@ export class GovFormInput {
         },
         "attribute": "input-type",
         "reflect": false,
-        "defaultValue": "\"text\""
+        "defaultValue": "'text'"
       },
       "role": {
         "type": "string",
@@ -554,7 +550,7 @@ export class GovFormInput {
           "tags": [],
           "text": "Indicates the id of a component that labels the input."
         },
-        "attribute": "wcag-labelded-by",
+        "attribute": "wcag-labelled-by",
         "reflect": false
       },
       "wcagOwns": {
@@ -665,9 +661,13 @@ export class GovFormInput {
           "text": "Emitted when the input change value."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "InputEvent",
+          "resolved": "InputEvent",
+          "references": {
+            "InputEvent": {
+              "location": "global"
+            }
+          }
         }
       }, {
         "method": "govKeyUp",

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

@@ -1 +1 @@
-{"version":3,"file":"gov-form-input.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/input/gov-form-input.tsx"],"names":[],"mappings":"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ChG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Host, h, Prop, Watch, Event, EventEmitter, State, Method } from \"@stencil/core\"\nimport { GovHost } from \"../../../helpers/Dom/template.d\"\nimport { SizesType, InputType, Type } from \"./constants\"\nimport { createID } from \"../../../../src/utils/string.utils\"\nimport { govHost, toBoolAttrIfDefined, toOnOffAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport { FormInputClass, Variants, VariantType } from \"./constants\"\nimport { Sizes } from \"../../../core/constants/sizes\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { delay } from \"../../../utils/utils\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { GovForm }from \"../../../helpers/Dom/form.d\"\nimport { govForm }from \"../../../helpers/Dom/form\"\n\nenum Tags {\n\tINPUT = \"input\",\n\tTEXTAREA = \"textarea\"\n}\n\n@Component({\n\ttag: \"gov-form-input\",\n\tstyleUrl: \"gov-form-input.scss\",\n})\nexport class GovFormInput {\n\tprivate f: GovForm\n\tprivate h: GovHost\n\tprivate inputRef?: HTMLInputElement\n\tprivate readonly inputId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.inputId = createID(\"GovInput\")\n\t\tthis.f = govForm(govHost(this.host));\n\t}\n\n\t@Element() host: HTMLGovFormInputElement\n\t/**\n\t * Value of input\n\t */\n\t@Prop({reflect: true, mutable: true}) value: string;\n\t/**\n\t * Custom input identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Style variation of the form input.\n\t */\n\t@Prop() readonly variant: VariantType = undefined\n\t/**\n\t * Indicates the entered value of child form element does conform to the format expected by the application.\n\t */\n\t@Prop() readonly success: boolean\n\t/**\n\t * Input’s size.\n\t */\n\t@Prop() readonly size: SizesType = undefined\n\t/**\n\t * Name of the input.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Generates a texarea for the possibility of multiple lines\n\t */\n\t@Prop() readonly multiline: boolean\n\t/**\n\t * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n\t */\n\t@Prop() readonly rows: number\n\t/**\n\t * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols\n\t */\n\t@Prop() readonly cols: number\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 input component disabled.\n\t * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Text that appears in the form control when it has no value set\n\t */\n\t@Prop() readonly placeholder: string\n\t/**\n\t * The value is not editable\n\t */\n\t@Prop() readonly readonly: boolean\n\t/**\n\t * Minimum length (number of characters) of value\n\t */\n\t@Prop() readonly minlength: number\n\t/**\n\t * Maximum length (number of characters) of value\n\t */\n\t@Prop() readonly maxlength: number\n\t/**\n\t * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocomplete\n\t */\n\t@Prop() readonly autocomplete: boolean\n\t/**\n\t * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocorrect\n\t */\n\t@Prop() readonly autocorrect: boolean\n\t/**\n\t * Defineds the visual style of input\n\t */\n\t@Prop() readonly type: Type = undefined\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n\t */\n\t@Prop() readonly inputType: InputType = \"text\"\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/input_role\n\t */\n\t@Prop() readonly role: 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 * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-owns\" }) readonly wcagOwns: string\n\t/**\n\t * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value.\n\t */\n\t@Prop({ attribute: \"wcag-autocomplete\" }) readonly wcagAutocomplete: string\n\t/**\n\t *  Attribute is set on an element to indicate if a control is expanded or collapsed\n\t */\n\t@Prop({ attribute: \"wcag-expanded\" }) readonly wcagExpanded: boolean\n\t/**\n\t * Emitted when the input has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the input loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: \"gov-input\" }) govInput: EventEmitter\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: \"gov-keyup\" }) govKeyUp: EventEmitter<KeyboardEvent>\n\t@State() focused: boolean\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, FormInputClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, FormInputClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\n\t\tthis.f.passAttrToControl('input-type', this.multiline ? Tags.TEXTAREA : Tags.INPUT)\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 Tag = this.multiline ? Tags.TEXTAREA : Tags.INPUT\n\n\t\treturn (\n\t\t\t<Host class={FormInputClass.root} size={this.size} variant={this.variant} type={this.type}>\n\t\t\t\t{this.h.hasSlot(\"prefix\") && <slot name=\"prefix\"></slot>}\n\t\t\t\t<span class=\"element\">\n\t\t\t\t\t{this.h.hasSlot(\"left-icon\") &&\n\t\t\t\t\t\t<slot name=\"left-icon\"/>\n\t\t\t\t\t}\n\n\t\t\t\t\t{this.h.hasSlot(\"right-icon\") && !(this.success || this.invalid) &&\n\t\t\t\t\t\t<slot name=\"right-icon\"/>\n\t\t\t\t\t}\n\n\t\t\t\t\t{this.success && !this.multiline &&\n\t\t\t\t\t\t<gov-icon slot=\"right-icon\" class=\"icon-validation\" name=\"check\"></gov-icon>\n\t\t\t\t\t}\n\t\t\t\t\t{this.invalid && !this.multiline &&\n\t\t\t\t\t\t<gov-icon slot=\"right-icon\" class=\"icon-validation\" name=\"exclamation\"></gov-icon>\n\t\t\t\t\t}\n\t\t\t\t\t<Tag type={this.inputType}\n\t\t\t\t\t       disabled={this.disabled}\n\t\t\t\t\t       id={this.identifier || this.inputId}\n\t\t\t\t\t       name={this.name}\n\t\t\t\t\t       onFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t       onInput={this.onInputHandler.bind(this)}\n\t\t\t\t\t       onBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t       onKeyUp={this.onKeyUpHandler.bind(this)}\n\t\t\t\t\t       ref={el => this.inputRef = el as HTMLInputElement}\n\t\t\t\t\t       placeholder={this.placeholder}\n\t\t\t\t\t       value={this.value}\n\t\t\t\t\t       readonly={toBoolAttrIfDefined(this.readonly)}\n\t\t\t\t\t       autocomplete={toOnOffAttrIfDefined(this.autocomplete)}\n\t\t\t\t\t       autocorrect={toOnOffAttrIfDefined(this.autocorrect)}\n\t\t\t\t\t       minlength={this.minlength}\n\t\t\t\t\t       maxlength={this.maxlength}\n\t\t\t\t\t       required={this.required}\n\t\t\t\t\t       rows={this.rows}\n\t\t\t\t\t       cols={this.cols}\n\t\t\t\t\t       role={this.role}\n\t\t\t\t\t       aria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t       aria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t       aria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t       aria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t       aria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t       aria-owns={this.wcagOwns}\n\t\t\t\t\t       aria-expanded={toBoolAttrIfDefined(this.wcagExpanded)}\n\t\t\t\t\t       aria-autocomplete={this.wcagAutocomplete} />\n\t\t\t\t</span>\n\t\t\t\t{this.h.hasSlot(\"sufix\") && <slot name=\"sufix\"></slot>}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.focused = true\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onKeyUpHandler(e: KeyboardEvent) {\n\t\te.stopPropagation()\n\t\tthis.govKeyUp.emit(e)\n\t}\n\n\tprivate onInputHandler(e: Event) {\n\t\tthis.value = (e.target as HTMLInputElement).value\n\t\te.stopPropagation()\n\t\tthis.govInput.emit(e)\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.inputRef.focus(options)\n\t}\n\n\t/**\n\t * Sets the ordered value of the element\n\t */\n\t@Method()\n\tasync setValue(value: string): Promise<void> {\n\t\tthis.value = value\n\t}\n\n\t/**\n\t * Clears input value\n\t */\n\t@Method()\n\tasync clearValue(): Promise<void> {\n\t\tthis.value = ''\n\t\tthis.inputRef.value = ''\n\t}\n\n\t/**\n\t * Returns an instance of the native html input element\n\t */\n\t@Method()\n\tasync getInstance(): 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\", FormInputClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormInputClass.root)\n\t\tvalidateWcagRef(this.wcagOwns, \"wcag-owns\", FormInputClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.inputId, this.wcagLabelledBy, FormInputClass.root)\n\t}\n}\n"]}
+{"version":3,"file":"gov-form-input.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/input/gov-form-input.tsx"],"names":[],"mappings":"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AAI,CAAC,CAAA;EAChG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Host, h, Prop, Watch, Event, EventEmitter, State, Method } from '@stencil/core'\nimport { GovHost } from '../../../helpers/Dom/template.d'\nimport { SizesType, InputType, Type } from './constants'\nimport { createID } from '../../../../src/utils/string.utils'\nimport { govHost, toBoolAttrIfDefined, toOnOffAttrIfDefined } from '../../../helpers/Dom/template'\nimport { FormInputClass, Variants, VariantType } from './constants'\nimport { Sizes } from '../../../core/constants/sizes'\nimport { validateProp } from '../../../helpers/Validate/props'\nimport { canValidateWcagOnRender } from '../../../helpers/Dom/win'\nimport { delay } from '../../../utils/utils'\nimport { validateWcagLabelFor, validateWcagRef } from '../../../helpers/Validate/wcag'\nimport { GovForm } from '../../../helpers/Dom/form.d'\nimport { govForm } from '../../../helpers/Dom/form'\n\nenum Tags {\n\tINPUT = 'input',\n\tTEXTAREA = 'textarea',\n}\n\n@Component({\n\ttag: 'gov-form-input',\n\tstyleUrl: 'gov-form-input.scss',\n})\nexport class GovFormInput {\n\tprivate f: GovForm\n\tprivate h: GovHost\n\tprivate inputRef?: HTMLInputElement\n\tprivate readonly inputId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.inputId = createID('GovInput')\n\t\tthis.f = govForm(govHost(this.host))\n\t}\n\n\t@Element() host: HTMLGovFormInputElement\n\t/**\n\t * Value of input\n\t */\n\t@Prop({ reflect: true, mutable: true }) value: string\n\t/**\n\t * Custom input identifier.\n\t */\n\t@Prop({ attribute: 'identifier' }) readonly identifier: string\n\t/**\n\t * Style variation of the form input.\n\t */\n\t@Prop() readonly variant: VariantType = undefined\n\t/**\n\t * Indicates the entered value of child form element does conform to the format expected by the application.\n\t */\n\t@Prop() readonly success: boolean\n\t/**\n\t * Input’s size.\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\t/**\n\t * Name of the input.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Generates a texarea for the possibility of multiple lines\n\t */\n\t@Prop() readonly multiline: boolean\n\t/**\n\t * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n\t */\n\t@Prop() readonly rows: number\n\t/**\n\t * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols\n\t */\n\t@Prop() readonly cols: number\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 input component disabled.\n\t * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Text that appears in the form control when it has no value set\n\t */\n\t@Prop() readonly placeholder: string\n\t/**\n\t * The value is not editable\n\t */\n\t@Prop() readonly readonly: boolean\n\t/**\n\t * Minimum length (number of characters) of value\n\t */\n\t@Prop() readonly minlength: number\n\t/**\n\t * Maximum length (number of characters) of value\n\t */\n\t@Prop() readonly maxlength: number\n\t/**\n\t * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocomplete\n\t */\n\t@Prop() readonly autocomplete: boolean\n\t/**\n\t * Same as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autocorrect\n\t */\n\t@Prop() readonly autocorrect: boolean\n\t/**\n\t * Defineds the visual style of input\n\t */\n\t@Prop() readonly type: Type = undefined\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n\t */\n\t@Prop() readonly inputType: InputType = 'text'\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/input_role\n\t */\n\t@Prop() readonly role: 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-labelled-by' }) readonly wcagLabelledBy: string\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: 'wcag-owns' }) readonly wcagOwns: string\n\t/**\n\t * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value.\n\t */\n\t@Prop({ attribute: 'wcag-autocomplete' }) readonly wcagAutocomplete: string\n\t/**\n\t *  Attribute is set on an element to indicate if a control is expanded or collapsed\n\t */\n\t@Prop({ attribute: 'wcag-expanded' }) readonly wcagExpanded: boolean\n\t/**\n\t * Emitted when the input has focus.\n\t */\n\t@Event({ eventName: 'gov-focus' }) govFocus: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the input loses focus.\n\t */\n\t@Event({ eventName: 'gov-blur' }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: 'gov-input' }) govInput: EventEmitter<InputEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: 'gov-keyup' }) govKeyUp: EventEmitter<KeyboardEvent>\n\t@State() focused: boolean\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, FormInputClass.root)\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, FormInputClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\n\t\tthis.f.passAttrToControl('type', this.multiline ? Tags.TEXTAREA : Tags.INPUT)\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 Tag = this.multiline ? Tags.TEXTAREA : Tags.INPUT\n\n\t\treturn (\n\t\t\t<Host class={FormInputClass.root} size={this.size} variant={this.variant} type={this.type}>\n\t\t\t\t{this.h.hasSlot('prefix') && <slot name=\"prefix\"></slot>}\n\t\t\t\t<span class=\"element\">\n\t\t\t\t\t{this.h.hasSlot('left-icon') && <slot name=\"left-icon\" />}\n\n\t\t\t\t\t{this.h.hasSlot('right-icon') && !(this.success || this.invalid) && <slot name=\"right-icon\" />}\n\n\t\t\t\t\t{this.success && !this.multiline && <gov-icon slot=\"right-icon\" class=\"icon-validation\" name=\"check\"></gov-icon>}\n\t\t\t\t\t{this.invalid && !this.multiline && <gov-icon slot=\"right-icon\" class=\"icon-validation\" name=\"exclamation\"></gov-icon>}\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttype={this.inputType}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tid={this.identifier || this.inputId}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonInput={this.onInputHandler.bind(this)}\n\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\tonKeyUp={this.onKeyUpHandler.bind(this)}\n\t\t\t\t\t\tref={el => (this.inputRef = el as HTMLInputElement)}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\treadonly={toBoolAttrIfDefined(this.readonly)}\n\t\t\t\t\t\tautocomplete={toOnOffAttrIfDefined(this.autocomplete)}\n\t\t\t\t\t\tautocorrect={toOnOffAttrIfDefined(this.autocorrect)}\n\t\t\t\t\t\tminlength={this.minlength}\n\t\t\t\t\t\tmaxlength={this.maxlength}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\trows={this.rows}\n\t\t\t\t\t\tcols={this.cols}\n\t\t\t\t\t\trole={this.role}\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-disabled={toBoolAttrIfDefined(this.disabled)}\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-owns={this.wcagOwns}\n\t\t\t\t\t\taria-expanded={toBoolAttrIfDefined(this.wcagExpanded)}\n\t\t\t\t\t\taria-autocomplete={this.wcagAutocomplete}\n\t\t\t\t\t/>\n\t\t\t\t</span>\n\t\t\t\t{this.h.hasSlot('sufix') && <slot name=\"sufix\"></slot>}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.focused = true\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onKeyUpHandler(e: KeyboardEvent) {\n\t\te.stopPropagation()\n\t\tthis.govKeyUp.emit(e)\n\t}\n\n\tprivate onInputHandler(e: InputEvent) {\n\t\tthis.value = (e.target as HTMLInputElement).value\n\t\te.stopPropagation()\n\t\tthis.govInput.emit(e)\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.inputRef.focus(options)\n\t}\n\n\t/**\n\t * Sets the ordered value of the element\n\t */\n\t@Method()\n\tasync setValue(value: string): Promise<void> {\n\t\tthis.value = value\n\t}\n\n\t/**\n\t * Clears input value\n\t */\n\t@Method()\n\tasync clearValue(): Promise<void> {\n\t\tthis.value = ''\n\t\tthis.inputRef.value = ''\n\t}\n\n\t/**\n\t * Returns an instance of the native html input element\n\t */\n\t@Method()\n\tasync getInstance(): 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', FormInputClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', FormInputClass.root)\n\t\tvalidateWcagRef(this.wcagOwns, 'wcag-owns', FormInputClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.inputId, this.wcagLabelledBy, FormInputClass.root)\n\t}\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/label/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,gBAAgB;EACtB,KAAK,EAAE,uBAAuB;CAC9B,CAAA","sourcesContent":["export const FormLabelClass = {\n\troot: 'gov-form-label',\n\tlabel: 'gov-form-label__label',\n}"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/label/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,gBAAgB;EACtB,KAAK,EAAE,uBAAuB;CAC9B,CAAA","sourcesContent":["export const FormLabelClass = {\n\troot: 'gov-form-label',\n\tlabel: 'gov-form-label__label',\n}\n"]}