@gov-design-system-ce/components 0.0.17 → 0.0.19

package/dist/core/{p-b7587525.entry.js → p-bb3afae6.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as e,H as s,g as o}from"./p-4af5e4f4.js";import{c as a}from"./p-24636c53.js";import{F as r,a as h,b as n}from"./p-f687452c.js";import{v as l}from"./p-26acf964.js";import{t as c,h as m}from"./p-03990da5.js";import{a as d}from"./p-3f37ddb6.js";import"./p-55500e5a.js";import"./p-ff7365ae.js";import"./p-561fa17b.js";const p='.gov-form-autocomplete__list{margin:0;padding:0}.gov-form-autocomplete__list>.gov-form-autocomplete__item{margin:0;padding:0;background:none}.gov-form-autocomplete__list>.gov-form-autocomplete__item::before{display:none}.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)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-form-autocomplete{position:relative;display:block;width:100%}.gov-form-autocomplete__list{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);position:absolute;top:100%;right:0;left:0;z-index:5;max-height:14.0625rem;margin-top:0.5rem;border:var(--gov-autocomplete-item-hover, 0.0625rem solid var(--gov-color-secondary-500));border-radius:var(--gov-border-radius, 0.1875rem);background:var(--gov-autocomplete-bg, var(--gov-color-neutral-white));overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}.gov-form-autocomplete__list>.gov-form-autocomplete__item{padding:0.75rem 0.5rem;cursor:pointer}.gov-form-autocomplete__list:empty{display:none}.gov-form-autocomplete__item[aria-selected=""],.gov-form-autocomplete__item[aria-selected=true i],.gov-form-autocomplete__item[aria-selected="1"]{background:var(--gov-autocomplete-item-select, var(--gov-color-secondary-400))}@media not all and (pointer: coarse){.gov-form-autocomplete__item:hover{background:var(--gov-autocomplete-item-hover, var(--gov-color-primary-100))}}';const f=class{constructor(e){t(this,e);this.govFocus=i(this,"gov-focus",7);this.govBlur=i(this,"gov-blur",7);this.govInput=i(this,"gov-input",7);this.govSelect=i(this,"gov-select",7);this.templateResolver=t=>t[this.nameKey];this.value="";this.identifier=undefined;this.variant=undefined;this.success=undefined;this.size="m";this.nameKey="name";this.name=undefined;this.required=false;this.disabled=undefined;this.placeholder=undefined;this.readonly=undefined;this.invalid=undefined;this.minlength=2;this.maxlength=undefined;this.wcagDescribedBy=undefined;this.wcagLabelledBy=undefined;this.wcagOwns=undefined;this.focused=undefined;this.processing=false;this.arrowCounter=-1;this.list=[];this.listBoxId=a("GovListBox")}validateVariant(t){l(h,t,r.root)}validateSize(t){l(n,t,r.root)}onArrowUp(){if(this.arrowCounter>0){this.arrowCounter=this.arrowCounter-1}}onArrowDown(){if(this.arrowCounter<this.list.length-1){this.arrowCounter=this.arrowCounter+1}}doSearch(){if(Number.isInteger(this.minlength)&&String(this.value).length<=this.minlength&&this.minlength){this.list=[];this.arrowCounter=-1;this.processing=false;return}if(this.searchCallback){this.processing=true;this.searchCallback(this.value).then((t=>this.list=t)).catch((()=>this.list=[])).finally((()=>{this.arrowCounter=-1;this.processing=false}))}}componentWillLoad(){this.validateVariant(this.variant);this.validateSize(this.size)}render(){return e(s,{class:r.root,size:this.size,variant:this.variant},e("gov-form-input",{placeholder:this.placeholder,name:this.name,disabled:this.disabled,readonly:this.readonly,autocomplete:false,size:this.size,variant:this.variant,required:this.required,invalid:this.invalid,role:"searchbox",value:this.value,minlength:this.minlength,maxlength:this.maxlength,"on-gov-input":c(this.onInputHandler.bind(this),200),"on-gov-keyup":this.onKeyUpHandler.bind(this),"on-gov-focus":this.onFocusHandler.bind(this),"on-gov-blur":this.onBlurHandler.bind(this),wcagAutocomplete:"list",wcagDescribedBy:this.wcagDescribedBy,wcagLabelledBy:this.wcagLabelledBy,wcagOwns:[this.listBoxId,this.wcagOwns].join(" "),wcagExpanded:this.list.length&&this.focused,ref:t=>this.inputRef=t},e("slot",{slot:"right-icon",name:"right-icon"})),e("ul",{class:r.list,role:"listbox",id:this.listBoxId},this.list.map(((t,i)=>{const s=this.arrowCounter===i;return e("li",{class:r.item,innerHTML:this.templateResolver(t,s),role:"option","aria-posinset":i,tabindex:s?0:-1,"aria-setsize":this.list.length,onClick:()=>this.onSelectHandler(i),"aria-selected":d(s)})}))))}onFocusHandler(t){this.focused=true;this.arrowCounter=-1;if((this.value||this.minlength===0)&&this.searchCallback){this.doSearch()}t.stopPropagation();this.govFocus.emit(t)}onBlurHandler(t){this.focused=false;setTimeout((()=>this.list=[]),200);this.arrowCounter=-1;t.stopPropagation();this.govBlur.emit(t)}onInputHandler(t){this.value=t.target.value;t.stopPropagation();this.govInput.emit(t);this.doSearch()}onSelectHandler(t=-1){let i=null;if(t>-1){i=this.list[t]}else if(m(this.arrowCounter,this.list)){i=this.list[this.arrowCounter]}if(i){this.govSelect.emit(i);this.list=[];if(m(this.nameKey,i)&&typeof i[this.nameKey]==="string"){this.value=i[this.nameKey]}}}onKeyUpHandler(t){const i=t.detail;t.stopPropagation();if(i.keyCode===38)this.onArrowUp();else if(i.keyCode===40)this.onArrowDown();else if(i.keyCode===13)this.onSelectHandler()}async setFocus(t){return this.inputRef.focus(t)}async clearValue(){this.value="";this.inputRef.value="";await this.inputRef.clearValue()}async setSearchCallback(t){this.searchCallback=t}async setTemplateResolver(t){this.templateResolver=t}get host(){return o(this)}static get watchers(){return{variant:["validateVariant"],size:["validateSize"]}}};f.style=p;export{f as gov_form_autocomplete};
-//# sourceMappingURL=p-b7587525.entry.js.map
+import{r as t,c as i,h as e,H as s,g as o}from"./p-4af5e4f4.js";import{c as a}from"./p-24636c53.js";import{F as r,a as n,b as h}from"./p-f687452c.js";import{v as l}from"./p-26acf964.js";import{t as c,h as m}from"./p-03990da5.js";import{a as d}from"./p-3f37ddb6.js";import"./p-55500e5a.js";import"./p-ff7365ae.js";import"./p-561fa17b.js";const p='.gov-form-autocomplete__list{margin:0;padding:0}.gov-form-autocomplete__list>.gov-form-autocomplete__item{margin:0;padding:0;background:none}.gov-form-autocomplete__list>.gov-form-autocomplete__item::before{display:none}.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)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-form-autocomplete{position:relative;display:block;width:100%}.gov-form-autocomplete__list{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);position:absolute;top:100%;right:0;left:0;z-index:5;max-height:14.0625rem;margin-top:0.5rem;border:var(--gov-autocomplete-item-hover, 0.0625rem solid var(--gov-color-secondary-500));border-radius:var(--gov-border-radius, 0.1875rem);background:var(--gov-autocomplete-bg, var(--gov-color-neutral-white));overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}.gov-form-autocomplete__list>.gov-form-autocomplete__item{padding:0.75rem 0.5rem;cursor:pointer}.gov-form-autocomplete__list:empty{display:none}.gov-form-autocomplete__item[aria-selected=""],.gov-form-autocomplete__item[aria-selected=true i],.gov-form-autocomplete__item[aria-selected="1"]{background:var(--gov-autocomplete-item-select, var(--gov-color-secondary-400))}@media not all and (pointer: coarse){.gov-form-autocomplete__item:hover{background:var(--gov-autocomplete-item-hover, var(--gov-color-primary-100))}}';const u=class{constructor(e){t(this,e);this.govFocus=i(this,"gov-focus",7);this.govBlur=i(this,"gov-blur",7);this.govInput=i(this,"gov-input",7);this.govSelect=i(this,"gov-select",7);this.templateResolver=t=>t[this.nameKey];this.value="";this.identifier=undefined;this.variant=undefined;this.success=undefined;this.size="m";this.nameKey="name";this.name=undefined;this.required=false;this.disabled=undefined;this.placeholder=undefined;this.readonly=undefined;this.invalid=undefined;this.minlength=2;this.maxlength=undefined;this.wcagDescribedBy=undefined;this.wcagLabelledBy=undefined;this.wcagOwns=undefined;this.focused=undefined;this.processing=false;this.arrowCounter=-1;this.list=[];this.listBoxId=a("GovListBox")}validateVariant(t){l(n,t,r.root)}validateSize(t){l(h,t,r.root)}onArrowUp(){if(this.arrowCounter>0){this.arrowCounter=this.arrowCounter-1}}onArrowDown(){if(this.arrowCounter<this.list.length-1){this.arrowCounter=this.arrowCounter+1}}doSearch(){if(Number.isInteger(this.minlength)&&String(this.value).length<=this.minlength&&this.minlength){this.list=[];this.arrowCounter=-1;this.processing=false;return}if(this.searchCallback){this.processing=true;this.searchCallback(this.value).then((t=>this.list=t)).catch((()=>this.list=[])).finally((()=>{this.arrowCounter=-1;this.processing=false}))}}componentWillLoad(){this.validateVariant(this.variant);this.validateSize(this.size)}render(){return e(s,{class:r.root,size:this.size,variant:this.variant},e("gov-form-input",{placeholder:this.placeholder,name:this.name,disabled:this.disabled,readonly:this.readonly,autocomplete:false,size:this.size,variant:this.variant,required:this.required,invalid:this.invalid,role:"searchbox",value:this.value,minlength:this.minlength,maxlength:this.maxlength,"on-gov-input":c(this.onInputHandler.bind(this),200),"on-gov-keyup":this.onKeyUpHandler.bind(this),"on-gov-focus":this.onFocusHandler.bind(this),"on-gov-blur":this.onBlurHandler.bind(this),wcagAutocomplete:"list",wcagDescribedBy:this.wcagDescribedBy,wcagLabelledBy:this.wcagLabelledBy,wcagOwns:[this.listBoxId,this.wcagOwns].join(" "),wcagExpanded:this.list.length&&this.focused,ref:t=>this.inputRef=t},e("slot",{slot:"right-icon",name:"right-icon"})),e("ul",{class:r.list,role:"listbox",id:this.listBoxId},this.list.map(((t,i)=>{const s=this.arrowCounter===i;return e("li",{class:r.item,innerHTML:this.templateResolver(t,s),role:"option","aria-posinset":i,tabindex:s?0:-1,"aria-setsize":this.list.length,onClick:()=>this.onSelectHandler(i),"aria-selected":d(s)})}))))}onFocusHandler(t){this.focused=true;this.arrowCounter=-1;if((this.value||this.minlength===0)&&this.searchCallback){this.doSearch()}t.stopPropagation();this.govFocus.emit({originalEvent:t,component:r.root,value:this.value,selected:null})}onBlurHandler(t){this.focused=false;setTimeout((()=>this.list=[]),200);this.arrowCounter=-1;t.stopPropagation();this.govBlur.emit({originalEvent:t,component:r.root,value:this.value,selected:null})}onInputHandler(t){this.value=t.target.value;t.stopPropagation();this.govInput.emit({originalEvent:t,component:r.root,value:this.value,selected:null});this.doSearch()}onSelectHandler(t=-1){let i=null;if(t>-1){i=this.list[t]}else if(m(this.arrowCounter,this.list)){i=this.list[this.arrowCounter]}if(i){this.govSelect.emit({component:r.root,value:this.value,selected:i});this.list=[];if(m(this.nameKey,i)&&typeof i[this.nameKey]==="string"){this.value=i[this.nameKey]}}}onKeyUpHandler(t){const i=t.detail.originalEvent;t.stopPropagation();if(i.keyCode===38)this.onArrowUp();else if(i.keyCode===40)this.onArrowDown();else if(i.keyCode===13)this.onSelectHandler()}async setFocus(t){return this.inputRef.focus(t)}async clearValue(){this.value="";this.inputRef.value="";await this.inputRef.clearValue()}async setSearchCallback(t){this.searchCallback=t}async setTemplateResolver(t){this.templateResolver=t}get host(){return o(this)}static get watchers(){return{variant:["validateVariant"],size:["validateSize"]}}};u.style=p;export{u as gov_form_autocomplete};
+//# sourceMappingURL=p-bb3afae6.entry.js.map

