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

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

@@ -1 +1 @@
-{"version":3,"file":"gov-form-search.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/search/gov-form-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAa,QAAQ,EAAe,MAAM,aAAa,CAAA;AAC/E,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAM7E,MAAM,OAAO,aAAa;;gBAOU,KAAK,CAAC,EAAE;mBAIH,cAAc,CAAC,OAAO;;EAG9D,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAAC,KAAK,EAAE,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC,CAAA;EACpD,CAAC;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC,CAAA;EACvD,CAAC;EAGD,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EACnC,CAAC;EAGD,MAAM;IACL,QAAQ,IAAI,CAAC,IAAI,EAAE;MAClB,KAAK,KAAK,CAAC,EAAE;QACZ,IAAI,UAAU,GAAG,KAAK,CAAC,EAAE,CAAA;QACzB,MAAM;MACP,KAAK,KAAK,CAAC,EAAE,CAAC;MACd;QACC,IAAI,UAAU,GAAG,KAAK,CAAC,EAAE,CAAA;QACzB,MAAM;MACP,KAAK,KAAK,CAAC,GAAG;QACb,IAAI,UAAU,GAAG,KAAK,CAAC,EAAE,CAAA;QACzB,MAAM;KACP;IAED,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI;MAChC,YAAM,KAAK,EAAE,eAAe,CAAC,KAAK;QACjC,YAAM,IAAI,EAAC,OAAO,GAAG,CACf;MACP,YAAM,KAAK,EAAE,eAAe,CAAC,MAAM;QAClC,kBAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU;UAChE,YAAM,IAAI,EAAC,QAAQ,GAAG,CACV,CACP,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../../helpers/Validate/props'\nimport { FormSearchClass, SizesType, Variants, VariantType } from './constants'\nimport { Sizes } from '../../../core/constants/sizes'\nimport { Variants as GlobalVariants } from \"../../../core/constants/variants\"\n\n@Component({\n\ttag: 'gov-form-search',\n\tstyleUrl: 'gov-form-search.scss',\n})\nexport class GovFormSearch {\n\t\n\t@Element() host: HTMLGovFormSearchElement\n\n\t/**\n\t * Size variation of the component.\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\t/**\n\t * Style variation of the component.\n\t */\n\t@Prop() readonly variant: VariantType = GlobalVariants.PRIMARY\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, FormSearchClass.root)\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, FormSearchClass.root)\n\t}\n\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\n\trender() {\n\t\tswitch (this.size) {\n\t\t\tcase Sizes._M:\n\t\t\t\tvar buttonSize = Sizes._S\n\t\t\t\tbreak;\n\t\t\tcase Sizes._L:\n\t\t\tdefault:\n\t\t\t\tvar buttonSize = Sizes._M\n\t\t\t\tbreak;\n\t\t\tcase Sizes._XL:\n\t\t\t\tvar buttonSize = Sizes._L\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn (\n\t\t\t<Host class={FormSearchClass.root}>\n\t\t\t\t<span class={FormSearchClass.input}>\n\t\t\t\t\t<slot name=\"input\" />\n\t\t\t\t</span>\n\t\t\t\t<span class={FormSearchClass.button}>\n\t\t\t\t\t<gov-button slot=\"button\" variant={this.variant} size={buttonSize}>\n\t\t\t\t\t\t<slot name=\"button\" />\n\t\t\t\t\t</gov-button>\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"gov-form-search.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/search/gov-form-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAM7C,MAAM,OAAO,aAAa;EAIzB,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI;MAChC,YAAM,KAAK,EAAE,eAAe,CAAC,KAAK;QACjC,YAAM,IAAI,EAAC,OAAO,GAAG,CACf;MACP,YAAM,KAAK,EAAE,eAAe,CAAC,MAAM;QAClC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host } from '@stencil/core'\nimport { FormSearchClass } from './constants'\n\n@Component({\n\ttag: 'gov-form-search',\n\tstyleUrl: 'gov-form-search.scss',\n})\nexport class GovFormSearch {\n\t\n\t@Element() host: HTMLGovFormSearchElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormSearchClass.root}>\n\t\t\t\t<span class={FormSearchClass.input}>\n\t\t\t\t\t<slot name=\"input\" />\n\t\t\t\t</span>\n\t\t\t\t<span class={FormSearchClass.button}>\n\t\t\t\t\t<slot name=\"button\" />\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -1,15 +1,9 @@
-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 FormSelectClass = {
   root: 'gov-form-select',
   icon: 'gov-form-select__icon',
 };
