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

package/dist/components/gov-form-autocomplete2.js.map

@@ -1 +1 @@
-{"file":"gov-form-autocomplete2.js","mappings":";;;;;;;;;;AAAA,MAAM,sBAAsB,GAAG,k+CAAk+C;;MCcp/C,mBAAmB;EAO/B;;;;;;;IAHQ,qBAAgB,GACX,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;iBAUe,EAAE;;mBAQlB,SAAS;;gBAQdA,KAAW,CAAC,EAAE;mBAId,MAAM;;oBASJ,KAAK;;;;;qBAqBL,CAAC;;;;;;sBAmCP,KAAK;wBACJ,CAAC,CAAC;gBACS,EAAE;IA9F5C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;GACvC;EAgGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAA;GAC5D;EAGD,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAACC,OAAK,EAAE,QAAQ,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAA;GACzD;EAGO,SAAS;IAChB,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE;MAC1B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;KAC1C;GACD;EAEO,WAAW;IAClB,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE;MAC/C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;KAC1C;GACD;EAEO,QAAQ;IACf,IAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,EAAE;MACvG,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;MACd,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAA;MACtB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAA;MACvB,OAAM;KACN;IACD,IAAI,IAAI,CAAC,cAAc,EAAE;MACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;MACtB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;SAC7B,IAAI,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;SACxC,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;SAC3B,OAAO,CAAC;QACR,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAA;QACtB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAA;OACvB,CAAC,CAAA;KACH;GACD;EAED,iBAAiB;IAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAClC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC5B;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,qBAAqB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAC9E,sBAAgB,WAAW,EAAE,IAAI,CAAC,WAAW,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,kBACX,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,kBAC7C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,kBAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,iBAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1C,gBAAgB,EAAE,MAAM,EACxB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACnD,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,EAC9C,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAA6B,IAC1D,YAAM,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,YAAY,GAAE,CAC3B,EAClB,UAAI,KAAK,EAAE,qBAAqB,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,CAAC,SAAS,IACxE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK;MAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,KAAK,KAAK,CAAA;MAC9C,OAAO,UAAI,KAAK,EAAE,qBAAqB,CAAC,IAAI,EAC1C,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,EAClD,IAAI,EAAE,QAAQ,mBACC,KAAK,EACpB,QAAQ,EAAE,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC,kBACf,IAAI,CAAC,IAAI,CAAC,MAAM,EAC9B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,mBAC3B,UAAU,CAAC,UAAU,CAAC,GAAI,CAAA;KAC3C,CAAC,CACE,CACC,EACP;GACD;EAEO,cAAc,CAAC,CAAa;IACnC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;IACnB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAA;IACtB,IAAG,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,KAAK,IAAI,CAAC,cAAc,EAAE;MAC/D,IAAI,CAAC,QAAQ,EAAE,CAAA;KACf;IACD,CAAC,CAAC,eAAe,EAAE,CAAA;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;GACrB;EAEO,aAAa,CAAC,CAAa;IAClC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;IACpB,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,GAAG,EAAE,EAAE,GAAG,CAAC,CAAA;IACrC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAA;IACtB,CAAC,CAAC,eAAe,EAAE,CAAA;IACnB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;GACpB;EAEO,cAAc,CAAC,CAAc;IACpC,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAAkC,CAAC,KAAK,CAAA;IACxD,CAAC,CAAC,eAAe,EAAE,CAAA;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACrB,IAAI,CAAC,QAAQ,EAAE,CAAA;GACf;EAEO,eAAe,CAAC,QAAgB,CAAC,CAAC;IACzC,IAAI,QAAQ,GAAG,IAAI,CAAA;IACnB,IAAG,KAAK,GAAG,CAAC,CAAC,EAAE;MACd,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KAC3B;SACI,IAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;MACpD,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;KACvC;IACD,IAAG,QAAQ,EAAE;MACZ,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;MAC9B,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;MACd,IAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,OAAO,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,QAAQ,EAAE;QACvF,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;OACnC;KACD;GACD;EAEO,cAAc,CAAC,CAAc;IACpC,MAAM,KAAK,GAAI,CAAC,CAAC,MAAwB,CAAA;IACzC,CAAC,CAAC,eAAe,EAAE,CAAA;IACnB,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE;MAAE,IAAI,CAAC,SAAS,EAAE,CAAC;SACtC,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE;MAAE,IAAI,CAAC,WAAW,EAAE,CAAC;SAC7C,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE;MAAE,IAAI,CAAC,eAAe,EAAE,CAAC;GACtD;;;;EAMD,MAAM,QAAQ,CAAC,OAAsB;IACpC,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;GACnC;;;;EAMD,MAAM,UAAU;IACf,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;IACf,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,EAAE,CAAA;IAExB,MAAM,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;GAChC;;;;EAMD,MAAM,iBAAiB,CAAC,QAAyC;IAChE,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAA;GAC9B;;;;;EAOD,MAAM,mBAAmB,CAAC,QAAmD;IAC5E,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAA;GAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SizesGlobal","Sizes"],"sources":["../../../packages/core/src/components/gov-form/autocomplete/gov-form-autocomplete.scss?tag=gov-form-autocomplete","../../../packages/core/src/components/gov-form/autocomplete/gov-form-autocomplete.tsx"],"sourcesContent":["$class: \".gov-form-autocomplete\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n\t&__list {\n\t\t@include typography($font-size-s);\n\t\t@extend %reset-ul;\n\t\tposition: absolute;\n\t\ttop: 100%;\n\t\tright: 0;\n\t\tleft: 0;\n\t\tz-index: 5;\n\t\tmax-height: rem-calc(225);\n\t\tmargin-top: rem-calc(8);\n\t\tborder: $form-autocomplete-border;\n\t\tborder-radius: $border-radius;\n\t\tbackground: $form-autocomplete-bg;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\toverscroll-behavior: none;\n\t}\n\t&__list > &__item {\n\t\t@extend %reset-ul-li;\n\t\tpadding: rem-calc(12 8);\n\t\tcursor: pointer;\n\t}\n\n\t// STATES\n\t&__list:empty {\n\t\tdisplay: none;\n\t}\n\n\t// HOVERS\n\t&__item {\n\t\t@include parameter(\"aria-selected\") {\n\t\t\tbackground: $form-autocomplete-item-select-bg;\n\t\t}\n\t\t@include hover() {\n\t\t\tbackground: $form-autocomplete-item-hover-bg;\n\t\t}\n\t}\n}\n","import { Component, Element, Host, h, Prop, Watch, Event, EventEmitter, State, Method } from \"@stencil/core\"\nimport { SizesType } from \"./constants\"\nimport { createID } from \"../../../../src/utils/string.utils\"\nimport { FormAutocompleteClass, Variants, VariantType, Sizes } from \"./constants\"\nimport { Sizes as SizesGlobal } from \"../../../core/constants/sizes\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport {throttle} from \"../../../utils/utils\"\nimport {GovFormAutocompleteItem} from './gov-form-autocomplete.d'\nimport {toBoolAttr } from \"../../../helpers/Dom/template\"\n\n@Component({\n\ttag: \"gov-form-autocomplete\",\n\tstyleUrl: \"gov-form-autocomplete.scss\",\n})\nexport class GovFormAutocomplete {\n\tprivate inputRef?: HTMLGovFormInputElement\n\tprivate readonly listBoxId: string\n\tprivate searchCallback: (value: string) => Promise<GovFormAutocompleteItem[]>\n\tprivate templateResolver: (item: GovFormAutocompleteItem, selected: boolean)\n\t\t=> string = (item) => item[this.nameKey]\n\n\tconstructor() {\n\t\tthis.listBoxId = createID(\"GovListBox\")\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 = SizesGlobal._M\n\t/**\n\t * Main key name in the object\n\t */\n\t@Prop() readonly nameKey: string = 'name'\n\t/**\n\t * Name of the input.\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 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 * 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 * Minimum length (number of characters) of value\n\t */\n\t@Prop() readonly minlength: number = 2\n\t/**\n\t * Maximum length (number of characters) of value\n\t */\n\t@Prop() readonly maxlength: number\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 * Same as original parameter\n\t * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns\n\t */\n\t@Prop({ attribute: \"wcag-owns\" }) readonly wcagOwns: string\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-select\" }) govSelect: EventEmitter<GovFormAutocompleteItem>\n\t@State() focused: boolean\n\t@State() processing: boolean = false\n\t@State() arrowCounter: number = -1\n\t@State() list: GovFormAutocompleteItem[] = []\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, FormAutocompleteClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, FormAutocompleteClass.root)\n\t}\n\n\n\tprivate onArrowUp() {\n\t\tif (this.arrowCounter > 0) {\n\t\t\tthis.arrowCounter = this.arrowCounter - 1;\n\t\t}\n\t}\n\n\tprivate onArrowDown() {\n\t\tif (this.arrowCounter < (this.list.length - 1)) {\n\t\t\tthis.arrowCounter = this.arrowCounter + 1;\n\t\t}\n\t}\n\n\tprivate doSearch() {\n\t\tif(Number.isInteger(this.minlength) && (String(this.value).length <= this.minlength && this.minlength)) {\n\t\t\tthis.list = []\n\t\t\tthis.arrowCounter = -1\n\t\t\tthis.processing = false\n\t\t\treturn\n\t\t}\n\t\tif (this.searchCallback) {\n\t\t\tthis.processing = true\n\t\t\tthis.searchCallback(this.value)\n\t\t\t\t.then((response) => this.list = response)\n\t\t\t\t.catch(() => this.list = [])\n\t\t\t\t.finally(() => {\n\t\t\t\t\tthis.arrowCounter = -1\n\t\t\t\t\tthis.processing = false\n\t\t\t\t})\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormAutocompleteClass.root} size={this.size} variant={this.variant}>\n\t\t\t\t<gov-form-input placeholder={this.placeholder}\n\t\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\t\t\t\tautocomplete={false}\n\t\t\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\t\tinvalid={this.invalid}\n\t\t\t\t\t\t\t\trole={'searchbox'}\n\t\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\t\tminlength={this.minlength}\n\t\t\t\t\t\t\t\tmaxlength={this.maxlength}\n\t\t\t\t\t\t\t\ton-gov-input={throttle(this.onInputHandler.bind(this), 200)}\n\t\t\t\t\t\t\t\ton-gov-keyup={this.onKeyUpHandler.bind(this)}\n\t\t\t\t\t\t\t\ton-gov-focus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\t\t\ton-gov-blur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\t\t\twcagAutocomplete={'list'}\n\t\t\t\t\t\t\t\twcagDescribedBy={this.wcagDescribedBy}\n\t\t\t\t\t\t\t\twcagLabelledBy={this.wcagLabelledBy}\n\t\t\t\t\t\t\t\twcagOwns={[this.listBoxId, this.wcagOwns].join(' ')}\n\t\t\t\t\t\t\t\twcagExpanded={this.list.length && this.focused}\n\t\t\t\t\t\t\t\tref={el => this.inputRef = el as HTMLGovFormInputElement}>\n\t\t\t\t\t\t<slot slot=\"right-icon\" name=\"right-icon\"/>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t<ul class={FormAutocompleteClass.list} role={'listbox'} id={this.listBoxId}>\n\t\t\t\t\t{this.list.map((item, index) => {\n\t\t\t\t\t\tconst isSelected = this.arrowCounter === index\n\t\t\t\t\t\treturn <li class={FormAutocompleteClass.item}\n\t\t\t\t\t\t\t\tinnerHTML={this.templateResolver(item, isSelected)}\n\t\t\t\t\t\t\t\trole={'option'}\n\t\t\t\t\t\t\t\taria-posinset={index}\n\t\t\t\t\t\t\t\ttabindex={isSelected ? 0 : -1}\n\t\t\t\t\t\t\t\taria-setsize={this.list.length}\n\t\t\t\t\t\t\t\tonClick={() => this.onSelectHandler(index)}\n\t\t\t\t\t\t\t\taria-selected={toBoolAttr(isSelected)} />\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.focused = true\n\t\tthis.arrowCounter = -1\n\t\tif((this.value || this.minlength === 0) && this.searchCallback) {\n\t\t\tthis.doSearch()\n\t\t}\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tsetTimeout(() => this.list = [], 200)\n\t\tthis.arrowCounter = -1\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onInputHandler(e: CustomEvent) {\n\t\tthis.value = (e.target as HTMLGovFormInputElement).value\n\t\te.stopPropagation()\n\t\tthis.govInput.emit(e)\n\t\tthis.doSearch()\n\t}\n\n\tprivate onSelectHandler(index: number = -1) {\n\t\tlet selected = null\n\t\tif(index > -1) {\n\t\t\tselected = this.list[index]\n\t\t}\n\t\telse if(this.list.hasOwnProperty(this.arrowCounter)) {\n\t\t\tselected = this.list[this.arrowCounter]\n\t\t}\n\t\tif(selected) {\n\t\t\tthis.govSelect.emit(selected);\n\t\t\tthis.list = []\n\t\t\tif(selected.hasOwnProperty(this.nameKey) && typeof selected[this.nameKey] === 'string') {\n\t\t\t\tthis.value = selected[this.nameKey]\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onKeyUpHandler(e: CustomEvent) {\n\t\tconst event = (e.detail as KeyboardEvent)\n\t\te.stopPropagation()\n\t\tif (event.keyCode === 38) this.onArrowUp();\n\t\telse if (event.keyCode === 40) this.onArrowDown();\n\t\telse if (event.keyCode === 13) this.onSelectHandler();\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 * Clears whisperer value\n\t */\n\t@Method()\n\tasync clearValue(): Promise<void> {\n\t\tthis.value = ''\n\t\tthis.inputRef.value = ''\n\n\t\tawait this.inputRef.clearValue()\n\t}\n\n\t/**\n\t * Set a custom asynchronous function for the whisperer\n\t */\n\t@Method()\n\tasync setSearchCallback(callback: (value: string) => Promise<any>) {\n\t\tthis.searchCallback = callback\n\t}\n\n\t/**\n\t * Setting a custom whisper result template\n\t * @param callback\n\t */\n\t@Method()\n\tasync setTemplateResolver(callback: (item: GovFormAutocompleteItem) => string) {\n\t\tthis.templateResolver = callback\n\t}\n}\n"],"version":3}
+{"file":"gov-form-autocomplete2.js","mappings":"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","names":["SizesGlobal","Sizes"],"sources":["../../../packages/core/src/components/gov-form/autocomplete/gov-form-autocomplete.scss?tag=gov-form-autocomplete","../../../packages/core/src/components/gov-form/autocomplete/gov-form-autocomplete.tsx"],"sourcesContent":["$class: \".gov-form-autocomplete\";\n\n#{$class} {\n\t@include base();\n\t&__list {\n\t\t@include typography($font-size-s);\n\t\t@extend %reset-ul;\n\t\tposition: absolute;\n\t\ttop: 100%;\n\t\tright: 0;\n\t\tleft: 0;\n\t\tz-index: 5;\n\t\tmax-height: rem-calc(225);\n\t\tmargin-top: rem-calc(8);\n\t\tborder: $form-autocomplete-border;\n\t\tborder-radius: $border-radius;\n\t\tbackground: $form-autocomplete-bg;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\toverscroll-behavior: none;\n\t}\n\t&__list > &__item {\n\t\t@extend %reset-ul-li;\n\t\tpadding: rem-calc(12 8);\n\t\tcursor: pointer;\n\t}\n\n\t// STATES\n\t&__list:empty {\n\t\tdisplay: none;\n\t}\n\n\t// HOVERS\n\t&__item {\n\t\t@include parameter(\"aria-selected\") {\n\t\t\tbackground: $form-autocomplete-item-select-bg;\n\t\t}\n\t\t@include hover() {\n\t\t\tbackground: $form-autocomplete-item-hover-bg;\n\t\t}\n\t}\n}\n","import { Component, Element, Host, h, Prop, Watch, Event, EventEmitter, State, Method } from '@stencil/core'\nimport { SizesType } from './constants'\nimport { createID } from '../../../../src/utils/string.utils'\nimport { FormAutocompleteClass, Variants, VariantType, Sizes } from './constants'\nimport { Sizes as SizesGlobal } from '../../../core/constants/sizes'\nimport { validateProp } from '../../../helpers/Validate/props'\nimport { has, throttle } from \"../../../utils/utils\";\nimport { GovFormAutocompleteItem } from './gov-form-autocomplete.d'\nimport { toBoolAttr } from '../../../helpers/Dom/template'\nimport { Nullable } from \"../../../types/interfaces\";\n\n@Component({\n\ttag: 'gov-form-autocomplete',\n\tstyleUrl: 'gov-form-autocomplete.scss',\n})\nexport class GovFormAutocomplete {\n\tprivate inputRef?: HTMLGovFormInputElement\n\tprivate readonly listBoxId: string\n\tprivate searchCallback: (value: string) => Promise<GovFormAutocompleteItem[]>\n\tprivate templateResolver: (item: GovFormAutocompleteItem, selected: boolean) => string = item => item[this.nameKey]\n\n\tconstructor() {\n\t\tthis.listBoxId = createID('GovListBox')\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 = ''\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 = SizesGlobal._M\n\t/**\n\t * Main key name in the object\n\t */\n\t@Prop() readonly nameKey: string = 'name'\n\t/**\n\t * Name of the input.\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 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 * 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 * Minimum length (number of characters) of value\n\t */\n\t@Prop() readonly minlength: number = 2\n\t/**\n\t * Maximum length (number of characters) of value\n\t */\n\t@Prop() readonly maxlength: number\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 * Same as original parameter\n\t * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns\n\t */\n\t@Prop({ attribute: 'wcag-owns' }) readonly wcagOwns: string\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-select' }) govSelect: EventEmitter<GovFormAutocompleteItem>\n\t@State() focused: boolean\n\t@State() processing = false\n\t@State() arrowCounter = -1\n\t@State() list: GovFormAutocompleteItem[] = []\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, FormAutocompleteClass.root)\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, FormAutocompleteClass.root)\n\t}\n\n\tprivate onArrowUp() {\n\t\tif (this.arrowCounter > 0) {\n\t\t\tthis.arrowCounter = this.arrowCounter - 1\n\t\t}\n\t}\n\n\tprivate onArrowDown() {\n\t\tif (this.arrowCounter < this.list.length - 1) {\n\t\t\tthis.arrowCounter = this.arrowCounter + 1\n\t\t}\n\t}\n\n\tprivate doSearch() {\n\t\tif (Number.isInteger(this.minlength) && String(this.value).length <= this.minlength && this.minlength) {\n\t\t\tthis.list = []\n\t\t\tthis.arrowCounter = -1\n\t\t\tthis.processing = false\n\t\t\treturn\n\t\t}\n\t\tif (this.searchCallback) {\n\t\t\tthis.processing = true\n\t\t\tthis.searchCallback(this.value)\n\t\t\t\t.then(response => (this.list = response))\n\t\t\t\t.catch(() => (this.list = []))\n\t\t\t\t.finally(() => {\n\t\t\t\t\tthis.arrowCounter = -1\n\t\t\t\t\tthis.processing = false\n\t\t\t\t})\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormAutocompleteClass.root} size={this.size} variant={this.variant}>\n\t\t\t\t<gov-form-input\n\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\tautocomplete={false}\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\trequired={this.required}\n\t\t\t\t\tinvalid={this.invalid}\n\t\t\t\t\trole={'searchbox'}\n\t\t\t\t\tvalue={this.value}\n\t\t\t\t\tminlength={this.minlength}\n\t\t\t\t\tmaxlength={this.maxlength}\n\t\t\t\t\ton-gov-input={throttle(this.onInputHandler.bind(this), 200)}\n\t\t\t\t\ton-gov-keyup={this.onKeyUpHandler.bind(this)}\n\t\t\t\t\ton-gov-focus={this.onFocusHandler.bind(this)}\n\t\t\t\t\ton-gov-blur={this.onBlurHandler.bind(this)}\n\t\t\t\t\twcagAutocomplete={'list'}\n\t\t\t\t\twcagDescribedBy={this.wcagDescribedBy}\n\t\t\t\t\twcagLabelledBy={this.wcagLabelledBy}\n\t\t\t\t\twcagOwns={[this.listBoxId, this.wcagOwns].join(' ')}\n\t\t\t\t\twcagExpanded={this.list.length && this.focused}\n\t\t\t\t\tref={el => (this.inputRef = el as HTMLGovFormInputElement)}\n\t\t\t\t>\n\t\t\t\t\t<slot slot=\"right-icon\" name=\"right-icon\" />\n\t\t\t\t</gov-form-input>\n\t\t\t\t<ul class={FormAutocompleteClass.list} role={'listbox'} id={this.listBoxId}>\n\t\t\t\t\t{this.list.map((item, index) => {\n\t\t\t\t\t\tconst isSelected = this.arrowCounter === index\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\tclass={FormAutocompleteClass.item}\n\t\t\t\t\t\t\t\tinnerHTML={this.templateResolver(item, isSelected)}\n\t\t\t\t\t\t\t\trole={'option'}\n\t\t\t\t\t\t\t\taria-posinset={index}\n\t\t\t\t\t\t\t\ttabindex={isSelected ? 0 : -1}\n\t\t\t\t\t\t\t\taria-setsize={this.list.length}\n\t\t\t\t\t\t\t\tonClick={() => this.onSelectHandler(index)}\n\t\t\t\t\t\t\t\taria-selected={toBoolAttr(isSelected)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.focused = true\n\t\tthis.arrowCounter = -1\n\t\tif ((this.value || this.minlength === 0) && this.searchCallback) {\n\t\t\tthis.doSearch()\n\t\t}\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tsetTimeout(() => (this.list = []), 200)\n\t\tthis.arrowCounter = -1\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onInputHandler(e: InputEvent) {\n\t\tthis.value = (e.target as HTMLGovFormInputElement).value\n\t\te.stopPropagation()\n\t\tthis.govInput.emit(e)\n\t\tthis.doSearch()\n\t}\n\n\tprivate onSelectHandler(index = -1) {\n\t\tlet selected: Nullable<GovFormAutocompleteItem> = null\n\t\tif (index > -1) {\n\t\t\tselected = this.list[index]\n\t\t} else if (has(this.arrowCounter, this.list)) {\n\t\t\tselected = this.list[this.arrowCounter]\n\t\t}\n\t\tif (selected) {\n\t\t\tthis.govSelect.emit(selected)\n\t\t\tthis.list = []\n\t\t\tif (has(this.nameKey, selected) && typeof selected[this.nameKey] === 'string') {\n\t\t\t\tthis.value = selected[this.nameKey]\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onKeyUpHandler(e: CustomEvent) {\n\t\tconst event = e.detail as KeyboardEvent\n\t\te.stopPropagation()\n\t\tif (event.keyCode === 38) this.onArrowUp()\n\t\telse if (event.keyCode === 40) this.onArrowDown()\n\t\telse if (event.keyCode === 13) this.onSelectHandler()\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 * Clears whisperer value\n\t */\n\t@Method()\n\tasync clearValue(): Promise<void> {\n\t\tthis.value = ''\n\t\tthis.inputRef.value = ''\n\n\t\tawait this.inputRef.clearValue()\n\t}\n\n\t/**\n\t * Set a custom asynchronous function for the whisperer\n\t */\n\t@Method()\n\tasync setSearchCallback(callback: (value: string) => Promise<any>) {\n\t\tthis.searchCallback = callback\n\t}\n\n\t/**\n\t * Setting a custom whisper result template\n\t * @param callback\n\t */\n\t@Method()\n\tasync setTemplateResolver(callback: (item: GovFormAutocompleteItem) => string) {\n\t\tthis.templateResolver = callback\n\t}\n}\n"],"version":3}

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