package/dist/core/p-bb3afae6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"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"],"names":["govFormAutocompleteCss","GovFormAutocomplete","[object Object]","hostRef","this","templateResolver","item","nameKey","listBoxId","createID","newValue","validateProp","FormAutocompleteVariants","FormAutocompleteClass","root","FormAutocompleteSizes","arrowCounter","list","length","Number","isInteger","minlength","String","value","processing","searchCallback","then","response","catch","finally","validateVariant","variant","validateSize","size","h","Host","class","placeholder","name","disabled","readonly","autocomplete","required","invalid","role","maxlength","on-gov-input","throttle","onInputHandler","bind","on-gov-keyup","onKeyUpHandler","on-gov-focus","onFocusHandler","on-gov-blur","onBlurHandler","wcagAutocomplete","wcagDescribedBy","wcagLabelledBy","wcagOwns","join","wcagExpanded","focused","ref","el","inputRef","slot","id","map","index","isSelected","innerHTML","aria-posinset","tabindex","aria-setsize","onClick","onSelectHandler","aria-selected","toBoolAttr","e","doSearch","stopPropagation","govFocus","emit","originalEvent","component","selected","setTimeout","govBlur","target","govInput","has","govSelect","event","detail","keyCode","onArrowUp","onArrowDown","options","focus","clearValue","callback"],"mappings":"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","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 \"../../../utils/string.utils\"\nimport { FormAutocompleteClass, FormAutocompleteVariants, VariantType, FormAutocompleteSizes } from \"./constants\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { has, throttle } from \"../../../utils/utils\"\nimport { FormAutocompleteEvent, GovFormAutocompleteItem } from \"./gov-form-autocomplete.types\"\nimport { toBoolAttr } from \"../../../helpers/Dom/template\"\nimport { Nullable } from \"../../../types/interfaces\"\nimport { FormInputEvent } from \"../input/gov-form-input.types\"\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\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 = \"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<FormAutocompleteEvent>\n\t/**\n\t * Emitted when the input loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FormAutocompleteEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: \"gov-input\" }) govInput: EventEmitter<FormAutocompleteEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: \"gov-select\" }) govSelect: EventEmitter<FormAutocompleteEvent>\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(FormAutocompleteVariants, newValue, FormAutocompleteClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormAutocompleteSizes, 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({\n\t\t\toriginalEvent: e,\n\t\t\tcomponent: FormAutocompleteClass.root,\n\t\t\tvalue: this.value,\n\t\t\tselected: null\n\t\t})\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({\n\t\t\toriginalEvent: e,\n\t\t\tcomponent: FormAutocompleteClass.root,\n\t\t\tvalue: this.value,\n\t\t\tselected: null\n\t\t})\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({\n\t\t\toriginalEvent: e,\n\t\t\tcomponent: FormAutocompleteClass.root,\n\t\t\tvalue: this.value,\n\t\t\tselected: null\n\t\t})\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({\n\t\t\t\tcomponent: FormAutocompleteClass.root,\n\t\t\t\tvalue: this.value,\n\t\t\t\tselected: selected\n\t\t\t})\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 FormInputEvent).originalEvent 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"]}

