@gov-design-system-ce/components 4.0.8-rc22 → 4.1.0-rc02

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

@@ -6,193 +6,12 @@
 /* stylelint-enable */
 /* stylelint-disable */
 /* stylelint-enable */
-/* [Core] - Buttons
------------------------------------------------------------------- */
-/*
- * Gets color from theme-colors or from palette-colors
- */
-/*
- * Converts hex value to rgb colors value
- */
-/* stylelint-disable order/order */
-/* stylelint-enable order/order */
-/*
- * Generates list of utility classes for margin, padding
- *
- * Make sure $list of definitions is sorted so that last item is defined last
- * So largest views are mentioned last.
- */
-/*
- -  Variables - Sizes
- */
-/* "Constants" for general usage */
-/*
- -  Variables - Layout
- */
-/**
-* Utilities - Offset
-*/
-/* stylelint-disable order/order */
+/* Converts hex value to rgb colors value */ /* Generates CSS3 var */ /* stylelint-disable order/order */
 /* stylelint-enable order/order */
 /* stylelint-disable order/order */
 /* stylelint-enable order/order */
-/* stylelint-disable order/order */
+/* Variables - breakpoints */ /* Variables - Colors */ /* Variables - Sizes */ /* Variables - General */ /* Variables - Typography */ /* Variables - Container */ /* Variables - Forms */ /* Variables - shadows */ /* Variables - z-index */ /* stylelint-disable order/order */
 /* stylelint-enable order/order */
-/**
-* Generates CSS3 var with button value
-*/
-/*
- -  Variables - General
- */
-/*
- -  Variables - Typography
- */
-/*
- -  Variables - Variants
- */
-/*
- -  Variables - Container
- */
-/*
- -  Variables - Sizes
- */
-/* "Constants" for general usage */
-/*
- -  Variables - Accordion
- */
-/*
- -  Variables - Attachments
- */
-/*
- -  Variables - Infobar
- */
-/*
- -  Variables - Backdrop
- */
-/*
- -  Variables - Buttons (&& Chips)
- */
-/*
- -  Variables - Breadcrumbs
- */
-/*
- -  Variables - Classes
- */
-/*
- -  Variables - Colors
- */
-/*
- -	Variables - Control Group
- */
-/*
- -  Variables - Cookiebar
- */
-/*
- -  Variables - Dropdown
- */
-/*
- -  Variables - Card
- */
-/*
- -  Variables - Message
- */
-/*
- -  Variables - Empty
- */
-/*
- -  Variables - Error code
- */
-/*
- -  Variables - Grid
- */
-/*
- -  Variables - Tiles
- */
-/*
- -  Variables - Modal & Prompt
- */
-/**
-* Utilities - Offset
-*/
-/*
- -  Variables - shadows
- */
-/* "Constants" for general usage */
-/*
- -  Variables - Statsbar
- */
-/*
- -  Variables - Tabs
- */
-/*
- -  Variables - Tooltip
- */
-/*
- -  Variables - Loading
- */
-/*
- -	Variables - Forms
- */
-/*
- -  Variables - Form Autocomplete
- */
-/*
- -  Variables - Form Message
- */
-/*
- -	Variables - Form label
- */
-/*
- -	Variables - Form switch
- */
-/*
- -	Variables - Form select
- */
-/*
- -	Variables - Form input
- */
-/*
- -	Variables - Form multiselect
- */
-/*
- -	Variables - Form password power
- */
-/*
- -	Variables - Form checkbox & radio
- */
-/*
- -  Variables - Form group
- */
-/*
- -	Variables - Form file
- */
-/*
- -  Variables - Toast Message
- */
-/*
- -  Variables - Wizard
- */
-/*
- -  Variables - Stepper
- */
-/*
- -  Variables - Side nav
- */
-/*
- -  Variables - Grid & Tile
- */
-/*
- -  Variables - Pagination
- */
-/*
- -  Variables - Nav
- */
-/*
- -  Variables - Layout
- */
-/*
- -  Variables - Tag
- */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;
@@ -227,35 +46,57 @@
     opacity: 1;
   }
 }