@@ -3,12 +3,13 @@ import { c as createID } from './string.utils.js';
 import { v as validateProp } from './props.js';
 import { g as govForm, F as FormCheckboxClass } from './form.js';
 import { g as govHost, t as toBoolAttrIfDefined, a as toBoolAttr } from './template.js';
-import { c as canValidateWcagOnRender, d as delay, a as validateWcagRef, b as validateWcagLabelFor } from './utils.js';
+import { a as validateWcagRef, b as validateWcagLabelFor } from './wcag.js';
+import { c as canValidateWcagOnRender, d as delay } from './win.js';
 import { S as Sizes } from './sizes.js';
 import { F as FormLabelClass } from './constants4.js';
 import { d as defineCustomElement$2 } from './gov-icon2.js';
 
-const govFormCheckboxCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-form-checkbox{position:relative;display:block;cursor:pointer}.gov-form-checkbox input{position:absolute;top:0;left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.gov-form-checkbox input+span{position:relative;display:block}.gov-form-checkbox input+span::before{content:\"\";position:absolute;display:block;top:0;left:0;border:var(--gov-form-checkbox-border-size, 0.125rem solid var(--gov-color-primary));transition:150ms linear border-color, 150ms linear background-color, 150ms linear outline-color}.gov-form-checkbox .gov-form-label__label{position:relative;z-index:1}.gov-form-checkbox input:focus-visible+span::before{outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base)}[invalid=\"\"].gov-form-checkbox .gov-form-label__label,[invalid=true i].gov-form-checkbox .gov-form-label__label,[invalid=\"1\"].gov-form-checkbox .gov-form-label__label{color:var(--gov-form-state-color-error, var(--gov-color-error))}[invalid=\"\"].gov-form-checkbox input+span::before,[invalid=true i].gov-form-checkbox input+span::before,[invalid=\"1\"].gov-form-checkbox input+span::before{border-color:var(--gov-form-state-color-error, var(--gov-color-error))}[disabled=\"\"].gov-form-checkbox,[disabled=true i].gov-form-checkbox,[disabled=\"1\"].gov-form-checkbox{pointer-events:none}[disabled=\"\"].gov-form-checkbox .gov-form-label__label,[disabled=true i].gov-form-checkbox .gov-form-label__label,[disabled=\"1\"].gov-form-checkbox .gov-form-label__label{color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[disabled=\"\"].gov-form-checkbox input+span::before,[disabled=true i].gov-form-checkbox input+span::before,[disabled=\"1\"].gov-form-checkbox input+span::before{border-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400))}[size=xs].gov-form-checkbox{font-weight:var(--gov-text-xs-font-weight);font-size:var(--gov-text-xs-font-size);line-height:var(--gov-text-xs-line-height);letter-spacing:var(--gov-text-xs-letter-spacing)}[size=xs].gov-form-checkbox .gov-form-label__label{min-height:1.25rem;padding-top:calc((1.25rem - var(--gov-text-xs-font-size) * 1.5) / 2);padding-left:2rem}[size=xs].gov-form-checkbox input+span::before{width:1.25rem;height:1.25rem}[size=s].gov-form-checkbox{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing)}[size=s].gov-form-checkbox .gov-form-label__label{min-height:1.375rem;padding-top:calc((1.375rem - var(--gov-text-s-font-size) * 1.5) / 2);padding-left:2.125rem}[size=s].gov-form-checkbox input+span::before{width:1.375rem;height:1.375rem}[size=m].gov-form-checkbox{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)}[size=m].gov-form-checkbox .gov-form-label__label{min-height:1.5rem;padding-top:calc((1.5rem - var(--gov-text-m-font-size) * 1.5) / 2);padding-left:2.5rem}[size=m].gov-form-checkbox input+span::before{width:1.5rem;height:1.5rem}[size=l].gov-form-checkbox{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)}[size=l].gov-form-checkbox .gov-form-label__label{min-height:2rem;padding-top:calc((2rem - var(--gov-text-l-font-size) * 1.5) / 2);padding-left:3rem}[size=l].gov-form-checkbox input+span::before{width:2rem;height:2rem}.gov-form-checkbox input+span::before{border-radius:var(--gov-border-radius, 0.1875rem)}.gov-form-checkbox__check{position:absolute;color:var(--gov-form-checkbox-check-color, var(--gov-color-secondary-100));opacity:0;transition:150ms linear opacity}.gov-form-checkbox input:checked+span::before{background:var(--gov-form-checkbox-indicator-bg, var(--gov-color-primary))}input:checked+span .gov-form-checkbox__check{opacity:1}.gov-form-checkbox[invalid=\"\"] input:checked+span::before,.gov-form-checkbox[invalid=true i] input:checked+span::before,.gov-form-checkbox[invalid=\"1\"] input:checked+span::before{background:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-checkbox[disabled=\"\"] input:checked+span::before,.gov-form-checkbox[disabled=true i] input:checked+span::before,.gov-form-checkbox[disabled=\"1\"] input:checked+span::before{border-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));background-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400))}.gov-form-checkbox[size=xs] .gov-form-checkbox__check{top:0.25rem;left:0.25rem;width:0.75rem;height:0.75rem}.gov-form-checkbox[size=s] .gov-form-checkbox__check{top:0.275rem;left:0.275rem;width:0.825rem;height:0.825rem}.gov-form-checkbox[size=m] .gov-form-checkbox__check{top:0.3rem;left:0.3rem;width:0.9rem;height:0.9rem}.gov-form-checkbox[size=l] .gov-form-checkbox__check{top:0.4rem;left:0.4rem;width:1.2rem;height:1.2rem}";
+const govFormCheckboxCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-form-checkbox{cursor:pointer}.gov-form-checkbox input{position:absolute;top:0;left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.gov-form-checkbox input+span{position:relative;display:block}.gov-form-checkbox input+span::before{content:\"\";position:absolute;display:block;top:0;left:0;border:var(--gov-form-checkbox-border-size, 0.125rem solid var(--gov-color-primary));transition:150ms linear border-color, 150ms linear background-color, 150ms linear outline-color}.gov-form-checkbox .gov-form-label__label{position:relative;z-index:1;width:100%}.gov-form-checkbox input:focus-visible+span::before{outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base)}[invalid=\"\"].gov-form-checkbox .gov-form-label__label,[invalid=true i].gov-form-checkbox .gov-form-label__label,[invalid=\"1\"].gov-form-checkbox .gov-form-label__label{color:var(--gov-form-state-color-error, var(--gov-color-error))}[invalid=\"\"].gov-form-checkbox input+span::before,[invalid=true i].gov-form-checkbox input+span::before,[invalid=\"1\"].gov-form-checkbox input+span::before{border-color:var(--gov-form-state-color-error, var(--gov-color-error))}[disabled=\"\"].gov-form-checkbox,[disabled=true i].gov-form-checkbox,[disabled=\"1\"].gov-form-checkbox{pointer-events:none}[disabled=\"\"].gov-form-checkbox .gov-form-label__label,[disabled=true i].gov-form-checkbox .gov-form-label__label,[disabled=\"1\"].gov-form-checkbox .gov-form-label__label{color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[disabled=\"\"].gov-form-checkbox input+span::before,[disabled=true i].gov-form-checkbox input+span::before,[disabled=\"1\"].gov-form-checkbox input+span::before{border-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400))}[size=xs].gov-form-checkbox{font-weight:var(--gov-text-xs-font-weight);font-size:var(--gov-text-xs-font-size);line-height:var(--gov-text-xs-line-height);letter-spacing:var(--gov-text-xs-letter-spacing);min-width:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);min-height:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem)}[size=xs].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-text-xs-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) + var(--gov-form-checkbox-core-xs-gap, 0.75rem))}[size=xs].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);height:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem)}[size=s].gov-form-checkbox{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing);min-width:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);min-height:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem)}[size=s].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-text-s-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) + var(--gov-form-checkbox-core-s-gap, 0.75rem))}[size=s].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);height:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem)}[size=m].gov-form-checkbox{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);min-width:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);min-height:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem)}[size=m].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-text-m-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) + var(--gov-form-checkbox-core-m-gap, 1rem))}[size=m].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);height:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem)}[size=l].gov-form-checkbox{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);min-width:var(--gov-form-checkbox-core-l-indicator-size, 2rem);min-height:var(--gov-form-checkbox-core-l-indicator-size, 2rem)}[size=l].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-text-l-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-l-indicator-size, 2rem) + var(--gov-form-checkbox-core-l-gap, 1rem))}[size=l].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-l-indicator-size, 2rem);height:var(--gov-form-checkbox-core-l-indicator-size, 2rem)}.gov-form-checkbox input+span::before{border-radius:var(--gov-border-radius, 0.1875rem)}.gov-form-checkbox__check{position:absolute;color:var(--gov-form-checkbox-check-color, var(--gov-color-neutral-white));opacity:0;transition:150ms linear opacity}.gov-form-checkbox input:checked+span::before{background:var(--gov-form-checkbox-indicator-bg, var(--gov-color-primary))}input:checked+span .gov-form-checkbox__check{opacity:1}.gov-form-checkbox[invalid=\"\"] input:checked+span::before,.gov-form-checkbox[invalid=true i] input:checked+span::before,.gov-form-checkbox[invalid=\"1\"] input:checked+span::before{background:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-checkbox[disabled=\"\"] input:checked+span::before,.gov-form-checkbox[disabled=true i] input:checked+span::before,.gov-form-checkbox[disabled=\"1\"] input:checked+span::before{border-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));background-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400))}.gov-form-checkbox[size=xs] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-form-checkbox-core-xs-check-size, 0.75rem)) / 2);left:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-form-checkbox-core-xs-check-size, 0.75rem)) / 2);width:var(--gov-form-checkbox-core-xs-check-size, 0.75rem);height:var(--gov-form-checkbox-core-xs-check-size, 0.75rem)}.gov-form-checkbox[size=s] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-form-checkbox-core-s-check-size, 0.825rem)) / 2);left:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-form-checkbox-core-s-check-size, 0.825rem)) / 2);width:var(--gov-form-checkbox-core-s-check-size, 0.825rem);height:var(--gov-form-checkbox-core-s-check-size, 0.825rem)}.gov-form-checkbox[size=m] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-form-checkbox-core-m-check-size, 0.9rem)) / 2);left:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-form-checkbox-core-m-check-size, 0.9rem)) / 2);width:var(--gov-form-checkbox-core-m-check-size, 0.9rem);height:var(--gov-form-checkbox-core-m-check-size, 0.9rem)}.gov-form-checkbox[size=l] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-form-checkbox-core-l-check-size, 1.2rem)) / 2);left:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-form-checkbox-core-l-check-size, 1.2rem)) / 2);width:var(--gov-form-checkbox-core-l-check-size, 1.2rem);height:var(--gov-form-checkbox-core-l-check-size, 1.2rem)}";
 
 const GovFormCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -22,13 +23,13 @@ const GovFormCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.required = false;
     this.disabled = undefined;
     this.name = undefined;
-    this.size = undefined;
+    this.size = Sizes._M;
     this.identifier = undefined;
     this.invalid = undefined;
     this.wcagDescribedBy = undefined;
     this.wcagLabelledBy = undefined;
     this.isChecked = undefined;
-    this.checkboxId = createID("GovCheckbox");
+    this.checkboxId = createID('GovCheckbox');
     this.h = govHost(this.host);
     this.f = govForm(this.h);
   }
@@ -75,8 +76,8 @@ const GovFormCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", FormCheckboxClass.root);
-    validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", FormCheckboxClass.root);
+    validateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormCheckboxClass.root);
+    validateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', FormCheckboxClass.root);
     validateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormCheckboxClass.root);
   }
   get host() { return this; }
