npm - @gov-design-system-ce/components - Versions diffs - 0.0.6 → 0.0.8 - Mend

@gov-design-system-ce/components 0.0.6 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (566) hide show

package/dist/components/gov-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gov-card.js","mappings":"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","names":["GovCard"],"sources":["../../../packages/core/src/components/gov-card/constants.ts","../../../packages/core/src/components/gov-card/gov-card.scss?tag=gov-card","../../../packages/core/src/components/gov-card/gov-card.tsx"],"sourcesContent":["export const CardClass = {\n\troot: 'gov-card',\n\theader: 'gov-card__header',\n\ttitle: 'gov-card__title',\n\tinner: 'gov-card__inner',\n\timg: 'gov-card__img',\n\tmain: 'gov-card__main',\n\tcontent: 'gov-card__content',\n\ticon: 'gov-card__icon',\n\tbtns: 'gov-card__btns',\n\tfooter: 'gov-card__footer',\n\tarrow: 'gov-card__arrow',\n}\n","/\n Alert\n /\n\n$class: \".gov-card\";\n\n#{$class} {\n\t@include base(flex);\n\tflex-direction: column;\n\tborder: $card-border;\n\tborder-radius: $border-radius;\n\tbackground: $card-bg;\n\toverflow: hidden;\n\t&__header {\n\t\tgap: rem-calc(28);\n\t\twidth: 100%;\n\t\tpadding: rem-calc(24);\n\t\tborder-bottom: $card-border;\n\t\tborder-radius: 0;\n\t\ttext-align: left;\n\t\ttext-transform: none;\n\t\ttransition: background-color $t ease-in-out;\n\t}\n\t&__arrow {\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(16);\n\t\theight: rem-calc(16);\n\t\tcolor: $card-arrow-color;\n\t}\n\t&__title {\n\t\t@include general;\n\t\t@include typography($font-size-xl);\n\t\tcolor: $card-title-color;\n\t\tfont-weight: 700;\n\t}\n\t&__img {\n\t\twidth: 100%;\n\t\tmargin: 0;\n\t\tline-height: 1;\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\theight: auto;\n\t\t}\n\t}\n\t&__inner {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\t\t@include parameter(\"aria-hidden\") {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&__main {\n\t\tdisplay: flex;\n\t\tgap: 16px 24px;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\t\tpadding: rem-calc(24);\n\t}\n\t&__icon {\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(40);\n\t\theight: rem-calc(40);\n\t\tcolor: $card-icon-color;\n\t}\n\t&__btns {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tflex: 0 0 auto;\n\t\tflex-wrap: wrap;\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t}\n\t&__footer {\n\t\t@include reset-last-margin();\n\t\tpadding: rem-calc(16 24);\n\t\tbackground: $card-footer-bg;\n\t\tp {\n\t\t\t@include typography($font-size-s);\n\t\t}\n\t}\n\n\t// STATES\n\t@include parameter(\"is-expanded\") {\n\t\theight: 100%;\n\t}\n\n\t// VARIANTS\n\t@include parameter(\"collapsible\") {\n\t\t#{$class} {\n\t\t\t&__header {\n\t\t\t\t@include button-core();\n\t\t\t\t@include focus-outline($border-radius, rem-calc(-2));\n\t\t\t\tjustify-content: space-between;\n\t\t\t\ttext-align: left;\n\t\t\t\t@include hover() {\n\t\t\t\t\tbackground: $card-header-hover-bg;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// STATES\n\t\t@include parameter(\"is-expanded\") {\n\t\t\t#{$class} {\n\t\t\t\t&__header {\n\t\t\t\t\tborder-bottom: $card-border;\n\t\t\t\t}\n\t\t\t\t&__arrow {\n\t\t\t\t\ttransform: scale(-1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t// VARIANTS\n\t\t@include parameter(\"promotion\") {\n\t\t\t#{$class} {\n\t\t\t\t&__main {\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\tpadding: rem-calc(32);\n\t\t\t\t}\n\t\t\t\t&__icon {\n\t\t\t\t\twidth: rem-calc(48);\n\t\t\t\t\theight: rem-calc(48);\n\t\t\t\t}\n\t\t\t\t&__btns {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch, State, Method, Event, EventEmitter } from '@stencil/core'\nimport { CardClass } from './constants'\nimport { govHost, booleanString } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { createID } from '../../utils/string.utils'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { GovCardChangeEvent } from './interfaces'\n\n@Component({\n\ttag: 'gov-card',\n\tstyleUrl: 'gov-card.scss',\n})\nexport class GovCard {\n\tprivate h: GovHost\n\tprivate readonly headlineId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.headlineId = createID('GovCardHeadline')\n\t\tthis.contentId = createID('GovCardContent')\n\t}\n\n\t@Element() host: HTMLGovCardElement\n\n\t/\n\t Style variation of the card.\n\t /\n\t@Prop() readonly promotion: boolean = false\n\t/\n\t Item label of the card\n\t /\n\t@Prop() readonly label: string\n\t/\n\t Defines wether the card can be collapsible\n\t /\n\t@Prop() readonly collapsible: boolean = false\n\t/\n\t Defines whether the card is open or closed by default\n\t /\n\t@Prop() readonly expanded: boolean = false\n\t/\n\t Used to change the HMTL tag in the card headline for correct semantic structure\n\t /\n\t@Prop({ attribute: 'headline-tag' }) readonly headlineTag: string = 'h3'\n\t/\n\t Adds accessible label for the collapsible button that is only shown for screen readers.\n\t /\n\t@Prop({ attribute: 'wcag-trigger-label' }) wcagTriggerLabel: string\n\t/\n\t A string of identifiers that indicate alternative label elements for collapsible card\n\t /\n\t@Prop({ attribute: 'wcag-trigger-labelled-by' }) wcagTriggerLabelledBy: string\n\t/\n\t Called when the card toggle state changes\n\t /\n\t@Event({ eventName: 'gov-toggle' }) govToggle: EventEmitter<GovCardChangeEvent>\n\t@State() isExpanded: boolean\n\n\t@Watch('headlineTag')\n\tvalidateHeadlineTag(newValue: string): void {\n\t\tconst validTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span']\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${CardClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpanded = this.label ? this.expanded : true\n\t\tthis.validateHeadlineTag(this.headlineTag)\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\tprivate emmitChange(): void {\n\t\tthis.govToggle.emit({ open: this.isExpanded, element: this.host })\n\t}\n\n\trender() {\n\t\tconst HeadlineTag = this.headlineTag\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(CardClass.root)} is-expanded={this.isExpanded} collapsible={booleanString(this.collapsible)} promotion={this.promotion}>\n\t\t\t\t{this.label && this.collapsible ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\tid={this.headlineId}\n\t\t\t\t\t\tclass={CardClass.header}\n\t\t\t\t\t\taria-label={this.wcagTriggerLabel}\n\t\t\t\t\t\taria-labelledby={this.wcagTriggerLabelledBy}\n\t\t\t\t\t\taria-expanded={booleanString(this.isExpanded)}\n\t\t\t\t\t\taria-controls={this.contentId}\n\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<HeadlineTag class={CardClass.title}>{this.label}</HeadlineTag>\n\t\t\t\t\t\t<gov-icon class={CardClass.arrow} name=\"arrow-down\"></gov-icon>\n\t\t\t\t\t</button>\n\t\t\t\t) : null}\n\n\t\t\t\t{this.label && !this.collapsible ? (\n\t\t\t\t\t<div class={CardClass.header}>\n\t\t\t\t\t\t<HeadlineTag class={CardClass.title}>{this.label}</HeadlineTag>\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\n\t\t\t\t<div\n\t\t\t\t\tclass={CardClass.inner}\n\t\t\t\t\tid={this.contentId}\n\t\t\t\t\taria-hidden={this.collapsible ? booleanString(!this.isExpanded) : undefined}\n\t\t\t\t\thidden={this.collapsible ? !this.isExpanded : undefined}\n\t\t\t\t\taria-labelledby={this.collapsible ? this.headlineId : undefined}\n\t\t\t\t>\n\t\t\t\t\t{this.h.hasSlot('img') && (\n\t\t\t\t\t\t<p class={CardClass.img}>\n\t\t\t\t\t\t\t<slot name=\"img\" />\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class={CardClass.main}>\n\t\t\t\t\t\t{this.h.hasSlot('icon') && this.promotion && (\n\t\t\t\t\t\t\t<div class={CardClass.icon}>\n\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<div class={CardClass.content}>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{this.h.hasSlot('btn') && this.promotion && (\n\t\t\t\t\t\t\t<div class={CardClass.btns}>\n\t\t\t\t\t\t\t\t<slot name=\"btn\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.h.hasSlot('footer') && (\n\t\t\t\t\t\t<div class={CardClass.footer}>\n\t\t\t\t\t\t\t<slot name=\"footer\" />\n\t\t\t\t\t\t</div>\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) {\n\t\te.stopPropagation()\n\t\tif (this.collapsible) {\n\t\t\tthis.isExpanded = !this.isExpanded\n\t\t\tthis.emmitChange()\n\t\t}\n\t}\n\n\t/\n\t Open the card if it is collapsible\n\t /\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tif (this.collapsible) {\n\t\t\tthis.isExpanded = true\n\t\t\tthis.emmitChange()\n\t\t}\n\t}\n\n\t/\n\t Close the card if it is collapsible\n\t /\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tif (this.collapsible) {\n\t\t\tthis.isExpanded = false\n\t\t\tthis.emmitChange()\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\tif (this.collapsible) {\n\t\t\tvalidateWcagLabel(this.wcagTriggerLabel, this.wcagTriggerLabelledBy, CardClass.root)\n\t\t}\n\t}\n}\n"],"version":3}
1	+ {"file":"gov-card.js","mappings":";;;;;;;;;AAAO,MAAM,SAAS,GAAG;EACxB,IAAI,EAAE,UAAU;EAChB,MAAM,EAAE,kBAAkB;EAC1B,KAAK,EAAE,iBAAiB;EACxB,KAAK,EAAE,iBAAiB;EACxB,GAAG,EAAE,eAAe;EACpB,IAAI,EAAE,gBAAgB;EACtB,OAAO,EAAE,mBAAmB;EAC5B,IAAI,EAAE,gBAAgB;EACtB,IAAI,EAAE,gBAAgB;EACtB,MAAM,EAAE,kBAAkB;EAC1B,KAAK,EAAE,iBAAiB;CACxB;;ACZD,MAAM,UAAU,GAAG,syKAAsyK;;MCe5yKA,SAAO;EAKnB;;;;qBAWsC,KAAK;;uBAQH,KAAK;oBAIR,KAAK;uBAI0B,IAAI;;;;IA1BvE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAA;IAC7C,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAA;GAC3C;EAuCD,mBAAmB,CAAC,QAAgB;IACnC,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAA;IAC9D,IAAI,QAAQ,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClC,WAAW,CAAC,IAAI,SAAS,CAAC,IAAI,UAAU,QAAQ,kBAAkB,CAAC,CAAA;OACnE;KACD;GACD;EAED,iBAAiB;IAChB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;IACnD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;GAC1C;EAED,MAAM,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAEO,WAAW;IAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;GAClE;EAED,MAAM;IACL,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAA;IAEpC,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAe,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,IAChJ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,IAC9B,cACC,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAE,SAAS,CAAC,MAAM,gBACX,IAAI,CAAC,gBAAgB,qBAChB,IAAI,CAAC,qBAAqB,mBAC5B,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,mBAC9B,IAAI,CAAC,SAAS,EAC7B,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,IAEvC,EAAC,WAAW,IAAC,KAAK,EAAE,SAAS,CAAC,KAAK,IAAG,IAAI,CAAC,KAAK,CAAe,EAC/D,gBAAU,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,IAAI,EAAC,cAAc,GAAY,CACzD,IACN,IAAI,EAEP,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,IAC/B,WAAK,KAAK,EAAE,SAAS,CAAC,MAAM,IAC3B,EAAC,WAAW,IAAC,KAAK,EAAE,SAAS,CAAC,KAAK,IAAG,IAAI,CAAC,KAAK,CAAe,CAC1D,IACH,IAAI,EAER,WACC,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,EAAE,EAAE,IAAI,CAAC,SAAS,iBACL,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,SAAS,EAC3E,MAAM,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,SAAS,qBACtC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,GAAG,SAAS,IAE9D,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KACrB,SAAG,KAAK,EAAE,SAAS,CAAC,GAAG,IACtB,YAAM,IAAI,EAAC,KAAK,GAAG,CAChB,CACJ,EAED,WAAK,KAAK,EAAE,SAAS,CAAC,IAAI,IACxB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,KACxC,WAAK,KAAK,EAAE,SAAS,CAAC,IAAI,IACzB,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EAED,WAAK,KAAK,EAAE,SAAS,CAAC,OAAO,IAC5B,eAAQ,CACH,EAEL,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,SAAS,KACvC,WAAK,KAAK,EAAE,SAAS,CAAC,IAAI,IACzB,YAAM,IAAI,EAAC,KAAK,GAAG,CACd,CACN,CACI,EAEL,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,KACxB,WAAK,KAAK,EAAE,SAAS,CAAC,MAAM,IAC3B,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACN,CACI,CACA,EACP;GACD;EAEO,cAAc,CAAC,CAAC;IACvB,CAAC,CAAC,eAAe,EAAE,CAAA;IACnB,IAAI,IAAI,CAAC,WAAW,EAAE;MACrB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAA;MAClC,IAAI,CAAC,WAAW,EAAE,CAAA;KAClB;GACD;;;;EAMD,MAAM,IAAI;IACT,IAAI,IAAI,CAAC,WAAW,EAAE;MACrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;MACtB,IAAI,CAAC,WAAW,EAAE,CAAA;KAClB;GACD;;;;EAMD,MAAM,KAAK;IACV,IAAI,IAAI,CAAC,WAAW,EAAE;MACrB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAA;MACvB,IAAI,CAAC,WAAW,EAAE,CAAA;KAClB;GACD;;;;EAMD,MAAM,YAAY;IACjB,IAAI,IAAI,CAAC,WAAW,EAAE;MACrB,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,IAAI,CAAC,CAAA;KACpF;GACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GovCard"],"sources":["../../../packages/core/src/components/gov-card/constants.ts","../../../packages/core/src/components/gov-card/gov-card.scss?tag=gov-card","../../../packages/core/src/components/gov-card/gov-card.tsx"],"sourcesContent":["export const CardClass = {\n\troot: 'gov-card',\n\theader: 'gov-card__header',\n\ttitle: 'gov-card__title',\n\tinner: 'gov-card__inner',\n\timg: 'gov-card__img',\n\tmain: 'gov-card__main',\n\tcontent: 'gov-card__content',\n\ticon: 'gov-card__icon',\n\tbtns: 'gov-card__btns',\n\tfooter: 'gov-card__footer',\n\tarrow: 'gov-card__arrow',\n}\n","/\n Alert\n /\n\n$class: \".gov-card\";\n\n#{$class} {\n\t@include base(flex);\n\tflex-direction: column;\n\tborder: $card-border;\n\tborder-radius: $border-radius;\n\tbackground: $card-bg;\n\toverflow: hidden;\n\t&__header {\n\t\tgap: rem-calc(28);\n\t\twidth: 100%;\n\t\tpadding: rem-calc(24);\n\t\tborder-bottom: $card-border;\n\t\tborder-radius: 0;\n\t\ttext-align: left;\n\t\ttext-transform: none;\n\t\ttransition: background-color $t ease-in-out;\n\t}\n\t&__arrow {\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(16);\n\t\theight: rem-calc(16);\n\t\tcolor: $card-arrow-color;\n\t}\n\t&__title {\n\t\t@include general;\n\t\t@include typography($font-size-xl);\n\t\tcolor: $card-title-color;\n\t\tfont-weight: 700;\n\t}\n\t&__img {\n\t\twidth: 100%;\n\t\tmargin: 0;\n\t\tline-height: 1;\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\theight: auto;\n\t\t}\n\t}\n\t&__inner {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\t\t@include parameter(\"aria-hidden\") {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&__main {\n\t\tdisplay: flex;\n\t\tgap: 16px 24px;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\t\tpadding: rem-calc(24);\n\t}\n\t&__icon {\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(40);\n\t\theight: rem-calc(40);\n\t\tcolor: $card-icon-color;\n\t}\n\t&__btns {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tflex: 0 0 auto;\n\t\tflex-wrap: wrap;\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t}\n\t&__footer {\n\t\t@include reset-last-margin();\n\t\tpadding: rem-calc(16 24);\n\t\tbackground: $card-footer-bg;\n\t\tp {\n\t\t\t@include typography($font-size-s);\n\t\t}\n\t}\n\n\t// STATES\n\t@include parameter(\"is-expanded\") {\n\t\theight: 100%;\n\t}\n\n\t// VARIANTS\n\t@include parameter(\"collapsible\") {\n\t\t#{$class} {\n\t\t\t&__header {\n\t\t\t\t@include button-core();\n\t\t\t\t@include focus-outline($border-radius, rem-calc(-2));\n\t\t\t\tjustify-content: space-between;\n\t\t\t\ttext-align: left;\n\t\t\t\t@include hover() {\n\t\t\t\t\tbackground: $card-header-hover-bg;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// STATES\n\t\t@include parameter(\"is-expanded\") {\n\t\t\t#{$class} {\n\t\t\t\t&__header {\n\t\t\t\t\tborder-bottom: $card-border;\n\t\t\t\t}\n\t\t\t\t&__arrow {\n\t\t\t\t\ttransform: scale(-1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t// VARIANTS\n\t\t@include parameter(\"promotion\") {\n\t\t\t#{$class} {\n\t\t\t\t&__main {\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\tpadding: rem-calc(32);\n\t\t\t\t}\n\t\t\t\t&__icon {\n\t\t\t\t\twidth: rem-calc(48);\n\t\t\t\t\theight: rem-calc(48);\n\t\t\t\t}\n\t\t\t\t&__btns {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch, State, Method, Event, EventEmitter } from '@stencil/core'\nimport { CardClass } from './constants'\nimport { govHost, booleanString } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { createID } from '../../utils/string.utils'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { GovCardChangeEvent } from './interfaces'\n\n@Component({\n\ttag: 'gov-card',\n\tstyleUrl: 'gov-card.scss',\n})\nexport class GovCard {\n\tprivate h: GovHost\n\tprivate readonly headlineId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.headlineId = createID('GovCardHeadline')\n\t\tthis.contentId = createID('GovCardContent')\n\t}\n\n\t@Element() host: HTMLGovCardElement\n\n\t/\n\t Style variation of the card.\n\t /\n\t@Prop() readonly promotion: boolean = false\n\t/\n\t Item label of the card\n\t /\n\t@Prop() readonly label: string\n\t/\n\t Defines wether the card can be collapsible\n\t /\n\t@Prop() readonly collapsible: boolean = false\n\t/\n\t Defines whether the card is open or closed by default\n\t /\n\t@Prop() readonly expanded: boolean = false\n\t/\n\t Used to change the HMTL tag in the card headline for correct semantic structure\n\t /\n\t@Prop({ attribute: 'headline-tag' }) readonly headlineTag: string = 'h3'\n\t/\n\t Adds accessible label for the collapsible button that is only shown for screen readers.\n\t /\n\t@Prop({ attribute: 'wcag-trigger-label' }) wcagTriggerLabel: string\n\t/\n\t A string of identifiers that indicate alternative label elements for collapsible card\n\t /\n\t@Prop({ attribute: 'wcag-trigger-labelled-by' }) wcagTriggerLabelledBy: string\n\t/\n\t Called when the card toggle state changes\n\t /\n\t@Event({ eventName: 'gov-toggle' }) govToggle: EventEmitter<GovCardChangeEvent>\n\t@State() isExpanded: boolean\n\n\t@Watch('headlineTag')\n\tvalidateHeadlineTag(newValue: string): void {\n\t\tconst validTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span']\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${CardClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpanded = this.label ? this.expanded : true\n\t\tthis.validateHeadlineTag(this.headlineTag)\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\tprivate emmitChange(): void {\n\t\tthis.govToggle.emit({ open: this.isExpanded, element: this.host })\n\t}\n\n\trender() {\n\t\tconst HeadlineTag = this.headlineTag\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(CardClass.root)} is-expanded={this.isExpanded} collapsible={booleanString(this.collapsible)} promotion={this.promotion}>\n\t\t\t\t{this.label && this.collapsible ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\tid={this.headlineId}\n\t\t\t\t\t\tclass={CardClass.header}\n\t\t\t\t\t\taria-label={this.wcagTriggerLabel}\n\t\t\t\t\t\taria-labelledby={this.wcagTriggerLabelledBy}\n\t\t\t\t\t\taria-expanded={booleanString(this.isExpanded)}\n\t\t\t\t\t\taria-controls={this.contentId}\n\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<HeadlineTag class={CardClass.title}>{this.label}</HeadlineTag>\n\t\t\t\t\t\t<gov-icon class={CardClass.arrow} name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t</button>\n\t\t\t\t) : null}\n\n\t\t\t\t{this.label && !this.collapsible ? (\n\t\t\t\t\t<div class={CardClass.header}>\n\t\t\t\t\t\t<HeadlineTag class={CardClass.title}>{this.label}</HeadlineTag>\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\n\t\t\t\t<div\n\t\t\t\t\tclass={CardClass.inner}\n\t\t\t\t\tid={this.contentId}\n\t\t\t\t\taria-hidden={this.collapsible ? booleanString(!this.isExpanded) : undefined}\n\t\t\t\t\thidden={this.collapsible ? !this.isExpanded : undefined}\n\t\t\t\t\taria-labelledby={this.collapsible ? this.headlineId : undefined}\n\t\t\t\t>\n\t\t\t\t\t{this.h.hasSlot('img') && (\n\t\t\t\t\t\t<p class={CardClass.img}>\n\t\t\t\t\t\t\t<slot name=\"img\" />\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class={CardClass.main}>\n\t\t\t\t\t\t{this.h.hasSlot('icon') && this.promotion && (\n\t\t\t\t\t\t\t<div class={CardClass.icon}>\n\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<div class={CardClass.content}>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{this.h.hasSlot('btn') && this.promotion && (\n\t\t\t\t\t\t\t<div class={CardClass.btns}>\n\t\t\t\t\t\t\t\t<slot name=\"btn\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.h.hasSlot('footer') && (\n\t\t\t\t\t\t<div class={CardClass.footer}>\n\t\t\t\t\t\t\t<slot name=\"footer\" />\n\t\t\t\t\t\t</div>\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) {\n\t\te.stopPropagation()\n\t\tif (this.collapsible) {\n\t\t\tthis.isExpanded = !this.isExpanded\n\t\t\tthis.emmitChange()\n\t\t}\n\t}\n\n\t/\n\t Open the card if it is collapsible\n\t /\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tif (this.collapsible) {\n\t\t\tthis.isExpanded = true\n\t\t\tthis.emmitChange()\n\t\t}\n\t}\n\n\t/\n\t Close the card if it is collapsible\n\t /\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tif (this.collapsible) {\n\t\t\tthis.isExpanded = false\n\t\t\tthis.emmitChange()\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\tif (this.collapsible) {\n\t\t\tvalidateWcagLabel(this.wcagTriggerLabel, this.wcagTriggerLabelledBy, CardClass.root)\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/components/gov-container.js CHANGED Viewed

@@ -42,7 +42,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const GovContainer = GovContainer$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gov-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gov-container.js","mappings":";;;AAAO,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,eAAe;CACrB;;ACFD,MAAM,eAAe,GAAG,qmBAAqmB;;MCShnBA,cAAY;EAGxB;;;IACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAID,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,IAC/C,eAAQ,CACF,EACP;GACD;;;;;;EAQD,MAAM,eAAe;IACpB,OAAO,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;GAClD~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["GovContainer"],"sources":["../../../packages/core/src/components/gov-container/constants.tsx","../../../packages/core/src/components/gov-container/gov-container.scss?tag=gov-container","../../../packages/core/src/components/gov-container/gov-container.tsx"],"sourcesContent":["export const ContainerClass = {\n\troot: 'gov-container',\n}\n","/\n Container\n /\n\n$class: \".gov-container\";\n\n#{$class} {\n\t@include container();\n}\n","import { Component, Element, h, Host, Method } from '@stencil/core'\nimport { govHost, slottedChildren } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { ContainerClass } from './constants'\n\n@Component({\n\ttag: 'gov-container',\n\tstyleUrl: 'gov-container.scss',\n})\nexport class GovContainer {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovContainerElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ContainerClass.root)}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/\n\t Returns slotted children\n\t \n\t @return {Promise<Node[]>}\n\t */\n\t@Method()\n\tasync slottedChildren(): Promise<Node[]> {\n\t\treturn Promise.resolve(slottedChildren(this.host))\n\t}\n}\n"],"version":3}
1	+ {"file":"gov-container.js","mappings":";;;AAAO,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,eAAe;CACrB;;ACFD,MAAM,eAAe,GAAG,qmBAAqmB;;MCShnBA,cAAY;EAGxB;;;IACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAID,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,IAC/C,eAAQ,CACF,EACP;GACD;;;;;;EAQD,MAAM,eAAe;IACpB,OAAO,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;GAClD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GovContainer"],"sources":["../../../packages/core/src/components/gov-container/constants.tsx","../../../packages/core/src/components/gov-container/gov-container.scss?tag=gov-container","../../../packages/core/src/components/gov-container/gov-container.tsx"],"sourcesContent":["export const ContainerClass = {\n\troot: 'gov-container',\n}\n","/\n Container\n /\n\n$class: \".gov-container\";\n\n#{$class} {\n\t@include container();\n}\n","import { Component, Element, h, Host, Method } from '@stencil/core'\nimport { govHost, slottedChildren } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { ContainerClass } from './constants'\n\n@Component({\n\ttag: 'gov-container',\n\tstyleUrl: 'gov-container.scss',\n})\nexport class GovContainer {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovContainerElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ContainerClass.root)}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/\n\t Returns slotted children\n\t \n\t @return {Promise<Node[]>}\n\t */\n\t@Method()\n\tasync slottedChildren(): Promise<Node[]> {\n\t\treturn Promise.resolve(slottedChildren(this.host))\n\t}\n}\n"],"version":3}