package/dist/core/{p-8815fa81.entry.js → p-d79d0f7a.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as i,h as r,H as t,g as e}from"./p-4af5e4f4.js";import{c as s}from"./p-24636c53.js";import{v as a}from"./p-26acf964.js";import{g as c,e as g,f as h}from"./p-9cd80b05.js";import{g as v,t as m}from"./p-3f37ddb6.js";import{a as f,b as l}from"./p-364b4792.js";import{c as n}from"./p-c20102ff.js";import{d}from"./p-03990da5.js";import{F as w}from"./p-1c1d0bbe.js";import"./p-561fa17b.js";import"./p-55500e5a.js";import"./p-ff7365ae.js";import"./p-ef79904e.js";import"./p-6278531b.js";import"./p-f687452c.js";import"./p-3464136c.js";const p='.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)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-form-switch{position:relative;display:flex}.gov-form-switch__holder{display:inline-flex}.gov-form-switch__input{position:absolute;top:0;left:0;z-index:1;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.gov-form-switch .gov-form-label__label{position:relative;z-index:1;margin-bottom:0;color:var(--gov-form-switch-color, var(--gov-color-secondary-800))}.gov-form-switch__indicator{position:relative;flex:0 0 auto;border:var(--gov-form-switch-indicator-border, 0.0625rem solid var(--gov-color-secondary-500));background-color:var(--gov-form-switch-indicator-bg, var(--gov-color-secondary-300));transition:150ms linear background-color}.gov-form-switch__indicator::before{content:"";position:absolute;display:block;border-radius:50%;background-color:var(--gov-form-switch-indicator-circle-bg, var(--gov-color-neutral-white));transition:150ms linear left;box-shadow:var(--gov-form-switch-indicator-circle-box-shadow, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.35))}.gov-form-switch__input:focus-visible~.gov-form-switch__indicator{outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base)}.gov-form-switch__input:checked+.gov-form-switch__indicator{border-color:var(--gov-form-switch-indicator-bg-checked, var(--gov-color-primary));background-color:var(--gov-form-switch-indicator-bg-checked, var(--gov-color-primary))}.gov-form-switch[disabled=""],.gov-form-switch[disabled=true i],.gov-form-switch[disabled="1"]{pointer-events:none}.gov-form-switch[disabled=""] .gov-form-label__label,.gov-form-switch[disabled=true i] .gov-form-label__label,.gov-form-switch[disabled="1"] .gov-form-label__label{color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}.gov-form-switch[disabled=""] .gov-form-switch__indicator::before,.gov-form-switch[disabled=true i] .gov-form-switch__indicator::before,.gov-form-switch[disabled="1"] .gov-form-switch__indicator::before{background:var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300))}.gov-form-switch[disabled=""] .gov-form-switch__input:checked+.gov-form-switch__indicator,.gov-form-switch[disabled=true i] .gov-form-switch__input:checked+.gov-form-switch__indicator,.gov-form-switch[disabled="1"] .gov-form-switch__input:checked+.gov-form-switch__indicator{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-switch[invalid=""] .gov-form-label__label,.gov-form-switch[invalid=true i] .gov-form-label__label,.gov-form-switch[invalid="1"] .gov-form-label__label{color:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-switch[invalid=""] .gov-form-switch__indicator,.gov-form-switch[invalid=true i] .gov-form-switch__indicator,.gov-form-switch[invalid="1"] .gov-form-switch__indicator{border-color:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-switch[invalid=""] .gov-form-switch__input:checked+.gov-form-switch__indicator,.gov-form-switch[invalid=true i] .gov-form-switch__input:checked+.gov-form-switch__indicator,.gov-form-switch[invalid="1"] .gov-form-switch__input:checked+.gov-form-switch__indicator{background-color:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-switch[size=xs] .gov-form-label__label{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);margin-bottom:0;margin-left:calc((var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667 + var(--gov-form-switch-xs-gap, 0.75rem)) * -1);padding-top:calc((var(--gov-form-switch-xs-indicator-height, 1.25rem) - var(--gov-text-xs-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667 + var(--gov-form-switch-xs-gap, 0.75rem))}.gov-form-switch[size=xs] .gov-form-switch__holder{gap:var(--gov-form-switch-xs-gap, 0.75rem)}.gov-form-switch[size=xs] .gov-form-switch__indicator{display:block;width:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667);height:var(--gov-form-switch-xs-indicator-height, 1.25rem);border-radius:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 0.5)}.gov-form-switch[size=xs] .gov-form-switch__indicator::before{top:calc(var(--gov-form-switch-xs-toggle-offset, 0.051875rem) - 0.0625rem);left:calc(var(--gov-form-switch-xs-toggle-offset, 0.051875rem) - 0.0625rem);width:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) - 2 * var(--gov-form-switch-xs-toggle-offset, 0.051875rem));height:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) - 2 * var(--gov-form-switch-xs-toggle-offset, 0.051875rem))}.gov-form-switch[size=xs] .gov-form-switch__input[aria-checked]+.gov-form-switch__indicator::before{left:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667 - var(--gov-form-switch-xs-indicator-height, 1.25rem) + var(--gov-form-switch-xs-toggle-offset, 0.051875rem) - 0.0625rem)}.gov-form-switch[size=s] .gov-form-label__label{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);margin-bottom:0;margin-left:calc((var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667 + var(--gov-form-switch-s-gap, 0.75rem)) * -1);padding-top:calc((var(--gov-form-switch-s-indicator-height, 1.375rem) - var(--gov-text-s-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667 + var(--gov-form-switch-s-gap, 0.75rem))}.gov-form-switch[size=s] .gov-form-switch__holder{gap:var(--gov-form-switch-s-gap, 0.75rem)}.gov-form-switch[size=s] .gov-form-switch__indicator{display:block;width:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667);height:var(--gov-form-switch-s-indicator-height, 1.375rem);border-radius:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 0.5)}.gov-form-switch[size=s] .gov-form-switch__indicator::before{top:calc(var(--gov-form-switch-s-toggle-offset, 0.0575rem) - 0.0625rem);left:calc(var(--gov-form-switch-s-toggle-offset, 0.0575rem) - 0.0625rem);width:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) - 2 * var(--gov-form-switch-s-toggle-offset, 0.0575rem));height:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) - 2 * var(--gov-form-switch-s-toggle-offset, 0.0575rem))}.gov-form-switch[size=s] .gov-form-switch__input[aria-checked]+.gov-form-switch__indicator::before{left:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667 - var(--gov-form-switch-s-indicator-height, 1.375rem) + var(--gov-form-switch-s-toggle-offset, 0.0575rem) - 0.0625rem)}.gov-form-switch[size=m] .gov-form-label__label{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);margin-bottom:0;margin-left:calc((var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667 + var(--gov-form-switch-m-gap, 1rem)) * -1);padding-top:calc((var(--gov-form-switch-m-indicator-height, 1.5rem) - var(--gov-text-m-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667 + var(--gov-form-switch-m-gap, 1rem))}.gov-form-switch[size=m] .gov-form-switch__holder{gap:var(--gov-form-switch-m-gap, 1rem)}.gov-form-switch[size=m] .gov-form-switch__indicator{display:block;width:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667);height:var(--gov-form-switch-m-indicator-height, 1.5rem);border-radius:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 0.5)}.gov-form-switch[size=m] .gov-form-switch__indicator::before{top:calc(var(--gov-form-switch-m-toggle-offset, 0.0625rem) - 0.0625rem);left:calc(var(--gov-form-switch-m-toggle-offset, 0.0625rem) - 0.0625rem);width:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) - 2 * var(--gov-form-switch-m-toggle-offset, 0.0625rem));height:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) - 2 * var(--gov-form-switch-m-toggle-offset, 0.0625rem))}.gov-form-switch[size=m] .gov-form-switch__input[aria-checked]+.gov-form-switch__indicator::before{left:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667 - var(--gov-form-switch-m-indicator-height, 1.5rem) + var(--gov-form-switch-m-toggle-offset, 0.0625rem) - 0.0625rem)}.gov-form-switch[size=l] .gov-form-label__label{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);margin-bottom:0;margin-left:calc((var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667 + var(--gov-form-switch-l-gap, 1rem)) * -1);padding-top:calc((var(--gov-form-switch-l-indicator-height, 2rem) - var(--gov-text-l-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667 + var(--gov-form-switch-l-gap, 1rem))}.gov-form-switch[size=l] .gov-form-switch__holder{gap:var(--gov-form-switch-l-gap, 1rem)}.gov-form-switch[size=l] .gov-form-switch__indicator{display:block;width:calc(var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667);height:var(--gov-form-switch-l-indicator-height, 2rem);border-radius:calc(var(--gov-form-switch-l-indicator-height, 2rem) * 0.5)}.gov-form-switch[size=l] .gov-form-switch__indicator::before{top:calc(var(--gov-form-switch-l-toggle-offset, 0.083125rem) - 0.0625rem);left:calc(var(--gov-form-switch-l-toggle-offset, 0.083125rem) - 0.0625rem);width:calc(var(--gov-form-switch-l-indicator-height, 2rem) - 2 * var(--gov-form-switch-l-toggle-offset, 0.083125rem));height:calc(var(--gov-form-switch-l-indicator-height, 2rem) - 2 * var(--gov-form-switch-l-toggle-offset, 0.083125rem))}.gov-form-switch[size=l] .gov-form-switch__input[aria-checked]+.gov-form-switch__indicator::before{left:calc(var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667 - var(--gov-form-switch-l-indicator-height, 2rem) + var(--gov-form-switch-l-toggle-offset, 0.083125rem) - 0.0625rem)}';const b=class{constructor(r){o(this,r);this.govFocus=i(this,"gov-focus",7);this.govBlur=i(this,"gov-blur",7);this.govChange=i(this,"gov-change",7);this.value=undefined;this.noLabel=false;this.checked=false;this.required=false;this.disabled=undefined;this.name=undefined;this.size="m";this.identifier=undefined;this.invalid=undefined;this.wcagDescribedBy=undefined;this.wcagLabelledBy=undefined;this.isChecked=undefined;this.checkboxId=s("GovCheckbox");this.h=v(this.host);this.f=c(this.h)}updateCheckedState(o){this.isChecked=o}validateSize(o){a(h,o,g.root)}componentWillLoad(){this.isChecked=this.checked;this.f.passAttrToControl("type","switch")}async componentDidRender(){this.f.passAttrToLabel("identifier",this.identifier||this.checkboxId);this.f.passAttrToLabel("required",String(this.required));if(n()){await d(500);await this.validateWcag()}}render(){const{isChecked:o}=this;const i=o=>{if(this.noLabel){return r("label",null,o)}return o};return r(t,{class:this.h.classes(g.root),"is-checked":o,size:this.size,invalid:m(this.invalid)},r("div",{class:g.holder},i(r(w,null,r("input",{class:g.input,id:this.identifier||this.checkboxId,type:"checkbox",value:this.value,name:this.name,checked:this.isChecked,onClick:this.onClickHandler.bind(this),onChange:this.onChangeHandler.bind(this),onFocus:this.onFocusHandler.bind(this),onBlur:this.onBlurHandler.bind(this),required:this.required,"aria-checked":this.isChecked,"aria-required":m(this.required),"aria-invalid":m(this.invalid),"aria-describedby":this.wcagDescribedBy,"aria-labelledby":this.wcagLabelledBy,"aria-disabled":m(this.disabled)}),r("span",{class:g.indicator}),r("slot",{name:"label"})))))}onClickHandler(o){o.stopPropagation()}onFocusHandler(o){o.stopPropagation();this.govFocus.emit(o)}onBlurHandler(o){o.stopPropagation();this.govBlur.emit(o)}onChangeHandler(o){this.isChecked=o.target.checked;o.stopPropagation();this.govChange.emit(o)}async validateWcag(){f(this.wcagDescribedBy,"wcag-described-by",g.root);f(this.wcagLabelledBy,"wcag-labelled-by",g.root);l(this.identifier||this.checkboxId,this.wcagLabelledBy,g.root)}get host(){return e(this)}static get watchers(){return{checked:["updateCheckedState"],size:["validateSize"]}}};b.style=p;export{b as gov_form_switch};
-//# sourceMappingURL=p-8815fa81.entry.js.map
+import{r as o,c as i,h as r,H as t,g as e}from"./p-4af5e4f4.js";import{c as s}from"./p-24636c53.js";import{v as a}from"./p-26acf964.js";import{g as c,e as g,f as h}from"./p-9cd80b05.js";import{g as v,t as m}from"./p-3f37ddb6.js";import{a as f,b as l}from"./p-364b4792.js";import{c as n}from"./p-c20102ff.js";import{d}from"./p-03990da5.js";import{F as w}from"./p-1c1d0bbe.js";import"./p-561fa17b.js";import"./p-55500e5a.js";import"./p-ff7365ae.js";import"./p-ef79904e.js";import"./p-6278531b.js";import"./p-f687452c.js";import"./p-3464136c.js";const p='.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)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-form-switch{position:relative;display:flex}.gov-form-switch__holder{display:inline-flex}.gov-form-switch__input{position:absolute;top:0;left:0;z-index:1;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.gov-form-switch .gov-form-label__label{position:relative;z-index:1;margin-bottom:0;color:var(--gov-form-switch-color, var(--gov-color-secondary-800))}.gov-form-switch__indicator{position:relative;flex:0 0 auto;border:var(--gov-form-switch-indicator-border, 0.0625rem solid var(--gov-color-secondary-500));background-color:var(--gov-form-switch-indicator-bg, var(--gov-color-secondary-300));transition:150ms linear background-color}.gov-form-switch__indicator::before{content:"";position:absolute;display:block;border-radius:50%;background-color:var(--gov-form-switch-indicator-circle-bg, var(--gov-color-neutral-white));transition:150ms linear left;box-shadow:var(--gov-form-switch-indicator-circle-box-shadow, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.35))}.gov-form-switch__input:focus-visible~.gov-form-switch__indicator{outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base)}.gov-form-switch__input:checked+.gov-form-switch__indicator{border-color:var(--gov-form-switch-indicator-bg-checked, var(--gov-color-primary));background-color:var(--gov-form-switch-indicator-bg-checked, var(--gov-color-primary))}.gov-form-switch[disabled=""],.gov-form-switch[disabled=true i],.gov-form-switch[disabled="1"]{pointer-events:none}.gov-form-switch[disabled=""] .gov-form-label__label,.gov-form-switch[disabled=true i] .gov-form-label__label,.gov-form-switch[disabled="1"] .gov-form-label__label{color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}.gov-form-switch[disabled=""] .gov-form-switch__indicator::before,.gov-form-switch[disabled=true i] .gov-form-switch__indicator::before,.gov-form-switch[disabled="1"] .gov-form-switch__indicator::before{background:var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300))}.gov-form-switch[disabled=""] .gov-form-switch__input:checked+.gov-form-switch__indicator,.gov-form-switch[disabled=true i] .gov-form-switch__input:checked+.gov-form-switch__indicator,.gov-form-switch[disabled="1"] .gov-form-switch__input:checked+.gov-form-switch__indicator{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-switch[invalid=""] .gov-form-label__label,.gov-form-switch[invalid=true i] .gov-form-label__label,.gov-form-switch[invalid="1"] .gov-form-label__label{color:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-switch[invalid=""] .gov-form-switch__indicator,.gov-form-switch[invalid=true i] .gov-form-switch__indicator,.gov-form-switch[invalid="1"] .gov-form-switch__indicator{border-color:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-switch[invalid=""] .gov-form-switch__input:checked+.gov-form-switch__indicator,.gov-form-switch[invalid=true i] .gov-form-switch__input:checked+.gov-form-switch__indicator,.gov-form-switch[invalid="1"] .gov-form-switch__input:checked+.gov-form-switch__indicator{background-color:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-switch[size=xs] .gov-form-label__label{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);margin-bottom:0;margin-left:calc((var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667 + var(--gov-form-switch-xs-gap, 0.75rem)) * -1);padding-top:calc((var(--gov-form-switch-xs-indicator-height, 1.25rem) - var(--gov-text-xs-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667 + var(--gov-form-switch-xs-gap, 0.75rem))}.gov-form-switch[size=xs] .gov-form-switch__holder{gap:var(--gov-form-switch-xs-gap, 0.75rem)}.gov-form-switch[size=xs] .gov-form-switch__indicator{display:block;width:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667);height:var(--gov-form-switch-xs-indicator-height, 1.25rem);border-radius:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 0.5)}.gov-form-switch[size=xs] .gov-form-switch__indicator::before{top:calc(var(--gov-form-switch-xs-toggle-offset, 0.051875rem) - 0.0625rem);left:calc(var(--gov-form-switch-xs-toggle-offset, 0.051875rem) - 0.0625rem);width:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) - 2 * var(--gov-form-switch-xs-toggle-offset, 0.051875rem));height:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) - 2 * var(--gov-form-switch-xs-toggle-offset, 0.051875rem))}.gov-form-switch[size=xs] .gov-form-switch__input[aria-checked]+.gov-form-switch__indicator::before{left:calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667 - var(--gov-form-switch-xs-indicator-height, 1.25rem) + var(--gov-form-switch-xs-toggle-offset, 0.051875rem) - 0.0625rem)}.gov-form-switch[size=s] .gov-form-label__label{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);margin-bottom:0;margin-left:calc((var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667 + var(--gov-form-switch-s-gap, 0.75rem)) * -1);padding-top:calc((var(--gov-form-switch-s-indicator-height, 1.375rem) - var(--gov-text-s-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667 + var(--gov-form-switch-s-gap, 0.75rem))}.gov-form-switch[size=s] .gov-form-switch__holder{gap:var(--gov-form-switch-s-gap, 0.75rem)}.gov-form-switch[size=s] .gov-form-switch__indicator{display:block;width:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667);height:var(--gov-form-switch-s-indicator-height, 1.375rem);border-radius:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 0.5)}.gov-form-switch[size=s] .gov-form-switch__indicator::before{top:calc(var(--gov-form-switch-s-toggle-offset, 0.0575rem) - 0.0625rem);left:calc(var(--gov-form-switch-s-toggle-offset, 0.0575rem) - 0.0625rem);width:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) - 2 * var(--gov-form-switch-s-toggle-offset, 0.0575rem));height:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) - 2 * var(--gov-form-switch-s-toggle-offset, 0.0575rem))}.gov-form-switch[size=s] .gov-form-switch__input[aria-checked]+.gov-form-switch__indicator::before{left:calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667 - var(--gov-form-switch-s-indicator-height, 1.375rem) + var(--gov-form-switch-s-toggle-offset, 0.0575rem) - 0.0625rem)}.gov-form-switch[size=m] .gov-form-label__label{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);margin-bottom:0;margin-left:calc((var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667 + var(--gov-form-switch-m-gap, 1rem)) * -1);padding-top:calc((var(--gov-form-switch-m-indicator-height, 1.5rem) - var(--gov-text-m-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667 + var(--gov-form-switch-m-gap, 1rem))}.gov-form-switch[size=m] .gov-form-switch__holder{gap:var(--gov-form-switch-m-gap, 1rem)}.gov-form-switch[size=m] .gov-form-switch__indicator{display:block;width:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667);height:var(--gov-form-switch-m-indicator-height, 1.5rem);border-radius:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 0.5)}.gov-form-switch[size=m] .gov-form-switch__indicator::before{top:calc(var(--gov-form-switch-m-toggle-offset, 0.0625rem) - 0.0625rem);left:calc(var(--gov-form-switch-m-toggle-offset, 0.0625rem) - 0.0625rem);width:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) - 2 * var(--gov-form-switch-m-toggle-offset, 0.0625rem));height:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) - 2 * var(--gov-form-switch-m-toggle-offset, 0.0625rem))}.gov-form-switch[size=m] .gov-form-switch__input[aria-checked]+.gov-form-switch__indicator::before{left:calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667 - var(--gov-form-switch-m-indicator-height, 1.5rem) + var(--gov-form-switch-m-toggle-offset, 0.0625rem) - 0.0625rem)}.gov-form-switch[size=l] .gov-form-label__label{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);margin-bottom:0;margin-left:calc((var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667 + var(--gov-form-switch-l-gap, 1rem)) * -1);padding-top:calc((var(--gov-form-switch-l-indicator-height, 2rem) - var(--gov-text-l-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667 + var(--gov-form-switch-l-gap, 1rem))}.gov-form-switch[size=l] .gov-form-switch__holder{gap:var(--gov-form-switch-l-gap, 1rem)}.gov-form-switch[size=l] .gov-form-switch__indicator{display:block;width:calc(var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667);height:var(--gov-form-switch-l-indicator-height, 2rem);border-radius:calc(var(--gov-form-switch-l-indicator-height, 2rem) * 0.5)}.gov-form-switch[size=l] .gov-form-switch__indicator::before{top:calc(var(--gov-form-switch-l-toggle-offset, 0.083125rem) - 0.0625rem);left:calc(var(--gov-form-switch-l-toggle-offset, 0.083125rem) - 0.0625rem);width:calc(var(--gov-form-switch-l-indicator-height, 2rem) - 2 * var(--gov-form-switch-l-toggle-offset, 0.083125rem));height:calc(var(--gov-form-switch-l-indicator-height, 2rem) - 2 * var(--gov-form-switch-l-toggle-offset, 0.083125rem))}.gov-form-switch[size=l] .gov-form-switch__input[aria-checked]+.gov-form-switch__indicator::before{left:calc(var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667 - var(--gov-form-switch-l-indicator-height, 2rem) + var(--gov-form-switch-l-toggle-offset, 0.083125rem) - 0.0625rem)}';const b=class{constructor(r){o(this,r);this.govFocus=i(this,"gov-focus",7);this.govBlur=i(this,"gov-blur",7);this.govChange=i(this,"gov-change",7);this.value=undefined;this.noLabel=false;this.checked=false;this.required=false;this.disabled=undefined;this.name=undefined;this.size="m";this.identifier=undefined;this.invalid=undefined;this.wcagDescribedBy=undefined;this.wcagLabelledBy=undefined;this.checkboxId=s("GovCheckbox");this.h=v(this.host);this.f=c(this.h)}validateSize(o){a(h,o,g.root)}componentWillLoad(){this.f.passAttrToControl("type","switch")}async componentDidRender(){this.f.passAttrToLabel("identifier",this.identifier||this.checkboxId);this.f.passAttrToLabel("required",String(this.required));if(n()){await d(500);await this.validateWcag()}}render(){const o=o=>{if(this.noLabel){return r("label",null,o)}return o};return r(t,{class:this.h.classes(g.root),checked:this.checked,size:this.size,invalid:m(this.invalid)},r("div",{class:g.holder},o(r(w,null,r("input",{class:g.input,id:this.identifier||this.checkboxId,type:"checkbox",value:this.value,name:this.name,checked:this.checked,onClick:this.onClickHandler.bind(this),onChange:this.onChangeHandler.bind(this),onFocus:this.onFocusHandler.bind(this),onBlur:this.onBlurHandler.bind(this),ref:o=>this.inputRef=o,required:this.required,"aria-checked":this.checked,"aria-required":m(this.required),"aria-invalid":m(this.invalid),"aria-describedby":this.wcagDescribedBy,"aria-labelledby":this.wcagLabelledBy,"aria-disabled":m(this.disabled)}),r("span",{class:g.indicator}),r("slot",{name:"label"})))))}onClickHandler(o){o.stopPropagation()}onFocusHandler(o){o.stopPropagation();this.govFocus.emit({component:g.root,checked:this.checked,value:this.value,originalEvent:o})}onBlurHandler(o){o.stopPropagation();this.govBlur.emit({component:g.root,checked:this.checked,value:this.value,originalEvent:o})}onChangeHandler(o){this.checked=o.target.checked;o.stopPropagation();this.govChange.emit({component:g.root,checked:this.checked,value:this.value,originalEvent:o})}async getRef(){return this.inputRef}async validateWcag(){f(this.wcagDescribedBy,"wcag-described-by",g.root);f(this.wcagLabelledBy,"wcag-labelled-by",g.root);l(this.identifier||this.checkboxId,this.wcagLabelledBy,g.root)}get host(){return e(this)}static get watchers(){return{size:["validateSize"]}}};b.style=p;export{b as gov_form_switch};
+//# sourceMappingURL=p-d79d0f7a.entry.js.map

