@gov-design-system-ce/components 0.0.13 → 0.0.14

package/dist/core/{p-63d2e8ec.entry.js.map → p-8bebbcc7.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/core/src/components/gov-side-nav/gov-side-nav-item.scss?tag=gov-side-nav-item","../../../packages/core/src/components/gov-side-nav/gov-side-nav-item.tsx"],"names":["govSideNavItemCss","GovSideNavItem","[object Object]","hostRef","this","h","govHost","host","newValue","govErrorLog","SideNavItemClass","root","govChange","emit","open","isExpandedState","element","isExpanded","validateLabel","label","classNames","prepareClasses","hasSlot","rootWithIcon","hasChilds","children","length","Host","class","role","inverse","aria-expanded","booleanString","href","header","name","icon","count","badge","variant","size","type","arrow","onClick","toggle","content","emmitChange"],"mappings":"0LAAA,MAAMA,EAAoB,q8JCYbC,EAAc,MAG1BC,YAAAC,+FAUoC,mBAIA,2CAQF,yCASG,0CAS8B,MAvClEC,KAAKC,EAAIC,EAAQF,KAAKG,MA8CvBL,cAAcM,GACb,IAAKA,EAAU,CACdC,EAAY,IAAIC,EAAiBC,wCAI3BT,cACPE,KAAKQ,UAAUC,KAAK,CAAEC,KAAMV,KAAKW,gBAAiBC,QAASZ,KAAKG,OAGjEL,oBACCE,KAAKW,gBAAkBX,KAAKa,WAC5Bb,KAAKc,cAAcd,KAAKe,OAGzBC,iBACC,MAAMf,EAAEA,GAAMD,KAEd,OAAOiB,EAAe,CAACX,EAAiBC,KAAMN,EAAEiB,QAAQ,SAAWZ,EAAiBa,eAGrFrB,SACC,MAAMa,gBAAEA,EAAeI,MAAEA,GAAUf,KAEnC,MAAMoB,EAAYpB,KAAKG,KAAKkB,SAASC,OAAS,EAE9C,OACCrB,EAACsB,EAAI,CAACC,MAAOxB,KAAKgB,WAAYS,KAAK,WAAWC,QAAS1B,KAAK0B,QAAOC,gBAAiBC,EAAcjB,IAChGX,KAAK6B,KACL5B,EAAA,MAAA,CAAKuB,MAAOlB,EAAiBwB,QAC5B7B,EAAA,IAAA,CAAGuB,MAAOlB,EAAiByB,KAAMF,KAAM7B,KAAK6B,MAC1C7B,KAAKC,EAAEiB,QAAQ,SACfjB,EAAA,OAAA,CAAMuB,MAAOlB,EAAiB0B,MAC7B/B,EAAA,OAAA,CAAM8B,KAAK,UAGb9B,EAAA,OAAA,CAAMuB,MAAOlB,EAAiBS,OAAQA,GAErCf,KAAKiC,OACLhC,EAAA,OAAA,CAAMuB,MAAOlB,EAAiB4B,OAC7BjC,EAAA,YAAA,CAAWkC,QAAQ,YAAYC,KAAK,IAAIV,QAAS1B,KAAK0B,SAAO,OAO/DN,GACAnB,EAAA,SAAA,CAAQoC,KAAK,SAASb,MAAOlB,EAAiBgC,MAAOC,QAAS,IAAMvC,KAAKwC,UACxEvC,EAAA,WAAA,CAAU8B,KAAK,mBAKlB9B,EAAA,MAAA,CAAKuB,MAAOlB,EAAiBwB,QAC5B7B,EAAA,SAAA,CAAQuB,MAAOlB,EAAiByB,KAAMM,KAAK,SAASE,QAAS,IAAMvC,KAAKwC,UACtExC,KAAKC,EAAEiB,QAAQ,SACfjB,EAAA,OAAA,CAAMuB,MAAOlB,EAAiB0B,MAC7B/B,EAAA,OAAA,CAAM8B,KAAK,UAGb9B,EAAA,OAAA,CAAMuB,MAAOlB,EAAiBS,OAAQA,GAErCK,GACAnB,EAAA,OAAA,CAAMuB,MAAOlB,EAAiBgC,OAC7BrC,EAAA,WAAA,CAAU8B,KAAK,oBAOnBX,GACAnB,EAAA,MAAA,CAAKuB,MAAOlB,EAAiBmC,SAC5BxC,EAAA,OAAA,QAWLH,aACCE,KAAKW,gBAAkB,KACvBX,KAAK0C,cAON5C,cACCE,KAAKW,gBAAkB,MACvBX,KAAK0C,cAON5C,eACCE,KAAKW,iBAAmBX,KAAKW,gBAC7BX,KAAK0C,cAON5C,qBACC,OAAOE,KAAKW","sourcesContent":["/*\n *   Side nav - Item\n */\n\n$class: \".gov-side-nav-item\";\n\n#{$class} {\n\t@include base();\n\t&__header {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tborder-bottom: $side-nav-border;\n\t}\n\t&__name {\n\t\t@include button-core();\n\t\t@include typography($font-size-m);\n\t\t@include focus-outline();\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tflex: 1 1 auto;\n\t\tjustify-content: flex-start;\n\t\tpadding: rem-calc(12 16 12 8);\n\t\tcolor: $side-nav-color;\n\t\ttext-align: left;\n\t\ttransition: background-color $t;\n\t\t@at-root button#{&} {\n\t\t\tpadding-right: 0 !important;\n\t\t}\n\n\t\t// HOVERS\n\t\t@include hover() {\n\t\t\tbackground: $side-nav-hover-bg;\n\t\t}\n\t}\n\t&__icon {\n\t\tdisplay: flex;\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(16);\n\t\theight: rem-calc(16);\n\t\t.gov-icon {\n\t\t\tmargin: 0;\n\t\t\tcolor: $side-nav-color;\n\t\t}\n\t}\n\t&__label {\n\t\tcolor: inherit;\n\t}\n\t&__badge {\n\t\tdisplay: flex;\n\t\tflex: 0 0 auto;\n\t}\n\t&__arrow {\n\t\t@include button-core();\n\t\t@include focus-outline();\n\t\tflex: 0 0 auto;\n\t\talign-self: stretch;\n\t\twidth: rem-calc(48);\n\t\tmargin-left: auto;\n\t\tcolor: $side-nav-arrow-color;\n\t\ttransition: background-color $t;\n\t\t.gov-icon {\n\t\t\twidth: rem-calc(12);\n\t\t\theight: rem-calc(12);\n\t\t}\n\t\t@include hover() {\n\t\t\tbackground: $side-nav-hover-bg;\n\t\t}\n\t}\n\t&__content {\n\t\tdisplay: none;\n\t}\n\n\t// VARIANTS\n\t&--w-icon &__label {\n\t\tmargin-left: rem-calc(32);\n\t}\n\t&--w-icon &__icon + &__label {\n\t\tmargin-left: 0;\n\t}\n\t// nested styles\n\t& & {\n\t\t#{$class} {\n\t\t\t&__header {\n\t\t\t\tborder: none !important;\n\t\t\t}\n\t\t\t&__name {\n\t\t\t\t@include typography($font-size-s);\n\t\t\t\tpadding: rem-calc(10 8);\n\t\t\t\tfont-weight: bold;\n\t\t\t}\n\t\t}\n\t\t@include parameter(\"aria-expanded\") {\n\t\t\tbackground: $side-nav-bg-level-2;\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tbackground: $side-nav-bg-level-2-inverse;\n\t\t\t}\n\t\t}\n\t}\n\t& & & {\n\t\t#{$class} {\n\t\t\t&__name {\n\t\t\t\tgap: rem-calc(12);\n\t\t\t\tfont-weight: inherit;\n\t\t\t}\n\t\t}\n\t}\n\t@include parameter(\"compact\") {\n\t\t#{$class} {\n\t\t\t&__header {\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t// STATES\n\t@include parameter(\"aria-expanded\") {\n\t\t& > #{$class}__header #{$class}__arrow .gov-icon {\n\t\t\ttransform: scale(-1);\n\t\t}\n\t\t& > #{$class}__content {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Prop, State, Watch, Host, Method, Event, EventEmitter } from '@stencil/core'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { SideNavItemClass } from './constants'\nimport { booleanString, prepareClasses } from '../../helpers/Dom/template'\nimport { GovSideNavItemChangeEvent } from './gov-side-nav-item.d'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-side-nav-item',\n\tstyleUrl: 'gov-side-nav-item.scss',\n})\nexport class GovSideNavItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovSideNavItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Determide if component should have compact styles.\n\t */\n\t@Prop() readonly compact: boolean = false\n\t/**\n\t * Custom sidenav item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Defined the count of nested items\n\t */\n\t@Prop() readonly count: boolean = false\n\t/**\n\t * Item name of the sidenav\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Defines whether the sidenav is open or closed by default\n\t */\n\t@Prop({ attribute: 'is-expanded' }) readonly isExpanded: boolean = false\n\t/**\n\t * Called when the sidenav state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovSideNavItemChangeEvent>\n\n\t@Watch('label')\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${SideNavItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({ open: this.isExpandedState, element: this.host })\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpandedState = this.isExpanded\n\t\tthis.validateLabel(this.label)\n\t}\n\n\tget classNames(): string {\n\t\tconst { h } = this\n\n\t\treturn prepareClasses([SideNavItemClass.root, h.hasSlot('icon') && SideNavItemClass.rootWithIcon])\n\t}\n\n\trender() {\n\t\tconst { isExpandedState, label } = this\n\t\t// TODO: správný počet zanořených childů\n\t\tconst hasChilds = this.host.children.length > 1\n\n\t\treturn (\n\t\t\t<Host class={this.classNames} role=\"listitem\" inverse={this.inverse} aria-expanded={booleanString(isExpandedState)}>\n\t\t\t\t{this.href ? (\n\t\t\t\t\t<div class={SideNavItemClass.header}>\n\t\t\t\t\t\t<a class={SideNavItemClass.name} href={this.href}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class={SideNavItemClass.label}>{label}</span>\n\n\t\t\t\t\t\t\t{this.count && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.badge}>\n\t\t\t\t\t\t\t\t\t<gov-badge variant=\"secondary\" size=\"s\" inverse={this.inverse}>\n\t\t\t\t\t\t\t\t\t\t{/* // TODO: správný počet zanořených childů */}3\n\t\t\t\t\t\t\t\t\t</gov-badge>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</a>\n\n\t\t\t\t\t\t{hasChilds && (\n\t\t\t\t\t\t\t<button type=\"button\" class={SideNavItemClass.arrow} onClick={() => this.toggle()}>\n\t\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div class={SideNavItemClass.header}>\n\t\t\t\t\t\t<button class={SideNavItemClass.name} type=\"button\" onClick={() => this.toggle()}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class={SideNavItemClass.label}>{label}</span>\n\n\t\t\t\t\t\t\t{hasChilds && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.arrow}>\n\t\t\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{hasChilds && (\n\t\t\t\t\t<div class={SideNavItemClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Opening the sidenav\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpandedState = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the sidenav\n\t */\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpandedState = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * sidenav switch\n\t */\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpandedState = !this.isExpandedState\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpandedState\n\t}\n}\n"]}
+{"version":3,"sources":["../../../packages/core/src/components/gov-side-nav/gov-side-nav-item.scss?tag=gov-side-nav-item","../../../packages/core/src/components/gov-side-nav/gov-side-nav-item.tsx"],"names":["govSideNavItemCss","GovSideNavItem","[object Object]","hostRef","this","h","govHost","host","newValue","govErrorLog","SideNavItemClass","root","govChange","emit","open","isExpandedState","element","isExpanded","validateLabel","label","classNames","prepareClasses","hasSlot","rootWithIcon","hasChilds","children","length","Host","class","role","inverse","aria-expanded","booleanString","href","header","name","icon","count","badge","variant","size","type","arrow","onClick","toggle","content","emmitChange"],"mappings":"0LAAA,MAAMA,EAAoB,smKCYbC,EAAc,MAG1BC,YAAAC,+FAUoC,mBAIA,2CAQF,yCASG,0CAS8B,MAvClEC,KAAKC,EAAIC,EAAQF,KAAKG,MA8CvBL,cAAcM,GACb,IAAKA,EAAU,CACdC,EAAY,IAAIC,EAAiBC,wCAI3BT,cACPE,KAAKQ,UAAUC,KAAK,CAAEC,KAAMV,KAAKW,gBAAiBC,QAASZ,KAAKG,OAGjEL,oBACCE,KAAKW,gBAAkBX,KAAKa,WAC5Bb,KAAKc,cAAcd,KAAKe,OAGzBC,iBACC,MAAMf,EAAEA,GAAMD,KAEd,OAAOiB,EAAe,CAACX,EAAiBC,KAAMN,EAAEiB,QAAQ,SAAWZ,EAAiBa,eAGrFrB,SACC,MAAMa,gBAAEA,EAAeI,MAAEA,GAAUf,KAEnC,MAAMoB,EAAYpB,KAAKG,KAAKkB,SAASC,OAAS,EAE9C,OACCrB,EAACsB,EAAI,CAACC,MAAOxB,KAAKgB,WAAYS,KAAK,WAAWC,QAAS1B,KAAK0B,QAAOC,gBAAiBC,EAAcjB,IAChGX,KAAK6B,KACL5B,EAAA,MAAA,CAAKuB,MAAOlB,EAAiBwB,QAC5B7B,EAAA,IAAA,CAAGuB,MAAOlB,EAAiByB,KAAMF,KAAM7B,KAAK6B,MAC1C7B,KAAKC,EAAEiB,QAAQ,SACfjB,EAAA,OAAA,CAAMuB,MAAOlB,EAAiB0B,MAC7B/B,EAAA,OAAA,CAAM8B,KAAK,UAGb9B,EAAA,OAAA,CAAMuB,MAAOlB,EAAiBS,OAAQA,GAErCf,KAAKiC,OACLhC,EAAA,OAAA,CAAMuB,MAAOlB,EAAiB4B,OAC7BjC,EAAA,YAAA,CAAWkC,QAAQ,YAAYC,KAAK,IAAIV,QAAS1B,KAAK0B,SAAO,OAO/DN,GACAnB,EAAA,SAAA,CAAQoC,KAAK,SAASb,MAAOlB,EAAiBgC,MAAOC,QAAS,IAAMvC,KAAKwC,UACxEvC,EAAA,WAAA,CAAU8B,KAAK,mBAKlB9B,EAAA,MAAA,CAAKuB,MAAOlB,EAAiBwB,QAC5B7B,EAAA,SAAA,CAAQuB,MAAOlB,EAAiByB,KAAMM,KAAK,SAASE,QAAS,IAAMvC,KAAKwC,UACtExC,KAAKC,EAAEiB,QAAQ,SACfjB,EAAA,OAAA,CAAMuB,MAAOlB,EAAiB0B,MAC7B/B,EAAA,OAAA,CAAM8B,KAAK,UAGb9B,EAAA,OAAA,CAAMuB,MAAOlB,EAAiBS,OAAQA,GAErCK,GACAnB,EAAA,OAAA,CAAMuB,MAAOlB,EAAiBgC,OAC7BrC,EAAA,WAAA,CAAU8B,KAAK,oBAOnBX,GACAnB,EAAA,MAAA,CAAKuB,MAAOlB,EAAiBmC,SAC5BxC,EAAA,OAAA,QAWLH,aACCE,KAAKW,gBAAkB,KACvBX,KAAK0C,cAON5C,cACCE,KAAKW,gBAAkB,MACvBX,KAAK0C,cAON5C,eACCE,KAAKW,iBAAmBX,KAAKW,gBAC7BX,KAAK0C,cAON5C,qBACC,OAAOE,KAAKW","sourcesContent":["/*\n *   Side nav - Item\n */\n\n$class: \".gov-side-nav-item\";\n\n#{$class} {\n\t@include base();\n\t&__header {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tborder-bottom: $side-nav-border;\n\t}\n\t&__name {\n\t\t@include button-core();\n\t\t@include typography($font-size-m);\n\t\t@include focus-outline();\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tflex: 1 1 auto;\n\t\tjustify-content: flex-start;\n\t\tpadding: rem-calc(12 16 12 8);\n\t\tcolor: $side-nav-color;\n\t\ttext-align: left;\n\t\ttransition: background-color $t;\n\t\t@at-root button#{&} {\n\t\t\tpadding-right: 0 !important;\n\t\t}\n\n\t\t// HOVERS\n\t\t@include hover() {\n\t\t\tbackground: $side-nav-hover-bg;\n\t\t}\n\t}\n\t&__icon {\n\t\tdisplay: flex;\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(16);\n\t\theight: rem-calc(16);\n\t\t.gov-icon {\n\t\t\tmargin: 0;\n\t\t\tcolor: $side-nav-color;\n\t\t}\n\t}\n\t&__label {\n\t\tcolor: inherit;\n\t}\n\t&__badge {\n\t\tdisplay: flex;\n\t\tflex: 0 0 auto;\n\t}\n\t&__arrow {\n\t\t@include button-core();\n\t\t@include focus-outline();\n\t\tflex: 0 0 auto;\n\t\talign-self: stretch;\n\t\twidth: rem-calc(48);\n\t\tmargin-left: auto;\n\t\tcolor: $side-nav-arrow-color;\n\t\ttransition: background-color $t;\n\t\t.gov-icon {\n\t\t\twidth: rem-calc(12);\n\t\t\theight: rem-calc(12);\n\t\t}\n\t\t@include hover() {\n\t\t\tbackground: $side-nav-hover-bg;\n\t\t}\n\t}\n\t&__content {\n\t\tdisplay: none;\n\t}\n\n\t// VARIANTS\n\t&--w-icon &__label {\n\t\tmargin-left: rem-calc(32);\n\t}\n\t&--w-icon &__icon + &__label {\n\t\tmargin-left: 0;\n\t}\n\t// nested styles\n\t& & {\n\t\t#{$class} {\n\t\t\t&__header {\n\t\t\t\tborder: none !important;\n\t\t\t}\n\t\t\t&__name {\n\t\t\t\t@include typography($font-size-s);\n\t\t\t\tpadding: rem-calc(10 8);\n\t\t\t\tfont-weight: bold;\n\t\t\t}\n\t\t}\n\t\t@include parameter(\"aria-expanded\") {\n\t\t\tbackground: $side-nav-bg-level-2;\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tbackground: $side-nav-bg-level-2-inverse;\n\t\t\t}\n\t\t}\n\t}\n\t& & & {\n\t\t#{$class} {\n\t\t\t&__name {\n\t\t\t\tgap: rem-calc(12);\n\t\t\t\tfont-weight: inherit;\n\t\t\t}\n\t\t}\n\t}\n\t@include parameter(\"compact\") {\n\t\t#{$class} {\n\t\t\t&__header {\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t// STATES\n\t@include parameter(\"aria-expanded\") {\n\t\t& > #{$class}__header #{$class}__arrow .gov-icon {\n\t\t\ttransform: scale(-1);\n\t\t}\n\t\t& > #{$class}__content {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Prop, State, Watch, Host, Method, Event, EventEmitter } from '@stencil/core'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { SideNavItemClass } from './constants'\nimport { booleanString, prepareClasses } from '../../helpers/Dom/template'\nimport { GovSideNavItemChangeEvent } from './gov-side-nav-item.d'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-side-nav-item',\n\tstyleUrl: 'gov-side-nav-item.scss',\n})\nexport class GovSideNavItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovSideNavItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Determide if component should have compact styles.\n\t */\n\t@Prop() readonly compact: boolean = false\n\t/**\n\t * Custom sidenav item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Defined the count of nested items\n\t */\n\t@Prop() readonly count: boolean = false\n\t/**\n\t * Item name of the sidenav\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Defines whether the sidenav is open or closed by default\n\t */\n\t@Prop({ attribute: 'is-expanded' }) readonly isExpanded: boolean = false\n\t/**\n\t * Called when the sidenav state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovSideNavItemChangeEvent>\n\n\t@Watch('label')\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${SideNavItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({ open: this.isExpandedState, element: this.host })\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpandedState = this.isExpanded\n\t\tthis.validateLabel(this.label)\n\t}\n\n\tget classNames(): string {\n\t\tconst { h } = this\n\n\t\treturn prepareClasses([SideNavItemClass.root, h.hasSlot('icon') && SideNavItemClass.rootWithIcon])\n\t}\n\n\trender() {\n\t\tconst { isExpandedState, label } = this\n\t\t// TODO: správný počet zanořených childů\n\t\tconst hasChilds = this.host.children.length > 1\n\n\t\treturn (\n\t\t\t<Host class={this.classNames} role=\"listitem\" inverse={this.inverse} aria-expanded={booleanString(isExpandedState)}>\n\t\t\t\t{this.href ? (\n\t\t\t\t\t<div class={SideNavItemClass.header}>\n\t\t\t\t\t\t<a class={SideNavItemClass.name} href={this.href}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class={SideNavItemClass.label}>{label}</span>\n\n\t\t\t\t\t\t\t{this.count && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.badge}>\n\t\t\t\t\t\t\t\t\t<gov-badge variant=\"secondary\" size=\"s\" inverse={this.inverse}>\n\t\t\t\t\t\t\t\t\t\t{/* // TODO: správný počet zanořených childů */}3\n\t\t\t\t\t\t\t\t\t</gov-badge>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</a>\n\n\t\t\t\t\t\t{hasChilds && (\n\t\t\t\t\t\t\t<button type=\"button\" class={SideNavItemClass.arrow} onClick={() => this.toggle()}>\n\t\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div class={SideNavItemClass.header}>\n\t\t\t\t\t\t<button class={SideNavItemClass.name} type=\"button\" onClick={() => this.toggle()}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class={SideNavItemClass.label}>{label}</span>\n\n\t\t\t\t\t\t\t{hasChilds && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.arrow}>\n\t\t\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{hasChilds && (\n\t\t\t\t\t<div class={SideNavItemClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Opening the sidenav\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpandedState = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the sidenav\n\t */\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpandedState = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * sidenav switch\n\t */\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpandedState = !this.isExpandedState\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpandedState\n\t}\n}\n"]}