-gov-form-group, gov-form-radio-group, gov-form-checkbox-group, .gov-form-group {
+/* Form Control */
+gov-form-group, .gov-form-group,
+gov-form-radio-group, .gov-form-radio-group,
+gov-form-checkbox-group, .gov-form-checkbox-group {
+  /* Variables - Form group */
+  margin-top: 0;
+  margin-bottom: 0;
   position: relative;
   display: flex;
   width: 100%;
   flex-direction: column;
   align-items: flex-start;
 }
-gov-form-group .gov-form-label__label, gov-form-radio-group .gov-form-label__label, gov-form-checkbox-group .gov-form-label__label, .gov-form-group .gov-form-label__label {
+gov-form-group .gov-form-label__label, .gov-form-group .gov-form-label__label,
+gov-form-radio-group .gov-form-label__label, .gov-form-radio-group .gov-form-label__label,
+gov-form-checkbox-group .gov-form-label__label, .gov-form-checkbox-group .gov-form-label__label {
   margin: 0;
 }
-gov-form-group[orientation=horizontal], gov-form-radio-group[orientation=horizontal], gov-form-checkbox-group[orientation=horizontal], .gov-form-group[orientation=horizontal] {
+gov-form-group[orientation=horizontal], .gov-form-group[orientation=horizontal],
+gov-form-radio-group[orientation=horizontal], .gov-form-radio-group[orientation=horizontal],
+gov-form-checkbox-group[orientation=horizontal], .gov-form-checkbox-group[orientation=horizontal] {
   flex-direction: row;
   flex-wrap: wrap;
 }
-gov-form-group[orientation=horizontal] .gov-form-label__label, gov-form-radio-group[orientation=horizontal] .gov-form-label__label, gov-form-checkbox-group[orientation=horizontal] .gov-form-label__label, .gov-form-group[orientation=horizontal] .gov-form-label__label {
+gov-form-group[orientation=horizontal] .gov-form-label__label, .gov-form-group[orientation=horizontal] .gov-form-label__label,
+gov-form-radio-group[orientation=horizontal] .gov-form-label__label, .gov-form-radio-group[orientation=horizontal] .gov-form-label__label,
+gov-form-checkbox-group[orientation=horizontal] .gov-form-label__label, .gov-form-checkbox-group[orientation=horizontal] .gov-form-label__label {
   white-space: nowrap;
 }
-gov-form-group[gap="2xs"], gov-form-radio-group[gap="2xs"], gov-form-checkbox-group[gap="2xs"], .gov-form-group[gap="2xs"] {
-  gap: 0.25rem;
+gov-form-group[gap=xs], .gov-form-group[gap=xs],
+gov-form-radio-group[gap=xs], .gov-form-radio-group[gap=xs],
+gov-form-checkbox-group[gap=xs], .gov-form-checkbox-group[gap=xs] {
+  gap: var(--gap, var(--spacing-xs-nudge));
 }
-gov-form-group[gap=xs], gov-form-radio-group[gap=xs], gov-form-checkbox-group[gap=xs], .gov-form-group[gap=xs] {
-  gap: 0.5rem;
+gov-form-group[gap=s], .gov-form-group[gap=s],
+gov-form-radio-group[gap=s], .gov-form-radio-group[gap=s],
+gov-form-checkbox-group[gap=s], .gov-form-checkbox-group[gap=s] {
+  gap: var(--gap, var(--spacing-s));
 }
-gov-form-group[gap=s], gov-form-radio-group[gap=s], gov-form-checkbox-group[gap=s], .gov-form-group[gap=s] {
-  gap: 0.75rem;
+gov-form-group[gap=m], .gov-form-group[gap=m],
+gov-form-radio-group[gap=m], .gov-form-radio-group[gap=m],
+gov-form-checkbox-group[gap=m], .gov-form-checkbox-group[gap=m] {
+  gap: var(--gap, var(--spacing-s-nudge));
 }
-gov-form-group[gap=m], gov-form-radio-group[gap=m], gov-form-checkbox-group[gap=m], .gov-form-group[gap=m] {
-  gap: 1rem;
+gov-form-group[gap=l], .gov-form-group[gap=l],
+gov-form-radio-group[gap=l], .gov-form-radio-group[gap=l],
+gov-form-checkbox-group[gap=l], .gov-form-checkbox-group[gap=l] {
+  gap: var(--gap, var(--spacing-m));
 }
-gov-form-group[gap=l], gov-form-radio-group[gap=l], gov-form-checkbox-group[gap=l], .gov-form-group[gap=l] {
-  gap: 1.25rem;
+gov-form-group[gap=xl], .gov-form-group[gap=xl],
+gov-form-radio-group[gap=xl], .gov-form-radio-group[gap=xl],
+gov-form-checkbox-group[gap=xl], .gov-form-checkbox-group[gap=xl] {
+  gap: var(--gap, var(--spacing-m-nudge));
 }

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

@@ -23,19 +23,9 @@ export class GovFormGroup {
         this.validateOrientation(this.orientation);
     }
     render() {
-        return (h(Host, { key: 'c1cac99c54a7c4fed7c0b4eabf40de9b7cff3d9f', gap: this.gap, class: this.h.classes(FormGroupClass.root) }, h("slot", { key: '2a642d8ecdea27ae8bc4a23b595fd4cc256f87cb' })));
+        return (h(Host, { key: 'b7a379997ac1f4080471c42c23cad6f0ed055fd7', gap: this.gap, class: this.h.classes(FormGroupClass.root) }, h("slot", { key: 'a36809822e81913ec6c8cabdee9eaf64c9f9f471' })));
     }
     static get is() { return "gov-form-group"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-form-group.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-form-group.css"]
-        };
-    }
     static get properties() {
         return {
             "gap": {

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,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAA;AACtE,OAAO,EACL,cAAc,EACd,oBAAoB,EAEpB,cAAc,EAEf,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAC,OAAO,EAAC,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAC,YAAY,EAAC,MAAM,iCAAiC,CAAA;AAM5D,MAAM,OAAO,YAAY;IAGvB;mBAQ4C,SAAS;2BAIK,UAAU;QAXlE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC5B;IAaD,WAAW,CAAC,QAAgB;QAC1B,IAAI,QAAQ,EAAE,CAAC;YACb,YAAY,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;QAC7D,CAAC;IACH,CAAC;IAGD,mBAAmB,CAAC,QAAgB;QAClC,IAAI,QAAQ,EAAE,CAAC;YACb,YAAY,CAAC,oBAAoB,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;QACnE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QAC1B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAC5C,CAAC;IAID,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC;YAC7D,8DAAa,CACR,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop, Watch} from \"@stencil/core\"\nimport {\n  FormGroupClass,\n  FormGroupOrientation,\n  FormGroupOrientationType,\n  FormGroupSizes,\n  FormGroupSizesType\n} from \"./constants\"\nimport {GovHost} from \"../../../helpers/Dom/template.types\"\nimport {govHost} from \"../../../helpers/Dom/template\"\nimport {validateProp} from \"../../../helpers/Validate/props\"\n\n@Component({\n  tag: \"gov-form-group\",\n  styleUrl: \"gov-form-group.scss\",\n})\nexport class GovFormGroup {\n  private readonly h: GovHost\n\n  constructor() {\n    this.h = govHost(this.host)\n  }\n\n  @Element() host: HTMLGovFormGroupElement\n  /**\n   * Gap's size.\n   */\n  @Prop() readonly gap?: FormGroupSizesType = undefined\n  /**\n   * Elements orientation\n   */\n  @Prop() readonly orientation?: FormGroupOrientationType = 'vertical'\n\n  @Watch(\"gap\")\n  validateGap(newValue: string): void {\n    if (newValue) {\n      validateProp(FormGroupSizes, newValue, FormGroupClass.root)\n    }\n  }\n\n  @Watch(\"orientation\")\n  validateOrientation(newValue: string): void {\n    if (newValue) {\n      validateProp(FormGroupOrientation, newValue, FormGroupClass.root)\n    }\n  }\n\n  componentWillLoad(): void {\n    this.validateGap(this.gap)\n    this.validateOrientation(this.orientation)\n  }\n\n\n\n  render() {\n    return (\n      <Host gap={this.gap} class={this.h.classes(FormGroupClass.root)}>\n        <slot></slot>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"gov-form-group.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/group/gov-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAA;AACtE,OAAO,EACL,cAAc,EACd,oBAAoB,EAEpB,cAAc,EAEf,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAC,OAAO,EAAC,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAC,YAAY,EAAC,MAAM,iCAAiC,CAAA;AAK5D,MAAM,OAAO,YAAY;IAGvB;mBAQ4C,SAAS;2BAIK,UAAU;QAXlE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC5B;IAaD,WAAW,CAAC,QAAgB;QAC1B,IAAI,QAAQ,EAAE,CAAC;YACb,YAAY,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;QAC7D,CAAC;IACH,CAAC;IAGD,mBAAmB,CAAC,QAAgB;QAClC,IAAI,QAAQ,EAAE,CAAC;YACb,YAAY,CAAC,oBAAoB,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;QACnE,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QAC1B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAC5C,CAAC;IAID,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC;YAC7D,8DAAa,CACR,CACR,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop, Watch} from \"@stencil/core\"\nimport {\n  FormGroupClass,\n  FormGroupOrientation,\n  FormGroupOrientationType,\n  FormGroupSizes,\n  FormGroupSizesType\n} from \"./constants\"\nimport {GovHost} from \"../../../helpers/Dom/template.types\"\nimport {govHost} from \"../../../helpers/Dom/template\"\nimport {validateProp} from \"../../../helpers/Validate/props\"\n\n@Component({\n  tag: \"gov-form-group\",\n})\nexport class GovFormGroup {\n  private readonly h: GovHost\n\n  constructor() {\n    this.h = govHost(this.host)\n  }\n\n  @Element() host: HTMLGovFormGroupElement\n  /**\n   * Gap's size.\n   */\n  @Prop() readonly gap?: FormGroupSizesType = undefined\n  /**\n   * Elements orientation\n   */\n  @Prop() readonly orientation?: FormGroupOrientationType = 'vertical'\n\n  @Watch(\"gap\")\n  validateGap(newValue: string): void {\n    if (newValue) {\n      validateProp(FormGroupSizes, newValue, FormGroupClass.root)\n    }\n  }\n\n  @Watch(\"orientation\")\n  validateOrientation(newValue: string): void {\n    if (newValue) {\n      validateProp(FormGroupOrientation, newValue, FormGroupClass.root)\n    }\n  }\n\n  componentWillLoad(): void {\n    this.validateGap(this.gap)\n    this.validateOrientation(this.orientation)\n  }\n\n\n\n  render() {\n    return (\n      <Host gap={this.gap} class={this.h.classes(FormGroupClass.root)}>\n        <slot></slot>\n      </Host>\n    )\n  }\n}\n"]}

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

@@ -45,7 +45,7 @@ export class GovFormRadioGroup {
         });
     }
     render() {
-        return (h(Host, { key: 'ba41914374ee9c183b70c49f6735a4ef7455f725', gap: this.gap, class: this.h.classes(FormGroupClass.root), value: this.value }, h("slot", { key: '1c45b6557ff99e3c22d44e14c28a4381bb4b1eea' })));
+        return (h(Host, { key: '0526062e74e480edc22bdbbdf8c1f82a91ff463d', gap: this.gap, class: this.h.classes(FormGroupClass.root), value: this.value }, h("slot", { key: 'f11696b75d4f0c4bc72da3ca70d3111825edd36a' })));
     }
     static get is() { return "gov-form-radio-group"; }
     static get originalStyleUrls() {

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

@@ -1,8 +1,6 @@
 import { Sizes } from "../../../core/constants/sizes";
-import { Variants } from "../../../core/constants/variants";
 import { pick } from "../../../utils/utils";
-export const FormInputSizes = pick(Sizes, ['_S', '_M', '_L', '_XL']);
-export const FormInputVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
+export const FormInputSizes = pick(Sizes, ['_XS', '_S', '_M', '_L', '_XL']);
 export var InputTypes;
 (function (InputTypes) {
     InputTypes["COLOR"] = "color";

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,EAAE,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAA;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;AAGpE,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAA;AAGzE,MAAM,CAAN,IAAY,UAcX;AAdD,WAAY,UAAU;IACrB,6BAAe,CAAA;IACf,2BAAa,CAAA;IACb,+CAAiC,CAAA;IACjC,6BAAe,CAAA;IACf,6BAAe,CAAA;IACf,+BAAiB,CAAA;IACjB,mCAAqB,CAAA;IACrB,+BAAiB,CAAA;IACjB,yBAAW,CAAA;IACX,2BAAa,CAAA;IACb,2BAAa,CAAA;IACb,yBAAW,CAAA;IACX,2BAAa,CAAA;AACd,CAAC,EAdW,UAAU,KAAV,UAAU,QAcrB;AAID,MAAM,CAAN,IAAY,IAEX;AAFD,WAAY,IAAI;IACf,uBAAe,CAAA;AAChB,CAAC,EAFW,IAAI,KAAJ,IAAI,QAEf;AAID,MAAM,CAAC,MAAM,cAAc,GAAG;IAC7B,IAAI,EAAE,gBAAgB;CACtB,CAAA","sourcesContent":["import { Sizes } from '../../../core/constants/sizes'\nimport { Variants } from '../../../core/constants/variants'\nimport { ValueOf } from '../../../types/interfaces'\nimport { pick } from '../../../utils/utils'\n\nexport const FormInputSizes = pick(Sizes, ['_S', '_M', '_L', '_XL'])\nexport type FormInputSizesType = `${ValueOf<typeof FormInputSizes>}`\n\nexport const FormInputVariants = pick(Variants, ['PRIMARY', 'SECONDARY'])\nexport type FormInputVariantType = `${ValueOf<typeof FormInputVariants>}`\n\nexport enum InputTypes {\n\tCOLOR = 'color',\n\tDATE = 'date',\n\tDATETIME_LOCAL = 'datetime-local',\n\tEMAIL = 'email',\n\tMONTH = 'month',\n\tNUMBER = 'number',\n\tPASSWORD = 'password',\n\tSEARCH = 'search',\n\tTEL = 'tel',\n\tTEXT = 'text',\n\tTIME = 'time',\n\tURL = 'url',\n\tWEEK = 'week',\n}\n\nexport type InputType = `${ValueOf<typeof InputTypes>}`\n\nexport enum Type {\n\tRESET = 'reset',\n}\n\nexport type TypesType = `${ValueOf<typeof Type>}`\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,EAAE,MAAM,+BAA+B,CAAA;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;AAG3E,MAAM,CAAN,IAAY,UAcX;AAdD,WAAY,UAAU;IACrB,6BAAe,CAAA;IACf,2BAAa,CAAA;IACb,+CAAiC,CAAA;IACjC,6BAAe,CAAA;IACf,6BAAe,CAAA;IACf,+BAAiB,CAAA;IACjB,mCAAqB,CAAA;IACrB,+BAAiB,CAAA;IACjB,yBAAW,CAAA;IACX,2BAAa,CAAA;IACb,2BAAa,CAAA;IACb,yBAAW,CAAA;IACX,2BAAa,CAAA;AACd,CAAC,EAdW,UAAU,KAAV,UAAU,QAcrB;AAGD,MAAM,CAAN,IAAY,IAEX;AAFD,WAAY,IAAI;IACf,uBAAe,CAAA;AAChB,CAAC,EAFW,IAAI,KAAJ,IAAI,QAEf;AAGD,MAAM,CAAC,MAAM,cAAc,GAAG;IAC7B,IAAI,EAAE,gBAAgB;CACtB,CAAA","sourcesContent":["import { Sizes } from '../../../core/constants/sizes'\nimport { ValueOf } from '../../../types/interfaces'\nimport { pick } from '../../../utils/utils'\n\nexport const FormInputSizes = pick(Sizes, ['_XS', '_S', '_M', '_L', '_XL'])\nexport type FormInputSizesType = `${ValueOf<typeof FormInputSizes>}`\n\nexport enum InputTypes {\n\tCOLOR = 'color',\n\tDATE = 'date',\n\tDATETIME_LOCAL = 'datetime-local',\n\tEMAIL = 'email',\n\tMONTH = 'month',\n\tNUMBER = 'number',\n\tPASSWORD = 'password',\n\tSEARCH = 'search',\n\tTEL = 'tel',\n\tTEXT = 'text',\n\tTIME = 'time',\n\tURL = 'url',\n\tWEEK = 'week',\n}\nexport type InputType = `${ValueOf<typeof InputTypes>}`\n\nexport enum Type {\n\tRESET = 'reset',\n}\nexport type TypesType = `${ValueOf<typeof Type>}`\n\nexport const FormInputClass = {\n\troot: 'gov-form-input',\n}\n"]}

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

@@ -1,12 +1,12 @@
 import { h, Host } from "@stencil/core";
 import { govForm } from "../../../helpers/Dom/form";
 import { govHost, toBoolAttr, toBoolAttrIfDefined, toOnOffAttrIfDefined } from "../../../helpers/Dom/template";
-import { canValidateWcagOnRender } from "../../../helpers/Dom/win";
 import { validateProp } from "../../../helpers/Validate/props";
-import { validateWcagLabelFor, validateWcagRef } from "../../../helpers/Validate/wcag";
 import { createID } from "../../../utils/string.utils";
-import { delay } from "../../../utils/utils";
-import { FormInputClass, FormInputSizes, FormInputVariants, } from "./constants";
+import { FormInputClass, FormInputSizes, } from "./constants";
+import { AttributeObserver } from "../../../helpers/Dom/attribute";
+import { ariaAttributes } from "../../../helpers/Accessibility/attributes";
+import { inheritAriaAttributes } from "../../../helpers/Accessibility/accessibility";
 var Tags;
 (function (Tags) {
     Tags["INPUT"] = "input";
@@ -16,7 +16,6 @@ export class GovFormInput {
     constructor() {
         this.value = undefined;
         this.identifier = undefined;
-        this.variant = "secondary";
         this.success = undefined;
         this.size = "m";
         this.name = undefined;
@@ -39,19 +38,15 @@ export class GovFormInput {
         this.inputType = "text";
         this.role = undefined;
         this.invalid = undefined;
-        this.wcagDescribedBy = undefined;
-        this.wcagLabelledBy = undefined;
-        this.wcagOwns = undefined;
-        this.wcagAutocomplete = undefined;
-        this.wcagExpanded = undefined;
+        this.accessibleShowPasswordLabel = 'Zobrazit heslo';
+        this.accessibleHidePasswordLabel = 'Skrýt heslo';
         this.focused = undefined;
+        this.showPassword = false;
+        this.inheritedAttributes = {};
         this.h = govHost(this.host);
         this.inputId = createID("GovInput");
         this.f = govForm(this.h);
     }
-    validateVariant(newValue) {
-        validateProp(FormInputVariants, newValue, FormInputClass.root);
-    }
     validateSize(newValue) {
         validateProp(FormInputSizes, newValue, FormInputClass.root);
     }
@@ -65,26 +60,33 @@ export class GovFormInput {
         this.f.passAttrToControl("invalid", toBoolAttr(this.invalid));
         this.f.passAttrToControl("type", this.multiline ? Tags.TEXTAREA : Tags.INPUT);
     }
+    componentDidLoad() {
+        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
+            this.onAriaAttributeChange(attributeName, newValue);
+        });
+        this.attributeObserver.startObserving(ariaAttributes);
+        this.govHydrated.emit();
+    }
     componentWillLoad() {
-        this.validateVariant(this.variant);
         this.validateSize(this.size);
+        this.inheritedAttributes = inheritAriaAttributes(this.host);
     }
-    async componentDidRender() {
+    componentDidRender() {
         this.passControlAttrs();
         this.f.passAttrToLabel("required", String(this.required));
-        if (canValidateWcagOnRender()) {
-            await delay(500);
-            await this.validateWcag();
-        }
     }
-    componentDidLoad() {
-        this.govHydrated.emit();
+    onAriaAttributeChange(attributeName, newValue) {
+        this.host.removeAttribute(attributeName);
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
+    }
+    disconnectedCallback() {
+        this.attributeObserver.stopObserving();
     }
     render() {
         const Tag = this.multiline ? Tags.TEXTAREA : Tags.INPUT;
-        return (h(Host, { key: 'fb06974797e9fe99cc0845cd9aac8cc79bfc0583', class: FormInputClass.root, size: this.size, variant: this.variant, type: this.type }, this.h.hasSlot("prefix") && h("slot", { key: 'c8a307ca8c1e4e4a27ac00463523f19c4012bbfe', name: "prefix" }), h("span", { key: 'b86a839790465feda8d50385ca5b44a98c3ee81d', class: "element" }, this.h.hasSlot("left-icon") && h("slot", { key: '300d97f0f13e95ac306b3c0332ccb58b99988c7a', name: "left-icon" }), this.h.hasSlot("right-icon") && !(this.success || this.invalid) && h("slot", { key: '6d2673bc16e363b52662671a172f7c20eca85c62', name: "right-icon" }), this.success && !this.multiline &&
-            h("gov-icon", { key: '40c2f0e9991833ad731e469164d0bd148d883007', slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && !this.multiline &&
-            h("gov-icon", { key: '56d940b36602db7749fc1656fdee739b2ad21370', slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), h(Tag, { key: 'ecdf27b1a0889cfd0367ded8cffd24152c2e1d01', 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), onKeyDown: this.onKeyDownHandler.bind(this), ref: el => (this.inputRef = el), placeholder: this.placeholder, value: this.value, spellcheck: toBoolAttrIfDefined(this.spellcheck), lang: this.inputLang, readonly: toBoolAttrIfDefined(this.readonly), autocomplete: toOnOffAttrIfDefined(this.autocomplete), autocorrect: toOnOffAttrIfDefined(this.autocorrect), minlength: this.minlength, maxlength: this.maxlength, min: this.min, max: this.max, 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", { key: 'bd6b9c7a981c40fdddf83e8ce0778978e1ea31af', name: "sufix" })));
+        return (h(Host, { key: '8b60864f0792fe1946d4b7cb6489cff0ffc767e1', class: FormInputClass.root, size: this.size, type: this.type }, this.h.hasSlot("prefix") && h("slot", { key: '4d5d0bb755acbb42033f572633e4969c8e6e8b36', name: "prefix" }), h("span", { key: 'eaac4a690052077ca631ae1e9c69a65518a1902f', class: "element" }, this.h.hasSlot("left-icon") && h("slot", { key: '75c58db96fdda7395ee77c9a71b5b01f2fe92503', name: "left-icon" }), this.h.hasSlot("right-icon") && this.inputType !== 'password' && h("slot", { key: 'a3fb32c7d9103fed20f769c5220ebe8d0254efac', name: "right-icon" }), this.success && !this.multiline &&
+            h("gov-icon", { key: 'ef85a7526e0542007cf6978e1dd9f9f872a529f7', slot: "validation-icon", class: "icon-validation", name: "check-lg" }), this.invalid && !this.multiline &&
+            h("gov-icon", { key: '0869b21bce101fde9b5beb169e042ca72f2d2c52', slot: "validation-icon", class: "icon-validation", name: "exclamation-lg" }), h(Tag, Object.assign({ key: '51a15f6e77ab64f16b168d392fbe9d68b77c5821', type: this.inputType === 'password' && this.showPassword ? 'text' : 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), onKeyDown: this.onKeyDownHandler.bind(this), ref: el => (this.inputRef = el), placeholder: this.placeholder, spellcheck: toBoolAttrIfDefined(this.spellcheck), lang: this.inputLang, readonly: toBoolAttrIfDefined(this.readonly), autocomplete: toOnOffAttrIfDefined(this.autocomplete), autocorrect: toOnOffAttrIfDefined(this.autocorrect), minlength: this.minlength, maxlength: this.maxlength, min: this.min, max: this.max, required: this.required, rows: this.rows, cols: this.cols, role: this.role, value: this.value }, this.inheritedAttributes, { "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled) })), this.inputType === 'password' ? (h("gov-button", { color: 'primary', type: 'base', size: this.size, "aria-label": this.showPassword ? this.accessibleHidePasswordLabel : this.accessibleShowPasswordLabel, "on-gov-click": () => this.showPassword = !this.showPassword }, h("gov-icon", { slot: "left-icon", name: "eye", type: "basic" }))) : null), this.h.hasSlot("sufix") && h("slot", { key: '2cec0cab2e419776e89506a47f93936249b47fe9', name: "sufix" })));
     }
     onFocusHandler(e) {
         e.stopPropagation();
@@ -154,26 +156,7 @@ export class GovFormInput {
     async getRef() {
         return this.inputRef;
     }
-    /**
-     * 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);
-        validateWcagLabelFor(this.identifier || this.inputId, this.wcagLabelledBy, FormInputClass.root);
-    }
     static get is() { return "gov-form-input"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["gov-form-input.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["gov-form-input.css"]
-        };
-    }
     static get properties() {
         return {
             "value": {
@@ -210,30 +193,6 @@ export class GovFormInput {
                 "attribute": "identifier",
                 "reflect": false
             },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "FormInputVariantType",
-                    "resolved": "\"primary\" | \"secondary\"",
-                    "references": {
-                        "FormInputVariantType": {
-                            "location": "import",
-                            "path": "./constants",
-                            "id": "../../../packages/core/src/components/gov-form/input/constants.ts::FormInputVariantType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Style variation of the form input."
-                },
-                "attribute": "variant",
-                "reflect": false,
-                "defaultValue": "\"secondary\""
-            },
             "success": {
                 "type": "boolean",
                 "mutable": false,
@@ -256,7 +215,7 @@ export class GovFormInput {
                 "mutable": false,
                 "complexType": {
                     "original": "FormInputSizesType",
-                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\"",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
                     "references": {
                         "FormInputSizesType": {
                             "location": "import",
@@ -373,7 +332,7 @@ export class GovFormInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Makes the input component disabled.\nThis prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies."
+                    "text": "Makes the input component disabled."
                 },
                 "attribute": "disabled",
                 "reflect": true,
@@ -642,96 +601,49 @@ export class GovFormInput {
                 "attribute": "invalid",
                 "reflect": true
             },
-            "wcagDescribedBy": {
+            "accessibleShowPasswordLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "\"Zobrazit heslo\"",
+                    "resolved": "\"Zobrazit heslo\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates the id of a component that describes the input."
+                    "text": "Accessible text for password display"
                 },
-                "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-labelled-by",
-                "reflect": false
-            },
-            "wcagOwns": {
-                "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-owns",
-                "reflect": false
+                "attribute": "accessible-show-password-label",
+                "reflect": false,
+                "defaultValue": "'Zobrazit heslo'"
             },
-            "wcagAutocomplete": {
+            "accessibleHidePasswordLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "\"Skr\u00FDt heslo\"",
+                    "resolved": "\"Skr\u00FDt heslo\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value."
+                    "text": "Accessible text to hide the password"
                 },
-                "attribute": "wcag-autocomplete",
-                "reflect": false
-            },
-            "wcagExpanded": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Attribute is set on an element to indicate if a control is expanded or collapsed"
-                },
-                "attribute": "wcag-expanded",
-                "reflect": false
+                "attribute": "accessible-hide-password-label",
+                "reflect": false,
+                "defaultValue": "'Skr\u00FDt heslo'"
             }
         };
     }
     static get states() {
         return {
-            "focused": {}
+            "focused": {},
+            "showPassword": {},
+            "inheritedAttributes": {}
         };
     }
     static get events() {
@@ -942,32 +854,12 @@ export class GovFormInput {
                     "text": "Returns an instance of the native html input element",
                     "tags": []
                 }
-            },
-            "validateWcag": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Validate the WCAG attributes of the component",
-                    "tags": []
-                }
             }
         };
     }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "variant",
-                "methodName": "validateVariant"
-            }, {
                 "propName": "size",
                 "methodName": "validateSize"
             }, {