package/dist/core/p-d79d0f7a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../packages/core/src/components/gov-form/switch/gov-form-switch.scss?tag=gov-form-switch","../../../packages/core/src/components/gov-form/switch/gov-form-switch.tsx"],"names":["govFormSwitchCss","GovFormSwitch","[object Object]","hostRef","this","checkboxId","createID","h","govHost","host","f","govForm","newValue","validateProp","FormSwitchSizes","FormSwitchClass","root","passAttrToControl","passAttrToLabel","identifier","String","required","canValidateWcagOnRender","delay","validateWcag","wrapCheckbox","children","noLabel","Host","class","classes","checked","size","invalid","toBoolAttrIfDefined","holder","Fragment","input","id","type","value","name","onClick","onClickHandler","bind","onChange","onChangeHandler","onFocus","onFocusHandler","onBlur","onBlurHandler","ref","el","inputRef","aria-checked","aria-required","aria-invalid","aria-describedby","wcagDescribedBy","aria-labelledby","wcagLabelledBy","aria-disabled","disabled","indicator","e","stopPropagation","govFocus","emit","component","originalEvent","govBlur","target","govChange","validateWcagRef","validateWcagLabelFor"],"mappings":"+hBAAA,MAAMA,EAAmB,ksUCmBZC,EAAa,MAOzBC,YAAAC,2JAe6D,mBAIX,oBAKb,4DAaS,kHApC7CC,KAAKC,WAAaC,EAAS,eAE3BF,KAAKG,EAAIC,EAAQJ,KAAKK,MACtBL,KAAKM,EAAIC,EAAQP,KAAKG,GAgEvBL,aAAaU,GACZC,EAAaC,EAAiBF,EAAUG,EAAgBC,MAGzDd,oBACCE,KAAKM,EAAEO,kBAAkB,OAAQ,UAGlCf,2BACCE,KAAKM,EAAEQ,gBAAgB,aAAcd,KAAKe,YAAcf,KAAKC,YAC7DD,KAAKM,EAAEQ,gBAAgB,WAAYE,OAAOhB,KAAKiB,WAC/C,GAAIC,IAA2B,OACxBC,EAAM,WACNnB,KAAKoB,gBAIbtB,SACC,MAAMuB,EAAgBC,IACrB,GAAItB,KAAKuB,QAAS,CACjB,OACCpB,EAAA,QAAA,KACEmB,GAIJ,OAAOA,GAGR,OACCnB,EAACqB,EAAI,CAACC,MAAOzB,KAAKG,EAAEuB,QAAQf,EAAgBC,MAAOe,QAAS3B,KAAK2B,QAASC,KAAM5B,KAAK4B,KAAMC,QAASC,EAAoB9B,KAAK6B,UAC5H1B,EAAA,MAAA,CAAKsB,MAAOd,EAAgBoB,QAC1BV,EACAlB,EAAC6B,EAAQ,KACR7B,EAAA,QAAA,CACCsB,MAAOd,EAAgBsB,MACvBC,GAAIlC,KAAKe,YAAcf,KAAKC,WAC5BkC,KAAK,WACLC,MAAOpC,KAAKoC,MACZC,KAAMrC,KAAKqC,KACXV,QAAS3B,KAAK2B,QACdW,QAAStC,KAAKuC,eAAeC,KAAKxC,MAClCyC,SAAUzC,KAAK0C,gBAAgBF,KAAKxC,MACpC2C,QAAS3C,KAAK4C,eAAeJ,KAAKxC,MAClC6C,OAAQ7C,KAAK8C,cAAcN,KAAKxC,MAChC+C,IAAKC,GAAOhD,KAAKiD,SAAWD,EAC5B/B,SAAUjB,KAAKiB,SAAQiC,eACTlD,KAAK2B,QAAOwB,gBACXrB,EAAoB9B,KAAKiB,UAASmC,eACnCtB,EAAoB9B,KAAK6B,SAAQwB,mBAC7BrD,KAAKsD,gBAAeC,kBACrBvD,KAAKwD,eAAcC,gBACrB3B,EAAoB9B,KAAK0D,YAEzCvD,EAAA,OAAA,CAAMsB,MAAOd,EAAgBgD,YAC7BxD,EAAA,OAAA,CAAMkC,KAAK,cAQTvC,eAAe8D,GACtBA,EAAEC,kBAGK/D,eAAe8D,GACtBA,EAAEC,kBACF7D,KAAK8D,SAASC,KAAK,CAClBC,UAAWrD,EAAgBC,KAC3Be,QAAS3B,KAAK2B,QACdS,MAAOpC,KAAKoC,MACZ6B,cAAeL,IAIT9D,cAAc8D,GACrBA,EAAEC,kBACF7D,KAAKkE,QAAQH,KAAK,CACjBC,UAAWrD,EAAgBC,KAC3Be,QAAS3B,KAAK2B,QACdS,MAAOpC,KAAKoC,MACZ6B,cAAeL,IAIT9D,gBAAgB8D,GACvB5D,KAAK2B,QAAWiC,EAAEO,OAA4BxC,QAC9CiC,EAAEC,kBACF7D,KAAKoE,UAAUL,KAAK,CACnBC,UAAWrD,EAAgBC,KAC3Be,QAAS3B,KAAK2B,QACdS,MAAOpC,KAAKoC,MACZ6B,cAAeL,IAQjB9D,eACC,OAAOE,KAAKiD,SAObnD,qBACCuE,EAAgBrE,KAAKsD,gBAAiB,oBAAqB3C,EAAgBC,MAC3EyD,EAAgBrE,KAAKwD,eAAgB,mBAAoB7C,EAAgBC,MACzE0D,EAAqBtE,KAAKe,YAAcf,KAAKC,WAAYD,KAAKwD,eAAgB7C,EAAgBC","sourcesContent":["/*\n *   Switch\n */\n\n$class: \".gov-form-switch\";\n$indicator-ratio: calc(5 / 3);\n\n#{$class} {\n\tposition: relative;\n\tdisplay: flex;\n\t&__holder {\n\t\tdisplay: inline-flex;\n\t}\n\t&__input {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tz-index: 1;\n\t\tmargin: 0;\n\t\tappearance: none;\n\t}\n\t.gov-form-label__label {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\tmargin-bottom: 0;\n\t\tcolor: $form-switch-color;\n\t}\n\t&__indicator {\n\t\tposition: relative;\n\t\tflex: 0 0 auto;\n\t\tborder: $form-switch-indicator-border;\n\t\tbackground-color: $form-switch-indicator-bg;\n\t\ttransition: $t linear background-color;\n\t\t&::before {\n\t\t\t@include pseudo();\n\t\t\tborder-radius: 50%;\n\t\t\tbackground-color: $form-switch-indicator-circle-bg;\n\t\t\ttransition: $t linear left;\n\t\t\tbox-shadow: $form-switch-indicator-circle-box-shadow;\n\t\t}\n\t}\n\n\t// STATES\n\t// focus\n\t&__input:focus-visible ~ &__indicator {\n\t\toutline: $outline;\n\t}\n\t// checked\n\t&__input:checked + &__indicator {\n\t\tborder-color: $form-switch-indicator-bg-checked;\n\t\tbackground-color: $form-switch-indicator-bg-checked;\n\t}\n\n\t// disabled\n\t@include parameter(\"disabled\") {\n\t\tpointer-events: none;\n\t\t.gov-form-label__label {\n\t\t\tcolor: $form-state-color-disabled;\n\t\t}\n\t\t#{$class} {\n\t\t\t&__indicator {\n\t\t\t\t&::before {\n\t\t\t\t\tbackground: $form-state-bg-input-disabled;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&__input:checked + #{$class}__indicator {\n\t\t\t\tborder-color: $form-state-bg-disabled;\n\t\t\t\tbackground-color: $form-state-bg-disabled;\n\t\t\t}\n\t\t}\n\t}\n\n\t// invalid\n\t@include parameter(\"invalid\") {\n\t\t.gov-form-label__label {\n\t\t\tcolor: $form-state-color-error;\n\t\t}\n\t\t#{$class} {\n\t\t\t&__indicator {\n\t\t\t\tborder-color: $form-state-color-error;\n\t\t\t}\n\t\t\t&__input:checked + #{$class}__indicator {\n\t\t\t\tbackground-color: $form-state-color-error;\n\t\t\t}\n\t\t}\n\t}\n\n\t// sizes\n\t@each $size, $definitions in $form-switch-sizes {\n\t\t$indicator-width: calc(get(\"indicator-height\", $definitions) * $indicator-ratio);\n\t\t$indicator-height: get(\"indicator-height\", $definitions);\n\t\t$border-offset: calc(get(\"toggle-offset\", $definitions) - rem-calc(1));\n\n\t\t&[size=\"#{$size}\"] {\n\t\t\t.gov-form-label__label {\n\t\t\t\t@include typography($size);\n\t\t\t\tmargin-bottom: 0;\n\t\t\t\tmargin-left: calc(($indicator-width + get(\"gap\", $definitions)) * -1);\n\t\t\t\tpadding-top: calc(($indicator-height - (var(--gov-text-#{$size}-font-size) * 1.5)) / 2);\n\t\t\t\tpadding-left: calc($indicator-width + get(\"gap\", $definitions));\n\t\t\t}\n\t\t\t#{$class} {\n\t\t\t\t&__holder {\n\t\t\t\t\tgap: get(\"gap\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__indicator {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\twidth: $indicator-width;\n\t\t\t\t\theight: $indicator-height;\n\t\t\t\t\tborder-radius: calc($indicator-height * 0.5);\n\t\t\t\t\t&::before {\n\t\t\t\t\t\ttop: $border-offset;\n\t\t\t\t\t\tleft: $border-offset;\n\t\t\t\t\t\twidth: calc($indicator-height - (2 * get(\"toggle-offset\", $definitions)));\n\t\t\t\t\t\theight: calc($indicator-height - (2 * get(\"toggle-offset\", $definitions)));\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// STATES\n\t\t\t\t&__input[aria-checked] + #{$class}__indicator {\n\t\t\t\t\t&::before {\n\t\t\t\t\t\tleft: calc($indicator-width - $indicator-height + $border-offset);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Watch, Method } from \"@stencil/core\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { FormSwitchClass, FormSwitchSizes, FormSwitchSizesType } 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 { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { govHost } from \"../../../helpers/Dom/template\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport Fragment from \"../../../helpers/Fragment\"\nimport { FormSwitchEvent } from \"./gov-form-switch.types\"\n\n@Component({\n\ttag: \"gov-form-switch\",\n\tstyleUrl: \"gov-form-switch.scss\",\n})\nexport class GovFormSwitch {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\tprivate inputRef?: HTMLInputElement\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: HTMLGovFormSwitchElement\n\t/**\n\t * Value of switch\n\t */\n\t@Prop() readonly value: string\n\t/**\n\t * When you can't use the form label.\n\t */\n\t@Prop({ attribute: \"no-label\" }) readonly noLabel: boolean = false\n\t/**\n\t * Switch default state\n\t */\n\t@Prop({ reflect: true, mutable: true }) checked = 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 switch component disabled.\n\t * This prevents users from being able to interact with the switch, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Name of the switch.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Switch's size.\n\t */\n\t@Prop() readonly size?: FormSwitchSizesType = \"m\"\n\t/**\n\t * Custom switch 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 switch has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FormSwitchEvent>\n\t/**\n\t * Emitted when the switch loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FormSwitchEvent>\n\t/**\n\t * Emitted when the switch change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<FormSwitchEvent>\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormSwitchSizes, newValue, FormSwitchClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.f.passAttrToControl(\"type\", \"switch\")\n\t}\n\n\tasync componentDidRender() {\n\t\tthis.f.passAttrToLabel('identifier', this.identifier || this.checkboxId)\n\t\tthis.f.passAttrToLabel('required', String(this.required))\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 wrapCheckbox = (children) => {\n\t\t\tif (this.noLabel) {\n\t\t\t\treturn (\n\t\t\t\t\t<label>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</label>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn children\n\t\t}\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(FormSwitchClass.root)} checked={this.checked} size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t<div class={FormSwitchClass.holder}>\n\t\t\t\t\t{wrapCheckbox(\n\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass={FormSwitchClass.input}\n\t\t\t\t\t\t\t\tid={this.identifier || this.checkboxId}\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\t\tchecked={this.checked}\n\t\t\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\t\t\tref={el => (this.inputRef = el as HTMLInputElement)}\n\t\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\t\taria-checked={this.checked}\n\t\t\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class={FormSwitchClass.indicator}></span>\n\t\t\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t\t\t</Fragment>,\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(e: Event) {\n\t\te.stopPropagation()\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormSwitchClass.root,\n\t\t\tchecked: this.checked,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormSwitchClass.root,\n\t\t\tchecked: this.checked,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e\n\t\t})\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.checked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormSwitchClass.root,\n\t\t\tchecked: this.checked,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e\n\t\t})\n\t}\n\n\t/**\n\t * Returns the reference of the native element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLInputElement> {\n\t\treturn this.inputRef\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormSwitchClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormSwitchClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormSwitchClass.root)\n\t}\n}\n"]}