package/dist/core/p-93edcce2.entry.js

@@ -0,0 +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 h,f as g}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;this.govChange.emit({checked:this.isChecked,value:this.value})}validateSize(o){a(g,o,h.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(h.root),"is-checked":o,size:this.size,invalid:m(this.invalid)},r("div",{class:h.holder},i(r(w,null,r("input",{class:h.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:h.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({checked:this.isChecked,value:this.value})}async validateWcag(){f(this.wcagDescribedBy,"wcag-described-by",h.root);f(this.wcagLabelledBy,"wcag-labelled-by",h.root);l(this.identifier||this.checkboxId,this.wcagLabelledBy,h.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-93edcce2.entry.js.map

package/dist/core/{p-b5284ce3.entry.js.map → p-93edcce2.entry.js.map}

@@ -1 +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","isChecked","govChange","emit","checked","value","validateProp","FormSwitchSizes","FormSwitchClass","root","passAttrToControl","passAttrToLabel","identifier","String","required","canValidateWcagOnRender","delay","validateWcag","wrapCheckbox","children","noLabel","Host","class","classes","is-checked","size","invalid","toBoolAttrIfDefined","holder","Fragment","input","id","type","name","onClick","onClickHandler","bind","onChange","onChangeHandler","onFocus","onFocusHandler","onBlur","onBlurHandler","aria-checked","aria-required","aria-invalid","aria-describedby","wcagDescribedBy","aria-labelledby","wcagLabelledBy","aria-disabled","disabled","indicator","e","stopPropagation","govFocus","govBlur","target","validateWcagRef","validateWcagLabelFor"],"mappings":"+hBAAA,MAAMA,EAAmB,iiUCmBZC,EAAa,MAMzBC,YAAAC,2JAe6D,mBAIR,oBAKhB,4DAaS,2IApC7CC,KAAKC,WAAaC,EAAS,eAE3BF,KAAKG,EAAIC,EAAQJ,KAAKK,MACtBL,KAAKM,EAAIC,EAAQP,KAAKG,GAkEvBL,mBAAmBU,GAClBR,KAAKS,UAAYD,EACjBR,KAAKU,UAAUC,KAAK,CACnBC,QAASZ,KAAKS,UACdI,MAAOb,KAAKa,QAKdf,aAAaU,GACZM,EAAaC,EAAiBP,EAAUQ,EAAgBC,MAGzDnB,oBACCE,KAAKS,UAAYT,KAAKY,QAEtBZ,KAAKM,EAAEY,kBAAkB,OAAQ,UAGlCpB,2BACCE,KAAKM,EAAEa,gBAAgB,aAAcnB,KAAKoB,YAAcpB,KAAKC,YAC7DD,KAAKM,EAAEa,gBAAgB,WAAYE,OAAOrB,KAAKsB,WAC/C,GAAIC,IAA2B,OACxBC,EAAM,WACNxB,KAAKyB,gBAIb3B,SACC,MAAMW,UAAEA,GAAcT,KACtB,MAAM0B,EAAgBC,IACrB,GAAI3B,KAAK4B,QAAS,CACjB,OACCzB,EAAA,QAAA,KACEwB,GAIJ,OAAOA,GAGR,OACCxB,EAAC0B,EAAI,CAACC,MAAO9B,KAAKG,EAAE4B,QAAQf,EAAgBC,MAAKe,aAAcvB,EAAWwB,KAAMjC,KAAKiC,KAAMC,QAASC,EAAoBnC,KAAKkC,UAC5H/B,EAAA,MAAA,CAAK2B,MAAOd,EAAgBoB,QAC1BV,EACAvB,EAACkC,EAAQ,KACRlC,EAAA,QAAA,CACC2B,MAAOd,EAAgBsB,MACvBC,GAAIvC,KAAKoB,YAAcpB,KAAKC,WAC5BuC,KAAK,WACL3B,MAAOb,KAAKa,MACZ4B,KAAMzC,KAAKyC,KACX7B,QAASZ,KAAKS,UACdiC,QAAS1C,KAAK2C,eAAeC,KAAK5C,MAClC6C,SAAU7C,KAAK8C,gBAAgBF,KAAK5C,MACpC+C,QAAS/C,KAAKgD,eAAeJ,KAAK5C,MAClCiD,OAAQjD,KAAKkD,cAAcN,KAAK5C,MAChCsB,SAAUtB,KAAKsB,SAAQ6B,eACTnD,KAAKS,UAAS2C,gBACbjB,EAAoBnC,KAAKsB,UAAS+B,eACnClB,EAAoBnC,KAAKkC,SAAQoB,mBAC7BtD,KAAKuD,gBAAeC,kBACrBxD,KAAKyD,eAAcC,gBACrBvB,EAAoBnC,KAAK2D,YAEzCxD,EAAA,OAAA,CAAM2B,MAAOd,EAAgB4C,YAC7BzD,EAAA,OAAA,CAAMsC,KAAK,cAQT3C,eAAe+D,GACtBA,EAAEC,kBAGKhE,eAAe+D,GACtBA,EAAEC,kBACF9D,KAAK+D,SAASpD,KAAKkD,GAGZ/D,cAAc+D,GACrBA,EAAEC,kBACF9D,KAAKgE,QAAQrD,KAAKkD,GAGX/D,gBAAgB+D,GACvB7D,KAAKS,UAAaoD,EAAEI,OAA4BrD,QAChDiD,EAAEC,kBACF9D,KAAKU,UAAUC,KAAK,CACnBC,QAASZ,KAAKS,UACdI,MAAOb,KAAKa,QAQdf,qBACCoE,EAAgBlE,KAAKuD,gBAAiB,oBAAqBvC,EAAgBC,MAC3EiD,EAAgBlE,KAAKyD,eAAgB,mBAAoBzC,EAAgBC,MACzEkD,EAAqBnE,KAAKoB,YAAcpB,KAAKC,WAAYD,KAAKyD,eAAgBzC,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, State, 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 { GovFormSwitchChangeEvent } from \"./interfaces\"\nimport Fragment from \"../../../helpers/Fragment\"\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\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 }) readonly checked: boolean = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the 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<FocusEvent>\n\t/**\n\t * Emitted when the switch loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the switch change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<GovFormSwitchChangeEvent>\n\n\t@State() isChecked: boolean\n\n\t@Watch(\"checked\")\n\tupdateCheckedState(newValue: boolean): void {\n\t\tthis.isChecked = newValue\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormSwitchSizes, newValue, FormSwitchClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.isChecked = this.checked\n\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 { isChecked } = this\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)} is-checked={isChecked} 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.isChecked}\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\trequired={this.required}\n\t\t\t\t\t\t\t\taria-checked={this.isChecked}\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(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.isChecked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", 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"]}
+{"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","isChecked","govChange","emit","checked","value","validateProp","FormSwitchSizes","FormSwitchClass","root","passAttrToControl","passAttrToLabel","identifier","String","required","canValidateWcagOnRender","delay","validateWcag","wrapCheckbox","children","noLabel","Host","class","classes","is-checked","size","invalid","toBoolAttrIfDefined","holder","Fragment","input","id","type","name","onClick","onClickHandler","bind","onChange","onChangeHandler","onFocus","onFocusHandler","onBlur","onBlurHandler","aria-checked","aria-required","aria-invalid","aria-describedby","wcagDescribedBy","aria-labelledby","wcagLabelledBy","aria-disabled","disabled","indicator","e","stopPropagation","govFocus","govBlur","target","validateWcagRef","validateWcagLabelFor"],"mappings":"+hBAAA,MAAMA,EAAmB,ksUCmBZC,EAAa,MAMzBC,YAAAC,2JAe6D,mBAIR,oBAKhB,4DAaS,2IApC7CC,KAAKC,WAAaC,EAAS,eAE3BF,KAAKG,EAAIC,EAAQJ,KAAKK,MACtBL,KAAKM,EAAIC,EAAQP,KAAKG,GAkEvBL,mBAAmBU,GAClBR,KAAKS,UAAYD,EACjBR,KAAKU,UAAUC,KAAK,CACnBC,QAASZ,KAAKS,UACdI,MAAOb,KAAKa,QAKdf,aAAaU,GACZM,EAAaC,EAAiBP,EAAUQ,EAAgBC,MAGzDnB,oBACCE,KAAKS,UAAYT,KAAKY,QAEtBZ,KAAKM,EAAEY,kBAAkB,OAAQ,UAGlCpB,2BACCE,KAAKM,EAAEa,gBAAgB,aAAcnB,KAAKoB,YAAcpB,KAAKC,YAC7DD,KAAKM,EAAEa,gBAAgB,WAAYE,OAAOrB,KAAKsB,WAC/C,GAAIC,IAA2B,OACxBC,EAAM,WACNxB,KAAKyB,gBAIb3B,SACC,MAAMW,UAAEA,GAAcT,KACtB,MAAM0B,EAAgBC,IACrB,GAAI3B,KAAK4B,QAAS,CACjB,OACCzB,EAAA,QAAA,KACEwB,GAIJ,OAAOA,GAGR,OACCxB,EAAC0B,EAAI,CAACC,MAAO9B,KAAKG,EAAE4B,QAAQf,EAAgBC,MAAKe,aAAcvB,EAAWwB,KAAMjC,KAAKiC,KAAMC,QAASC,EAAoBnC,KAAKkC,UAC5H/B,EAAA,MAAA,CAAK2B,MAAOd,EAAgBoB,QAC1BV,EACAvB,EAACkC,EAAQ,KACRlC,EAAA,QAAA,CACC2B,MAAOd,EAAgBsB,MACvBC,GAAIvC,KAAKoB,YAAcpB,KAAKC,WAC5BuC,KAAK,WACL3B,MAAOb,KAAKa,MACZ4B,KAAMzC,KAAKyC,KACX7B,QAASZ,KAAKS,UACdiC,QAAS1C,KAAK2C,eAAeC,KAAK5C,MAClC6C,SAAU7C,KAAK8C,gBAAgBF,KAAK5C,MACpC+C,QAAS/C,KAAKgD,eAAeJ,KAAK5C,MAClCiD,OAAQjD,KAAKkD,cAAcN,KAAK5C,MAChCsB,SAAUtB,KAAKsB,SAAQ6B,eACTnD,KAAKS,UAAS2C,gBACbjB,EAAoBnC,KAAKsB,UAAS+B,eACnClB,EAAoBnC,KAAKkC,SAAQoB,mBAC7BtD,KAAKuD,gBAAeC,kBACrBxD,KAAKyD,eAAcC,gBACrBvB,EAAoBnC,KAAK2D,YAEzCxD,EAAA,OAAA,CAAM2B,MAAOd,EAAgB4C,YAC7BzD,EAAA,OAAA,CAAMsC,KAAK,cAQT3C,eAAe+D,GACtBA,EAAEC,kBAGKhE,eAAe+D,GACtBA,EAAEC,kBACF9D,KAAK+D,SAASpD,KAAKkD,GAGZ/D,cAAc+D,GACrBA,EAAEC,kBACF9D,KAAKgE,QAAQrD,KAAKkD,GAGX/D,gBAAgB+D,GACvB7D,KAAKS,UAAaoD,EAAEI,OAA4BrD,QAChDiD,EAAEC,kBACF9D,KAAKU,UAAUC,KAAK,CACnBC,QAASZ,KAAKS,UACdI,MAAOb,KAAKa,QAQdf,qBACCoE,EAAgBlE,KAAKuD,gBAAiB,oBAAqBvC,EAAgBC,MAC3EiD,EAAgBlE,KAAKyD,eAAgB,mBAAoBzC,EAAgBC,MACzEkD,EAAqBnE,KAAKoB,YAAcpB,KAAKC,WAAYD,KAAKyD,eAAgBzC,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, State, 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 { GovFormSwitchChangeEvent } from \"./interfaces\"\nimport Fragment from \"../../../helpers/Fragment\"\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\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 }) readonly checked: boolean = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the 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<FocusEvent>\n\t/**\n\t * Emitted when the switch loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the switch change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<GovFormSwitchChangeEvent>\n\n\t@State() isChecked: boolean\n\n\t@Watch(\"checked\")\n\tupdateCheckedState(newValue: boolean): void {\n\t\tthis.isChecked = newValue\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormSwitchSizes, newValue, FormSwitchClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.isChecked = this.checked\n\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 { isChecked } = this\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)} is-checked={isChecked} 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.isChecked}\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\trequired={this.required}\n\t\t\t\t\t\t\t\taria-checked={this.isChecked}\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(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.isChecked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", 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-9bdce72b.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as i,h as t,H as e,g as r}from"./p-4af5e4f4.js";import{g as n,h as a,i as s,j as l}from"./p-9cd80b05.js";import{c as v}from"./p-24636c53.js";import{g,t as c,c as p}from"./p-3f37ddb6.js";import{v as m}from"./p-26acf964.js";import{c as f}from"./p-c20102ff.js";import{d as u}from"./p-03990da5.js";import{a as d,b as h}from"./p-364b4792.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";import"./p-561fa17b.js";const x='.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-input{position:relative;display:flex;width:100%;align-items:center}.gov-form-input .element{position:relative;flex:1 1 auto}.gov-form-input input,.gov-form-input select,.gov-form-input 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-input input:focus,.gov-form-input select:focus,.gov-form-input textarea:focus{outline:none}.gov-form-input input:focus-visible,.gov-form-input select:focus-visible,.gov-form-input 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-input input::-moz-placeholder,.gov-form-input select::-moz-placeholder,.gov-form-input textarea::-moz-placeholder{color:var(--gov-form-placeholder-color, var(--gov-color-secondary-600))}.gov-form-input input::placeholder,.gov-form-input select::placeholder,.gov-form-input textarea::placeholder{color:var(--gov-form-placeholder-color, var(--gov-color-secondary-600))}.gov-form-input 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-input *[slot=left-icon],.gov-form-input *[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-input *[slot=left-icon]{left:0}.gov-form-input *[slot=right-icon]{right:0}[disabled=""].gov-form-input,[disabled=true i].gov-form-input,[disabled="1"].gov-form-input{pointer-events:none}[disabled=""].gov-form-input input,[disabled=""].gov-form-input select,[disabled=""].gov-form-input textarea,[disabled=true i].gov-form-input input,[disabled=true i].gov-form-input select,[disabled=true i].gov-form-input textarea,[disabled="1"].gov-form-input input,[disabled="1"].gov-form-input select,[disabled="1"].gov-form-input 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-input *[slot=left-icon],[disabled=""].gov-form-input *[slot=right-icon],[disabled=true i].gov-form-input *[slot=left-icon],[disabled=true i].gov-form-input *[slot=right-icon],[disabled="1"].gov-form-input *[slot=left-icon],[disabled="1"].gov-form-input *[slot=right-icon]{color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[invalid=""].gov-form-input input,[invalid=""].gov-form-input select,[invalid=""].gov-form-input textarea,[invalid=true i].gov-form-input input,[invalid=true i].gov-form-input select,[invalid=true i].gov-form-input textarea,[invalid="1"].gov-form-input input,[invalid="1"].gov-form-input select,[invalid="1"].gov-form-input 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-input input::-moz-placeholder,[invalid=""].gov-form-input select::-moz-placeholder,[invalid=""].gov-form-input textarea::-moz-placeholder,[invalid=true i].gov-form-input input::-moz-placeholder,[invalid=true i].gov-form-input select::-moz-placeholder,[invalid=true i].gov-form-input textarea::-moz-placeholder,[invalid="1"].gov-form-input input::-moz-placeholder,[invalid="1"].gov-form-input select::-moz-placeholder,[invalid="1"].gov-form-input textarea::-moz-placeholder{color:var(--gov-form-state-color-error, var(--gov-color-error-300))}[invalid=""].gov-form-input input::placeholder,[invalid=""].gov-form-input select::placeholder,[invalid=""].gov-form-input textarea::placeholder,[invalid=true i].gov-form-input input::placeholder,[invalid=true i].gov-form-input select::placeholder,[invalid=true i].gov-form-input textarea::placeholder,[invalid="1"].gov-form-input input::placeholder,[invalid="1"].gov-form-input select::placeholder,[invalid="1"].gov-form-input textarea::placeholder{color:var(--gov-form-state-color-error, var(--gov-color-error-300))}[invalid=""].gov-form-input *[slot=left-icon],[invalid=""].gov-form-input *[slot=right-icon],[invalid=true i].gov-form-input *[slot=left-icon],[invalid=true i].gov-form-input *[slot=right-icon],[invalid="1"].gov-form-input *[slot=left-icon],[invalid="1"].gov-form-input *[slot=right-icon]{color:var(--gov-form-state-color-error, var(--gov-color-error))}[success=""].gov-form-input *[slot=right-icon],[success=true i].gov-form-input *[slot=right-icon],[success="1"].gov-form-input *[slot=right-icon]{color:var(--gov-form-state-color-success, var(--gov-color-success))}[success=""].gov-form-input *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),[success=true i].gov-form-input *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),[success="1"].gov-form-input *[slot=right-icon]:not(.icon-validation):not(.icon-arrow){display:none}[size=m].gov-form-input{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);gap:0.5rem var(--gov-form-input-core-m-icon-size, 1rem)}[size=m].gov-form-input input,[size=m].gov-form-input 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-input *[slot=left-icon],[size=m].gov-form-input *[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-input *[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-input *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-m-icon-padding, 2.5rem)}[size=m].gov-form-input *[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-input *[slot=right-icon]~input,[size=m].gov-form-input *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-m-icon-padding, 2.5rem)}[size=l].gov-form-input{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);gap:0.5rem var(--gov-form-input-core-l-icon-size, 1rem)}[size=l].gov-form-input input,[size=l].gov-form-input 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-input *[slot=left-icon],[size=l].gov-form-input *[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-input *[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-input *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-l-icon-padding, 2.5rem)}[size=l].gov-form-input *[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-input *[slot=right-icon]~input,[size=l].gov-form-input *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-l-icon-padding, 2.5rem)}[size=xl].gov-form-input{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing);gap:0.5rem var(--gov-form-input-core-xl-icon-size, 1.25rem)}[size=xl].gov-form-input input,[size=xl].gov-form-input 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-input *[slot=left-icon],[size=xl].gov-form-input *[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-input *[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-input *[slot=left-icon]~input{padding-left:var(--gov-form-input-core-xl-icon-padding, 3rem)}[size=xl].gov-form-input *[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-input *[slot=right-icon]~input,[size=xl].gov-form-input *[slot=right-icon]~select{padding-right:var(--gov-form-input-core-xl-icon-padding, 3rem)}.gov-form-input[invalid=""] *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),.gov-form-input[invalid=true i] *[slot=right-icon]:not(.icon-validation):not(.icon-arrow),.gov-form-input[invalid="1"] *[slot=right-icon]:not(.icon-validation):not(.icon-arrow){display:none}.gov-form-input[type=reset] input{border-width:0}.gov-form-input[type=reset] input:focus{outline:none}';var z;(function(o){o["INPUT"]="input";o["TEXTAREA"]="textarea"})(z||(z={}));const b=class{constructor(t){o(this,t);this.govFocus=i(this,"gov-focus",7);this.govBlur=i(this,"gov-blur",7);this.govInput=i(this,"gov-input",7);this.govKeyUp=i(this,"gov-keyup",7);this.value=undefined;this.identifier=undefined;this.variant=undefined;this.success=undefined;this.size="m";this.name=undefined;this.multiline=undefined;this.rows=undefined;this.cols=undefined;this.required=false;this.disabled=undefined;this.placeholder=undefined;this.readonly=undefined;this.minlength=undefined;this.maxlength=undefined;this.autocomplete=undefined;this.autocorrect=undefined;this.type=undefined;this.inputType="text";this.role=undefined;this.invalid=undefined;this.wcagDescribedBy=undefined;this.wcagLabelledBy=undefined;this.wcagOwns=undefined;this.wcagAutocomplete=undefined;this.wcagExpanded=undefined;this.focused=undefined;this.h=g(this.host);this.inputId=v("GovInput");this.f=n(g(this.host))}validateVariant(o){m(s,o,a.root)}validateSize(o){m(l,o,a.root)}componentWillLoad(){this.validateVariant(this.variant);this.validateSize(this.size);this.f.passAttrToControl("type",this.multiline?z.TEXTAREA:z.INPUT);this.f.passAttrToLabel("required",String(this.required))}async componentDidRender(){if(f()){await u(500);await this.validateWcag()}}render(){const o=this.multiline?z.TEXTAREA:z.INPUT;return t(e,{class:a.root,size:this.size,variant:this.variant,type:this.type},this.h.hasSlot("prefix")&&t("slot",{name:"prefix"}),t("span",{class:"element"},this.h.hasSlot("left-icon")&&t("slot",{name:"left-icon"}),this.h.hasSlot("right-icon")&&!(this.success||this.invalid)&&t("slot",{name:"right-icon"}),this.success&&!this.multiline&&t("gov-icon",{slot:"right-icon",class:"icon-validation",name:"check-lg"}),this.invalid&&!this.multiline&&t("gov-icon",{slot:"right-icon",class:"icon-validation",name:"exclamation-lg"}),t(o,{type:this.inputType,disabled:this.disabled,id:this.identifier||this.inputId,name:this.name,onFocus:this.onFocusHandler.bind(this),onInput:this.onInputHandler.bind(this),onBlur:this.onBlurHandler.bind(this),onKeyUp:this.onKeyUpHandler.bind(this),ref:o=>this.inputRef=o,placeholder:this.placeholder,value:this.value,readonly:c(this.readonly),autocomplete:p(this.autocomplete),autocorrect:p(this.autocorrect),minlength:this.minlength,maxlength:this.maxlength,required:this.required,rows:this.rows,cols:this.cols,role:this.role,"aria-required":c(this.required),"aria-invalid":c(this.invalid),"aria-disabled":c(this.disabled),"aria-describedby":this.wcagDescribedBy,"aria-labelledby":this.wcagLabelledBy,"aria-owns":this.wcagOwns,"aria-expanded":c(this.wcagExpanded),"aria-autocomplete":this.wcagAutocomplete})),this.h.hasSlot("sufix")&&t("slot",{name:"sufix"}))}onFocusHandler(o){o.stopPropagation();this.focused=true;this.govFocus.emit(o)}onBlurHandler(o){o.stopPropagation();this.focused=false;this.govBlur.emit(o)}onKeyUpHandler(o){o.stopPropagation();this.govKeyUp.emit(o)}onInputHandler(o){this.value=o.target.value;o.stopPropagation();this.govInput.emit(o)}async setFocus(o){return this.inputRef.focus(o)}async setValue(o){this.value=o}async clearValue(){this.value="";this.inputRef.value=""}async getInstance(){return this.inputRef}async validateWcag(){d(this.wcagDescribedBy,"wcag-described-by",a.root);d(this.wcagLabelledBy,"wcag-labelled-by",a.root);d(this.wcagOwns,"wcag-owns",a.root);h(this.identifier||this.inputId,this.wcagLabelledBy,a.root)}get host(){return r(this)}static get watchers(){return{variant:["validateVariant"],size:["validateSize"]}}};b.style=x;export{b as gov_form_input};
+//# sourceMappingURL=p-9bdce72b.entry.js.map

package/dist/core/{p-8d5c9030.entry.js.map → p-9bdce72b.entry.js.map}

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

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

@@ -0,0 +1,2 @@
+import{r as i,h as t,H as e,g as d}from"./p-4af5e4f4.js";import{a as g}from"./p-ffb7495c.js";import{g as s}from"./p-3f37ddb6.js";const m='.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-grid-item{border:0 solid transparent;-o-border-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3C/svg%3E");border-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3C/svg%3E")}.gov-grid-item[size="1/12"]{width:8.3333333333%}.gov-grid-item[size="2/12"]{width:16.6666666667%}.gov-grid-item[size="3/12"]{width:25%}.gov-grid-item[size="4/12"]{width:33.3333333333%}.gov-grid-item[size="5/12"]{width:41.6666666667%}.gov-grid-item[size="6/12"]{width:50%}.gov-grid-item[size="7/12"]{width:58.3333333333%}.gov-grid-item[size="8/12"]{width:66.6666666667%}.gov-grid-item[size="9/12"]{width:75%}.gov-grid-item[size="10/12"]{width:83.3333333333%}.gov-grid-item[size="11/12"]{width:91.6666666667%}.gov-grid-item[size="12/12"]{width:100%}@media (min-width: 30em){.gov-grid-item[size-sm="1/12"]{width:8.3333333333%}.gov-grid-item[size-sm="2/12"]{width:16.6666666667%}.gov-grid-item[size-sm="3/12"]{width:25%}.gov-grid-item[size-sm="4/12"]{width:33.3333333333%}.gov-grid-item[size-sm="5/12"]{width:41.6666666667%}.gov-grid-item[size-sm="6/12"]{width:50%}.gov-grid-item[size-sm="7/12"]{width:58.3333333333%}.gov-grid-item[size-sm="8/12"]{width:66.6666666667%}.gov-grid-item[size-sm="9/12"]{width:75%}.gov-grid-item[size-sm="10/12"]{width:83.3333333333%}.gov-grid-item[size-sm="11/12"]{width:91.6666666667%}.gov-grid-item[size-sm="12/12"]{width:100%}}@media (min-width: 48em){.gov-grid-item[size-md="1/12"]{width:8.3333333333%}.gov-grid-item[size-md="2/12"]{width:16.6666666667%}.gov-grid-item[size-md="3/12"]{width:25%}.gov-grid-item[size-md="4/12"]{width:33.3333333333%}.gov-grid-item[size-md="5/12"]{width:41.6666666667%}.gov-grid-item[size-md="6/12"]{width:50%}.gov-grid-item[size-md="7/12"]{width:58.3333333333%}.gov-grid-item[size-md="8/12"]{width:66.6666666667%}.gov-grid-item[size-md="9/12"]{width:75%}.gov-grid-item[size-md="10/12"]{width:83.3333333333%}.gov-grid-item[size-md="11/12"]{width:91.6666666667%}.gov-grid-item[size-md="12/12"]{width:100%}}@media (min-width: 64em){.gov-grid-item[size-lg="1/12"]{width:8.3333333333%}.gov-grid-item[size-lg="2/12"]{width:16.6666666667%}.gov-grid-item[size-lg="3/12"]{width:25%}.gov-grid-item[size-lg="4/12"]{width:33.3333333333%}.gov-grid-item[size-lg="5/12"]{width:41.6666666667%}.gov-grid-item[size-lg="6/12"]{width:50%}.gov-grid-item[size-lg="7/12"]{width:58.3333333333%}.gov-grid-item[size-lg="8/12"]{width:66.6666666667%}.gov-grid-item[size-lg="9/12"]{width:75%}.gov-grid-item[size-lg="10/12"]{width:83.3333333333%}.gov-grid-item[size-lg="11/12"]{width:91.6666666667%}.gov-grid-item[size-lg="12/12"]{width:100%}}@media (min-width: 75em){.gov-grid-item[size-xl="1/12"]{width:8.3333333333%}.gov-grid-item[size-xl="2/12"]{width:16.6666666667%}.gov-grid-item[size-xl="3/12"]{width:25%}.gov-grid-item[size-xl="4/12"]{width:33.3333333333%}.gov-grid-item[size-xl="5/12"]{width:41.6666666667%}.gov-grid-item[size-xl="6/12"]{width:50%}.gov-grid-item[size-xl="7/12"]{width:58.3333333333%}.gov-grid-item[size-xl="8/12"]{width:66.6666666667%}.gov-grid-item[size-xl="9/12"]{width:75%}.gov-grid-item[size-xl="10/12"]{width:83.3333333333%}.gov-grid-item[size-xl="11/12"]{width:91.6666666667%}.gov-grid-item[size-xl="12/12"]{width:100%}}';const o=class{constructor(t){i(this,t);this.size="12/12";this.sizeSm=undefined;this.sizeMd=undefined;this.sizeLg=undefined;this.sizeXl=undefined;this.h=s(this.host)}render(){return t(e,{class:this.h.classes(g.root),role:"listitem",size:this.size,"size-sm":this.sizeSm,"size-md":this.sizeMd,"size-lg":this.sizeLg,"size-xl":this.sizeXl},t("slot",null))}get host(){return d(this)}};o.style=m;export{o as gov_grid_item};
+//# sourceMappingURL=p-a4d23e73.entry.js.map

package/dist/core/{p-25380da6.entry.js.map → p-a4d23e73.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/core/src/components/gov-grid/gov-grid-item.scss?tag=gov-grid-item","../../../packages/core/src/components/gov-grid/gov-grid-item.tsx"],"names":["govGridItemCss","GovGridItem","[object Object]","hostRef","this","h","govHost","host","Host","class","classes","GridItemClass","root","role","size","size-sm","sizeSm","size-md","sizeMd","size-lg","sizeLg","size-xl","sizeXl"],"mappings":"iIAAA,MAAMA,EAAiB,k1GCSVC,EAAW,MAGvBC,YAAAC,uBAQgC,gGAP/BC,KAAKC,EAAIC,EAAQF,KAAKG,MAyBvBL,SACC,OACCG,EAACG,EAAI,CACJC,MAAOL,KAAKC,EAAEK,QAAQC,EAAcC,MACpCC,KAAK,WACLC,KAAMV,KAAKU,KAAIC,UACNX,KAAKY,OAAMC,UACXb,KAAKc,OAAMC,UACXf,KAAKgB,OAAMC,UACXjB,KAAKkB,QAEdjB,EAAA,OAAA","sourcesContent":["/*\n *   Grid Cell\n */\n\n$class: \".gov-grid-item\";\n\n#{$class} {\n\t@include generateGridSize();\n\tborder: 0 solid transparent;\n\n\t// hide the border in MS high contrast mode\n\tborder-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E\");\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { GridItemClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-grid-item',\n\tstyleUrl: 'gov-grid-item.scss',\n})\nexport class GovGridItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovGridItemElement\n\t/**\n\t * Cell size as a fraction of 1/12 of the grid size\n\t */\n\t@Prop() readonly size: string = '12/12'\n\t/**\n\t * Cell size for SM media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-sm' }) readonly sizeSm: string\n\t/**\n\t * Cell size for MD media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-md' }) readonly sizeMd: string\n\t/**\n\t * Cell size for LG media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-lg' }) readonly sizeLg: string\n\t/**\n\t * Cell size for XL media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-xl' }) readonly sizeXl: string\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(GridItemClass.root)}\n\t\t\t\trole=\"listitem\"\n\t\t\t\tsize={this.size}\n\t\t\t\tsize-sm={this.sizeSm}\n\t\t\t\tsize-md={this.sizeMd}\n\t\t\t\tsize-lg={this.sizeLg}\n\t\t\t\tsize-xl={this.sizeXl}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"sources":["../../../packages/core/src/components/gov-grid/gov-grid-item.scss?tag=gov-grid-item","../../../packages/core/src/components/gov-grid/gov-grid-item.tsx"],"names":["govGridItemCss","GovGridItem","[object Object]","hostRef","this","h","govHost","host","Host","class","classes","GridItemClass","root","role","size","size-sm","sizeSm","size-md","sizeMd","size-lg","sizeLg","size-xl","sizeXl"],"mappings":"iIAAA,MAAMA,EAAiB,m/GCSVC,EAAW,MAGvBC,YAAAC,uBAQgC,gGAP/BC,KAAKC,EAAIC,EAAQF,KAAKG,MAyBvBL,SACC,OACCG,EAACG,EAAI,CACJC,MAAOL,KAAKC,EAAEK,QAAQC,EAAcC,MACpCC,KAAK,WACLC,KAAMV,KAAKU,KAAIC,UACNX,KAAKY,OAAMC,UACXb,KAAKc,OAAMC,UACXf,KAAKgB,OAAMC,UACXjB,KAAKkB,QAEdjB,EAAA,OAAA","sourcesContent":["/*\n *   Grid Cell\n */\n\n$class: \".gov-grid-item\";\n\n#{$class} {\n\t@include generateGridSize();\n\tborder: 0 solid transparent;\n\n\t// hide the border in MS high contrast mode\n\tborder-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E\");\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { GridItemClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-grid-item',\n\tstyleUrl: 'gov-grid-item.scss',\n})\nexport class GovGridItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovGridItemElement\n\t/**\n\t * Cell size as a fraction of 1/12 of the grid size\n\t */\n\t@Prop() readonly size: string = '12/12'\n\t/**\n\t * Cell size for SM media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-sm' }) readonly sizeSm: string\n\t/**\n\t * Cell size for MD media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-md' }) readonly sizeMd: string\n\t/**\n\t * Cell size for LG media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-lg' }) readonly sizeLg: string\n\t/**\n\t * Cell size for XL media query and up as a fraction of 12 of the grid size\n\t */\n\t@Prop({ attribute: 'size-xl' }) readonly sizeXl: string\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(GridItemClass.root)}\n\t\t\t\trole=\"listitem\"\n\t\t\t\tsize={this.size}\n\t\t\t\tsize-sm={this.sizeSm}\n\t\t\t\tsize-md={this.sizeMd}\n\t\t\t\tsize-lg={this.sizeLg}\n\t\t\t\tsize-xl={this.sizeXl}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as i,H as o,g as a}from"./p-4af5e4f4.js";import{v as e}from"./p-26acf964.js";import{S as r,a as p,b as n}from"./p-9144dde1.js";import{g as c}from"./p-3f37ddb6.js";import"./p-561fa17b.js";import"./p-ff7365ae.js";import"./p-55500e5a.js";import"./p-03990da5.js";const m=".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-stepper{position:relative;display:block;width:100%}";const f=class{constructor(i){s(this,i);this.govChange=t(this,"gov-change",7);this.size="m";this.h=c(this.host)}validateSize(s){e(n,s,p.root)}componentWillLoad(){this.validateSize(this.size)}componentDidLoad(){this.host.querySelectorAll(r.root).forEach((s=>{s.setAttribute("size",this.size);s.addEventListener("gov-change",(s=>{s.stopPropagation();this.govChange.emit(s.detail)}))}))}render(){return i(o,{class:this.h.classes(p.root),role:"list",size:this.size},i("slot",null))}get host(){return a(this)}static get watchers(){return{size:["validateSize"]}}};f.style=m;export{f as gov_stepper};
+//# sourceMappingURL=p-a89c27c1.entry.js.map

package/dist/core/{p-3e9ba1c1.entry.js.map → p-a89c27c1.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/core/src/components/gov-stepper/gov-stepper.scss?tag=gov-stepper","../../../packages/core/src/components/gov-stepper/gov-stepper.tsx"],"names":["govStepperCss","GovStepper","[object Object]","hostRef","this","h","govHost","host","newValue","validateProp","StepperSizes","StepperClass","root","validateSize","size","querySelectorAll","StepperItemClass","forEach","child","setAttribute","addEventListener","e","stopPropagation","govChange","emit","detail","Host","class","classes","role"],"mappings":"0RAAA,MAAMA,EAAgB,sPCYTC,EAAU,MAGtBC,YAAAC,6DAQ2C,IAP1CC,KAAKC,EAAIC,EAAQF,KAAKG,MAcvBL,aAAaM,GACZC,EAAaC,EAAcF,EAAUG,EAAaC,MAGnDV,oBACCE,KAAKS,aAAaT,KAAKU,MAGxBZ,mBACCE,KAAKG,KAAKQ,iBAAiBC,EAAiBJ,MAAMK,SAASC,IAC1DA,EAAMC,aAAa,OAAQf,KAAKU,MAChCI,EAAME,iBAAiB,cAAeC,IACrCA,EAAEC,kBACFlB,KAAKmB,UAAUC,KAAKH,EAAEI,cAKzBvB,SACC,OACCG,EAACqB,EAAI,CAACC,MAAOvB,KAAKC,EAAEuB,QAAQjB,EAAaC,MAAOiB,KAAK,OAAOf,KAAMV,KAAKU,MACtET,EAAA,OAAA","sourcesContent":["/*\n *   Stepper\n */\n\n$class: \".gov-stepper\";\n\n#{$class} {\n\t@include base();\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StepperClass, StepperItemClass, StepperSizes, StepperSizesType } from './constants'\nimport { GovStepperItemCustomEvent } from '../../components'\nimport { GovStepperItemChangeEvent } from './gov-stepper-item.d'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { govHost } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-stepper',\n\tstyleUrl: 'gov-stepper.scss',\n})\nexport class GovStepper {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovStepperElement\n\t/**\n\t * Size of stepper\n\t */\n\t@Prop() readonly size?: StepperSizesType = 'm'\n\t/**\n\t * Called when the Stepper state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovStepperItemChangeEvent>\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(StepperSizes, newValue, StepperClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(StepperItemClass.root).forEach((child: HTMLGovStepperItemElement) => {\n\t\t\tchild.setAttribute('size', this.size)\n\t\t\tchild.addEventListener('gov-change', (e: GovStepperItemCustomEvent<GovStepperItemChangeEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit(e.detail)\n\t\t\t})\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(StepperClass.root)} role=\"list\" size={this.size}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"sources":["../../../packages/core/src/components/gov-stepper/gov-stepper.scss?tag=gov-stepper","../../../packages/core/src/components/gov-stepper/gov-stepper.tsx"],"names":["govStepperCss","GovStepper","[object Object]","hostRef","this","h","govHost","host","newValue","validateProp","StepperSizes","StepperClass","root","validateSize","size","querySelectorAll","StepperItemClass","forEach","child","setAttribute","addEventListener","e","stopPropagation","govChange","emit","detail","Host","class","classes","role"],"mappings":"0RAAA,MAAMA,EAAgB,uZCYTC,EAAU,MAGtBC,YAAAC,6DAQ2C,IAP1CC,KAAKC,EAAIC,EAAQF,KAAKG,MAcvBL,aAAaM,GACZC,EAAaC,EAAcF,EAAUG,EAAaC,MAGnDV,oBACCE,KAAKS,aAAaT,KAAKU,MAGxBZ,mBACCE,KAAKG,KAAKQ,iBAAiBC,EAAiBJ,MAAMK,SAASC,IAC1DA,EAAMC,aAAa,OAAQf,KAAKU,MAChCI,EAAME,iBAAiB,cAAeC,IACrCA,EAAEC,kBACFlB,KAAKmB,UAAUC,KAAKH,EAAEI,cAKzBvB,SACC,OACCG,EAACqB,EAAI,CAACC,MAAOvB,KAAKC,EAAEuB,QAAQjB,EAAaC,MAAOiB,KAAK,OAAOf,KAAMV,KAAKU,MACtET,EAAA,OAAA","sourcesContent":["/*\n *   Stepper\n */\n\n$class: \".gov-stepper\";\n\n#{$class} {\n\t@include base();\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StepperClass, StepperItemClass, StepperSizes, StepperSizesType } from './constants'\nimport { GovStepperItemCustomEvent } from '../../components'\nimport { GovStepperItemChangeEvent } from './gov-stepper-item.d'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { govHost } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-stepper',\n\tstyleUrl: 'gov-stepper.scss',\n})\nexport class GovStepper {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovStepperElement\n\t/**\n\t * Size of stepper\n\t */\n\t@Prop() readonly size?: StepperSizesType = 'm'\n\t/**\n\t * Called when the Stepper state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovStepperItemChangeEvent>\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(StepperSizes, newValue, StepperClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(StepperItemClass.root).forEach((child: HTMLGovStepperItemElement) => {\n\t\t\tchild.setAttribute('size', this.size)\n\t\t\tchild.addEventListener('gov-change', (e: GovStepperItemCustomEvent<GovStepperItemChangeEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit(e.detail)\n\t\t\t})\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(StepperClass.root)} role=\"list\" size={this.size}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,2 @@
+import{r as t,h as a,H as e,g as s}from"./p-4af5e4f4.js";import{N as i}from"./p-a6d14a47.js";import{v as o}from"./p-364b4792.js";import{c as n}from"./p-c20102ff.js";import{d as r}from"./p-03990da5.js";import"./p-561fa17b.js";import"./p-24636c53.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-nav{position:relative;display:block;width:100%;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);background:var(--gov-nav-bg, var(--gov-color-primary));font-weight:bold;letter-spacing:0.0125em;text-transform:uppercase}@media (min-width: 48em){.gov-nav{text-align:center}.gov-nav__nav{display:flex;justify-content:space-between}}";const c=class{constructor(a){t(this,a);this.wcagLabel=undefined;this.wcagLabelledBy=undefined}async componentDidRender(){if(n()){await r(500);await this.validateWcag()}}render(){return a(e,{class:i.root},a("nav",{class:i.nav,role:"list","arial-label":this.wcagLabel,"arial-labelledby":this.wcagLabelledBy},a("slot",null)))}async validateWcag(){o(this.wcagLabel,this.wcagLabelledBy,i.root)}get host(){return s(this)}};c.style=p;export{c as gov_nav};
+//# sourceMappingURL=p-aba39622.entry.js.map

package/dist/core/{p-a5e34e93.entry.js.map → p-aba39622.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/core/src/components/gov-nav/gov-nav.scss?tag=gov-nav","../../../packages/core/src/components/gov-nav/gov-nav.tsx"],"names":["govNavCss","GovNav","[object Object]","canValidateWcagOnRender","delay","this","validateWcag","h","Host","class","NavClass","root","nav","role","arial-label","wcagLabel","arial-labelledby","wcagLabelledBy","validateWcagLabel"],"mappings":"yPAAA,MAAMA,EAAY,moBCULC,EAAM,sFAYlBC,2BACC,GAAIC,IAA2B,OACxBC,EAAM,WACNC,KAAKC,gBAIbJ,SACC,OACCK,EAACC,EAAI,CAACC,MAAOC,EAASC,MACrBJ,EAAA,MAAA,CAAKE,MAAOC,EAASE,IAAKC,KAAM,OAAMC,cAAeT,KAAKU,UAASC,mBAAoBX,KAAKY,gBAC3FV,EAAA,OAAA,QAUJL,qBACCgB,EAAkBb,KAAKU,UAAWV,KAAKY,eAAgBP,EAASC","sourcesContent":["/*\n *   Nav\n */\n\n$class: \".gov-nav\";\n\n#{$class} {\n\t@include base();\n\t@include typography($font-size-s);\n\tbackground: $nav-bg;\n\tfont-weight: bold;\n\tletter-spacing: 0.0125em;\n\ttext-transform: uppercase;\n\n\t// MQ\n\t@include mq($from: md) {\n\t\ttext-align: center;\n\t\t&__nav {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: space-between;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Method, Prop } from '@stencil/core'\nimport { NavClass } from './constants'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\n\n@Component({\n\ttag: 'gov-nav',\n\tstyleUrl: 'gov-nav.scss',\n})\nexport class GovNav {\n\t@Element() readonly host: HTMLGovNavElement\n\n\t/**\n\t * Adds accessible label for the accordion that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={NavClass.root}>\n\t\t\t\t<nav class={NavClass.nav} role={'list'} arial-label={this.wcagLabel} arial-labelledby={this.wcagLabelledBy}>\n\t\t\t\t\t<slot />\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, NavClass.root)\n\t}\n}\n"]}
+{"version":3,"sources":["../../../packages/core/src/components/gov-nav/gov-nav.scss?tag=gov-nav","../../../packages/core/src/components/gov-nav/gov-nav.tsx"],"names":["govNavCss","GovNav","[object Object]","canValidateWcagOnRender","delay","this","validateWcag","h","Host","class","NavClass","root","nav","role","arial-label","wcagLabel","arial-labelledby","wcagLabelledBy","validateWcagLabel"],"mappings":"yPAAA,MAAMA,EAAY,oyBCULC,EAAM,sFAYlBC,2BACC,GAAIC,IAA2B,OACxBC,EAAM,WACNC,KAAKC,gBAIbJ,SACC,OACCK,EAACC,EAAI,CAACC,MAAOC,EAASC,MACrBJ,EAAA,MAAA,CAAKE,MAAOC,EAASE,IAAKC,KAAM,OAAMC,cAAeT,KAAKU,UAASC,mBAAoBX,KAAKY,gBAC3FV,EAAA,OAAA,QAUJL,qBACCgB,EAAkBb,KAAKU,UAAWV,KAAKY,eAAgBP,EAASC","sourcesContent":["/*\n *   Nav\n */\n\n$class: \".gov-nav\";\n\n#{$class} {\n\t@include base();\n\t@include typography($font-size-s);\n\tbackground: $nav-bg;\n\tfont-weight: bold;\n\tletter-spacing: 0.0125em;\n\ttext-transform: uppercase;\n\n\t// MQ\n\t@include mq($from: md) {\n\t\ttext-align: center;\n\t\t&__nav {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: space-between;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Method, Prop } from '@stencil/core'\nimport { NavClass } from './constants'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\n\n@Component({\n\ttag: 'gov-nav',\n\tstyleUrl: 'gov-nav.scss',\n})\nexport class GovNav {\n\t@Element() readonly host: HTMLGovNavElement\n\n\t/**\n\t * Adds accessible label for the accordion that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={NavClass.root}>\n\t\t\t\t<nav class={NavClass.nav} role={'list'} arial-label={this.wcagLabel} arial-labelledby={this.wcagLabelledBy}>\n\t\t\t\t\t<slot />\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, NavClass.root)\n\t}\n}\n"]}

package/dist/core/p-b2275b3d.js

@@ -0,0 +1,2 @@
+import{S as o}from"./p-55500e5a.js";import{V as t}from"./p-ff7365ae.js";import{p as s}from"./p-03990da5.js";const n=s(o,["_S","_M","_L","_XL"]);const a=s(t,["PRIMARY","SECONDARY","SUCCESS","ERROR","WARNING"]);var r;(function(o){o["SOLID"]="solid";o["OUTLINED"]="outlined";o["BASE"]="base";o["LINK"]="link"})(r||(r={}));var i;(function(o){o["SUBMIT"]="submit";o["BUTTON"]="button";o["RESET"]="reset"})(i||(i={}));var e;(function(o){o["BLANK"]="_blank";o["SELF"]="_self";o["NEW"]="_new"})(e||(e={}));const f={root:"gov-button",rootWithIcon:"gov-button--w-icon"};export{a as B,i as N,r as T,n as a,f as b};
+//# sourceMappingURL=p-b2275b3d.js.map

package/dist/core/p-b2275b3d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../packages/core/src/components/gov-button/constants.ts"],"names":["ButtonSizes","pick","Sizes","ButtonVariants","Variants","Type","NativeType","ButtonTarget","ButtonClass","root","rootWithIcon"],"mappings":"kHAKaA,EAAcC,EAAKC,EAAO,CAAC,KAAM,KAAM,KAAM,cAG7CC,EAAiBF,EAAKG,EAAU,CAAC,UAAW,YAAa,UAAW,QAAS,gBAG9EC,GAAZ,SAAYA,GACXA,EAAA,SAAA,QACAA,EAAA,YAAA,WACAA,EAAA,QAAA,OACAA,EAAA,QAAA,QAJD,CAAYA,IAAAA,EAAI,SASJC,GAAZ,SAAYA,GACXA,EAAA,UAAA,SACAA,EAAA,UAAA,SACAA,EAAA,SAAA,SAHD,CAAYA,IAAAA,EAAU,KAQtB,IAAYC,GAAZ,SAAYA,GACXA,EAAA,SAAA,SACAA,EAAA,QAAA,QACAA,EAAA,OAAA,QAHD,CAAYA,IAAAA,EAAY,WAOXC,EAAc,CAC1BC,KAAM,aACNC,aAAc","sourcesContent":["import { Sizes } from '../../core/constants/sizes'\nimport { Variants } from '../../core/constants/variants'\nimport { ValueOf } from '../../types/interfaces'\nimport { pick } from '../../utils/utils'\n\nexport const ButtonSizes = pick(Sizes, ['_S', '_M', '_L', '_XL'])\nexport type ButtonSizesType = `${ValueOf<typeof ButtonSizes>}`\n\nexport const ButtonVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'SUCCESS', 'ERROR', 'WARNING'])\nexport type ButtonVariantType = `${ValueOf<typeof ButtonVariants>}`\n\nexport enum Type {\n\tSOLID = 'solid',\n\tOUTLINED = 'outlined',\n\tBASE = 'base',\n\tLINK = 'link',\n}\n\nexport type TypesType = `${ValueOf<typeof Type>}`\n\nexport enum NativeType {\n\tSUBMIT = 'submit',\n\tBUTTON = 'button',\n\tRESET = 'reset',\n}\n\nexport type NativeTypesType = `${ValueOf<typeof NativeType>}`\n\nexport enum ButtonTarget {\n\tBLANK = '_blank',\n\tSELF = '_self',\n\tNEW = '_new',\n}\nexport type ButtonTargetType = `${ValueOf<typeof ButtonTarget>}`\n\nexport const ButtonClass = {\n\troot: 'gov-button',\n\trootWithIcon: 'gov-button--w-icon',\n}\n"]}

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

@@ -0,0 +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

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

@@ -1 +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","setTimeout","govBlur","target","govInput","selected","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 { GovFormAutocompleteItem } from './gov-form-autocomplete.types'\nimport { toBoolAttr } from '../../../helpers/Dom/template'\nimport { Nullable } from '../../../types/interfaces'\n\n@Component({\n\ttag: 'gov-form-autocomplete',\n\tstyleUrl: 'gov-form-autocomplete.scss',\n})\nexport class GovFormAutocomplete {\n\tprivate inputRef?: HTMLGovFormInputElement\n\tprivate readonly listBoxId: string\n\tprivate searchCallback: (value: string) => Promise<GovFormAutocompleteItem[]>\n\tprivate templateResolver: (item: GovFormAutocompleteItem, selected: boolean) => string = item => item[this.nameKey]\n\n\tconstructor() {\n\t\tthis.listBoxId = createID('GovListBox')\n\t}\n\n\t@Element() host: HTMLGovFormInputElement\n\t/**\n\t * Value of input\n\t */\n\t@Prop({ reflect: true, mutable: true }) value = ''\n\t/**\n\t * Custom input identifier.\n\t */\n\t@Prop({ attribute: 'identifier' }) readonly identifier: string\n\t/**\n\t * Style variation of the form input.\n\t */\n\t@Prop() readonly variant?: VariantType\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<FocusEvent>\n\t/**\n\t * Emitted when the input loses focus.\n\t */\n\t@Event({ eventName: 'gov-blur' }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: 'gov-input' }) govInput: EventEmitter<InputEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: 'gov-select' }) govSelect: EventEmitter<GovFormAutocompleteItem>\n\t@State() focused: boolean\n\t@State() processing = false\n\t@State() arrowCounter = -1\n\t@State() list: GovFormAutocompleteItem[] = []\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(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(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tsetTimeout(() => (this.list = []), 200)\n\t\tthis.arrowCounter = -1\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onInputHandler(e: InputEvent) {\n\t\tthis.value = (e.target as HTMLGovFormInputElement).value\n\t\te.stopPropagation()\n\t\tthis.govInput.emit(e)\n\t\tthis.doSearch()\n\t}\n\n\tprivate onSelectHandler(index = -1) {\n\t\tlet selected: Nullable<GovFormAutocompleteItem> = null\n\t\tif (index > -1) {\n\t\t\tselected = this.list[index]\n\t\t} else if (has(this.arrowCounter, this.list)) {\n\t\t\tselected = this.list[this.arrowCounter]\n\t\t}\n\t\tif (selected) {\n\t\t\tthis.govSelect.emit(selected)\n\t\t\tthis.list = []\n\t\t\tif (has(this.nameKey, selected) && typeof selected[this.nameKey] === 'string') {\n\t\t\t\tthis.value = selected[this.nameKey]\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onKeyUpHandler(e: CustomEvent) {\n\t\tconst event = e.detail as KeyboardEvent\n\t\te.stopPropagation()\n\t\tif (event.keyCode === 38) this.onArrowUp()\n\t\telse if (event.keyCode === 40) this.onArrowDown()\n\t\telse if (event.keyCode === 13) this.onSelectHandler()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.inputRef.focus(options)\n\t}\n\n\t/**\n\t * Clears whisperer value\n\t */\n\t@Method()\n\tasync clearValue(): Promise<void> {\n\t\tthis.value = ''\n\t\tthis.inputRef.value = ''\n\n\t\tawait this.inputRef.clearValue()\n\t}\n\n\t/**\n\t * Set a custom asynchronous function for the whisperer\n\t */\n\t@Method()\n\tasync setSearchCallback(callback: (value: string) => Promise<any>) {\n\t\tthis.searchCallback = callback\n\t}\n\n\t/**\n\t * Setting a custom whisper result template\n\t * @param callback\n\t */\n\t@Method()\n\tasync setTemplateResolver(callback: (item: GovFormAutocompleteItem) => string) {\n\t\tthis.templateResolver = callback\n\t}\n}\n"]}
+{"version":3,"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","setTimeout","govBlur","target","govInput","selected","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 { GovFormAutocompleteItem } from './gov-form-autocomplete.types'\nimport { toBoolAttr } from '../../../helpers/Dom/template'\nimport { Nullable } from '../../../types/interfaces'\n\n@Component({\n\ttag: 'gov-form-autocomplete',\n\tstyleUrl: 'gov-form-autocomplete.scss',\n})\nexport class GovFormAutocomplete {\n\tprivate inputRef?: HTMLGovFormInputElement\n\tprivate readonly listBoxId: string\n\tprivate searchCallback: (value: string) => Promise<GovFormAutocompleteItem[]>\n\tprivate templateResolver: (item: GovFormAutocompleteItem, selected: boolean) => string = item => item[this.nameKey]\n\n\tconstructor() {\n\t\tthis.listBoxId = createID('GovListBox')\n\t}\n\n\t@Element() host: HTMLGovFormInputElement\n\t/**\n\t * Value of input\n\t */\n\t@Prop({ reflect: true, mutable: true }) value = ''\n\t/**\n\t * Custom input identifier.\n\t */\n\t@Prop({ attribute: 'identifier' }) readonly identifier: string\n\t/**\n\t * Style variation of the form input.\n\t */\n\t@Prop() readonly variant?: VariantType\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<FocusEvent>\n\t/**\n\t * Emitted when the input loses focus.\n\t */\n\t@Event({ eventName: 'gov-blur' }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: 'gov-input' }) govInput: EventEmitter<InputEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({ eventName: 'gov-select' }) govSelect: EventEmitter<GovFormAutocompleteItem>\n\t@State() focused: boolean\n\t@State() processing = false\n\t@State() arrowCounter = -1\n\t@State() list: GovFormAutocompleteItem[] = []\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(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(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tsetTimeout(() => (this.list = []), 200)\n\t\tthis.arrowCounter = -1\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onInputHandler(e: InputEvent) {\n\t\tthis.value = (e.target as HTMLGovFormInputElement).value\n\t\te.stopPropagation()\n\t\tthis.govInput.emit(e)\n\t\tthis.doSearch()\n\t}\n\n\tprivate onSelectHandler(index = -1) {\n\t\tlet selected: Nullable<GovFormAutocompleteItem> = null\n\t\tif (index > -1) {\n\t\t\tselected = this.list[index]\n\t\t} else if (has(this.arrowCounter, this.list)) {\n\t\t\tselected = this.list[this.arrowCounter]\n\t\t}\n\t\tif (selected) {\n\t\t\tthis.govSelect.emit(selected)\n\t\t\tthis.list = []\n\t\t\tif (has(this.nameKey, selected) && typeof selected[this.nameKey] === 'string') {\n\t\t\t\tthis.value = selected[this.nameKey]\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onKeyUpHandler(e: CustomEvent) {\n\t\tconst event = e.detail as KeyboardEvent\n\t\te.stopPropagation()\n\t\tif (event.keyCode === 38) this.onArrowUp()\n\t\telse if (event.keyCode === 40) this.onArrowDown()\n\t\telse if (event.keyCode === 13) this.onSelectHandler()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.inputRef.focus(options)\n\t}\n\n\t/**\n\t * Clears whisperer value\n\t */\n\t@Method()\n\tasync clearValue(): Promise<void> {\n\t\tthis.value = ''\n\t\tthis.inputRef.value = ''\n\n\t\tawait this.inputRef.clearValue()\n\t}\n\n\t/**\n\t * Set a custom asynchronous function for the whisperer\n\t */\n\t@Method()\n\tasync setSearchCallback(callback: (value: string) => Promise<any>) {\n\t\tthis.searchCallback = callback\n\t}\n\n\t/**\n\t * Setting a custom whisper result template\n\t * @param callback\n\t */\n\t@Method()\n\tasync setTemplateResolver(callback: (item: GovFormAutocompleteItem) => string) {\n\t\tthis.templateResolver = callback\n\t}\n}\n"]}