@@ -95,7 +96,7 @@ const GovFormCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "identifier": [1],
     "invalid": [4],
     "wcagDescribedBy": [1, "wcag-described-by"],
-    "wcagLabelledBy": [1, "wcag-labelded-by"],
+    "wcagLabelledBy": [1, "wcag-labelled-by"],
     "isChecked": [32],
     "validateWcag": [64]
   }]);
@@ -117,7 +118,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const GovFormCheckbox = GovFormCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"gov-form-checkbox.js","mappings":"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","names":["GovFormCheckbox"],"sources":["../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.scss?tag=gov-form-checkbox","../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.tsx"],"sourcesContent":["/*\n *   Checkbox\n */\n\n@import \"../checkbox/gov-form-checkbox-core.scss\";\n$class: \".gov-form-checkbox\";\n\n#{$class} {\n\t@extend %form-checkbox-core;\n\tinput + span {\n\t\t&::before {\n\t\t\tborder-radius: $border-radius;\n\t\t}\n\t}\n\t&__check {\n\t\tposition: absolute;\n\t\tcolor: $form-checkbox-check-color;\n\t\topacity: 0;\n\t\ttransition: $t linear opacity;\n\t}\n\n\t// STATES\n\t// checked\n\tinput:checked + span::before {\n\t\tbackground: $form-checkbox-indicator-bg;\n\t}\n\tinput:checked + span &__check {\n\t\topacity: 1;\n\t}\n\t// invalid\n\t@include parameter(\"invalid\") {\n\t\tinput:checked + span::before {\n\t\t\tbackground: $form-state-color-error;\n\t\t}\n\t}\n\t@include parameter(\"disabled\") {\n\t\tinput:checked + span::before {\n\t\t\tborder-color: $form-state-bg-disabled;\n\t\t\tbackground-color: $form-state-bg-disabled;\n\t\t}\n\t}\n\n\t@each $size, $definitions in $form-checkbox-core-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__check {\n\t\t\t\t\ttop: calc((get(\"indicator-size\", $definitions) - get(\"check-size\", $definitions)) / 2);\n\t\t\t\t\tleft: calc((get(\"indicator-size\", $definitions) - get(\"check-size\", $definitions)) / 2);\n\t\t\t\t\twidth: get(\"check-size\", $definitions);\n\t\t\t\t\theight: get(\"check-size\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch, Method } from \"@stencil/core\"\nimport { createID } from \"../../../../src/utils/string.utils\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { FormCheckboxClass, SizesType } from \"./constants\"\nimport { toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { delay } from \"../../../utils/utils\"\nimport { Sizes } from \"../../../core/constants/sizes\"\nimport {GovForm}from \"../../../helpers/Dom/form.d\"\nimport {govHost, toBoolAttr}from \"../../../helpers/Dom/template\"\nimport {GovHost}from \"../../../helpers/Dom/template.d\"\nimport {govForm}from \"../../../helpers/Dom/form\"\nimport { FormLabelClass } from \"../label/constants\"\n\n@Component({\n\ttag: \"gov-form-checkbox\",\n\tstyleUrl: \"gov-form-checkbox.scss\",\n})\nexport class GovFormCheckbox {\n\tprivate h: GovHost\n\tprivate f: GovForm\n\n\tprivate readonly checkboxId: string\n\n\tconstructor() {\n\t\tthis.checkboxId = createID(\"GovCheckbox\")\n\n\t\tthis.h = govHost(this.host);\n\t\tthis.f = govForm(this.h);\n\t}\n\n\t@Element() host: HTMLGovFormCheckboxElement\n\t/**\n\t * Value of checkbox\n\t */\n\t@Prop() readonly value: string\n\t/**\n\t * Checkbox default state\n\t */\n\t@Prop({ reflect: true }) readonly checked: boolean = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the checkbox component disabled.\n\t * This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Name of the checkbox.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Checkbox's size.\n\t */\n\t@Prop() readonly size: SizesType = undefined\n\t/**\n\t * Custom checkbox identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({ attribute: \"wcag-labelded-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Emitted when the checkbox has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the checkbox loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the checkbox change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter\n\n\t@State() isChecked: boolean\n\n\t@Watch(\"checked\")\n\tupdateCheckedState(newValue: boolean): void {\n\t\tthis.isChecked = newValue\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, FormCheckboxClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.isChecked = this.checked\n\n\t\tthis.f.passAttrToControl('type', 'checkbox')\n\t\tthis.h.passChildAttr(FormLabelClass.root, 'identifier', this.identifier || this.checkboxId)\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { isChecked } = this\n\n\t\treturn (\n\t\t\t<Host class={FormCheckboxClass.root} is-checked={isChecked} size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t<input id={this.identifier || this.checkboxId}\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tchecked={this.isChecked}\n\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\taria-checked={toBoolAttr(this.isChecked)}\n\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)} />\n\t\t\t\t<span>\n\t\t\t\t\t<slot name=\"label\"/>\n\t\t\t\t\t<gov-icon class={FormCheckboxClass.check} name=\"check\"></gov-icon>\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.isChecked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormCheckboxClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormCheckboxClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormCheckboxClass.root)\n\t}\n}\n"],"version":3}
+{"file":"gov-form-checkbox.js","mappings":";;;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,0oPAA0oP;;MCqBxpPA,iBAAe;EAM3B;;;;;;;mBAeqD,KAAK;oBAKrB,KAAK;;;gBAaP,KAAK,CAAC,EAAE;;;;;;IAhC1C,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;IAEzC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;GACxB;EA6DD,kBAAkB,CAAC,QAAiB;IACnC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAA;IACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,IAAI,CAAC,SAAS;MACvB,KAAK,EAAE,IAAI,CAAC,KAAK;KACjB,CAAC,CAAA;GACF;EAGD,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAAC,KAAK,EAAE,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;GACrD;EAED,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAA;IAE7B,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;IAC5C,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,cAAc,CAAC,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,CAAA;GAC3F;EAED,MAAM,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAED,MAAM;IACL,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAA;IAE1B,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,iBAAiB,CAAC,IAAI,gBAAc,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,IACtH,aACC,EAAE,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,EACtC,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EACvC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,mBACzB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,kBACnC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,sBAC7B,IAAI,CAAC,eAAe,qBACrB,IAAI,CAAC,cAAc,mBACrB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,GAChD,EACF,gBACC,YAAM,IAAI,EAAC,OAAO,GAAG,EACrB,gBAAU,KAAK,EAAE,iBAAiB,CAAC,KAAK,EAAE,IAAI,EAAC,OAAO,GAAY,CAC5D,CACD,EACP;GACD;EAEO,cAAc,CAAC,CAAa;IACnC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;GACrB;EAEO,aAAa,CAAC,CAAa;IAClC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;GACpB;EAEO,eAAe,CAAC,CAAQ;IAC/B,IAAI,CAAC,SAAS,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAA;IACvD,CAAC,CAAC,eAAe,EAAE,CAAA;IACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MACnB,OAAO,EAAE,IAAI,CAAC,SAAS;MACvB,KAAK,EAAE,IAAI,CAAC,KAAK;KACjB,CAAC,CAAA;GACF;;;;EAMD,MAAM,YAAY;IACjB,eAAe,CAAC,IAAI,CAAC,eAAe,EAAE,mBAAmB,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IAClF,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,kBAAkB,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IAChF,oBAAoB,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;GACrG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GovFormCheckbox"],"sources":["../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.scss?tag=gov-form-checkbox","../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.tsx"],"sourcesContent":["/*\n *   Checkbox\n */\n\n@import \"../checkbox/gov-form-checkbox-core.scss\";\n$class: \".gov-form-checkbox\";\n\n#{$class} {\n\t@extend %form-checkbox-core;\n\tinput + span {\n\t\t&::before {\n\t\t\tborder-radius: $border-radius;\n\t\t}\n\t}\n\t&__check {\n\t\tposition: absolute;\n\t\tcolor: $form-checkbox-check-color;\n\t\topacity: 0;\n\t\ttransition: $t linear opacity;\n\t}\n\n\t// STATES\n\tinput:checked + span::before {\n\t\tbackground: $form-checkbox-indicator-bg;\n\t}\n\tinput:checked + span &__check {\n\t\topacity: 1;\n\t}\n\t@include parameter(\"invalid\") {\n\t\tinput:checked + span::before {\n\t\t\tbackground: $form-state-color-error;\n\t\t}\n\t}\n\t@include parameter(\"disabled\") {\n\t\tinput:checked + span::before {\n\t\t\tborder-color: $form-state-bg-disabled;\n\t\t\tbackground-color: $form-state-bg-disabled;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@each $size, $definitions in $form-checkbox-core-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__check {\n\t\t\t\t\ttop: calc((get(\"indicator-size\", $definitions) - get(\"check-size\", $definitions)) / 2);\n\t\t\t\t\tleft: calc((get(\"indicator-size\", $definitions) - get(\"check-size\", $definitions)) / 2);\n\t\t\t\t\twidth: get(\"check-size\", $definitions);\n\t\t\t\t\theight: get(\"check-size\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch, Method } from '@stencil/core'\nimport { createID } from '../../../../src/utils/string.utils'\nimport { validateProp } from '../../../helpers/Validate/props'\nimport { FormCheckboxClass, SizesType } from './constants'\nimport { toBoolAttrIfDefined } from '../../../helpers/Dom/template'\nimport { validateWcagLabelFor, validateWcagRef } from '../../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../../helpers/Dom/win'\nimport { delay } from '../../../utils/utils'\nimport { Sizes } from '../../../core/constants/sizes'\nimport { GovForm } from '../../../helpers/Dom/form.d'\nimport { govHost, toBoolAttr } from '../../../helpers/Dom/template'\nimport { GovHost } from '../../../helpers/Dom/template.d'\nimport { govForm } from '../../../helpers/Dom/form'\nimport { FormLabelClass } from '../label/constants'\nimport { GovFormCheckboxChangeEvent } from \"./interfaces\"\n\n\n@Component({\n\ttag: 'gov-form-checkbox',\n\tstyleUrl: 'gov-form-checkbox.scss',\n})\nexport class GovFormCheckbox {\n\tprivate h: GovHost\n\tprivate f: GovForm\n\n\tprivate readonly checkboxId: string\n\n\tconstructor() {\n\t\tthis.checkboxId = createID('GovCheckbox')\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormCheckboxElement\n\t/**\n\t * Value of checkbox\n\t */\n\t@Prop() readonly value: string\n\t/**\n\t * Checkbox default state\n\t */\n\t@Prop({ reflect: true }) readonly checked: boolean = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the checkbox component disabled.\n\t * This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Name of the checkbox.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Checkbox's size.\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\t/**\n\t * Custom checkbox identifier.\n\t */\n\t@Prop({ attribute: 'identifier' }) readonly identifier: string\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: 'wcag-described-by' }) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/**\n\t * Emitted when the checkbox has focus.\n\t */\n\t@Event({ eventName: 'gov-focus' }) govFocus: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the checkbox loses focus.\n\t */\n\t@Event({ eventName: 'gov-blur' }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the checkbox change value.\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovFormCheckboxChangeEvent>\n\n\t@State() isChecked: boolean\n\n\t@Watch('checked')\n\tupdateCheckedState(newValue: boolean): void {\n\t\tthis.isChecked = newValue\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, FormCheckboxClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.isChecked = this.checked\n\n\t\tthis.f.passAttrToControl('type', 'checkbox')\n\t\tthis.h.passChildAttr(FormLabelClass.root, 'identifier', this.identifier || this.checkboxId)\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { isChecked } = this\n\n\t\treturn (\n\t\t\t<Host class={FormCheckboxClass.root} is-checked={isChecked} size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t<input\n\t\t\t\t\tid={this.identifier || this.checkboxId}\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue={this.value}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tchecked={this.isChecked}\n\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\trequired={this.required}\n\t\t\t\t\taria-checked={toBoolAttr(this.isChecked)}\n\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t/>\n\t\t\t\t<span>\n\t\t\t\t\t<slot name=\"label\" />\n\t\t\t\t\t<gov-icon class={FormCheckboxClass.check} name=\"check\"></gov-icon>\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.isChecked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormCheckboxClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', FormCheckboxClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormCheckboxClass.root)\n\t}\n}\n"],"version":3}

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