-export const FormMultiSelectClass = {
-  root: 'gov-form-multi-select',
-  wrap: 'gov-form-multi-select__wrap',
-  list: 'gov-form-multi-select__list',
-  item: 'gov-form-multi-select__item',
-};
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/select/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,eAAe,GAAG;EAC9B,IAAI,EAAE,iBAAiB;EACvB,IAAI,EAAE,uBAAuB;CAC7B,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG;EACnC,IAAI,EAAE,uBAAuB;EAC7B,IAAI,EAAE,6BAA6B;EACnC,IAAI,EAAE,6BAA6B;EACnC,IAAI,EAAE,6BAA6B;CACnC,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 FormSelectClass = {\n\troot: 'gov-form-select',\n\ticon: 'gov-form-select__icon',\n}\n\nexport const FormMultiSelectClass = {\n\troot: 'gov-form-multi-select',\n\twrap: 'gov-form-multi-select__wrap',\n\tlist: 'gov-form-multi-select__list',\n\titem: 'gov-form-multi-select__item',\n}\n\n\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/select/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,eAAe,GAAG;EAC9B,IAAI,EAAE,iBAAiB;EACvB,IAAI,EAAE,uBAAuB;CAC7B,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 FormSelectClass = {\n\troot: 'gov-form-select',\n\ticon: 'gov-form-select__icon',\n}\n"]}

package/dist/collection/components/gov-form/select/gov-form-select.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,24 @@
     transform: rotate(360deg);
   }
 }
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
 /*
 *   Select
 */