package/dist/core/p-d83b4bdc.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as r,H as t,g as e}from"./p-4af5e4f4.js";import{g as m}from"./p-3f37ddb6.js";import{g as i,b as s}from"./p-9cd80b05.js";import{c as a,s as l}from"./p-24636c53.js";import"./p-55500e5a.js";import"./p-03990da5.js";import"./p-ff7365ae.js";import"./p-ef79904e.js";import"./p-6278531b.js";import"./p-f687452c.js";import"./p-3464136c.js";const c='.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)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.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,.gov-form-control[type=textarea] .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,.gov-form-control[type=textarea] .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 g=class{constructor(r){o(this,r);this.gap=undefined;this.identifier=undefined;this.invalid=false;this.disabled=false;this.success=false;this.fieldset=false;this.size="m";this.h=m(this.host);this.f=i(this.h);this.controlId=a("GovFormControl")}watchInvalid(){this.passChildAttrs()}componentDidRender(){this.passChildAttrs();this.syncControlMessages();this.formElementDescriptionControl()}disconnectedCallback(){var o;(o=this.observer)===null||o===void 0?void 0:o.disconnect()}passChildAttrs(){const o=["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(o,"size",this.size);this.h.passChildAttr(o,"invalid",this.invalid);this.h.passChildAttr(o,"disabled",this.disabled);this.h.passChildAttr(o,"success",this.success);if(this.f.hasGroupChildren===false){this.h.passChildAttr([...o,"gov-form-label"],"identifier",this.identifier||this.controlId)}}formElementDescriptionControl(){const o=this.host.querySelector("."+s.bottom);if(!o)return;this.observer=new MutationObserver(function(){this.syncControlMessages()}.bind(this));this.observer.observe(o,{childList:true})}syncControlMessages(){Promise.all(this.f.messageElements.map((o=>o.identifier()))).then((o=>{this.f.mainElementsInControl.forEach((r=>{const t=l(r.getAttribute("wcag-described-by"));r.removeAttribute("wcag-described-by");if(Array.isArray(t)){t.forEach((r=>r.indexOf("GovFormMessage")===-1?o.push(r):null))}if(o.length){r.setAttribute("wcag-described-by",o.join(" "))}}))}))}render(){const o=this.fieldset?"fieldset":"div";return r(t,{size:this.size,class:this.h.classes(s.root)},r(o,{class:s.holder},this.h.hasSlot("top")&&r("slot",{name:"top"}),r("slot",null),this.h.hasSlot("bottom")&&r("div",{class:s.bottom},r("slot",{name:"bottom"}))))}get host(){return e(this)}static get watchers(){return{invalid:["watchInvalid"]}}};g.style=c;export{g as gov_form_control};
+//# sourceMappingURL=p-d83b4bdc.entry.js.map