package/dist/components/gov-cookiebar.js CHANGED Viewed

@@ -37,7 +37,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const GovCookiebar = GovCookiebar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gov-cookiebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gov-cookiebar.js","mappings":";;;AAAO,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,eAAe;EACrB,MAAM,EAAE,uBAAuB;EAC/B,OAAO,EAAE,wBAAwB;EACjC,OAAO,EAAE,wBAAwB;EACjC,cAAc,EAAE,gCAAgC;EAChD,gBAAgB,EAAE,kCAAkC;CACpD;;ACPD,MAAM,eAAe,GAAG,khDAAkhD;;MCS7hDA,cAAY;EAGxB;;;IACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAID,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,IAC/C,WAAK,KAAK,EAAE,cAAc,CAAC,MAAM,IAChC,WAAK,KAAK,EAAE,cAAc,CAAC,OAAO,IACjC,eAAQ,CACH,EAEL,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,mBAAmB,CAAC,MACzE,WAAK,KAAK,EAAE,cAAc,CAAC,OAAO,IAChC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,KACjC,WAAK,KAAK,EAAE,cAAc,CAAC,cAAc,IACxC,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC1B,CACN,EAEA,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,mBAAmB,CAAC,KACnC,WAAK,KAAK,EAAE,cAAc,CAAC,gBAAgB,IAC1C,YAAM,IAAI,EAAC,mBAAmB,GAAG,CAC5B,CACN,CACI,CACN,CACI,CACA,EACP;GACD~~;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["GovCookiebar"],"sources":["../../../packages/core/src/components/gov-cookiebar/constants.tsx","../../../packages/core/src/components/gov-cookiebar/gov-cookiebar.scss?tag=gov-cookiebar","../../../packages/core/src/components/gov-cookiebar/gov-cookiebar.tsx"],"sourcesContent":["export const CookiebarClass = {\n\troot: 'gov-cookiebar',\n\tholder: 'gov-cookiebar__holder',\n\tcontent: 'gov-cookiebar__content',\n\tactions: 'gov-cookiebar__actions',\n\tactionsPrimary: 'gov-cookiebar__actions-primary',\n\tactionsSecondary: 'gov-cookiebar__actions-secondary',\n}\n","/\n Cookiebar\n */\n\n$class: \".gov-cookiebar\";\n\n#{$class} {\n\t@include z-index(\"bar\", 1);\n\tposition: fixed;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tbackground-color: $cookiebar-bg;\n\tbox-shadow: $cookiebar-box-shadow;\n\t&__holder {\n\t\t@include container();\n\t\t@include space(32);\n\t\tpadding-top: rem-calc(20);\n\t\tpadding-bottom: rem-calc(20);\n\t}\n\t&__content {\n\t\t@include space(12);\n\t\tp {\n\t\t\tcolor: $cookiebar-color;\n\t\t\tletter-spacing: em-calc(0.2);\n\t\t}\n\t}\n\t&__actions {\n\t\t&,\n\t\t&-primary,\n\t\t&-secondary {\n\t\t\tdisplay: flex;\n\t\t\tgap: rem-calc(10);\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: space-between;\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: md) {\n\t\t&__holder {\n\t\t\tpadding-top: rem-calc(32);\n\t\t\tpadding-bottom: rem-calc(32);\n\t\t}\n\t\t&__actions {\n\t\t\t&,\n\t\t\t&-primary,\n\t\t\t&-secondary {\n\t\t\t\tgap: rem-calc(16);\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host } from '@stencil/core'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { CookiebarClass } from './constants'\n\n@Component({\n\ttag: 'gov-cookiebar',\n\tstyleUrl: 'gov-cookiebar.scss',\n})\nexport class GovCookiebar {\n\th: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovCookiebarElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(CookiebarClass.root)}>\n\t\t\t\t<div class={CookiebarClass.holder}>\n\t\t\t\t\t<div class={CookiebarClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{(this.h.hasSlot('actions-primary') \|\| this.h.hasSlot('actions-secondary')) && (\n\t\t\t\t\t\t<div class={CookiebarClass.actions}>\n\t\t\t\t\t\t\t{this.h.hasSlot('actions-primary') && (\n\t\t\t\t\t\t\t\t<div class={CookiebarClass.actionsPrimary}>\n\t\t\t\t\t\t\t\t\t<slot name=\"actions-primary\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{this.h.hasSlot('actions-secondary') && (\n\t\t\t\t\t\t\t\t<div class={CookiebarClass.actionsSecondary}>\n\t\t\t\t\t\t\t\t\t<slot name=\"actions-secondary\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
1	+ {"file":"gov-cookiebar.js","mappings":";;;AAAO,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,eAAe;EACrB,MAAM,EAAE,uBAAuB;EAC/B,OAAO,EAAE,wBAAwB;EACjC,OAAO,EAAE,wBAAwB;EACjC,cAAc,EAAE,gCAAgC;EAChD,gBAAgB,EAAE,kCAAkC;CACpD;;ACPD,MAAM,eAAe,GAAG,khDAAkhD;;MCS7hDA,cAAY;EAGxB;;;IACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAID,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,IAC/C,WAAK,KAAK,EAAE,cAAc,CAAC,MAAM,IAChC,WAAK,KAAK,EAAE,cAAc,CAAC,OAAO,IACjC,eAAQ,CACH,EAEL,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,mBAAmB,CAAC,MACzE,WAAK,KAAK,EAAE,cAAc,CAAC,OAAO,IAChC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,KACjC,WAAK,KAAK,EAAE,cAAc,CAAC,cAAc,IACxC,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC1B,CACN,EAEA,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,mBAAmB,CAAC,KACnC,WAAK,KAAK,EAAE,cAAc,CAAC,gBAAgB,IAC1C,YAAM,IAAI,EAAC,mBAAmB,GAAG,CAC5B,CACN,CACI,CACN,CACI,CACA,EACP;GACD;;;;;;;;;;;;;;;;;;;;;;;","names":["GovCookiebar"],"sources":["../../../packages/core/src/components/gov-cookiebar/constants.tsx","../../../packages/core/src/components/gov-cookiebar/gov-cookiebar.scss?tag=gov-cookiebar","../../../packages/core/src/components/gov-cookiebar/gov-cookiebar.tsx"],"sourcesContent":["export const CookiebarClass = {\n\troot: 'gov-cookiebar',\n\tholder: 'gov-cookiebar__holder',\n\tcontent: 'gov-cookiebar__content',\n\tactions: 'gov-cookiebar__actions',\n\tactionsPrimary: 'gov-cookiebar__actions-primary',\n\tactionsSecondary: 'gov-cookiebar__actions-secondary',\n}\n","/\n Cookiebar\n */\n\n$class: \".gov-cookiebar\";\n\n#{$class} {\n\t@include z-index(\"bar\", 1);\n\tposition: fixed;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tbackground-color: $cookiebar-bg;\n\tbox-shadow: $cookiebar-box-shadow;\n\t&__holder {\n\t\t@include container();\n\t\t@include space(32);\n\t\tpadding-top: rem-calc(20);\n\t\tpadding-bottom: rem-calc(20);\n\t}\n\t&__content {\n\t\t@include space(12);\n\t\tp {\n\t\t\tcolor: $cookiebar-color;\n\t\t\tletter-spacing: em-calc(0.2);\n\t\t}\n\t}\n\t&__actions {\n\t\t&,\n\t\t&-primary,\n\t\t&-secondary {\n\t\t\tdisplay: flex;\n\t\t\tgap: rem-calc(10);\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: space-between;\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: md) {\n\t\t&__holder {\n\t\t\tpadding-top: rem-calc(32);\n\t\t\tpadding-bottom: rem-calc(32);\n\t\t}\n\t\t&__actions {\n\t\t\t&,\n\t\t\t&-primary,\n\t\t\t&-secondary {\n\t\t\t\tgap: rem-calc(16);\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host } from '@stencil/core'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { CookiebarClass } from './constants'\n\n@Component({\n\ttag: 'gov-cookiebar',\n\tstyleUrl: 'gov-cookiebar.scss',\n})\nexport class GovCookiebar {\n\th: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovCookiebarElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(CookiebarClass.root)}>\n\t\t\t\t<div class={CookiebarClass.holder}>\n\t\t\t\t\t<div class={CookiebarClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{(this.h.hasSlot('actions-primary') \|\| this.h.hasSlot('actions-secondary')) && (\n\t\t\t\t\t\t<div class={CookiebarClass.actions}>\n\t\t\t\t\t\t\t{this.h.hasSlot('actions-primary') && (\n\t\t\t\t\t\t\t\t<div class={CookiebarClass.actionsPrimary}>\n\t\t\t\t\t\t\t\t\t<slot name=\"actions-primary\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{this.h.hasSlot('actions-secondary') && (\n\t\t\t\t\t\t\t\t<div class={CookiebarClass.actionsSecondary}>\n\t\t\t\t\t\t\t\t\t<slot name=\"actions-secondary\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/gov-empty.js CHANGED Viewed

@@ -35,7 +35,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const GovEmpty = GovEmpty$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gov-empty.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gov-empty.js","mappings":";;;AAAO,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;EACjB,IAAI,EAAE,iBAAiB;EACvB,SAAS,EAAE,sBAAsB;EACjC,OAAO,EAAE,oBAAoB;CAC7B;;ACLD,MAAM,WAAW,GAAG,wpBAAwpB;;MCS/pBA,UAAQ;EAGpB;;;IACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAID,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAC1C,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,WAAK,KAAK,EAAE,UAAU,CAAC,IAAI,IAC1B,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EACD,WAAK,KAAK,EAAE,UAAU,CAAC,OAAO,IAC7B,eAAQ,CACH,CACA,EACP;GACD~~;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["GovEmpty"],"sources":["../../../packages/core/src/components/gov-empty/constants.ts","../../../packages/core/src/components/gov-empty/gov-empty.scss?tag=gov-empty","../../../packages/core/src/components/gov-empty/gov-empty.tsx"],"sourcesContent":["export const EmptyClass = {\n\troot: 'gov-empty',\n\ticon: 'gov-empty__icon',\n\tcontainer: 'gov-empty__container',\n\tcontent: 'gov-empty__content',\n}\n","/\n Alert\n /\n\n$class: \".gov-empty\";\n\n#{$class} {\n\t@include base();\n\t&__icon {\n\t\tdisplay: inline-flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: rem-calc(96);\n\t\theight: rem-calc(96);\n\t\tmargin-bottom: calc(rem-calc(96) / 3);\n\t\tborder-radius: 50%;\n\t\tbackground: $empty-icon-circle-bg;\n\t\tcolor: $empty-icon-color;\n\t\t& > {\n\t\t\twidth: rem-calc(56);\n\t\t\theight: rem-calc(56);\n\t\t}\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t}\n}\n","import { Component, Element, Host, h } from '@stencil/core'\nimport { EmptyClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-empty',\n\tstyleUrl: 'gov-empty.scss',\n})\nexport class GovEmpty {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovEmptyElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(EmptyClass.root)}>\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<div class={EmptyClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class={EmptyClass.content}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
1	+ {"file":"gov-empty.js","mappings":";;;AAAO,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;EACjB,IAAI,EAAE,iBAAiB;EACvB,SAAS,EAAE,sBAAsB;EACjC,OAAO,EAAE,oBAAoB;CAC7B;;ACLD,MAAM,WAAW,GAAG,wpBAAwpB;;MCS/pBA,UAAQ;EAGpB;;;IACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAID,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAC1C,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,WAAK,KAAK,EAAE,UAAU,CAAC,IAAI,IAC1B,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EACD,WAAK,KAAK,EAAE,UAAU,CAAC,OAAO,IAC7B,eAAQ,CACH,CACA,EACP;GACD;;;;;;;;;;;;;;;;;;;;;;;","names":["GovEmpty"],"sources":["../../../packages/core/src/components/gov-empty/constants.ts","../../../packages/core/src/components/gov-empty/gov-empty.scss?tag=gov-empty","../../../packages/core/src/components/gov-empty/gov-empty.tsx"],"sourcesContent":["export const EmptyClass = {\n\troot: 'gov-empty',\n\ticon: 'gov-empty__icon',\n\tcontainer: 'gov-empty__container',\n\tcontent: 'gov-empty__content',\n}\n","/\n Alert\n /\n\n$class: \".gov-empty\";\n\n#{$class} {\n\t@include base();\n\t&__icon {\n\t\tdisplay: inline-flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: rem-calc(96);\n\t\theight: rem-calc(96);\n\t\tmargin-bottom: calc(rem-calc(96) / 3);\n\t\tborder-radius: 50%;\n\t\tbackground: $empty-icon-circle-bg;\n\t\tcolor: $empty-icon-color;\n\t\t& > {\n\t\t\twidth: rem-calc(56);\n\t\t\theight: rem-calc(56);\n\t\t}\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t}\n}\n","import { Component, Element, Host, h } from '@stencil/core'\nimport { EmptyClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-empty',\n\tstyleUrl: 'gov-empty.scss',\n})\nexport class GovEmpty {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovEmptyElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(EmptyClass.root)}>\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<div class={EmptyClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class={EmptyClass.content}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/gov-error-code.js CHANGED Viewed

@@ -35,7 +35,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const GovErrorCode = GovErrorCode$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gov-error-code.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gov-error-code.js","mappings":";;;AAAO,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,gBAAgB;EACtB,IAAI,EAAE,sBAAsB;EAC5B,MAAM,EAAE,wBAAwB;EAChC,OAAO,EAAE,yBAAyB;CAClC;;ACLD,MAAM,eAAe,GAAG,83BAA83B;;MCSz4BA,cAAY;EAGxB;;;IACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAID,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,IAC/C,WAAK,KAAK,EAAE,cAAc,CAAC,MAAM,IAC/B,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,WAAK,KAAK,EAAE,cAAc,CAAC,IAAI,IAC9B,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EACD,WAAK,KAAK,EAAE,cAAc,CAAC,OAAO,IACjC,eAAQ,CACH,CACD,CACA,EACP;GACD~~;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["GovErrorCode"],"sources":["../../../packages/core/src/components/gov-error-code/constants.ts","../../../packages/core/src/components/gov-error-code/gov-error-code.scss?tag=gov-error-code","../../../packages/core/src/components/gov-error-code/gov-error-code.tsx"],"sourcesContent":["export const ErrorCodeClass = {\n\troot: 'gov-error-code',\n\ticon: 'gov-error-code__icon',\n\tholder: 'gov-error-code__holder',\n\tcontent: 'gov-error-code__content',\n}\n","/\n Alert\n /\n\n$class: \".gov-error-code\";\n\n#{$class} {\n\t@include base();\n\t&__holder {\n\t\tmargin: 0 auto;\n\t\ttext-align: center;\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t}\n\t&__icon {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: rem-calc(150);\n\t\theight: rem-calc(150);\n\t\tmargin: 0 auto rem-calc(24);\n\t\tborder-radius: 50%;\n\t\tbackground: $error-icon-circle-bg;\n\t\tcolor: $error-icon-color;\n\t\t& > {\n\t\t\twidth: rem-calc(114);\n\t\t\theight: rem-calc(114);\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: md) {\n\t\t&__icon {\n\t\t\twidth: rem-calc(200);\n\t\t\theight: rem-calc(200);\n\t\t\tmargin: 0 auto rem-calc(32);\n\t\t\t& > * {\n\t\t\t\twidth: rem-calc(152);\n\t\t\t\theight: rem-calc(152);\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host } from '@stencil/core'\nimport { ErrorCodeClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-error-code',\n\tstyleUrl: 'gov-error-code.scss',\n})\nexport class GovErrorCode {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovErrorCodeElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ErrorCodeClass.root)}>\n\t\t\t\t<div class={ErrorCodeClass.holder}>\n\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t<div class={ErrorCodeClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div class={ErrorCodeClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
1	+ {"file":"gov-error-code.js","mappings":";;;AAAO,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,gBAAgB;EACtB,IAAI,EAAE,sBAAsB;EAC5B,MAAM,EAAE,wBAAwB;EAChC,OAAO,EAAE,yBAAyB;CAClC;;ACLD,MAAM,eAAe,GAAG,83BAA83B;;MCSz4BA,cAAY;EAGxB;;;IACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAID,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,IAC/C,WAAK,KAAK,EAAE,cAAc,CAAC,MAAM,IAC/B,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,WAAK,KAAK,EAAE,cAAc,CAAC,IAAI,IAC9B,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EACD,WAAK,KAAK,EAAE,cAAc,CAAC,OAAO,IACjC,eAAQ,CACH,CACD,CACA,EACP;GACD;;;;;;;;;;;;;;;;;;;;;;;","names":["GovErrorCode"],"sources":["../../../packages/core/src/components/gov-error-code/constants.ts","../../../packages/core/src/components/gov-error-code/gov-error-code.scss?tag=gov-error-code","../../../packages/core/src/components/gov-error-code/gov-error-code.tsx"],"sourcesContent":["export const ErrorCodeClass = {\n\troot: 'gov-error-code',\n\ticon: 'gov-error-code__icon',\n\tholder: 'gov-error-code__holder',\n\tcontent: 'gov-error-code__content',\n}\n","/\n Alert\n /\n\n$class: \".gov-error-code\";\n\n#{$class} {\n\t@include base();\n\t&__holder {\n\t\tmargin: 0 auto;\n\t\ttext-align: center;\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t}\n\t&__icon {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: rem-calc(150);\n\t\theight: rem-calc(150);\n\t\tmargin: 0 auto rem-calc(24);\n\t\tborder-radius: 50%;\n\t\tbackground: $error-icon-circle-bg;\n\t\tcolor: $error-icon-color;\n\t\t& > {\n\t\t\twidth: rem-calc(114);\n\t\t\theight: rem-calc(114);\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: md) {\n\t\t&__icon {\n\t\t\twidth: rem-calc(200);\n\t\t\theight: rem-calc(200);\n\t\t\tmargin: 0 auto rem-calc(32);\n\t\t\t& > * {\n\t\t\t\twidth: rem-calc(152);\n\t\t\t\theight: rem-calc(152);\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host } from '@stencil/core'\nimport { ErrorCodeClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-error-code',\n\tstyleUrl: 'gov-error-code.scss',\n})\nexport class GovErrorCode {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovErrorCodeElement\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ErrorCodeClass.root)}>\n\t\t\t\t<div class={ErrorCodeClass.holder}>\n\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t<div class={ErrorCodeClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div class={ErrorCodeClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/components/gov-form-autocomplete2.js CHANGED Viewed

@@ -92,6 +92,7 @@ const GovFormAutocomplete = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       this.doSearch();
     }
     e.stopPropagation();
+    e.preventDefault();
     this.govFocus.emit(e);
   }
   onBlurHandler(e) {
@@ -99,11 +100,13 @@ const GovFormAutocomplete = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     setTimeout(() => (this.list = []), 200);
     this.arrowCounter = -1;
     e.stopPropagation();
+    e.preventDefault();
     this.govBlur.emit(e);
   }
   onInputHandler(e) {
     this.value = e.target.value;
     e.stopPropagation();
+    e.preventDefault();
     this.govInput.emit(e);
     this.doSearch();
   }
@@ -126,6 +129,7 @@ const GovFormAutocomplete = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
   onKeyUpHandler(e) {
     const event = e.detail;
     e.stopPropagation();
+    e.preventDefault();
     if (event.keyCode === 38)
       this.onArrowUp();
     else if (event.keyCode === 40)
@@ -216,7 +220,6 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 export { GovFormAutocomplete as G, defineCustomElement as d };

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

	@@ -1 +1 @@
1	- {"file":"gov-form-autocomplete2.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-form/autocomplete/gov-form-autocomplete.scss?tag=gov-form-autocomplete","../../../packages/core/src/components/gov-form/autocomplete/gov-form-autocomplete.tsx"],"sourcesContent":["$class: \".gov-form-autocomplete\";\n\n#{$class} {\n\t@include base();\n\t&__list {\n\t\t@include typography($font-size-s);\n\t\t@extend %reset-ul;\n\t\tposition: absolute;\n\t\ttop: 100%;\n\t\tright: 0;\n\t\tleft: 0;\n\t\tz-index: 5;\n\t\tmax-height: rem-calc(225);\n\t\tmargin-top: rem-calc(8);\n\t\tborder: $form-autocomplete-border;\n\t\tborder-radius: $border-radius;\n\t\tbackground: $form-autocomplete-bg;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\toverscroll-behavior: none;\n\t}\n\t&__list > &__item {\n\t\t@extend %reset-ul-li;\n\t\tpadding: rem-calc(12 8);\n\t\tcursor: pointer;\n\t}\n\n\t// STATES\n\t&__list:empty {\n\t\tdisplay: none;\n\t}\n\n\t// HOVERS\n\t&__item {\n\t\t@include parameter(\"aria-selected\") {\n\t\t\tbackground: $form-autocomplete-item-select-bg;\n\t\t}\n\t\t@include hover() {\n\t\t\tbackground: $form-autocomplete-item-hover-bg;\n\t\t}\n\t}\n}\n","import { Component, Element, Host, h, Prop, Watch, Event, EventEmitter, State, Method } from '@stencil/core'\nimport { SizesType } from './constants'\nimport { createID } from '../../../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}
1	+ {"file":"gov-form-autocomplete2.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-form/autocomplete/gov-form-autocomplete.scss?tag=gov-form-autocomplete","../../../packages/core/src/components/gov-form/autocomplete/gov-form-autocomplete.tsx"],"sourcesContent":["$class: \".gov-form-autocomplete\";\n\n#{$class} {\n\t@include base();\n\t&__list {\n\t\t@include typography($font-size-s);\n\t\t@extend %reset-ul;\n\t\tposition: absolute;\n\t\ttop: 100%;\n\t\tright: 0;\n\t\tleft: 0;\n\t\tz-index: 5;\n\t\tmax-height: rem-calc(225);\n\t\tmargin-top: rem-calc(8);\n\t\tborder: $form-autocomplete-border;\n\t\tborder-radius: $border-radius;\n\t\tbackground: $form-autocomplete-bg;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\toverscroll-behavior: none;\n\t}\n\t&__list > &__item {\n\t\t@extend %reset-ul-li;\n\t\tpadding: rem-calc(12 8);\n\t\tcursor: pointer;\n\t}\n\n\t// STATES\n\t&__list:empty {\n\t\tdisplay: none;\n\t}\n\n\t// HOVERS\n\t&__item {\n\t\t@include parameter(\"aria-selected\") {\n\t\t\tbackground: $form-autocomplete-item-select-bg;\n\t\t}\n\t\t@include hover() {\n\t\t\tbackground: $form-autocomplete-item-hover-bg;\n\t\t}\n\t}\n}\n","import { Component, Element, Host, h, Prop, Watch, Event, EventEmitter, State, Method } from '@stencil/core'\nimport { SizesType } from './constants'\nimport { createID } from '../../../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\te.preventDefault()\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\te.preventDefault()\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\te.preventDefault()\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\te.preventDefault()\n\t\tif (event.keyCode === 38) this.onArrowUp()\n\t\telse if (event.keyCode === 40) this.onArrowDown()\n\t\telse if (event.keyCode === 13) this.onSelectHandler()\n\t}\n\n\t/\n\t Returns the current state of the component\n\t /\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.inputRef.focus(options)\n\t}\n\n\t/\n\t Clears whisperer value\n\t /\n\t@Method()\n\tasync clearValue(): Promise<void> {\n\t\tthis.value = ''\n\t\tthis.inputRef.value = ''\n\n\t\tawait this.inputRef.clearValue()\n\t}\n\n\t/\n\t Set a custom asynchronous function for the whisperer\n\t /\n\t@Method()\n\tasync setSearchCallback(callback: (value: string) => Promise<any>) {\n\t\tthis.searchCallback = callback\n\t}\n\n\t/\n\t Setting a custom whisper result template\n\t * @param callback\n\t */\n\t@Method()\n\tasync setTemplateResolver(callback: (item: GovFormAutocompleteItem) => string) {\n\t\tthis.templateResolver = callback\n\t}\n}\n"],"version":3}

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

@@ -7,6 +7,7 @@ import { a as validateWcagRef, b as validateWcagLabelFor } from './wcag.js';
 import { c as canValidateWcagOnRender } from './win.js';
 import { d as delay } from './utils.js';
 import { F as FormLabelClass } from './constants4.js';
+import { F as Fragment } from './Fragment.js';
 import { d as defineCustomElement$2 } from './gov-icon2.js';
 const govFormCheckboxCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-form-checkbox{cursor:pointer}.gov-form-checkbox input{position:absolute;top:0;left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.gov-form-checkbox input+span{position:relative;display:block}.gov-form-checkbox input+span::before{content:\"\";position:absolute;display:block;top:0;left:0;border:var(--gov-form-checkbox-border-size, 0.125rem solid var(--gov-color-primary));transition:150ms linear border-color, 150ms linear background-color, 150ms linear outline-color}.gov-form-checkbox .gov-form-label__label{position:relative;z-index:1;width:100%}.gov-form-checkbox input:focus-visible+span::before{outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base)}[invalid=\"\"].gov-form-checkbox .gov-form-label__label,[invalid=true i].gov-form-checkbox .gov-form-label__label,[invalid=\"1\"].gov-form-checkbox .gov-form-label__label{color:var(--gov-form-state-color-error, var(--gov-color-error))}[invalid=\"\"].gov-form-checkbox input+span::before,[invalid=true i].gov-form-checkbox input+span::before,[invalid=\"1\"].gov-form-checkbox input+span::before{border-color:var(--gov-form-state-color-error, var(--gov-color-error))}[disabled=\"\"].gov-form-checkbox,[disabled=true i].gov-form-checkbox,[disabled=\"1\"].gov-form-checkbox{pointer-events:none}[disabled=\"\"].gov-form-checkbox .gov-form-label__label,[disabled=true i].gov-form-checkbox .gov-form-label__label,[disabled=\"1\"].gov-form-checkbox .gov-form-label__label{color:var(--gov-form-state-color-disabled, var(--gov-color-secondary-600))}[disabled=\"\"].gov-form-checkbox input+span::before,[disabled=true i].gov-form-checkbox input+span::before,[disabled=\"1\"].gov-form-checkbox input+span::before{border-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400))}[size=xs].gov-form-checkbox{font-weight:var(--gov-text-xs-font-weight);font-size:var(--gov-text-xs-font-size);line-height:var(--gov-text-xs-line-height);letter-spacing:var(--gov-text-xs-letter-spacing);min-width:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);min-height:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem)}[size=xs].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-text-xs-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) + var(--gov-form-checkbox-core-xs-gap, 0.75rem))}[size=xs].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);height:var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem)}[size=s].gov-form-checkbox{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing);min-width:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);min-height:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem)}[size=s].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-text-s-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) + var(--gov-form-checkbox-core-s-gap, 0.75rem))}[size=s].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);height:var(--gov-form-checkbox-core-s-indicator-size, 1.375rem)}[size=m].gov-form-checkbox{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);min-width:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);min-height:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem)}[size=m].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-text-m-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) + var(--gov-form-checkbox-core-m-gap, 1rem))}[size=m].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);height:var(--gov-form-checkbox-core-m-indicator-size, 1.5rem)}[size=l].gov-form-checkbox{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing);min-width:var(--gov-form-checkbox-core-l-indicator-size, 2rem);min-height:var(--gov-form-checkbox-core-l-indicator-size, 2rem)}[size=l].gov-form-checkbox .gov-form-label__label{padding-top:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-text-l-font-size) * 1.5) / 2);padding-left:calc(var(--gov-form-checkbox-core-l-indicator-size, 2rem) + var(--gov-form-checkbox-core-l-gap, 1rem))}[size=l].gov-form-checkbox input+span::before{width:var(--gov-form-checkbox-core-l-indicator-size, 2rem);height:var(--gov-form-checkbox-core-l-indicator-size, 2rem)}.gov-form-checkbox input+span::before{border-radius:var(--gov-border-radius, 0.1875rem)}.gov-form-checkbox__check{position:absolute;color:var(--gov-form-checkbox-check-color, var(--gov-color-neutral-white));opacity:0;transition:150ms linear opacity}.gov-form-checkbox input:checked+span::before{background:var(--gov-form-checkbox-indicator-bg, var(--gov-color-primary))}input:checked+span .gov-form-checkbox__check{opacity:1}.gov-form-checkbox[invalid=\"\"] input:checked+span::before,.gov-form-checkbox[invalid=true i] input:checked+span::before,.gov-form-checkbox[invalid=\"1\"] input:checked+span::before{background:var(--gov-form-state-color-error, var(--gov-color-error))}.gov-form-checkbox[disabled=\"\"] input:checked+span::before,.gov-form-checkbox[disabled=true i] input:checked+span::before,.gov-form-checkbox[disabled=\"1\"] input:checked+span::before{border-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));background-color:var(--gov-form-input-disabled-bg, var(--gov-color-primary-400))}.gov-form-checkbox[size=xs] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-form-checkbox-core-xs-check-size, 0.75rem)) / 2);left:calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-form-checkbox-core-xs-check-size, 0.75rem)) / 2);width:var(--gov-form-checkbox-core-xs-check-size, 0.75rem);height:var(--gov-form-checkbox-core-xs-check-size, 0.75rem)}.gov-form-checkbox[size=s] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-form-checkbox-core-s-check-size, 0.825rem)) / 2);left:calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-form-checkbox-core-s-check-size, 0.825rem)) / 2);width:var(--gov-form-checkbox-core-s-check-size, 0.825rem);height:var(--gov-form-checkbox-core-s-check-size, 0.825rem)}.gov-form-checkbox[size=m] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-form-checkbox-core-m-check-size, 0.9rem)) / 2);left:calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-form-checkbox-core-m-check-size, 0.9rem)) / 2);width:var(--gov-form-checkbox-core-m-check-size, 0.9rem);height:var(--gov-form-checkbox-core-m-check-size, 0.9rem)}.gov-form-checkbox[size=l] .gov-form-checkbox__check{top:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-form-checkbox-core-l-check-size, 1.2rem)) / 2);left:calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-form-checkbox-core-l-check-size, 1.2rem)) / 2);width:var(--gov-form-checkbox-core-l-check-size, 1.2rem);height:var(--gov-form-checkbox-core-l-check-size, 1.2rem)}";
@@ -23,13 +24,14 @@ const GovFormCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.required = false;
     this.disabled = undefined;
     this.name = undefined;
-    this.size = 'm';
+    this.size = "m";
     this.identifier = undefined;
+    this.noLabel = false;
     this.invalid = undefined;
     this.wcagDescribedBy = undefined;
     this.wcagLabelledBy = undefined;
     this.isChecked = undefined;
-    this.checkboxId = createID('GovCheckbox');
+    this.checkboxId = createID("GovCheckbox");
     this.h = govHost(this.host);
     this.f = govForm(this.h);
   }
@@ -45,8 +47,8 @@ const GovFormCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   componentWillLoad() {
     this.isChecked = this.checked;
-    this.f.passAttrToControl('type', 'checkbox');
-    this.h.passChildAttr(FormLabelClass.root, 'identifier', this.identifier || this.checkboxId);
+    this.f.passAttrToControl("type", "checkbox");
+    this.h.passChildAttr(FormLabelClass.root, "identifier", this.identifier || this.checkboxId);
   }
   async componentDidRender() {
     if (canValidateWcagOnRender()) {
@@ -56,17 +58,31 @@ const GovFormCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   render() {
     const { isChecked } = this;
-    return (h(Host, { class: FormCheckboxClass.root, "is-checked": isChecked, size: this.size, invalid: toBoolAttrIfDefined(this.invalid) }, h("input", { id: this.identifier || this.checkboxId, type: "checkbox", value: this.value, name: this.name, checked: this.isChecked, onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, "aria-checked": toBoolAttr(this.isChecked), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) }), h("span", null, h("slot", { name: "label" }), h("gov-icon", { class: FormCheckboxClass.check, name: "check" }))));
+    const wrapCheckbox = (children) => {
+      if (this.noLabel) {
+        return (h("label", null, children));
+      }
+      return children;
+    };
+    return (h(Host, { class: FormCheckboxClass.root, "is-checked": isChecked, size: this.size, invalid: toBoolAttrIfDefined(this.invalid) }, wrapCheckbox(h(Fragment, null, 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": toBoolAttr(this.isChecked), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) }), h("span", null, h("slot", { name: "label" }), h("gov-icon", { class: FormCheckboxClass.check, name: "check-lg" }))))));
   }
   onFocusHandler(e) {
+    e.stopPropagation();
+    e.preventDefault();
     this.govFocus.emit(e);
   }
   onBlurHandler(e) {
+    e.stopPropagation();
+    e.preventDefault();
     this.govBlur.emit(e);
   }
+  onClickHandler(e) {
+    e.stopPropagation();
+  }
   onChangeHandler(e) {
     this.isChecked = e.target.checked;
     e.stopPropagation();
+    e.preventDefault();
     this.govChange.emit({
       checked: this.isChecked,
       value: this.value,
@@ -76,8 +92,8 @@ const GovFormCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    validateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormCheckboxClass.root);
-    validateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', FormCheckboxClass.root);
+    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", FormCheckboxClass.root);
+    validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", FormCheckboxClass.root);
     validateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormCheckboxClass.root);
   }
   get host() { return this; }
@@ -94,6 +110,7 @@ const GovFormCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "name": [1],
     "size": [1],
     "identifier": [1],
+    "noLabel": [4, "no-label"],
     "invalid": [4],
     "wcagDescribedBy": [1, "wcag-described-by"],
     "wcagLabelledBy": [1, "wcag-labelled-by"],
@@ -118,7 +135,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const GovFormCheckbox = GovFormCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

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

	@@ -1 +1 @@
1	- {"file":"gov-form-checkbox.js","mappings":"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","names":["GovFormCheckbox"],"sources":["../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.scss?tag=gov-form-checkbox","../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.tsx"],"sourcesContent":["/\n Checkbox\n /\n\n@import \"../checkbox/gov-form-checkbox-core.scss\";\n$class: \".gov-form-checkbox\";\n\n#{$class} {\n\t@extend %form-checkbox-core;\n\tinput + span {\n\t\t&::before {\n\t\t\tborder-radius: $border-radius;\n\t\t}\n\t}\n\t&__check {\n\t\tposition: absolute;\n\t\tcolor: $form-checkbox-check-color;\n\t\topacity: 0;\n\t\ttransition: $t linear opacity;\n\t}\n\n\t// STATES\n\tinput:checked + span::before {\n\t\tbackground: $form-checkbox-indicator-bg;\n\t}\n\tinput:checked + span &__check {\n\t\topacity: 1;\n\t}\n\t@include parameter(\"invalid\") {\n\t\tinput:checked + span::before {\n\t\t\tbackground: $form-state-color-error;\n\t\t}\n\t}\n\t@include parameter(\"disabled\") {\n\t\tinput:checked + span::before {\n\t\t\tborder-color: $form-state-bg-disabled;\n\t\t\tbackground-color: $form-state-bg-disabled;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@each $size, $definitions in $form-checkbox-core-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__check {\n\t\t\t\t\ttop: calc((get(\"indicator-size\", $definitions) - get(\"check-size\", $definitions)) / 2);\n\t\t\t\t\tleft: calc((get(\"indicator-size\", $definitions) - get(\"check-size\", $definitions)) / 2);\n\t\t\t\t\twidth: get(\"check-size\", $definitions);\n\t\t\t\t\theight: get(\"check-size\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch, Method } from '@stencil/core'\nimport { createID } from '../../../utils/string.utils'\nimport { validateProp } from '../../../helpers/Validate/props'\nimport { FormCheckboxClass, FormCheckboxSizes, FormCheckboxSizesType } 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, toBoolAttr } from '../../../helpers/Dom/template'\nimport { GovHost } from '../../../helpers/Dom/template.types'\nimport { govForm } from '../../../helpers/Dom/form'\nimport { FormLabelClass } from '../label/constants'\nimport { GovFormCheckboxChangeEvent } from './interfaces'\n\n@Component({\n\ttag: 'gov-form-checkbox',\n\tstyleUrl: 'gov-form-checkbox.scss',\n})\nexport class GovFormCheckbox {\n\tprivate h: GovHost\n\tprivate f: GovForm\n\n\tprivate readonly checkboxId: string\n\n\tconstructor() {\n\t\tthis.checkboxId = createID('GovCheckbox')\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormCheckboxElement\n\t/\n\t Value of checkbox\n\t /\n\t@Prop() readonly value: string\n\t/\n\t Checkbox default state\n\t /\n\t@Prop({ reflect: true }) readonly checked: boolean = false\n\t/\n\t Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t /\n\t@Prop() readonly required: boolean = false\n\t/\n\t Makes the checkbox component disabled.\n\t * This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies.\n\t /\n\t@Prop() readonly disabled: boolean\n\t/\n\t Name of the checkbox.\n\t /\n\t@Prop() readonly name: string\n\t/\n\t Checkbox's size.\n\t /\n\t@Prop() readonly size?: FormCheckboxSizesType = 'm'\n\t/\n\t Custom checkbox identifier.\n\t /\n\t@Prop({ attribute: 'identifier' }) readonly identifier: string\n\t/\n\t Indicates the entered value does not conform to the format expected by the application.\n\t /\n\t@Prop() readonly invalid: boolean\n\t/\n\t Indicates the id of a component that describes the input.\n\t /\n\t@Prop({ attribute: 'wcag-described-by' }) readonly wcagDescribedBy: string\n\t/\n\t Indicates the id of a component that labels the input.\n\t /\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/\n\t Emitted when the checkbox has focus.\n\t /\n\t@Event({ eventName: 'gov-focus' }) govFocus: EventEmitter<FocusEvent>\n\t/\n\t Emitted when the checkbox loses focus.\n\t /\n\t@Event({ eventName: 'gov-blur' }) govBlur: EventEmitter<FocusEvent>\n\t/\n\t Emitted when the checkbox change value.\n\t /\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovFormCheckboxChangeEvent>\n\n\t@State() isChecked: boolean\n\n\t@Watch('checked')\n\tupdateCheckedState(newValue: boolean): void {\n\t\tthis.isChecked = newValue\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormCheckboxSizes, newValue, FormCheckboxClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.isChecked = this.checked\n\n\t\tthis.f.passAttrToControl('type', 'checkbox')\n\t\tthis.h.passChildAttr(FormLabelClass.root, 'identifier', this.identifier \|\| this.checkboxId)\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { isChecked } = this\n\n\t\treturn (\n\t\t\t<Host class={FormCheckboxClass.root} is-checked={isChecked} size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t<input\n\t\t\t\t\tid={this.identifier \|\| this.checkboxId}\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue={this.value}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tchecked={this.isChecked}\n\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\trequired={this.required}\n\t\t\t\t\taria-checked={toBoolAttr(this.isChecked)}\n\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t/>\n\t\t\t\t<span>\n\t\t\t\t\t<slot name=\"label\" />\n\t\t\t\t\t<gov-icon class={FormCheckboxClass.check} name=\"check\"></gov-icon>\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.isChecked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t/\n\t Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, 'wcag-described-by', FormCheckboxClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, 'wcag-labelled-by', FormCheckboxClass.root)\n\t\tvalidateWcagLabelFor(this.identifier \|\| this.checkboxId, this.wcagLabelledBy, FormCheckboxClass.root)\n\t}\n}\n"],"version":3}
1	+ {"file":"gov-form-checkbox.js","mappings":"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","names":["GovFormCheckbox"],"sources":["../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.scss?tag=gov-form-checkbox","../../../packages/core/src/components/gov-form/checkbox/gov-form-checkbox.tsx"],"sourcesContent":["/\n Checkbox\n /\n\n@import \"../checkbox/gov-form-checkbox-core.scss\";\n$class: \".gov-form-checkbox\";\n\n#{$class} {\n\t@extend %form-checkbox-core;\n\tinput + span {\n\t\t&::before {\n\t\t\tborder-radius: $border-radius;\n\t\t}\n\t}\n\t&__check {\n\t\tposition: absolute;\n\t\tcolor: $form-checkbox-check-color;\n\t\topacity: 0;\n\t\ttransition: $t linear opacity;\n\t}\n\n\t// STATES\n\tinput:checked + span::before {\n\t\tbackground: $form-checkbox-indicator-bg;\n\t}\n\tinput:checked + span &__check {\n\t\topacity: 1;\n\t}\n\t@include parameter(\"invalid\") {\n\t\tinput:checked + span::before {\n\t\t\tbackground: $form-state-color-error;\n\t\t}\n\t}\n\t@include parameter(\"disabled\") {\n\t\tinput:checked + span::before {\n\t\t\tborder-color: $form-state-bg-disabled;\n\t\t\tbackground-color: $form-state-bg-disabled;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@each $size, $definitions in $form-checkbox-core-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__check {\n\t\t\t\t\ttop: calc((get(\"indicator-size\", $definitions) - get(\"check-size\", $definitions)) / 2);\n\t\t\t\t\tleft: calc((get(\"indicator-size\", $definitions) - get(\"check-size\", $definitions)) / 2);\n\t\t\t\t\twidth: get(\"check-size\", $definitions);\n\t\t\t\t\theight: get(\"check-size\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch, Method } from \"@stencil/core\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { FormCheckboxClass, FormCheckboxSizes, FormCheckboxSizesType } 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, toBoolAttr } from \"../../../helpers/Dom/template\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { FormLabelClass } from \"../label/constants\"\nimport { GovFormCheckboxChangeEvent } from \"./interfaces\"\nimport Fragment from \"../../../helpers/Fragment\"\n\n@Component({\n\ttag: \"gov-form-checkbox\",\n\tstyleUrl: \"gov-form-checkbox.scss\",\n})\nexport class GovFormCheckbox {\n\tprivate h: GovHost\n\tprivate f: GovForm\n\n\tprivate readonly checkboxId: string\n\n\tconstructor() {\n\t\tthis.checkboxId = createID(\"GovCheckbox\")\n\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovFormCheckboxElement\n\t/\n\t Value of checkbox\n\t /\n\t@Prop() readonly value: string\n\t/\n\t Checkbox default state\n\t /\n\t@Prop({ reflect: true }) readonly checked: boolean = false\n\t/\n\t Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t /\n\t@Prop() readonly required: boolean = false\n\t/\n\t Makes the checkbox component disabled.\n\t * This prevents users from being able to interact with the checkbox, and conveys its inactive state to assistive technologies.\n\t /\n\t@Prop() readonly disabled: boolean\n\t/\n\t Name of the checkbox.\n\t /\n\t@Prop() readonly name: string\n\t/\n\t Checkbox's size.\n\t /\n\t@Prop() readonly size?: FormCheckboxSizesType = \"m\"\n\t/\n\t Custom checkbox identifier.\n\t /\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: 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 Indicates the entered value does not conform to the format expected by the application.\n\t /\n\t@Prop() readonly invalid: boolean\n\t/\n\t Indicates the id of a component that describes the input.\n\t /\n\t@Prop({ attribute: \"wcag-described-by\" }) readonly wcagDescribedBy: string\n\t/\n\t Indicates the id of a component that labels the input.\n\t /\n\t@Prop({ attribute: \"wcag-labelled-by\" }) readonly wcagLabelledBy: string\n\t/\n\t Emitted when the checkbox has focus.\n\t /\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FocusEvent>\n\t/\n\t Emitted when the checkbox loses focus.\n\t /\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FocusEvent>\n\t/\n\t Emitted when the checkbox change value.\n\t /\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<GovFormCheckboxChangeEvent>\n\n\t@State() isChecked: boolean\n\n\t@Watch(\"checked\")\n\tupdateCheckedState(newValue: boolean): void {\n\t\tthis.isChecked = newValue\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormCheckboxSizes, newValue, FormCheckboxClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.isChecked = this.checked\n\n\t\tthis.f.passAttrToControl(\"type\", \"checkbox\")\n\t\tthis.h.passChildAttr(FormLabelClass.root, \"identifier\", this.identifier \|\| this.checkboxId)\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { isChecked } = this\n\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={FormCheckboxClass.root} is-checked={isChecked} size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t{wrapCheckbox(\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={this.identifier \|\| this.checkboxId}\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\tchecked={this.isChecked}\n\t\t\t\t\t\t\tonClick={this.onClickHandler.bind(this)}\n\t\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\t\taria-checked={toBoolAttr(this.isChecked)}\n\t\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<slot name=\"label\" />\n\t\t\t\t\t\t\t<gov-icon class={FormCheckboxClass.check} name=\"check-lg\"></gov-icon>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\te.preventDefault()\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\te.preventDefault()\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onClickHandler(e: PointerEvent) {\n\t\te.stopPropagation()\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.isChecked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\te.preventDefault()\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t/\n\t Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormCheckboxClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormCheckboxClass.root)\n\t\tvalidateWcagLabelFor(this.identifier \|\| this.checkboxId, this.wcagLabelledBy, FormCheckboxClass.root)\n\t}\n}\n"],"version":3}

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

@@ -105,7 +105,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const GovFormControl = GovFormControl$1;
 const defineCustomElement = defineCustomElement$1;

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

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

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

@@ -140,7 +140,7 @@ const GovFormFile$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.registerListeners();
   }
   render() {
-    return (h(Host, { class: this.h.classes([FormFileClass.root]), invalid: toBoolAttrIfDefined(this.invalid), expanded: toBoolAttrIfDefined(this.expanded) }, h("div", { class: FormFileClass.area, ref: el => (this.areaRef = el) }, h("slot", null), h("input", { class: FormFileClass.input, ref: el => (this.inputRef = el), id: this.identifier || this.fileId, type: "file", name: this.name, accept: this.accept, onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) })), this.h.hasSlot('attachments') ? (h("div", { class: FormFileClass.attachments }, h("slot", { name: 'attachments' }))) : null, this.files.length && this.displayAttachments ? (h("div", { class: FormFileClass.attachments }, h("gov-attachments", { label: this.wcagAttachmentsLabel, "wcag-label": this.wcagAttachmentsLabel }, this.files.map(item => (h("gov-attachments-item", { "wcag-remove-labelled-by": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, h("span", { class: 'sr-only', id: item.id }, this.wcagRemoveLabel.replace('{FILE_NAME}', item.file.name)), item.file.name, item.acceptValid === false ? (h("gov-form-message", { slot: "message", variant: "error" }, h("gov-icon", { slot: "icon", name: "warning" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (h("gov-form-message", { slot: "message", variant: "error" }, h("gov-icon", { slot: "icon", name: "warning" }), this.errorSize.replace('{FILE_SIZE}', formatBytes(this.maxFileSize * 1024)))) : null, h("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
+    return (h(Host, { class: this.h.classes([FormFileClass.root]), invalid: toBoolAttrIfDefined(this.invalid), expanded: toBoolAttrIfDefined(this.expanded) }, h("div", { class: FormFileClass.area, ref: el => (this.areaRef = el) }, h("slot", null), h("input", { class: FormFileClass.input, ref: el => (this.inputRef = el), id: this.identifier || this.fileId, type: "file", name: this.name, accept: this.accept, onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-disabled": toBoolAttrIfDefined(this.disabled) })), this.h.hasSlot('attachments') ? (h("div", { class: FormFileClass.attachments }, h("slot", { name: 'attachments' }))) : null, this.files.length && this.displayAttachments ? (h("div", { class: FormFileClass.attachments }, h("gov-attachments", { label: this.wcagAttachmentsLabel, "wcag-label": this.wcagAttachmentsLabel }, this.files.map(item => (h("gov-attachments-item", { "wcag-remove-labelled-by": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, h("span", { class: 'sr-only', id: item.id }, this.wcagRemoveLabel.replace('{FILE_NAME}', item.file.name)), item.file.name, item.acceptValid === false ? (h("gov-form-message", { slot: "message", variant: "error" }, h("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (h("gov-form-message", { slot: "message", variant: "error" }, h("gov-icon", { slot: "icon", name: "exclamation-triangle-fill" }), this.errorSize.replace('{FILE_SIZE}', formatBytes(this.maxFileSize * 1024)))) : null, h("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
   }
   onRemoveFileHandler(file) {
     const index = this.files.findIndex(item => item.id === file.id);
@@ -154,13 +154,19 @@ const GovFormFile$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   onFocusHandler(e) {
+    e.stopPropagation();
     e.preventDefault();
     this.govFocus.emit(e);
   }
   onBlurHandler(e) {
+    e.stopPropagation();
     e.preventDefault();
     this.govBlur.emit(e);
   }
+  onChangeHandler(e) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
   /**
    * Validate the WCAG attributes of the component
    */
@@ -229,7 +235,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const GovFormFile = GovFormFile$1;
 const defineCustomElement = defineCustomElement$1;