+/*
+ *   Select & Multiselect Shared Definitions
+ */
+/*
+ *   Input & Textarea & Select Shared Definitions
+ */
 .gov-form-select {
+  position: relative;
   display: flex;
+  width: 100%;
   align-items: center;
 }
 .gov-form-select .element {
@@ -190,9 +221,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-select input:focus,
 .gov-form-select select:focus,
@@ -300,7 +331,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-select input,
 [size=m].gov-form-select select {
@@ -308,31 +339,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-select *[slot=left-icon],
 [size=m].gov-form-select *[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-select *[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-select *[slot=left-icon] ~ input {
-  padding-left: 2.5rem;
+  padding-left: var(--gov-form-input-core-m-icon-padding, 2.5rem);
 }
 [size=m].gov-form-select *[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-select *[slot=right-icon] ~ input, [size=m].gov-form-select *[slot=right-icon] ~ select {
-  padding-right: 2.5rem;
+  padding-right: var(--gov-form-input-core-m-icon-padding, 2.5rem);
 }
 [size=l].gov-form-select {
   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-select input,
 [size=l].gov-form-select select {
@@ -340,31 +372,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-select *[slot=left-icon],
 [size=l].gov-form-select *[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-select *[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-select *[slot=left-icon] ~ input {
-  padding-left: 2.5rem;
+  padding-left: var(--gov-form-input-core-l-icon-padding, 2.5rem);
 }
 [size=l].gov-form-select *[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-select *[slot=right-icon] ~ input, [size=l].gov-form-select *[slot=right-icon] ~ select {
-  padding-right: 2.5rem;
+  padding-right: var(--gov-form-input-core-l-icon-padding, 2.5rem);
 }
 [size=xl].gov-form-select {
   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-select input,
 [size=xl].gov-form-select select {
@@ -372,24 +405,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-select *[slot=left-icon],
 [size=xl].gov-form-select *[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-select *[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-select *[slot=left-icon] ~ input {
-  padding-left: 3rem;
+  padding-left: var(--gov-form-input-core-xl-icon-padding, 3rem);
 }
 [size=xl].gov-form-select *[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-select *[slot=right-icon] ~ input, [size=xl].gov-form-select *[slot=right-icon] ~ select {
-  padding-right: 3rem;
+  padding-right: var(--gov-form-input-core-xl-icon-padding, 3rem);
 }
 
 .gov-form-select {
@@ -403,17 +437,17 @@
   display: none;
 }
 [size=m].gov-form-select *[slot=right-icon] {
-  right: 1rem;
-  width: 0.5rem;
-  height: 0.5rem;
+  right: var(--gov-form-select-m-arrow-right-position, 1rem);
+  width: var(--gov-form-select-m-arrow-size, 0.5rem);
+  height: var(--gov-form-select-m-arrow-size, 0.5rem);
 }
 [size=l].gov-form-select *[slot=right-icon] {
-  right: 1rem;
-  width: 0.5rem;
-  height: 0.5rem;
+  right: var(--gov-form-select-l-arrow-right-position, 1rem);
+  width: var(--gov-form-select-l-arrow-size, 0.5rem);
+  height: var(--gov-form-select-l-arrow-size, 0.5rem);
 }
 [size=xl].gov-form-select *[slot=right-icon] {
-  right: 1.3125rem;
-  width: 0.625rem;
-  height: 0.625rem;
+  right: var(--gov-form-select-xl-arrow-right-position, 1.3125rem);
+  width: var(--gov-form-select-xl-arrow-size, 0.625rem);
+  height: var(--gov-form-select-xl-arrow-size, 0.625rem);
 }

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

@@ -1,13 +1,13 @@
-import { h, Host } from "@stencil/core";
-import { toBoolAttrIfDefined, govHost } from "../../../helpers/Dom/template";
-import { Variants, FormSelectClass } from "./constants";
-import { Sizes } from "../../../core/constants/sizes";
-import { validateProp } from "../../../helpers/Validate/props";
-import { validateWcagLabelFor, validateWcagRef } from "../../../helpers/Validate/wcag";
-import { canValidateWcagOnRender } from "../../../helpers/Dom/win";
-import { createID } from "../../../utils/string.utils";
-import { delay } from "../../../utils/utils";
-import { govForm } from "../../../helpers/Dom/form";
+import { h, Host } from '@stencil/core';
+import { toBoolAttrIfDefined, govHost } from '../../../helpers/Dom/template';
+import { Variants, FormSelectClass } from './constants';
+import { Sizes } from '../../../core/constants/sizes';
+import { validateProp } from '../../../helpers/Validate/props';
+import { validateWcagLabelFor, validateWcagRef } from '../../../helpers/Validate/wcag';
+import { canValidateWcagOnRender } from '../../../helpers/Dom/win';
+import { createID } from '../../../utils/string.utils';
+import { delay } from '../../../utils/utils';
+import { govForm } from '../../../helpers/Dom/form';
 export class GovFormSelect {
   constructor() {
     this.value = undefined;
@@ -25,7 +25,7 @@ export class GovFormSelect {
     this.wcagOwns = undefined;
     this.focused = undefined;
     this.h = govHost(this.host);
-    this.selectId = createID("GovSelect");
+    this.selectId = createID('GovSelect');
     this.f = govForm(govHost(this.host));
   }
   validateVariant(newValue) {
@@ -51,7 +51,7 @@ export class GovFormSelect {
     }
   }
   render() {
-    return (h(Host, { class: FormSelectClass.root, size: this.size, variant: this.variant }, this.h.hasSlot("prefix") && h("slot", { name: "prefix" }), h("span", { class: "element" }, h("gov-icon", { slot: "right-icon", name: "arrow-down" }), h("select", { id: this.identifier || this.selectId, onFocus: this.onFocusHandler.bind(this), onChange: this.onChangeHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, name: this.name, disabled: this.disabled, ref: el => this.selectRef = el, "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-activedescendant": this.wcagActiveDescendant, "aria-controls": this.wcagControls, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns }, h("slot", null))), this.h.hasSlot("sufix") && h("slot", { name: "sufix" })));
+    return (h(Host, { class: FormSelectClass.root, size: this.size, variant: this.variant }, this.h.hasSlot('prefix') && h("slot", { name: "prefix" }), h("span", { class: "element" }, h("gov-icon", { slot: "right-icon", name: "arrow-down" }), h("select", { id: this.identifier || this.selectId, onFocus: this.onFocusHandler.bind(this), onChange: this.onChangeHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-activedescendant": this.wcagActiveDescendant, "aria-controls": this.wcagControls, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns }, h("slot", null))), this.h.hasSlot('sufix') && h("slot", { name: "sufix" })));
   }
   onFocusHandler(e) {
     this.focused = true;
@@ -88,10 +88,10 @@ export class GovFormSelect {
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    validateWcagRef(this.wcagActiveDescendant, "wcag-active-descendant", FormSelectClass.root);
-    validateWcagRef(this.wcagControls, "wcag-controls", FormSelectClass.root);
-    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", FormSelectClass.root);
-    validateWcagRef(this.wcagOwns, "wcag-owns", FormSelectClass.root);
+    validateWcagRef(this.wcagActiveDescendant, 'wcag-active-descendant', FormSelectClass.root);
+    validateWcagRef(this.wcagControls, 'wcag-controls', FormSelectClass.root);
+    validateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormSelectClass.root);
+    validateWcagRef(this.wcagOwns, 'wcag-owns', FormSelectClass.root);
     validateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormSelectClass.root);
   }
   static get is() { return "gov-form-select"; }
@@ -321,7 +321,7 @@ export class GovFormSelect {
           "tags": [],
           "text": "Indicates the id of a component that labels the input."
         },
-        "attribute": "wcag-labelded-by",
+        "attribute": "wcag-labelled-by",
         "reflect": false
       },
       "wcagOwns": {

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

@@ -1 +1 @@
-{"version":3,"file":"gov-form-select.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/select/gov-form-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, State, Prop, Event, EventEmitter, Watch, Host, Method } from \"@stencil/core\"\nimport { GovHost } from \"../../../helpers/Dom/template.d\"\nimport { toBoolAttrIfDefined, govHost } from \"../../../helpers/Dom/template\"\nimport { SizesType, Variants, VariantType, FormSelectClass } from \"./constants\"\nimport { Sizes } from \"../../../core/constants/sizes\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { delay } from \"../../../utils/utils\"\nimport { GovForm }from \"../../../helpers/Dom/form.d\"\nimport { govForm }from \"../../../helpers/Dom/form\"\n\n@Component({\n\ttag: \"gov-form-select\",\n\tstyleUrl: \"gov-form-select.scss\",\n})\nexport class GovFormSelect {\n\tprivate f: GovForm\n\tprivate h: GovHost\n\tprivate selectRef?: HTMLSelectElement\n\n\tprivate readonly selectId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.selectId = createID(\"GovSelect\")\n\t\tthis.f = govForm(govHost(this.host));\n\t}\n\n\t@Element() host: HTMLGovFormSelectElement\n\t/**\n\t * Value of select\n\t */\n\t@Prop({reflect: true, mutable: true}) value: string;\n\t/**\n\t * Custom select identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Style variation of the form select.\n\t */\n\t@Prop() readonly variant: VariantType = undefined\n\t/**\n\t * Select’s size.\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\t/**\n\t * Name of the select.\n\t */\n\t@Prop() readonly name: string\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 select 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 * 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 related component’s visually focused element.\n\t */\n\t@Prop({ attribute: \"wcag-active-descendant\" }) readonly wcagActiveDescendant: string\n\t/**\n\t * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.\n\t */\n\t@Prop({ attribute: \"wcag-controls\" }) readonly wcagControls: string\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 * Emitted when the select has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the select loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the select change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter\n\t@State() focused: boolean\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, FormSelectClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, FormSelectClass.root)\n\t}\n\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\n\t\tthis.host.querySelectorAll('option').forEach((option: HTMLOptionElement) => {\n\t\t\tif(option.value === this.value) {\n\t\t\t\toption.setAttribute('selected', 'true');\n\t\t\t}\n\t\t})\n\n\t\tthis.f.passAttrToControl('type', 'select')\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\treturn (\n\t\t\t<Host class={FormSelectClass.root} size={this.size} variant={this.variant}>\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<gov-icon slot=\"right-icon\" name=\"arrow-down\"></gov-icon>\n\t\t\t\t\t<select\n\t\t\t\t\t\tid={this.identifier || this.selectId}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonChange={this.onChangeHandler.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\tname={this.name}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tref={el => this.selectRef = el as HTMLSelectElement}\n\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\taria-activedescendant={this.wcagActiveDescendant}\n\t\t\t\t\t\taria-controls={this.wcagControls}\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-owns={this.wcagOwns}>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</select>\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 onChangeHandler(e: Event) {\n\t\tthis.value = (e.target as HTMLSelectElement).value\n\t\te.stopPropagation()\n\t\tthis.govChange.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.selectRef.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 * Returns an instance of the native html select element\n\t */\n\t@Method()\n\tasync getInstance(): Promise<HTMLSelectElement> {\n\t\treturn this.selectRef\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.wcagActiveDescendant, \"wcag-active-descendant\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagControls, \"wcag-controls\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagOwns, \"wcag-owns\", FormSelectClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormSelectClass.root)\n\t}\n}\n"]}
+{"version":3,"file":"gov-form-select.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/select/gov-form-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, State, Prop, Event, EventEmitter, Watch, Host, Method } from '@stencil/core'\nimport { GovHost } from '../../../helpers/Dom/template.d'\nimport { toBoolAttrIfDefined, govHost } from '../../../helpers/Dom/template'\nimport { SizesType, Variants, VariantType, FormSelectClass } from './constants'\nimport { Sizes } from '../../../core/constants/sizes'\nimport { validateProp } from '../../../helpers/Validate/props'\nimport { validateWcagLabelFor, validateWcagRef } from '../../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../../helpers/Dom/win'\nimport { createID } from '../../../utils/string.utils'\nimport { delay } from '../../../utils/utils'\nimport { GovForm } from '../../../helpers/Dom/form.d'\nimport { govForm } from '../../../helpers/Dom/form'\n\n@Component({\n\ttag: 'gov-form-select',\n\tstyleUrl: 'gov-form-select.scss',\n})\nexport class GovFormSelect {\n\tprivate f: GovForm\n\tprivate h: GovHost\n\tprivate selectRef?: HTMLSelectElement\n\n\tprivate readonly selectId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.selectId = createID('GovSelect')\n\t\tthis.f = govForm(govHost(this.host))\n\t}\n\n\t@Element() host: HTMLGovFormSelectElement\n\t/**\n\t * Value of select\n\t */\n\t@Prop({ reflect: true, mutable: true }) value: string\n\t/**\n\t * Custom select identifier.\n\t */\n\t@Prop({ attribute: 'identifier' }) readonly identifier: string\n\t/**\n\t * Style variation of the form select.\n\t */\n\t@Prop() readonly variant: VariantType = undefined\n\t/**\n\t * Select’s size.\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\t/**\n\t * Name of the select.\n\t */\n\t@Prop() readonly name: string\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 select 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 * 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 related component’s visually focused element.\n\t */\n\t@Prop({ attribute: 'wcag-active-descendant' }) readonly wcagActiveDescendant: string\n\t/**\n\t * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.\n\t */\n\t@Prop({ attribute: 'wcag-controls' }) readonly wcagControls: string\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 * Emitted when the select has focus.\n\t */\n\t@Event({ eventName: 'gov-focus' }) govFocus: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the select loses focus.\n\t */\n\t@Event({ eventName: 'gov-blur' }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the select change value.\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter\n\t@State() focused: boolean\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, FormSelectClass.root)\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, FormSelectClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\n\t\tthis.host.querySelectorAll('option').forEach((option: HTMLOptionElement) => {\n\t\t\tif (option.value === this.value) {\n\t\t\t\toption.setAttribute('selected', 'true')\n\t\t\t}\n\t\t})\n\n\t\tthis.f.passAttrToControl('type', 'select')\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\treturn (\n\t\t\t<Host class={FormSelectClass.root} size={this.size} variant={this.variant}>\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<gov-icon slot=\"right-icon\" name=\"arrow-down\"></gov-icon>\n\t\t\t\t\t<select\n\t\t\t\t\t\tid={this.identifier || this.selectId}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonChange={this.onChangeHandler.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\tname={this.name}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tref={el => (this.selectRef = el as HTMLSelectElement)}\n\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\taria-activedescendant={this.wcagActiveDescendant}\n\t\t\t\t\t\taria-controls={this.wcagControls}\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-owns={this.wcagOwns}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</select>\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 onChangeHandler(e: Event) {\n\t\tthis.value = (e.target as HTMLSelectElement).value\n\t\te.stopPropagation()\n\t\tthis.govChange.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.selectRef.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 * Returns an instance of the native html select element\n\t */\n\t@Method()\n\tasync getInstance(): Promise<HTMLSelectElement> {\n\t\treturn this.selectRef\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.wcagActiveDescendant, 'wcag-active-descendant', FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagControls, 'wcag-controls', FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagOwns, 'wcag-owns', FormSelectClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormSelectClass.root)\n\t}\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+import { Sizes as GlobalSizes } from '../../../core/constants/sizes';
 export const Sizes = [undefined, GlobalSizes._XS, GlobalSizes._S, GlobalSizes._M, GlobalSizes._L];
 export const FormSwitchClass = {
   root: 'gov-form-switch',

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/switch/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,GAAG,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,CAAU,CAAA;AAI1G,MAAM,CAAC,MAAM,eAAe,GAAG;EAC9B,IAAI,EAAE,iBAAiB;EACvB,MAAM,EAAE,yBAAyB;EACjC,KAAK,EAAE,wBAAwB;EAC/B,SAAS,EAAE,4BAA4B;CACvC,CAAA","sourcesContent":["import { Sizes as GlobalSizes } from \"../../../core/constants/sizes\"\n\nexport const Sizes = [undefined, GlobalSizes._XS, GlobalSizes._S, GlobalSizes._M, GlobalSizes._L] as const\nexport type SizesType = typeof Sizes[number]\n\n\nexport const FormSwitchClass = {\n\troot: 'gov-form-switch',\n\tholder: 'gov-form-switch__holder',\n\tinput: 'gov-form-switch__input',\n\tindicator: 'gov-form-switch__indicator',\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/switch/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,GAAG,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,CAAU,CAAA;AAG1G,MAAM,CAAC,MAAM,eAAe,GAAG;EAC9B,IAAI,EAAE,iBAAiB;EACvB,MAAM,EAAE,yBAAyB;EACjC,KAAK,EAAE,wBAAwB;EAC/B,SAAS,EAAE,4BAA4B;CACvC,CAAA","sourcesContent":["import { Sizes as GlobalSizes } from '../../../core/constants/sizes'\n\nexport const Sizes = [undefined, GlobalSizes._XS, GlobalSizes._S, GlobalSizes._M, GlobalSizes._L] as const\nexport type SizesType = (typeof Sizes)[number]\n\nexport const FormSwitchClass = {\n\troot: 'gov-form-switch',\n\tholder: 'gov-form-switch__holder',\n\tinput: 'gov-form-switch__input',\n\tindicator: 'gov-form-switch__indicator',\n}\n"]}