package/dist/core/p-d83b4bdc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"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"],"names":["govFormControlCss","GovFormControl","[object Object]","hostRef","this","h","govHost","host","f","govForm","controlId","createID","passChildAttrs","syncControlMessages","formElementDescriptionControl","_a","observer","disconnect","formElements","passChildAttr","size","invalid","disabled","success","hasGroupChildren","identifier","bottomSlot","querySelector","FormControlClass","bottom","MutationObserver","bind","observe","childList","Promise","all","messageElements","map","message","then","ids","mainElementsInControl","forEach","element","currentValue","splitByWhitespace","getAttribute","removeAttribute","Array","isArray","id","indexOf","push","length","setAttribute","join","Tag","fieldset","Host","class","classes","root","holder","hasSlot","name"],"mappings":"2VAAA,MAAMA,EAAoB,uvHCYbC,EAAc,MAM1BC,YAAAC,uEAiBoC,oBAKC,mBAKD,oBAKC,gBAIU,IAnC9CC,KAAKC,EAAIC,EAAQF,KAAKG,MACtBH,KAAKI,EAAIC,EAAQL,KAAKC,GACtBD,KAAKM,UAAYC,EAAS,kBAsC3BT,eACCE,KAAKQ,iBAGNV,qBACCE,KAAKQ,iBACLR,KAAKS,sBACLT,KAAKU,gCAGNZ,8BACCa,EAAAX,KAAKY,YAAQ,MAAAD,SAAA,OAAA,EAAAA,EAAEE,aAGRf,iBACP,MAAMgB,EAAe,CACpB,kBACA,iBACA,kBACA,oBACA,iBACA,wBACA,gBACA,mBAEDd,KAAKC,EAAEc,cAAcD,EAAc,OAAQd,KAAKgB,MAChDhB,KAAKC,EAAEc,cAAcD,EAAc,UAAWd,KAAKiB,SACnDjB,KAAKC,EAAEc,cAAcD,EAAc,WAAYd,KAAKkB,UACpDlB,KAAKC,EAAEc,cAAcD,EAAc,UAAWd,KAAKmB,SAEnD,GAAInB,KAAKI,EAAEgB,mBAAqB,MAAO,CACtCpB,KAAKC,EAAEc,cAAc,IAAID,EAAc,kBAAmB,aAAcd,KAAKqB,YAAcrB,KAAKM,YAI1FR,gCACP,MAAMwB,EAAatB,KAAKG,KAAKoB,cAAc,IAAMC,EAAiBC,QAClE,IAAKH,EAAY,OACjBtB,KAAKY,SAAW,IAAIc,iBACnB,WACC1B,KAAKS,uBACJkB,KAAK3B,OAGRA,KAAKY,SAASgB,QAAQN,EAAY,CAAEO,UAAW,OAGxC/B,sBACPgC,QAAQC,IAAI/B,KAAKI,EAAE4B,gBAAgBC,KAAKC,GAAuCA,EAAQb,gBAAec,MAAMC,IAC3GpC,KAAKI,EAAEiC,sBAAsBC,SAASC,IACrC,MAAMC,EAAeC,EAAkBF,EAAQG,aAAa,sBAC5DH,EAAQI,gBAAgB,qBACxB,GAAIC,MAAMC,QAAQL,GAAe,CAChCA,EAAaF,SAAQQ,GAAOA,EAAGC,QAAQ,qBAAuB,EAAIX,EAAIY,KAAKF,GAAM,OAElF,GAAIV,EAAIa,OAAQ,CACfV,EAAQW,aAAa,oBAAqBd,EAAIe,KAAK,aAMvDrD,SACC,MAAMsD,EAAMpD,KAAKqD,SAAW,WAAa,MACzC,OACCpD,EAACqD,EAAI,CAACtC,KAAMhB,KAAKgB,KAAMuC,MAAOvD,KAAKC,EAAEuD,QAAQhC,EAAiBiC,OAC7DxD,EAACmD,EAAG,CAACG,MAAO/B,EAAiBkC,QAC3B1D,KAAKC,EAAE0D,QAAQ,QAAU1D,EAAA,OAAA,CAAM2D,KAAK,QACrC3D,EAAA,OAAA,MACCD,KAAKC,EAAE0D,QAAQ,WACf1D,EAAA,MAAA,CAAKsD,MAAO/B,EAAiBC,QAC5BxB,EAAA,OAAA,CAAM2D,KAAK","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&[type=\"textarea\"] {\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.types'\nimport { GovForm } from '../../../helpers/Dom/form.types'\nimport { govHost } from '../../../helpers/Dom/template'\nimport { govForm } from '../../../helpers/Dom/form'\nimport { createID, splitByWhitespace } from '../../../utils/string.utils'\nimport { FormControlSizesType, FormControlClass } from './constants'\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?: FormControlSizesType\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?: FormControlSizesType = '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"]}