@@ -4,16 +4,18 @@ import { g as govForm, a as FormControlClass } from './form.js';
 import { c as createID, s as splitByWhitespace } from './string.utils.js';
 import { S as Sizes } from './sizes.js';
 
-const govFormControlCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-form-control{display:flex;flex-direction:column}.gov-form-control__bottom>*:last-child{margin-bottom:0}.gov-form-control[type=file] .gov-form-label[slot=top] .gov-form-label__label{margin:0rem 0rem 0.5rem}.gov-form-control[type=file] .gov-form-control__bottom{margin:0.5rem 0rem 0rem}.gov-form-control[type=input] .gov-form-label .gov-form-label__label,.gov-form-control[type=select] .gov-form-label .gov-form-label__label{margin-bottom:0rem 0rem 0.25rem}.gov-form-control[type=input] .gov-form-control__bottom,.gov-form-control[type=select] .gov-form-control__bottom{margin-top:0.25rem 0rem 0rem}.gov-form-control[invalid=\"\"] .gov-form-label[slot=top] .gov-form-label__label,.gov-form-control[invalid=true i] .gov-form-label[slot=top] .gov-form-label__label,.gov-form-control[invalid=\"1\"] .gov-form-label[slot=top] .gov-form-label__label{color:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-control[disabled=\"\"] .gov-form-label__label,.gov-form-control[disabled=true i] .gov-form-label__label,.gov-form-control[disabled=\"1\"] .gov-form-label__label{pointer-events:none}.gov-form-control[size=xs][type=checkbox] .gov-form-control__bottom,.gov-form-control[size=xs][type=radio] .gov-form-control__bottom{margin-top:0.5rem;margin-left:2rem}.gov-form-control[size=s][type=checkbox] .gov-form-control__bottom,.gov-form-control[size=s][type=radio] .gov-form-control__bottom{margin-top:0.5rem;margin-left:2.125rem}.gov-form-control[size=m][type=checkbox] .gov-form-control__bottom,.gov-form-control[size=m][type=radio] .gov-form-control__bottom{margin-top:0.75rem;margin-left:2.5rem}.gov-form-control[size=l][type=checkbox] .gov-form-control__bottom,.gov-form-control[size=l][type=radio] .gov-form-control__bottom{margin-top:0.75rem;margin-left:3rem}.gov-form-control[size=xs][type=switch] .gov-form-control__bottom{margin-top:0.5rem;margin-left:2.8333333333rem}.gov-form-control[size=s][type=switch] .gov-form-control__bottom{margin-top:0.5rem;margin-left:3.0416666667rem}.gov-form-control[size=m][type=switch] .gov-form-control__bottom{margin-top:0.75rem;margin-left:3.5rem}.gov-form-control[size=l][type=switch] .gov-form-control__bottom{margin-top:0.75rem;margin-left:4.3333333333rem}";
+const govFormControlCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-form-control__holder{display:flex;flex-direction:column;padding:0;border:none}.gov-form-control__bottom>*:last-child{margin-bottom:0}.gov-form-control[type=file] .gov-form-label[slot=top] .gov-form-label__label{margin:0rem 0rem 0.5rem}.gov-form-control[type=file] .gov-form-control__bottom{margin:0.5rem 0rem 0rem}.gov-form-control[type=input] .gov-form-label .gov-form-label__label,.gov-form-control[type=select] .gov-form-label .gov-form-label__label{margin:0rem 0rem 0.25rem}.gov-form-control[type=input] .gov-form-control__bottom,.gov-form-control[type=select] .gov-form-control__bottom{margin:0.25rem 0rem 0rem}.gov-form-control[size=xs][type=checkbox] .gov-form-control__bottom,.gov-form-control[size=xs][type=radio] .gov-form-control__bottom{margin-top:var(--gov-form-checkbox-core-xs-message-gap, 0.5rem);margin-left:calc(var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) + var(--gov-form-checkbox-core-xs-gap, 0.75rem))}.gov-form-control[size=s][type=checkbox] .gov-form-control__bottom,.gov-form-control[size=s][type=radio] .gov-form-control__bottom{margin-top:var(--gov-form-checkbox-core-s-message-gap, 0.5rem);margin-left:calc(var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) + var(--gov-form-checkbox-core-s-gap, 0.75rem))}.gov-form-control[size=m][type=checkbox] .gov-form-control__bottom,.gov-form-control[size=m][type=radio] .gov-form-control__bottom{margin-top:var(--gov-form-checkbox-core-m-message-gap, 0.75rem);margin-left:calc(var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) + var(--gov-form-checkbox-core-m-gap, 1rem))}.gov-form-control[size=l][type=checkbox] .gov-form-control__bottom,.gov-form-control[size=l][type=radio] .gov-form-control__bottom{margin-top:var(--gov-form-checkbox-core-l-message-gap, 0.75rem);margin-left:calc(var(--gov-form-checkbox-core-l-indicator-size, 2rem) + var(--gov-form-checkbox-core-l-gap, 1rem))}.gov-form-control[size=xs][type=switch] .gov-form-control__bottom{margin-top:var(--gov-form-switch-xs-message-gap, 0.5rem);margin-left:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667 + var(--gov-form-switch-xs-gap, 0.75rem))}.gov-form-control[size=s][type=switch] .gov-form-control__bottom{margin-top:var(--gov-form-switch-s-message-gap, 0.5rem);margin-left:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667 + var(--gov-form-switch-s-gap, 0.75rem))}.gov-form-control[size=m][type=switch] .gov-form-control__bottom{margin-top:var(--gov-form-switch-m-message-gap, 0.75rem);margin-left:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667 + var(--gov-form-switch-m-gap, 1rem))}.gov-form-control[size=l][type=switch] .gov-form-control__bottom{margin-top:var(--gov-form-switch-l-message-gap, 0.75rem);margin-left:calc(var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667 + var(--gov-form-switch-l-gap, 1rem))}.gov-form-control[invalid=\"\"] .gov-form-label[slot=top] .gov-form-label__label,.gov-form-control[invalid=true i] .gov-form-label[slot=top] .gov-form-label__label,.gov-form-control[invalid=\"1\"] .gov-form-label[slot=top] .gov-form-label__label{color:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-control[disabled=\"\"] .gov-form-label__label,.gov-form-control[disabled=true i] .gov-form-label__label,.gov-form-control[disabled=\"1\"] .gov-form-label__label{pointer-events:none}";
 
 const GovFormControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.gap = false;
     this.identifier = undefined;
     this.invalid = false;
     this.disabled = false;
     this.success = false;
+    this.fieldset = false;
     this.size = Sizes._M;
     this.h = govHost(this.host);
     this.f = govForm(this.h);
@@ -28,10 +30,20 @@ const GovFormControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.formElementDescriptionControl();
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    var _a;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   passChildAttrs() {
-    const formElements = ["gov-form-select", "gov-form-input", "gov-form-switch", "gov-form-checkbox", "gov-form-radio", "gov-form-multi-select", "gov-form-file", "gov-form-search"];
+    const formElements = [
+      "gov-form-select",
+      "gov-form-input",
+      "gov-form-switch",
+      "gov-form-checkbox",
+      "gov-form-radio",
+      "gov-form-multi-select",
+      "gov-form-file",
+      "gov-form-search",
+    ];
     this.h.passChildAttr(formElements, "size", this.size);
     this.h.passChildAttr(formElements, "invalid", this.invalid);
     this.h.passChildAttr(formElements, "disabled", this.disabled);
@@ -50,13 +62,12 @@ const GovFormControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.observer.observe(bottomSlot, { childList: true });
   }
   syncControlMessages() {
-    Promise.all(this.f.messageElements.map((message) => message.identifier()))
-      .then((ids) => {
+    Promise.all(this.f.messageElements.map((message) => message.identifier())).then((ids) => {
       this.f.mainElementsInControl.forEach((element) => {
         const currentValue = splitByWhitespace(element.getAttribute("wcag-described-by"));
         element.removeAttribute("wcag-described-by");
         if (Array.isArray(currentValue)) {
-          currentValue.forEach((id) => id.indexOf("GovFormMessage") === -1 ? ids.push(id) : null);
+          currentValue.forEach(id => (id.indexOf("GovFormMessage") === -1 ? ids.push(id) : null));
         }
         if (ids.length) {
           element.setAttribute("wcag-described-by", ids.join(" "));
@@ -65,8 +76,8 @@ const GovFormControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     });
   }
   render() {
-    return (h(Host, { size: this.size, class: this.h.classes(FormControlClass.root) }, this.h.hasSlot("top") && h("slot", { name: "top" }), h("slot", null), this.h.hasSlot("bottom") &&
-      h("div", { class: FormControlClass.bottom }, h("slot", { name: "bottom" }))));
+    const Tag = this.fieldset ? "fieldset" : "div";
+    return (h(Host, { size: this.size, class: this.h.classes(FormControlClass.root) }, h(Tag, { class: FormControlClass.holder }, this.h.hasSlot("top") && h("slot", { name: "top" }), h("slot", null), this.h.hasSlot("bottom") && (h("div", { class: FormControlClass.bottom }, h("slot", { name: "bottom" }))))));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -74,10 +85,12 @@ const GovFormControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   }; }
   static get style() { return govFormControlCss; }
 }, [4, "gov-form-control", {
+    "gap": [8],
     "identifier": [1],
     "invalid": [4],
     "disabled": [4],
     "success": [4],
+    "fieldset": [4],
     "size": [8]
   }]);
 function defineCustomElement$1() {
@@ -93,7 +106,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const GovFormControl = GovFormControl$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"gov-form-control.js","mappings":"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","names":["GovFormControl"],"sources":["../../../packages/core/src/components/gov-form/control/gov-form-control.scss?tag=gov-form-control","../../../packages/core/src/components/gov-form/control/gov-form-control.tsx"],"sourcesContent":["/*\n *   Form Control\n */\n\n$class: \".gov-form-control\";\n\n#{$class} {\n\tdisplay: flex;\n\tflex-direction: column;\n\t&__bottom {\n\t\t& > *:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t&[type=\"file\"] {\n\t\t.gov-form-label[slot=\"top\"] .gov-form-label__label {\n\t\t\tmargin: rem-calc(0 0 8);\n\t\t}\n\t\t#{$class} {\n\t\t\t&__bottom {\n\t\t\t\tmargin: rem-calc(8 0 0);\n\t\t\t}\n\t\t}\n\t}\n\t&[type=\"input\"],\n\t&[type=\"select\"] {\n\t\t.gov-form-label .gov-form-label__label {\n\t\t\tmargin-bottom: rem-calc(0 0 4);\n\t\t}\n\t\t#{$class} {\n\t\t\t&__bottom {\n\t\t\t\tmargin-top: rem-calc(4 0 0);\n\t\t\t}\n\t\t}\n\t}\n\n\t// STATES\n\t@include parameter(\"invalid\") {\n\t\t.gov-form-label[slot=\"top\"] .gov-form-label__label {\n\t\t\tcolor: $form-state-color-error;\n\t\t}\n\t}\n\t@include parameter(\"disabled\") {\n\t\t.gov-form-label__label {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t// Checkbox, radio\n\t@each $size, $definitions in $form-checkbox-core-sizes {\n\t\t&[size=\"#{$size}\"][type=\"checkbox\"],\n\t\t&[size=\"#{$size}\"][type=\"radio\"] {\n\t\t\t#{$class} {\n\t\t\t\t$indicator-width: get(\"indicator-size\", $definitions);\n\t\t\t\t&__bottom {\n\t\t\t\t\tmargin-top: get(\"message-gap\", $definitions);\n\t\t\t\t\tmargin-left: calc($indicator-width + get(\"gap\", $definitions));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t// Switch\n\t@each $size, $definitions in $form-switch-sizes {\n\t\t&[size=\"#{$size}\"][type=\"switch\"] {\n\t\t\t#{$class} {\n\t\t\t\t$indicator-ratio: calc(5 / 3);\n\t\t\t\t$indicator-width: calc(get(\"indicator-height\", $definitions) * $indicator-ratio);\n\t\t\t\t&__bottom {\n\t\t\t\t\tmargin-top: get(\"message-gap\", $definitions);\n\t\t\t\t\tmargin-left: calc($indicator-width + get(\"gap\", $definitions));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, Host, h, Prop, Watch } from \"@stencil/core\"\nimport { GovHost } from \"../../../helpers/Dom/template.d\"\nimport { GovForm } from \"../../../helpers/Dom/form.d\"\nimport { govHost } from \"../../../helpers/Dom/template\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { createID, splitByWhitespace } from \"../../../utils/string.utils\"\nimport { SizesType, FormControlClass } from \"./constants\"\nimport { Sizes } from \"../../../core/constants/sizes\"\n\n@Component({\n\ttag: \"gov-form-control\",\n\tstyleUrl: \"gov-form-control.scss\",\n})\nexport class GovFormControl {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\tprivate readonly controlId: string\n\tprivate observer: MutationObserver\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t\tthis.controlId = createID(\"GovFormControl\")\n\t}\n\n\t/**\n\t * Form element identifier\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Indicates the entered value of child form element does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean = false\n\t/**\n\t/**\n\t * Indicates the form element is disabled\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\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 = false\n\t/**\n\t * Form element size.\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\n\t@Element() host: HTMLGovFormControlElement\n\n\t@Watch(\"invalid\")\n\twatchInvalid(): void {\n\t\tthis.passChildAttrs()\n\t}\n\n\tcomponentDidRender() {\n\t\tthis.passChildAttrs()\n\t\tthis.syncControlMessages()\n\t\tthis.formElementDescriptionControl()\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.observer.disconnect()\n\t}\n\n\tprivate passChildAttrs() {\n\t\tconst formElements = [\"gov-form-select\", \"gov-form-input\", \"gov-form-switch\", \"gov-form-checkbox\", \"gov-form-radio\", \"gov-form-multi-select\", \"gov-form-file\", \"gov-form-search\"]\n\t\tthis.h.passChildAttr(formElements, \"size\", this.size)\n\t\tthis.h.passChildAttr(formElements, \"invalid\", this.invalid)\n\t\tthis.h.passChildAttr(formElements, \"disabled\", this.disabled)\n\t\tthis.h.passChildAttr(formElements, \"success\", this.success)\n\n\t\tif (this.f.hasGroupChildren === false) {\n\t\t\tthis.h.passChildAttr([...formElements, \"gov-form-label\"], \"identifier\", this.identifier || this.controlId)\n\t\t}\n\n\t}\n\n\tprivate formElementDescriptionControl() {\n\t\tconst bottomSlot = this.host.querySelector(\".\" + FormControlClass.bottom)\n\t\tif (!bottomSlot) return\n\t\tthis.observer = new MutationObserver(function() {\n\t\t\tthis.syncControlMessages()\n\t\t}.bind(this))\n\n\t\tthis.observer.observe(bottomSlot, { childList: true })\n\t}\n\n\tprivate syncControlMessages() {\n\t\tPromise.all(this.f.messageElements.map((message: HTMLGovFormMessageElement) => message.identifier()))\n\t\t\t.then((ids: string[]) => {\n\t\t\t\tthis.f.mainElementsInControl.forEach((element: Element) => {\n\t\t\t\t\tconst currentValue = splitByWhitespace(element.getAttribute(\"wcag-described-by\"))\n\t\t\t\t\telement.removeAttribute(\"wcag-described-by\")\n\t\t\t\t\tif (Array.isArray(currentValue)) {\n\t\t\t\t\t\tcurrentValue.forEach((id) => id.indexOf(\"GovFormMessage\") === -1 ? ids.push(id) : null)\n\t\t\t\t\t}\n\t\t\t\t\tif (ids.length) {\n\t\t\t\t\t\telement.setAttribute(\"wcag-described-by\", ids.join(\" \"))\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host size={this.size} class={this.h.classes(FormControlClass.root)}>\n\t\t\t\t{this.h.hasSlot(\"top\") && <slot name=\"top\"></slot>}\n\t\t\t\t<slot></slot>\n\t\t\t\t{this.h.hasSlot(\"bottom\") &&\n\t\t\t\t\t<div class={FormControlClass.bottom}>\n\t\t\t\t\t\t<slot name=\"bottom\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"gov-form-control.js","mappings":"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","names":["GovFormControl"],"sources":["../../../packages/core/src/components/gov-form/control/gov-form-control.scss?tag=gov-form-control","../../../packages/core/src/components/gov-form/control/gov-form-control.tsx"],"sourcesContent":["/*\n *   Form Control\n */\n\n$class: \".gov-form-control\";\n\n#{$class} {\n\t&__holder {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 0;\n\t\tborder: none;\n\t}\n\t&__bottom {\n\t\t@include reset-last-margin();\n\t}\n\n\t// VARIANTS\n\t&[type=\"file\"] {\n\t\t.gov-form-label[slot=\"top\"] .gov-form-label__label {\n\t\t\tmargin: rem-calc(0 0 8);\n\t\t}\n\t\t#{$class} {\n\t\t\t&__bottom {\n\t\t\t\tmargin: rem-calc(8 0 0);\n\t\t\t}\n\t\t}\n\t}\n\t&[type=\"input\"],\n\t&[type=\"select\"] {\n\t\t.gov-form-label .gov-form-label__label {\n\t\t\tmargin: rem-calc(0 0 4);\n\t\t}\n\t\t#{$class} {\n\t\t\t&__bottom {\n\t\t\t\tmargin: rem-calc(4 0 0);\n\t\t\t}\n\t\t}\n\t}\n\t// Checkbox, radio\n\t@each $size, $definitions in $form-checkbox-core-sizes {\n\t\t&[size=\"#{$size}\"][type=\"checkbox\"],\n\t\t&[size=\"#{$size}\"][type=\"radio\"] {\n\t\t\t#{$class} {\n\t\t\t\t$indicator-width: get(\"indicator-size\", $definitions);\n\t\t\t\t&__bottom {\n\t\t\t\t\tmargin-top: get(\"message-gap\", $definitions);\n\t\t\t\t\tmargin-left: calc($indicator-width + get(\"gap\", $definitions));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t// Switch\n\t@each $size, $definitions in $form-switch-sizes {\n\t\t&[size=\"#{$size}\"][type=\"switch\"] {\n\t\t\t#{$class} {\n\t\t\t\t$indicator-ratio: calc(5 / 3);\n\t\t\t\t$indicator-width: calc(get(\"indicator-height\", $definitions) * $indicator-ratio);\n\t\t\t\t&__bottom {\n\t\t\t\t\tmargin-top: get(\"message-gap\", $definitions);\n\t\t\t\t\tmargin-left: calc($indicator-width + get(\"gap\", $definitions));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// STATES\n\t@include parameter(\"invalid\") {\n\t\t.gov-form-label[slot=\"top\"] .gov-form-label__label {\n\t\t\tcolor: $form-state-color-error;\n\t\t}\n\t}\n\t@include parameter(\"disabled\") {\n\t\t.gov-form-label__label {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n}\n","import { Component, Element, Host, h, Prop, Watch } from \"@stencil/core\"\nimport { GovHost } from \"../../../helpers/Dom/template.d\"\nimport { GovForm } from \"../../../helpers/Dom/form.d\"\nimport { govHost } from \"../../../helpers/Dom/template\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { createID, splitByWhitespace } from \"../../../utils/string.utils\"\nimport { SizesType, FormControlClass } from \"./constants\"\nimport { Sizes } from \"../../../core/constants/sizes\"\n\n@Component({\n\ttag: \"gov-form-control\",\n\tstyleUrl: \"gov-form-control.scss\",\n})\nexport class GovFormControl {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\tprivate readonly controlId: string\n\tprivate observer: MutationObserver\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t\tthis.controlId = createID(\"GovFormControl\")\n\t}\n\n\t/**\n\t * Defines the space between nested components.\n\t */\n\t@Prop() readonly gap: SizesType = false\n\t/**\n\t * Form element identifier\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Indicates the entered value of child form element does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean = false\n\t/**\n\t/**\n\t * Indicates the form element is disabled\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\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 = false\n\t/**\n\t * Use control as a fieldset for better accessibility.\n\t * Note: Don't forget to set the legend attribute of the gov-form-label component\n\t */\n\t@Prop() readonly fieldset: boolean = false\n\t/**\n\t * Form element size.\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\n\t@Element() host: HTMLGovFormControlElement\n\n\t@Watch(\"invalid\")\n\twatchInvalid(): void {\n\t\tthis.passChildAttrs()\n\t}\n\n\tcomponentDidRender() {\n\t\tthis.passChildAttrs()\n\t\tthis.syncControlMessages()\n\t\tthis.formElementDescriptionControl()\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.observer?.disconnect()\n\t}\n\n\tprivate passChildAttrs() {\n\t\tconst formElements = [\n\t\t\t\"gov-form-select\",\n\t\t\t\"gov-form-input\",\n\t\t\t\"gov-form-switch\",\n\t\t\t\"gov-form-checkbox\",\n\t\t\t\"gov-form-radio\",\n\t\t\t\"gov-form-multi-select\",\n\t\t\t\"gov-form-file\",\n\t\t\t\"gov-form-search\",\n\t\t]\n\t\tthis.h.passChildAttr(formElements, \"size\", this.size)\n\t\tthis.h.passChildAttr(formElements, \"invalid\", this.invalid)\n\t\tthis.h.passChildAttr(formElements, \"disabled\", this.disabled)\n\t\tthis.h.passChildAttr(formElements, \"success\", this.success)\n\n\t\tif (this.f.hasGroupChildren === false) {\n\t\t\tthis.h.passChildAttr([...formElements, \"gov-form-label\"], \"identifier\", this.identifier || this.controlId)\n\t\t}\n\t}\n\n\tprivate formElementDescriptionControl() {\n\t\tconst bottomSlot = this.host.querySelector(\".\" + FormControlClass.bottom)\n\t\tif (!bottomSlot) return\n\t\tthis.observer = new MutationObserver(\n\t\t\tfunction() {\n\t\t\t\tthis.syncControlMessages()\n\t\t\t}.bind(this),\n\t\t)\n\n\t\tthis.observer.observe(bottomSlot, { childList: true })\n\t}\n\n\tprivate syncControlMessages() {\n\t\tPromise.all(this.f.messageElements.map((message: HTMLGovFormMessageElement) => message.identifier())).then((ids: string[]) => {\n\t\t\tthis.f.mainElementsInControl.forEach((element: Element) => {\n\t\t\t\tconst currentValue = splitByWhitespace(element.getAttribute(\"wcag-described-by\"))\n\t\t\t\telement.removeAttribute(\"wcag-described-by\")\n\t\t\t\tif (Array.isArray(currentValue)) {\n\t\t\t\t\tcurrentValue.forEach(id => (id.indexOf(\"GovFormMessage\") === -1 ? ids.push(id) : null))\n\t\t\t\t}\n\t\t\t\tif (ids.length) {\n\t\t\t\t\telement.setAttribute(\"wcag-described-by\", ids.join(\" \"))\n\t\t\t\t}\n\t\t\t})\n\t\t})\n\t}\n\n\trender() {\n\t\tconst Tag = this.fieldset ? \"fieldset\" : \"div\"\n\t\treturn (\n\t\t\t<Host size={this.size} class={this.h.classes(FormControlClass.root)}>\n\t\t\t\t<Tag class={FormControlClass.holder}>\n\t\t\t\t\t{this.h.hasSlot(\"top\") && <slot name=\"top\"></slot>}\n\t\t\t\t\t<slot></slot>\n\t\t\t\t\t{this.h.hasSlot(\"bottom\") && (\n\t\t\t\t\t\t<div class={FormControlClass.bottom}>\n\t\t\t\t\t\t\t<slot name=\"bottom\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

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

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as createID } from './string.utils.js';
 import { g as govHost, t as toBoolAttrIfDefined } from './template.js';
-import { c as canValidateWcagOnRender, d as delay, a as validateWcagRef, b as validateWcagLabelFor } from './utils.js';
+import { a as validateWcagRef, b as validateWcagLabelFor } from './wcag.js';
+import { c as canValidateWcagOnRender, d as delay } from './win.js';
 import { g as govForm } from './form.js';
 import { d as defineCustomElement$6 } from './gov-attachments2.js';
 import { d as defineCustomElement$5 } from './gov-attachments-item2.js';
@@ -20,29 +21,32 @@ const FormFileClass = {
 };
 
 function formatBytes(bytes) {
-  const units = ["bytes", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+  const units = ['bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
   let l = 0, n = parseInt(bytes, 10) || 0;
   while (n >= 1024 && ++l) {
     n = n / 1024;
   }
-  return (n.toFixed(n < 10 && l > 0 ? 1 : 0) + " " + units[l]);
+  return n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + units[l];
 }
 function fileAcceptValidation(file, accept) {
-  if (typeof accept === "string" && accept.length) {
-    return accept.replace(/\s/g, "").split(",").filter(accept => {
-      return new RegExp(accept.replace("*", ".\*")).test(file.type);
-    }).length > 0;
+  if (typeof accept === 'string' && accept.length) {
+    return (accept
+      .replace(/\s/g, '')
+      .split(',')
+      .filter(accept => {
+      return new RegExp(accept.replace('*', '.*')).test(file.type);
+    }).length > 0);
   }
   else {
     return true;
   }
 }
 function fileSizeValidation(file, maxSize) {
-  const fileSize = Math.round((file.size / 1024));
+  const fileSize = Math.round(file.size / 1024);
   return fileSize <= maxSize;
 }
 
-const govFormFileCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-form-file{position:relative;display:block;width:100%}.gov-form-file__label .gov-form-label__label>*:last-child{margin-bottom:0}.gov-form-file__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0.0001;cursor:pointer}.gov-form-file__attachments{margin-top:1rem 0rem 0rem}.gov-form-file__item{display:flex;gap:1rem;align-items:center}.gov-form-file[disabled=\"\"] .gov-form-label__label,.gov-form-file[disabled=true i] .gov-form-label__label,.gov-form-file[disabled=\"1\"] .gov-form-label__label{pointer-events:none}.gov-form-file[disabled=\"\"] .gov-form-label__label *,.gov-form-file[disabled=true i] .gov-form-label__label *,.gov-form-file[disabled=\"1\"] .gov-form-label__label *{color:var(--gov-form-file-disabled-color, var(--gov-color-secondary-600))}.gov-form-file[expanded=\"\"] .gov-form-file__area,.gov-form-file[expanded=true i] .gov-form-file__area,.gov-form-file[expanded=\"1\"] .gov-form-file__area{position:relative;width:100%;padding:2rem 1.375rem 1.375rem;border:var(--gov-form-file-border, 0.0625rem dashed var(--gov-color-secondary-500));text-align:center;transition:background-color 150ms ease-in-out;will-change:background-color}.gov-form-file[expanded=\"\"] .gov-form-file__area.highlight,.gov-form-file[expanded=true i] .gov-form-file__area.highlight,.gov-form-file[expanded=\"1\"] .gov-form-file__area.highlight{background-color:var(--gov-color-primary-200)}.gov-form-file[expanded=\"\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"1\"] .gov-form-file__label .gov-form-label__label{width:100%;padding:1.375rem;border:var(--gov-form-file-border, 0.0625rem dashed var(--gov-color-secondary-500));text-align:center}.gov-form-file[expanded=\"\"] .gov-form-file__attachments,.gov-form-file[expanded=true i] .gov-form-file__attachments,.gov-form-file[expanded=\"1\"] .gov-form-file__attachments{margin:1.5rem 0rem 0rem}.gov-form-file[expanded=\"\"][invalid=\"\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"\"][invalid=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"\"][invalid=\"1\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i][invalid=\"\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i][invalid=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i][invalid=\"1\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"1\"][invalid=\"\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"1\"][invalid=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"1\"][invalid=\"1\"] .gov-form-file__label .gov-form-label__label{border-color:var(--gov-form-state-color-error, var(--gov-color-error))}@media (min-width: 30em){.gov-form-file[expanded=\"\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"1\"] .gov-form-file__label .gov-form-label__label{padding:2rem}}";
+const govFormFileCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-form-file{position:relative;display:block;width:100%}.gov-form-file__label .gov-form-label__label>*:last-child{margin-bottom:0}.gov-form-file__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0.0001;cursor:pointer}.gov-form-file__attachments{margin-top:1rem 0rem 0rem}.gov-form-file__item{display:flex;gap:1rem;align-items:center}.gov-form-file[disabled=\"\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[disabled=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[disabled=\"1\"] .gov-form-file__label .gov-form-label__label{pointer-events:none}.gov-form-file[disabled=\"\"] .gov-form-file__label .gov-form-label__label *,.gov-form-file[disabled=true i] .gov-form-file__label .gov-form-label__label *,.gov-form-file[disabled=\"1\"] .gov-form-file__label .gov-form-label__label *{color:var(--gov-form-file-disabled-color, var(--gov-color-secondary-600))}.gov-form-file[expanded=\"\"] .gov-form-file__area,.gov-form-file[expanded=true i] .gov-form-file__area,.gov-form-file[expanded=\"1\"] .gov-form-file__area{position:relative;width:100%;padding:2rem 1.375rem 1.375rem;border:var(--gov-form-file-border, 0.0625rem dashed var(--gov-color-secondary-500));text-align:center;transition:background-color 150ms ease-in-out;will-change:background-color}.gov-form-file[expanded=\"\"] .gov-form-file__area.highlight,.gov-form-file[expanded=true i] .gov-form-file__area.highlight,.gov-form-file[expanded=\"1\"] .gov-form-file__area.highlight{background-color:var(--gov-color-primary-200)}.gov-form-file[expanded=\"\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"1\"] .gov-form-file__label .gov-form-label__label{width:100%;padding:1.375rem;border:var(--gov-form-file-border, 0.0625rem dashed var(--gov-color-secondary-500));text-align:center}.gov-form-file[expanded=\"\"] .gov-form-file__attachments,.gov-form-file[expanded=true i] .gov-form-file__attachments,.gov-form-file[expanded=\"1\"] .gov-form-file__attachments{margin:1.5rem 0rem 0rem}.gov-form-file[expanded=\"\"][invalid=\"\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"\"][invalid=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"\"][invalid=\"1\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i][invalid=\"\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i][invalid=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i][invalid=\"1\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"1\"][invalid=\"\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"1\"][invalid=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"1\"][invalid=\"1\"] .gov-form-file__label .gov-form-label__label{border-color:var(--gov-form-state-color-error, var(--gov-color-error))}@media (min-width: 30em){.gov-form-file[expanded=\"\"] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=true i] .gov-form-file__label .gov-form-label__label,.gov-form-file[expanded=\"1\"] .gov-form-file__label .gov-form-label__label{padding:2rem}}";
 
 const GovFormFile$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -62,26 +66,26 @@ const GovFormFile$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.maxFileSize = -1;
     this.identifier = undefined;
     this.invalid = undefined;
-    this.errorSize = "Soubor je větší než povolená velikost {FILE_SIZE}";
-    this.errorAccept = "Soubor tohoto typu není povolen";
-    this.attachmentsLabel = "Přílohy";
+    this.errorSize = 'Soubor je větší než povolená velikost {FILE_SIZE}';
+    this.errorAccept = 'Soubor tohoto typu není povolen';
+    this.attachmentsLabel = 'Přílohy';
     this.wcagDescribedBy = undefined;
     this.wcagLabelledBy = undefined;
-    this.wcagRemoveLabel = "Odebrat soubor {FILE_NAME}";
-    this.wcagAttachmentsLabel = "Přílohy";
+    this.wcagRemoveLabel = 'Odebrat soubor {FILE_NAME}';
+    this.wcagAttachmentsLabel = 'Přílohy';
     this.files = [];
-    this.fileId = createID("GovInputFile");
+    this.fileId = createID('GovInputFile');
     this.h = govHost(this.host);
     this.f = govForm(this.h);
   }
   registerListeners() {
     function highlight() {
-      this.areaRef.classList.add("highlight");
+      this.areaRef.classList.add('highlight');
     }
     function unhighlight() {
-      this.areaRef.classList.remove("highlight");
+      this.areaRef.classList.remove('highlight');
     }
-    this.inputRef.addEventListener("change", (e) => {
+    this.inputRef.addEventListener('change', e => {
       e.preventDefault();
       e.stopPropagation();
       const files = e.target.files;
@@ -89,13 +93,13 @@ const GovFormFile$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }, false);
     //this.inputRef.addEventListener('focus')
     if (this.expanded) {
-      let events = ["dragover", "dragleave"];
-      let inEvents = ["dragenter", "dragover", "mouseenter"];
-      let outEvents = ["dragleave", "drop", "mouseleave"];
+      const events = ['dragover', 'dragleave'];
+      const inEvents = ['dragenter', 'dragover', 'mouseenter'];
+      const outEvents = ['dragleave', 'drop', 'mouseleave'];
       events.map(eventName => this.inputRef.addEventListener(eventName, this.preventDefaults.bind(this), false));
       inEvents.map(eventName => this.inputRef.addEventListener(eventName, highlight.bind(this), false));
       outEvents.forEach(eventName => this.inputRef.addEventListener(eventName, unhighlight.bind(this), false));
-      this.areaRef.addEventListener("drop", this.handleDrop.bind(this), false);
+      this.areaRef.addEventListener('drop', this.handleDrop.bind(this), false);
     }
   }
   preventDefaults(e) {
@@ -107,14 +111,13 @@ const GovFormFile$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.validateFiles(dataTransfer.files);
   }
   validateFiles(files) {
-    Array.from(files).map((file) => {
-      const isFile = this.files.find((item) => item.file.name === file.name && item.file.size === file.size) || null;
+    Array.from(files).map(file => {
+      const isFile = this.files.find(item => item.file.name === file.name && item.file.size === file.size) || null;
       if (isFile === null) {
-        const isSizeValid = typeof this.maxFileSize === "number" && this.maxFileSize > 0
-          ? fileSizeValidation(file, this.maxFileSize) : true;
+        const isSizeValid = typeof this.maxFileSize === 'number' && this.maxFileSize > 0 ? fileSizeValidation(file, this.maxFileSize) : true;
         const isAcceptValid = fileAcceptValidation(file, this.accept);
         const newFile = {
-          id: createID("GovFormFile"),
+          id: createID('GovFormFile'),
           file,
           acceptValid: isAcceptValid,
           sizeValid: isSizeValid,
@@ -126,7 +129,7 @@ const GovFormFile$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.govFiles.emit(this.files);
   }
   componentWillLoad() {
-    this.f.passAttrToControl("type", "File");
+    this.f.passAttrToControl('type', 'File');
   }
   async componentDidRender() {
     if (canValidateWcagOnRender()) {
@@ -136,10 +139,10 @@ const GovFormFile$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.registerListeners();
   }
   render() {
-    return (h(Host, { class: FormFileClass.root, invalid: toBoolAttrIfDefined(this.invalid), expanded: toBoolAttrIfDefined(this.expanded) }, h("div", { class: FormFileClass.area, ref: el => this.areaRef = el }, h("slot", null), h("input", { class: FormFileClass.input, ref: el => this.inputRef = el, id: this.identifier || this.fileId, type: "file", name: this.name, accept: this.accept, onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) })), this.h.hasSlot('attachments') ? (h("div", { class: FormFileClass.attachments }, h("slot", { name: 'attachments' }))) : null, this.files.length && this.displayAttachments ? (h("div", { class: FormFileClass.attachments }, h("gov-attachments", { label: this.wcagAttachmentsLabel, "wcag-label": this.wcagAttachmentsLabel }, this.files.map((item) => (h("gov-attachments-item", { "wcag-remove-labelled-by": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, h("span", { class: "sr-only", id: item.id }, this.wcagRemoveLabel.replace("{FILE_NAME}", item.file.name)), item.file.name, item.acceptValid === false ? (h("gov-form-message", { variant: "error" }, h("gov-icon", { slot: "icon", name: "warning" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (h("gov-form-message", { variant: "error" }, h("gov-icon", { slot: "icon", name: "warning" }), this.errorSize.replace("{FILE_SIZE}", formatBytes(this.maxFileSize * 1024)))) : null, h("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
+    return (h(Host, { class: this.h.classes([FormFileClass.root]), invalid: toBoolAttrIfDefined(this.invalid), expanded: toBoolAttrIfDefined(this.expanded) }, h("div", { class: FormFileClass.area, ref: el => (this.areaRef = el) }, h("slot", null), h("input", { class: FormFileClass.input, ref: el => (this.inputRef = el), id: this.identifier || this.fileId, type: "file", name: this.name, accept: this.accept, onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) })), this.h.hasSlot('attachments') ? (h("div", { class: FormFileClass.attachments }, h("slot", { name: 'attachments' }))) : null, this.files.length && this.displayAttachments ? (h("div", { class: FormFileClass.attachments }, h("gov-attachments", { label: this.wcagAttachmentsLabel, "wcag-label": this.wcagAttachmentsLabel }, this.files.map(item => (h("gov-attachments-item", { "wcag-remove-labelled-by": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, h("span", { class: 'sr-only', id: item.id }, this.wcagRemoveLabel.replace('{FILE_NAME}', item.file.name)), item.file.name, item.acceptValid === false ? (h("gov-form-message", { slot: "message", variant: "error" }, h("gov-icon", { slot: "icon", name: "warning" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (h("gov-form-message", { slot: "message", variant: "error" }, h("gov-icon", { slot: "icon", name: "warning" }), this.errorSize.replace('{FILE_SIZE}', formatBytes(this.maxFileSize * 1024)))) : null, h("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
   }
   onRemoveFileHandler(file) {
-    const index = this.files.findIndex((item) => item.id === file.id);
+    const index = this.files.findIndex(item => item.id === file.id);
     if (index !== -1) {
       const files = this.files;
       const removeFile = this.files[index];
@@ -161,8 +164,8 @@ const GovFormFile$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", FormFileClass.root);
-    validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", FormFileClass.root);
+    validateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormFileClass.root);
+    validateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', FormFileClass.root);
     validateWcagLabelFor(this.identifier || this.fileId, this.wcagLabelledBy, FormFileClass.root);
   }
   get host() { return this; }
@@ -181,7 +184,7 @@ const GovFormFile$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "errorAccept": [1, "error-accept"],
     "attachmentsLabel": [1, "attachments-label"],
     "wcagDescribedBy": [1, "wcag-described-by"],
-    "wcagLabelledBy": [1, "wcag-labelded-by"],
+    "wcagLabelledBy": [1, "wcag-labelled-by"],
     "wcagRemoveLabel": [1, "wcag-remove-label"],
     "wcagAttachmentsLabel": [1, "wcag-attachments-label"],
     "files": [32],
@@ -225,7 +228,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const GovFormFile = GovFormFile$1;
 const defineCustomElement = defineCustomElement$1;