package/dist/core/p-d8ef1d7a.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as o,H as i,g as r}from"./p-4af5e4f4.js";import{t as l}from"./p-3f37ddb6.js";import{F as s,a,b as m}from"./p-ef79904e.js";import{v as n}from"./p-26acf964.js";import{a as c,b as v}from"./p-364b4792.js";import{c as g}from"./p-c20102ff.js";import{c as f,r as u}from"./p-24636c53.js";import{d}from"./p-03990da5.js";import"./p-55500e5a.js";import"./p-ff7365ae.js";import"./p-561fa17b.js";const h='.gov-form-multi-select__list{margin:0;padding:0}.gov-form-multi-select__list>.gov-form-multi-select__item{margin:0;padding:0;background:none}.gov-form-multi-select__list>.gov-form-multi-select__item::before{display:none}.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)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-form-multi-select{position:relative;display:flex;width:100%;align-items:center}.gov-form-multi-select .element{position:relative;display:flex;flex:1 1 auto}.gov-form-multi-select input,.gov-form-multi-select select,.gov-form-multi-select textarea{width:100%;border:var(--gov-form-input-border-width, 0.0625rem solid var(--gov-color-secondary-700));border-radius:var(--gov-border-radius, 0.1875rem);background-color:var(--gov-form-bg-color, var(--gov-color-neutral-white));color:var(--gov-form-input-color, var(--gov-color-secondary-700));font-family:var(--gov-font-family, "Roboto", sans-serif)}.gov-form-multi-select input:focus,.gov-form-multi-select select:focus,.gov-form-multi-select textarea:focus{outline:none}.gov-form-multi-select input:focus-visible,.gov-form-multi-select select:focus-visible,.gov-form-multi-select textarea:focus-visible{border-radius:var(--gov-border-radius, 0.1875rem);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0}.gov-form-multi-select input::-moz-placeholder,.gov-form-multi-select select::-moz-placeholder,.gov-form-multi-select textarea::-moz-placeholder{color:var(--gov-form-placeholder-color, var(--gov-color-secondary-600))}.gov-form-multi-select input::placeholder,.gov-form-multi-select select::placeholder,.gov-form-multi-select textarea::placeholder{color:var(--gov-form-placeholder-color, var(--gov-color-secondary-600))}.gov-form-multi-select textarea{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);padding:0.5rem 0.75rem;resize:none}.gov-form-multi-select *[slot=left-icon],.gov-form-multi-select *[slot=right-icon]{position:absolute;top:50%;display:flex;justify-content:center;color:var(--gov-form-input-icon-color, var(--gov-color-primary));transform:translateY(-50%);pointer-events:none}.gov-form-multi-select *[slot=left-icon]{left:0}.gov-form-multi-select *[slot=right-icon]{right:0}[disabled=""].gov-form-multi-select,[disabled=true i].gov-form-multi-select,[disabled="1"].gov-form-multi-select{pointer-events:none}[disabled=""].gov-form-multi-select input,[disabled=""].gov-form-multi-select select,[disabled=""].gov-form-multi-select textarea,[disabled=true i].gov-form-multi-select input,[disabled=true i].gov-form-multi-select select,[disabled=true i].gov-form-multi-select textarea,[disabled="1"].gov-form-multi-select input,[disabled="1"].gov-form-multi-select select,[disabled="1"].gov-form-multi-select textarea{border-color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));background:var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300));color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[disabled=""].gov-form-multi-select *[slot=left-icon],[disabled=""].gov-form-multi-select *[slot=right-icon],[disabled=true i].gov-form-multi-select *[slot=left-icon],[disabled=true i].gov-form-multi-select *[slot=right-icon],[disabled="1"].gov-form-multi-select *[slot=left-icon],[disabled="1"].gov-form-multi-select *[slot=right-icon]{color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[invalid=""].gov-form-multi-select input,[invalid=""].gov-form-multi-select select,[invalid=""].gov-form-multi-select textarea,[invalid=true i].gov-form-multi-select input,[invalid=true i].gov-form-multi-select select,[invalid=true i].gov-form-multi-select textarea,[invalid="1"].gov-form-multi-select input,[invalid="1"].gov-form-multi-select select,[invalid="1"].gov-form-multi-select textarea{border-color:var(--gov-form-state-color-error, var(--gov-color-error));color:var(--gov-form-state-color-error, var(--gov-color-error))}[invalid=""].gov-form-multi-select input::-moz-placeholder,[invalid=""].gov-form-multi-select select::-moz-placeholder,[invalid=""].gov-form-multi-select textarea::-moz-placeholder,[invalid=true i].gov-form-multi-select input::-moz-placeholder,[invalid=true i].gov-form-multi-select select::-moz-placeholder,[invalid=true i].gov-form-multi-select textarea::-moz-placeholder,[invalid="1"].gov-form-multi-select input::-moz-placeholder,[invalid="1"].gov-form-multi-select select::-moz-placeholder,[invalid="1"].gov-form-multi-select textarea::-moz-placeholder{color:var(--gov-form-state-color-error, var(--gov-color-error-300))}[invalid=""].gov-form-multi-select input::placeholder,[invalid=""].gov-form-multi-select select::placeholder,[invalid=""].gov-form-multi-select textarea::placeholder,[invalid=true i].gov-form-multi-select input::placeholder,[invalid=true i].gov-form-multi-select select::placeholder,[invalid=true i].gov-form-multi-select textarea::placeholder,[invalid="1"].gov-form-multi-select input::placeholder,[invalid="1"].gov-form-multi-select select::placeholder,[invalid="1"].gov-form-multi-select textarea::placeholder{color:var(--gov-form-state-color-error, var(--gov-color-error-300))}[invalid=""].gov-form-multi-select *[slot=left-icon],[invalid=""].gov-form-multi-select *[slot=right-icon],[invalid=true i].gov-form-multi-select *[slot=left-icon],[invalid=true i].gov-form-multi-select *[slot=right-icon],[invalid="1"].gov-form-multi-select *[slot=left-icon],[invalid="1"].gov-form-multi-select *[slot=right-icon]{color:var(--gov-form-state-color-error, var(--gov-color-error))}[success=""].gov-form-multi-select *[slot=right-icon],[success=true i].gov-form-multi-select *[slot=right-icon],[success="1"].gov-form-multi-select *[slot=right-icon]{color:var(--gov-form-state-color-success, var(--gov-color-success))}[success=""].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),[success=true i].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),[success="1"].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow){display:none}[size=m].gov-form-multi-select{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);gap:0.5rem var(--gov-form-input-core-m-icon-size, 1rem)}[size=m].gov-form-multi-select input,[size=m].gov-form-multi-select select{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);height:var(--gov-form-input-core-m-height, 2.5rem);padding:var(--gov-form-input-core-m-padding, 0.4375rem 0.75rem)}[size=m].gov-form-multi-select *[slot=left-icon],[size=m].gov-form-multi-select *[slot=right-icon]{width:var(--gov-form-input-core-m-icon-size, 1rem);height:var(--gov-form-input-core-m-icon-size, 1rem)}[size=m].gov-form-multi-select *[slot=left-icon]{left:calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2)}[size=m].gov-form-multi-select *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-m-icon-padding, 2.5rem)}[size=m].gov-form-multi-select *[slot=right-icon]{right:calc((var(--gov-form-input-core-m-icon-padding, 2.5rem) - var(--gov-form-input-core-m-icon-size, 1rem)) / 2)}[size=m].gov-form-multi-select *[slot=right-icon]~input,[size=m].gov-form-multi-select *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-m-icon-padding, 2.5rem)}[size=l].gov-form-multi-select{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);gap:0.5rem var(--gov-form-input-core-l-icon-size, 1rem)}[size=l].gov-form-multi-select input,[size=l].gov-form-multi-select select{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);height:var(--gov-form-input-core-l-height, 3rem);padding:var(--gov-form-input-core-l-padding, 0.6875rem 0.75rem)}[size=l].gov-form-multi-select *[slot=left-icon],[size=l].gov-form-multi-select *[slot=right-icon]{width:var(--gov-form-input-core-l-icon-size, 1rem);height:var(--gov-form-input-core-l-icon-size, 1rem)}[size=l].gov-form-multi-select *[slot=left-icon]{left:calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2)}[size=l].gov-form-multi-select *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-l-icon-padding, 2.5rem)}[size=l].gov-form-multi-select *[slot=right-icon]{right:calc((var(--gov-form-input-core-l-icon-padding, 2.5rem) - var(--gov-form-input-core-l-icon-size, 1rem)) / 2)}[size=l].gov-form-multi-select *[slot=right-icon]~input,[size=l].gov-form-multi-select *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-l-icon-padding, 2.5rem)}[size=xl].gov-form-multi-select{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing);gap:0.5rem var(--gov-form-input-core-xl-icon-size, 1.25rem)}[size=xl].gov-form-multi-select input,[size=xl].gov-form-multi-select select{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing);height:var(--gov-form-input-core-xl-height, 3.5rem);padding:var(--gov-form-input-core-xl-padding, 0.9375rem 1rem 0.875rem)}[size=xl].gov-form-multi-select *[slot=left-icon],[size=xl].gov-form-multi-select *[slot=right-icon]{width:var(--gov-form-input-core-xl-icon-size, 1.25rem);height:var(--gov-form-input-core-xl-icon-size, 1.25rem)}[size=xl].gov-form-multi-select *[slot=left-icon]{left:calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2)}[size=xl].gov-form-multi-select *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-xl-icon-padding, 3rem)}[size=xl].gov-form-multi-select *[slot=right-icon]{right:calc((var(--gov-form-input-core-xl-icon-padding, 3rem) - var(--gov-form-input-core-xl-icon-size, 1.25rem)) / 2)}[size=xl].gov-form-multi-select *[slot=right-icon]~input,[size=xl].gov-form-multi-select *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-xl-icon-padding, 3rem)}.gov-form-multi-select{background:none}.gov-form-multi-select select{-webkit-appearance:none;-moz-appearance:none}.gov-form-multi-select select::-ms-expand{display:none}[size=m].gov-form-multi-select *[slot=right-icon]{right:var(--gov-form-select-m-arrow-right-position, 1rem);width:var(--gov-form-select-m-arrow-size, 0.5rem);height:var(--gov-form-select-m-arrow-size, 0.5rem)}[size=l].gov-form-multi-select *[slot=right-icon]{right:var(--gov-form-select-l-arrow-right-position, 1rem);width:var(--gov-form-select-l-arrow-size, 0.5rem);height:var(--gov-form-select-l-arrow-size, 0.5rem)}[size=xl].gov-form-multi-select *[slot=right-icon]{right:var(--gov-form-select-xl-arrow-right-position, 1.3125rem);width:var(--gov-form-select-xl-arrow-size, 0.625rem);height:var(--gov-form-select-xl-arrow-size, 0.625rem)}.gov-form-multi-select{flex-wrap:wrap}.gov-form-multi-select__wrap{display:flex;gap:0.5rem;width:100%}.gov-form-multi-select__list{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);display:flex;gap:0.5rem;flex-wrap:wrap}.gov-form-multi-select__list>.gov-form-multi-select__item{position:relative;display:flex;flex:0 0 auto;align-items:center;padding:0rem 0rem 0rem 0.5rem;background:var(--gov-form-multiselect-bg, var(--gov-color-primary-200));transition:150ms linear background-color}';const p=class{constructor(o){e(this,o);this.govFocus=t(this,"gov-focus",7);this.govBlur=t(this,"gov-blur",7);this.govChange=t(this,"gov-change",7);this.identifier=undefined;this.placeholder=undefined;this.variant=undefined;this.size="m";this.name=undefined;this.required=false;this.disabled=undefined;this.invalid=undefined;this.wcagDescribedBy=undefined;this.wcagLabelledBy=undefined;this.wcagOwns=undefined;this.focused=undefined;this.value=undefined;this.selectedOptions=[];this.selectId=f("GovSelect");this.listId=f("GovMultiList")}validateVariant(e){n(a,e,s.root)}validateSize(e){n(m,e,s.root)}emitChange(e){this.govChange.emit({component:s.root,value:e})}componentWillLoad(){this.validateVariant(this.variant);this.validateSize(this.size)}getAvailableOptions(){return Array.from(this.selectRef.querySelectorAll("option")).filter((e=>!(e.disabled||e.selected))).map((e=>({name:e.textContent,value:e.value})))}initAutocomplete(){this.autocompleteRef.addEventListener("gov-select",this.onSelectHandler.bind(this));this.autocompleteRef.addEventListener("gov-input",this.onInputHandler.bind(this));this.autocompleteRef.addEventListener("gov-focus",this.onFocusHandler.bind(this));this.autocompleteRef.addEventListener("gov-blur",this.onBlurHandler.bind(this));this.autocompleteRef.setSearchCallback((e=>new Promise((t=>{const o=this.getAvailableOptions();if(String(e).length===0){return t(o)}t(o.filter((({name:t})=>{if(!t)return false;return u(t).toLowerCase().indexOf(u(e).toLowerCase())>-1})))})))).then()}getOptionIndex(e){return this.selectedOptions.findIndex((t=>t.value===e.value&&t.name===e.name))}getOptionElement(e){return this.selectRef.querySelector('option[value="'+e.value+'"]')}selectOption(e){const t=this.getOptionIndex(e);if(t===-1){this.selectedOptions=[...this.selectedOptions,e];const t=this.getOptionElement(e);if(t){t.selected=true}}}removeOption(e){const t=this.getOptionIndex(e);if(t!==-1){this.selectedOptions.splice(t,1);this.selectedOptions=[...this.selectedOptions];const o=this.getOptionElement(e);if(o){o.selected=false}}}async componentDidRender(){this.initAutocomplete();await d(0);this.selectRef.querySelectorAll("option").forEach((e=>{if(e.selected){this.selectOption({name:e.textContent,value:e.value})}}));if(g()){await d(500);await this.validateWcag()}}render(){return o(i,{class:s.root,size:this.size,variant:this.variant},o("div",{class:s.wrap},o("div",{class:"element"},o("gov-form-autocomplete",{value:this.value,disabled:this.disabled,identifier:this.identifier||this.selectId,required:false,size:this.size,variant:this.variant,invalid:this.invalid,placeholder:this.placeholder,ref:e=>this.autocompleteRef=e,minlength:0,wcagDescribedBy:this.wcagDescribedBy,wcagLabelledBy:this.wcagLabelledBy,wcagOwns:this.listId}),o("gov-icon",{slot:"right-icon",class:"icon-arrow",name:"chevron-down"}),o("select",{hidden:true,"aria-hidden":true,multiple:true,required:this.required,name:this.name,disabled:this.disabled,ref:e=>this.selectRef=e,"aria-disabled":l(this.disabled),"aria-required":l(this.required),"aria-invalid":l(this.invalid),"aria-describedby":this.wcagDescribedBy,"aria-labelledby":this.wcagLabelledBy,"aria-owns":this.wcagOwns},o("slot",null)))),o("ul",{role:"listbox",id:this.listId,class:s.list},this.selectedOptions.map((e=>o("li",{class:s.item,role:"option"},e.name,o("gov-button",{wcagLabel:"Odebrat vybranou položku "+e.name,variant:"primary",type:"base",size:"s","on-gov-click":()=>this.onTagRemove(e)},o("gov-icon",{name:"x-lg"})))))))}onFocusHandler(e){e.stopPropagation();this.focused=true;this.govFocus.emit({component:s.root,originalEvent:e,value:this.selectedOptions})}onBlurHandler(e){e.stopPropagation();e.stopPropagation();this.focused=false;this.govBlur.emit({component:s.root,originalEvent:e,value:this.selectedOptions})}onInputHandler(e){this.value=e.detail.value;e.stopPropagation()}onSelectHandler(e){e.stopPropagation();const t=e.detail;this.selectOption(t);this.value="";this.autocompleteRef.clearValue();this.autocompleteRef.focus()}onTagRemove(e){this.removeOption(e)}async setFocus(e){return this.selectRef.focus(e)}async setValue(e){this.value=e}async getInstance(){return this.selectRef}async validateWcag(){c(this.wcagDescribedBy,"wcag-described-by",s.root);c(this.wcagLabelledBy,"wcag-labelled-by",s.root);c(this.wcagOwns,"wcag-owns",s.root);v(this.identifier||this.selectId,this.wcagLabelledBy,s.root)}get host(){return r(this)}static get watchers(){return{variant:["validateVariant"],size:["validateSize"],selectedOptions:["emitChange"]}}};p.style=h;export{p as gov_form_multi_select};
+//# sourceMappingURL=p-d8ef1d7a.entry.js.map

package/dist/core/p-d8ef1d7a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.scss?tag=gov-form-multi-select","../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.tsx"],"names":["govFormMultiSelectCss","GovFormMultiSelect","[object Object]","hostRef","this","selectId","createID","listId","newValue","validateProp","FormMultiselectVariants","FormMultiSelectClass","root","FormMultiselectSizes","govChange","emit","component","value","validateVariant","variant","validateSize","size","Array","from","selectRef","querySelectorAll","filter","option","disabled","selected","map","name","textContent","autocompleteRef","addEventListener","onSelectHandler","bind","onInputHandler","onFocusHandler","onBlurHandler","setSearchCallback","Promise","resolve","data","getAvailableOptions","String","length","removeDiacritics","toLowerCase","indexOf","then","selectedOptions","findIndex","querySelector","newOption","index","getOptionIndex","getOptionElement","removeOption","splice","initAutocomplete","delay","forEach","selectOption","canValidateWcagOnRender","validateWcag","h","Host","class","wrap","identifier","required","invalid","placeholder","ref","el","minlength","wcagDescribedBy","wcagLabelledBy","wcagOwns","slot","hidden","aria-hidden","multiple","aria-disabled","toBoolAttrIfDefined","aria-required","aria-invalid","aria-describedby","aria-labelledby","aria-owns","role","id","list","item","wcagLabel","type","on-gov-click","onTagRemove","e","stopPropagation","focused","govFocus","originalEvent","govBlur","detail","clearValue","focus","options","validateWcagRef","validateWcagLabelFor"],"mappings":"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","sourcesContent":["/*\n *   Multiselect\n */\n\n@import \"../select/gov-form-select-core.scss\";\n$class: \".gov-form-multi-select\";\n\n#{$class} {\n\t@extend %form-select-core;\n\tflex-wrap: wrap;\n\t&__wrap {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(8);\n\t\twidth: 100%;\n\t}\n\t&__list {\n\t\t@extend %reset-ul;\n\t\t@include typography($font-size-xs);\n\t\tdisplay: flex;\n\t\tgap: rem-calc(8);\n\t\tflex-wrap: wrap;\n\t}\n\t&__list > &__item {\n\t\t@extend %reset-ul-li;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex: 0 0 auto;\n\t\talign-items: center;\n\t\tpadding: rem-calc(0 0 0 8);\n\t\tbackground: $form-multiselect-bg;\n\t\ttransition: $t linear background-color;\n\t}\n}\n","import { Component, Element, h, State, Prop, Event, EventEmitter, Watch, Host, Method } from \"@stencil/core\"\nimport { toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport {\n\tFormMultiselectSizesType,\n\tFormMultiselectVariants,\n\tFormMultiselectVariantType,\n\tFormMultiSelectClass,\n\tFormMultiselectSizes,\n} from \"./constants\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { createID, removeDiacritics } from \"../../../utils/string.utils\"\nimport { delay } from \"../../../utils/utils\"\nimport { Nullable } from \"../../../types/interfaces\"\nimport { FormMultiselectEvent, GovFormMultiSelectItem } from \"./gov-form-multi-select.types\"\nimport { FormInputEvent } from \"../input/gov-form-input.types\"\n\n@Component({\n\ttag: \"gov-form-multi-select\",\n\tstyleUrl: \"gov-form-multi-select.scss\",\n})\nexport class GovFormMultiSelect {\n\tprivate selectRef?: HTMLSelectElement\n\tprivate autocompleteRef?: HTMLGovFormAutocompleteElement\n\n\tprivate readonly selectId: string\n\tprivate readonly listId: string\n\n\tconstructor() {\n\t\tthis.selectId = createID(\"GovSelect\")\n\t\tthis.listId = createID(\"GovMultiList\")\n\t}\n\n\t@Element() host: HTMLGovFormSelectElement\n\t/**\n\t * Custom select identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Custom select placeholder.\n\t */\n\t@Prop({ attribute: \"placeholder\" }) readonly placeholder: string\n\t/**\n\t * Style variation of the form select.\n\t */\n\t@Prop() readonly variant?: FormMultiselectVariantType\n\t/**\n\t * Select’s size.\n\t */\n\t@Prop() readonly size?: FormMultiselectSizesType = \"m\"\n\t/**\n\t * Name of the select.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the select component disabled.\n\t * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-owns\" }) readonly wcagOwns: string\n\t/**\n\t * Emitted when the select has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FormMultiselectEvent>\n\t/**\n\t * Emitted when the select loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FormMultiselectEvent>\n\t/**\n\t * Emitted when the select change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<FormMultiselectEvent>\n\n\t@State() focused: boolean\n\t@State() value: string\n\t@State() selectedOptions: GovFormMultiSelectItem[] = []\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(FormMultiselectVariants, newValue, FormMultiSelectClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormMultiselectSizes, newValue, FormMultiSelectClass.root)\n\t}\n\n\t@Watch(\"selectedOptions\")\n\temitChange(newValue: GovFormMultiSelectItem[]) {\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormMultiSelectClass.root,\n\t\t\tvalue: newValue,\n\t\t})\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\t}\n\n\tprivate getAvailableOptions(): GovFormMultiSelectItem[] {\n\t\treturn Array.from(this.selectRef.querySelectorAll(\"option\"))\n\t\t\t.filter((option: HTMLOptionElement) => !(option.disabled || option.selected))\n\t\t\t.map((option: HTMLOptionElement) => ({ name: option.textContent, value: option.value }))\n\t}\n\n\tprivate initAutocomplete() {\n\t\tthis.autocompleteRef.addEventListener(\"gov-select\", this.onSelectHandler.bind(this))\n\t\tthis.autocompleteRef.addEventListener(\"gov-input\", this.onInputHandler.bind(this))\n\t\tthis.autocompleteRef.addEventListener(\"gov-focus\", this.onFocusHandler.bind(this))\n\t\tthis.autocompleteRef.addEventListener(\"gov-blur\", this.onBlurHandler.bind(this))\n\t\tthis.autocompleteRef\n\t\t\t.setSearchCallback(value => {\n\t\t\t\treturn new Promise(resolve => {\n\t\t\t\t\tconst data = this.getAvailableOptions()\n\t\t\t\t\tif (String(value).length === 0) {\n\t\t\t\t\t\treturn resolve(data)\n\t\t\t\t\t}\n\t\t\t\t\tresolve(\n\t\t\t\t\t\tdata.filter(({ name }) => {\n\t\t\t\t\t\t\tif (!name) return false\n\t\t\t\t\t\t\treturn removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(value).toLowerCase()) > -1\n\t\t\t\t\t\t}),\n\t\t\t\t\t)\n\t\t\t\t})\n\t\t\t})\n\t\t\t.then()\n\t}\n\n\tprivate getOptionIndex(value: GovFormMultiSelectItem): number {\n\t\treturn this.selectedOptions.findIndex(option => option.value === value.value && option.name === value.name)\n\t}\n\n\tprivate getOptionElement(value: GovFormMultiSelectItem): Nullable<HTMLOptionElement> {\n\t\treturn this.selectRef.querySelector(\"option[value=\\\"\" + value.value + \"\\\"]\") as HTMLOptionElement\n\t}\n\n\tprivate selectOption(newOption: GovFormMultiSelectItem) {\n\t\tconst index = this.getOptionIndex(newOption)\n\t\tif (index === -1) {\n\t\t\tthis.selectedOptions = [...this.selectedOptions, newOption]\n\t\t\tconst option = this.getOptionElement(newOption)\n\t\t\tif (option) {\n\t\t\t\toption.selected = true\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate removeOption(removeOption: GovFormMultiSelectItem) {\n\t\tconst index = this.getOptionIndex(removeOption)\n\t\tif (index !== -1) {\n\t\t\tthis.selectedOptions.splice(index, 1)\n\t\t\tthis.selectedOptions = [...this.selectedOptions]\n\t\t\tconst option = this.getOptionElement(removeOption)\n\t\t\tif (option) {\n\t\t\t\toption.selected = false\n\t\t\t}\n\t\t}\n\t}\n\n\tasync componentDidRender() {\n\t\tthis.initAutocomplete()\n\t\tawait delay(0)\n\t\tthis.selectRef.querySelectorAll(\"option\").forEach((option: HTMLOptionElement) => {\n\t\t\tif (option.selected) {\n\t\t\t\tthis.selectOption({\n\t\t\t\t\tname: option.textContent,\n\t\t\t\t\tvalue: option.value,\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormMultiSelectClass.root} size={this.size} variant={this.variant}>\n\t\t\t\t<div class={FormMultiSelectClass.wrap}>\n\t\t\t\t\t<div class=\"element\">\n\t\t\t\t\t\t<gov-form-autocomplete\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\tidentifier={this.identifier || this.selectId}\n\t\t\t\t\t\t\trequired={false}\n\t\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\t\tinvalid={this.invalid}\n\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\tref={el => (this.autocompleteRef = el as HTMLGovFormAutocompleteElement)}\n\t\t\t\t\t\t\tminlength={0}\n\t\t\t\t\t\t\twcagDescribedBy={this.wcagDescribedBy}\n\t\t\t\t\t\t\twcagLabelledBy={this.wcagLabelledBy}\n\t\t\t\t\t\t\twcagOwns={this.listId}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<gov-icon slot=\"right-icon\" class=\"icon-arrow\" name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\thidden\n\t\t\t\t\t\t\taria-hidden={true}\n\t\t\t\t\t\t\tmultiple\n\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t\tref={el => (this.selectRef = el as HTMLSelectElement)}\n\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\t\taria-owns={this.wcagOwns}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<ul role=\"listbox\" id={this.listId} class={FormMultiSelectClass.list}>\n\t\t\t\t\t{this.selectedOptions.map(option => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li class={FormMultiSelectClass.item} role=\"option\">\n\t\t\t\t\t\t\t\t{option.name}\n\t\t\t\t\t\t\t\t<gov-button\n\t\t\t\t\t\t\t\t\twcagLabel={\"Odebrat vybranou položku \" + option.name}\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\t\t\t\ton-gov-click={() => this.onTagRemove(option)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<gov-icon name=\"x-lg\"></gov-icon>\n\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t</li>\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\te.stopPropagation()\n\t\tthis.focused = true\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormMultiSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.selectedOptions,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\te.stopPropagation()\n\t\tthis.focused = false\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormMultiSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.selectedOptions,\n\t\t})\n\t}\n\n\tprivate onInputHandler(e: CustomEvent) {\n\t\tthis.value = (e.detail as FormInputEvent).value\n\t\te.stopPropagation()\n\t}\n\n\tprivate onSelectHandler(e: CustomEvent) {\n\t\te.stopPropagation()\n\t\tconst value = e.detail as GovFormMultiSelectItem\n\t\tthis.selectOption(value)\n\t\tthis.value = \"\"\n\t\tthis.autocompleteRef.clearValue()\n\t\tthis.autocompleteRef.focus()\n\t}\n\n\tprivate onTagRemove(removeOption: GovFormMultiSelectItem) {\n\t\tthis.removeOption(removeOption)\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.selectRef.focus(options)\n\t}\n\n\t/**\n\t * Sets the ordered value of the element\n\t */\n\t@Method()\n\tasync setValue(value: string): Promise<void> {\n\t\tthis.value = value\n\t}\n\n\t/**\n\t * Returns an instance of the native html select element\n\t */\n\t@Method()\n\tasync getInstance(): Promise<HTMLSelectElement> {\n\t\treturn this.selectRef\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormMultiSelectClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormMultiSelectClass.root)\n\t\tvalidateWcagRef(this.wcagOwns, \"wcag-owns\", FormMultiSelectClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormMultiSelectClass.root)\n\t}\n}\n"]}