npm - @gov-design-system-ce/components - Versions diffs - 0.0.52 → 0.0.54 - Mend

@gov-design-system-ce/components 0.0.52 → 0.0.54

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 (523) hide show

package/dist/components/gov-accordion-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["govAccordionItemCss","GovAccordionItem","proxyCustomElement","H","constructor","this","h","govHost","host","triggerId","createID","contentId","validateLabel","newValue","govErrorLog","AccordionItemClass","root","validateTriggerTag","validTags","includes","validateSize","validateProp","AccordionSizes","validateVariant","AccordionVariants","emmitChange","govChange","emit","open","isExpandedState","component","ref","componentWillLoad","isExpanded","getPropsFromParents","label","triggerTag","size","variant","accordion","getParent","AccordionClass","getAttribute","render","identifier","TriggerTag","Host","class","classes","noBorder","role","id","header","booleanString","disabled","type","toBoolAttrIfDefined","onClick","e","stopPropagation","toggle","finally","title","hasSlot","icon","name","annotation","annot","suffix","arrow","content","hidden","close","currentState"],"sources":["../../../packages/core/src/components/gov-accordion/gov-accordion-item.scss?tag=gov-accordion-item","../../../packages/core/src/components/gov-accordion/gov-accordion-item.tsx"],"sourcesContent":["/\n Accordion - Item\n /\n\n$class: \".gov-accordion-item\";\n\n#{$class} {\n\t@include base();\n\t&__header {\n\t\t@include button-core();\n\t\t@include focus-outline();\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\twidth: 100%;\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\t&::before {\n\t\t\t@include pseudo();\n\t\t\tright: 0;\n\t\t\tbottom: -1px;\n\t\t\tleft: 0;\n\t\t\theight: 1px;\n\t\t}\n\n\t\t// STATES\n\t\t&:focus-visible {\n\t\t\t&::before {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t\t@include parameter(\"aria-expanded\") {\n\t\t\t#{$class} {\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\t&__arrow {\n\t\tflex: 0 0 auto;\n\t\talign-self: center;\n\t}\n\t&__icon {\n\t\tdisplay: inline-flex;\n\t\tvertical-align: middle;\n\t\tflex: 0 0 auto;\n\t}\n\t&__suffix {\n\t\tdisplay: inline-flex;\n\t\tvertical-align: middle;\n\t\tflex: 0 0 auto;\n\t\talign-self: start;\n\t\tmargin-left: auto;\n\t\tline-height: initial;\n\t}\n\t&__title {\n\t\t@include general;\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\talign-items: flex-start;\n\t}\n\t&__name {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\t&__annot {\n\t\tcolor: color(\"secondary\");\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t}\n\n\t// VARIANTS\n\t@each $size, $definitions in $accordion-sizes {\n\t\t&[size=\"#{$size}\"],\n\t\t& #{$class}[size=\"#{$size}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__header {\n\t\t\t\t\tgap: get(\"headline-gap\", $definitions);\n\t\t\t\t\tmin-height: get(\"min-height\", $definitions);\n\t\t\t\t\tpadding: get(\"padding-y\", $definitions) get(\"padding-x\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__arrow {\n\t\t\t\t\twidth: get(\"icon-size\", $definitions);\n\t\t\t\t\theight: get(\"icon-size\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__icon {\n\t\t\t\t\twidth: calc(get-font-size(get(\"font\", $definitions)) 1.2);\n\t\t\t\t\theight: calc(get-font-size(get(\"font\", $definitions)) * 1.2);\n\t\t\t\t\ttransform: translateY(get(\"icon-position\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__title {\n\t\t\t\t\t@include typography(get(\"font\", $definitions));\n\t\t\t\t\tgap: get(\"headline-gap\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__annot {\n\t\t\t\t\t@include typography(get(\"font-annot\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tpadding: get(\"padding-inner\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@each $variant, $definitions in $accordion-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__header {\n\t\t\t\t\tbackground-color: get(\"background\", $definitions);\n\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t\t&::before {\n\t\t\t\t\t\tbackground-color: get(\"separator\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t@include hover() {\n\t\t\t\t\t\tbackground-color: get(\"background-hover\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"disabled\") {\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__header {\n\t\t\t\t\t\tcolor: get(\"disabled-color\", $definitions);\n\t\t\t\t\t\t@include hover() {\n\t\t\t\t\t\t\tbackground: transparent;\n\t\t\t\t\t\t\tcursor: not-allowed;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($until: md) {\n\t\t&__title {\n\t\t\tflex-wrap: wrap;\n\t\t}\n\t\t&__label {\n\t\t\tflex: 0 0 auto;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Prop, State, Watch, Host, Method, Event, EventEmitter } from \"@stencil/core\"\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport {\n\tAccordionSizeType,\n\tAccordionSizes,\n\tAccordionItemClass,\n\tAccordionVariantType,\n\tAccordionVariants, AccordionClass,\n} from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { booleanString, toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { AccordionItemEvent } from \"./gov-accordion.types\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\n\n@Component({\n\ttag: \"gov-accordion-item\",\n\tstyleUrl: \"gov-accordion-item.scss\",\n})\nexport class GovAccordionItem {\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID(\"GovAccordionItem\")\n\t\tthis.contentId = createID(\"GovAccordionContent\")\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionItemElement\n\t@State() isExpandedState: boolean\n\n\t/*\n\t Style variation of the button.\n\t /\n\t@Prop({mutable: true}) variant?: AccordionVariantType = \"primary\"\n\t/\n\t Custom accordion item identifier. Otherwise, it will be generated\n\t /\n\t@Prop() readonly identifier: string\n\t/\n\t Accordion’s size.\n\t /\n\t@Prop({mutable: true}) size?: AccordionSizeType\n\t/\n\t Item name of the accordion\n\t /\n\t@Prop() readonly label: string\n\t/\n\t Item annotation of the accordion\n\t /\n\t@Prop() readonly annotation: string\n\t/\n\t Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t /\n\t@Prop() readonly disabled: boolean = false\n\t/\n\t Defines whether the accordion is open or closed by default\n\t /\n\t@Prop({ attribute: \"is-expanded\" }) readonly isExpanded: boolean = false\n\t/\n\t Used to change the HTML tag in the accordion trigger for correct semantic structure\n\t /\n\t@Prop({ attribute: \"trigger-tag\" }) readonly triggerTag: string = \"h3\"\n\t/\n\t To remove the main underline of an item\n\t /\n\t@Prop({ attribute: \"no-border\" }) readonly noBorder: boolean = false\n\t/\n\t Called when the accordion state changes\n\t /\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<AccordionItemEvent>\n\n\t@Watch(\"label\")\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${AccordionItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\t@Watch(\"triggerTag\")\n\tvalidateTriggerTag(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(`[${AccordionItemClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionItemClass.root)\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(AccordionVariants, newValue, AccordionItemClass.root)\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({\n\t\t\topen: this.isExpandedState,\n\t\t\tcomponent: AccordionItemClass.root,\n\t\t\tref: this.host,\n\t\t})\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpandedState = this.isExpanded\n\t\tthis.getPropsFromParents()\n\n\t\tthis.validateLabel(this.label)\n\t\tthis.validateTriggerTag(this.triggerTag)\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\n\t}\n\n\tgetPropsFromParents() {\n\t\tconst accordion = this.h.getParent(AccordionClass.root)\n\t\tif(accordion) {\n\t\t\tthis.size = accordion.getAttribute('size') as AccordionSizeType\n\t\t\tthis.variant = accordion.getAttribute('variant') as AccordionVariantType\n\t\t}\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier \|\| this.triggerId\n\t\tconst contentId = this.contentId\n\t\tconst { isExpandedState, label } = this\n\t\tconst TriggerTag = this.triggerTag\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AccordionItemClass.root)} no-border={this.noBorder} size={this.size} variant={this.variant} role=\"listitem\">\n\t\t\t\t<button\n\t\t\t\t\tid={triggerId}\n\t\t\t\t\tclass={AccordionItemClass.header}\n\t\t\t\t\taria-expanded={booleanString(isExpandedState)}\n\t\t\t\t\taria-controls={contentId}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\ttype={'button'}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\tonClick={(e: Event) => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.toggle().finally()\n\t\t\t\t\t}}>\n\t\t\t\t\t<TriggerTag class={AccordionItemClass.title}>\n\t\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.icon}>\n\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<span class={AccordionItemClass.name}>\n\t\t\t\t\t\t\t<span class={AccordionItemClass.label}>{label}</span>\n\t\t\t\t\t\t\t{this.annotation && <span class={AccordionItemClass.annot}>{this.annotation}</span>}\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t{this.h.hasSlot(\"suffix\") && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.suffix}>\n\t\t\t\t\t\t\t\t<slot name=\"suffix\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</TriggerTag>\n\n\t\t\t\t\t<gov-icon class={AccordionItemClass.arrow} name=\"chevron-down\"></gov-icon>\n\t\t\t\t</button>\n\t\t\t\t<div\n\t\t\t\t\tclass={AccordionItemClass.content}\n\t\t\t\t\tid={contentId}\n\t\t\t\t\taria-hidden={booleanString(!isExpandedState)}\n\t\t\t\t\thidden={!isExpandedState}\n\t\t\t\t\taria-labelledby={triggerId}>\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\t/\n\t Opening the accordion\n\t /\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpandedState = true\n\t\tthis.emmitChange()\n\t}\n\n\t/\n\t Closing the accordion\n\t /\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpandedState = false\n\t\tthis.emmitChange()\n\t}\n\n\t/\n\t Accordion switch\n\t /\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpandedState = !this.isExpandedState\n\t\tthis.emmitChange()\n\t}\n\n\t/\n\t Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpandedState\n\t}\n}\n"],"mappings":"2TAAA,MAAMA,EAAsB,yyW,MCoBfC,EAAgBC,EAAA,MAAAD,UAAAE,EAK5B,WAAAC,G,gHAYwD,U,2GAqBnB,M,gBAI8B,M,gBAID,K,cAIH,MA5C9DC,KAAKC,EAAIC,EAAQF,KAAKG,MACtBH,KAAKI,UAAYC,EAAS,oBAC1BL,KAAKM,UAAYD,EAAS,sB,CAiD3B,aAAAE,CAAcC,GACb,IAAKA,EAAU,CACdC,EAAY,IAAIC,EAAmBC,sC,EAKrC,kBAAAC,CAAmBJ,GAClB,MAAMK,EAAY,CAAC,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,QACvD,GAAIL,EAAU,CACb,IAAKK,EAAUC,SAASN,GAAW,CAClCC,EAAY,IAAIC,EAAmBC,cAAcH,oB,GAMpD,YAAAO,CAAaP,GACZQ,EAAaC,EAAgBT,EAAUE,EAAmBC,K,CAI3D,eAAAO,CAAgBV,GACfQ,EAAaG,EAAmBX,EAAUE,EAAmBC,K,CAGtD,WAAAS,GACPpB,KAAKqB,UAAUC,KAAK,CACnBC,KAAMvB,KAAKwB,gBACXC,UAAWf,EAAmBC,KAC9Be,IAAK1B,KAAKG,M,CAIZ,iBAAAwB,GACC3B,KAAKwB,gBAAkBxB,KAAK4B,WAC5B5B,KAAK6B,sBAEL7B,KAAKO,cAAcP,KAAK8B,OACxB9B,KAAKY,mBAAmBZ,KAAK+B,YAC7B/B,KAAKe,aAAaf,KAAKgC,MACvBhC,KAAKkB,gBAAgBlB,KAAKiC,Q,CAI3B,mBAAAJ,GACC,MAAMK,EAAYlC,KAAKC,EAAEkC,UAAUC,EAAezB,MAClD,GAAGuB,EAAW,CACblC,KAAKgC,KAAOE,EAAUG,aAAa,QACnCrC,KAAKiC,QAAUC,EAAUG,aAAa,U,EAIxC,MAAAC,GACC,MAAMlC,EAAYJ,KAAKuC,YAAcvC,KAAKI,UAC1C,MAAME,EAAYN,KAAKM,UACvB,MAAMkB,gBAAEA,EAAeM,MAAEA,GAAU9B,KACnC,MAAMwC,EAAaxC,KAAK+B,WAExB,OACC9B,EAACwC,EAAI,CAACC,MAAO1C,KAAKC,EAAE0C,QAAQjC,EAAmBC,MAAK,YAAaX,KAAK4C,SAAUZ,KAAMhC,KAAKgC,KAAMC,QAASjC,KAAKiC,QAASY,KAAK,YAC5H5C,EAAA,UACC6C,GAAI1C,EACJsC,MAAOhC,EAAmBqC,OAAM,gBACjBC,EAAcxB,GAAgB,gBAC9BlB,EACf2C,SAAUjD,KAAKiD,SACfC,KAAM,SAAQ,gBACCC,EAAoBnD,KAAKiD,UACxCG,QAAUC,IACTA,EAAEC,kBACFtD,KAAKuD,SAASC,SAAS,GAExBvD,EAACuC,EAAU,CAACE,MAAOhC,EAAmB+C,OACpCzD,KAAKC,EAAEyD,QAAQ,SACfzD,EAAA,QAAMyC,MAAOhC,EAAmBiD,MAC/B1D,EAAA,QAAM2D,KAAK,UAIb3D,EAAA,QAAMyC,MAAOhC,EAAmBkD,MAC/B3D,EAAA,QAAMyC,MAAOhC,EAAmBoB,OAAQA,GACvC9B,KAAK6D,YAAc5D,EAAA,QAAMyC,MAAOhC,EAAmBoD,OAAQ9D,KAAK6D,aAGjE7D,KAAKC,EAAEyD,QAAQ,WACfzD,EAAA,QAAMyC,MAAOhC,EAAmBqD,QAC/B9D,EAAA,QAAM2D,KAAK,aAKd3D,EAAA,YAAUyC,MAAOhC,EAAmBsD,MAAOJ,KAAK,kBAEjD3D,EAAA,OACCyC,MAAOhC,EAAmBuD,QAC1BnB,GAAIxC,EAAS,cACA0C,GAAexB,GAC5B0C,QAAS1C,EAAe,kBACPpB,GACjBH,EAAA,c,CAUJ,UAAMsB,GACLvB,KAAKwB,gBAAkB,KACvBxB,KAAKoB,a,CAON,WAAM+C,GACLnE,KAAKwB,gBAAkB,MACvBxB,KAAKoB,a,CAON,YAAMmC,GACLvD,KAAKwB,iBAAmBxB,KAAKwB,gBAC7BxB,KAAKoB,a,CAON,kBAAMgD,GACL,OAAOpE,KAAKwB,e"}
1	+ {"version":3,"names":["govAccordionItemCss","GovAccordionItem","proxyCustomElement","H","constructor","this","h","govHost","host","triggerId","createID","contentId","validateSize","newValue","validateProp","AccordionSizes","AccordionItemClass","root","validateVariant","AccordionVariants","emmitChange","govChange","emit","open","isExpanded","component","ref","componentWillLoad","getPropsFromParents","size","variant","accordion","getParent","AccordionClass","getAttribute","render","identifier","Host","class","classes","role","id","header","booleanString","disabled","type","toBoolAttrIfDefined","onClick","e","stopPropagation","toggle","finally","hasSlot","icon","name","title","label","annotation","suffix","arrow","content","hidden","close","currentState"],"sources":["../../../packages/core/src/components/gov-accordion/gov-accordion-item.scss?tag=gov-accordion-item","../../../packages/core/src/components/gov-accordion/gov-accordion-item.tsx"],"sourcesContent":["/\n Accordion - Item\n /\n\n$class: \".gov-accordion-item\";\n\n#{$class} {\n\t@include base();\n\t&::before {\n\t\t@include pseudo();\n\t\tright: 0;\n\t\tbottom: -1px;\n\t\tleft: 0;\n\t\theight: 1px;\n\t\tbackground-color: color(\"secondary.500\");\n\t}\n\n\t&__header {\n\t\t@include button-core();\n\t\t@include focus-outline();\n\t\t@include general;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: flex-start;\n\t\twidth: 100%;\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\n\t\t// STATES\n\t\t&:focus-visible {\n\t\t\t&::before {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t\t@include parameter(\"aria-expanded\") {\n\t\t\t#{$class} {\n\t\t\t\t&__arrow .gov-icon:not([slot=\"toggle-icon\"]) {\n\t\t\t\t\ttransform: scale(-1);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t&__arrow {\n\t\tflex: 0 0 auto;\n\t\tmargin-left: auto;\n\t}\n\t&__icon {\n\t\tdisplay: inline-flex;\n\t\tvertical-align: middle;\n\t\tflex: 0 0 auto;\n\t}\n\t&__suffix {\n\t\tdisplay: inline-flex;\n\t\tvertical-align: middle;\n\t\tflex: 0 0 auto;\n\t\talign-self: start;\n\t\tmargin-left: auto;\n\t\tline-height: initial;\n\t}\n\t&__title {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\t&__label {\n\t\tmargin-bottom: 0;\n\t\ttransform: translateY(1px);\n\t}\n\t&__annotation * {\n\t\tcolor: color(\"secondary\");\n\t\tmargin-bottom: 0;\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t}\n\n\t// VARIANTS\n\t@each $size, $definitions in $accordion-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__header {\n\t\t\t\t\tgap: get(\"headline-gap\", $definitions);\n\t\t\t\t\tmin-height: get(\"min-height\", $definitions);\n\t\t\t\t\tpadding: get(\"padding-y\", $definitions) get(\"padding-x\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__label * {\n\t\t\t\t\t@include typography(get(\"font\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__arrow {\n\t\t\t\t\twidth: get(\"icon-size\", $definitions);\n\t\t\t\t\theight: get(\"icon-size\", $definitions);\n\t\t\t\t\ttransform: translateY(get(\"arrow-position\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__icon {\n\t\t\t\t\twidth: calc(get-font-size(get(\"font\", $definitions)) * 1.2);\n\t\t\t\t\theight: calc(get-font-size(get(\"font\", $definitions)) * 1.2);\n\t\t\t\t\ttransform: translateY(get(\"icon-position\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__annotation {\n\t\t\t\t\t@include typography(get(\"font-annotation\", $definitions));\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tpadding: get(\"padding-inner\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@each $variant, $definitions in $accordion-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&::before {\n\t\t\t\t\tbackground-color: get(\"separator\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__header {\n\t\t\t\t\tbackground-color: get(\"background\", $definitions);\n\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t\t@include hover() {\n\t\t\t\t\t\tbackground-color: get(\"background-hover\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"disabled\") {\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__header {\n\t\t\t\t\t\tcolor: get(\"disabled-color\", $definitions);\n\t\t\t\t\t\t@include hover() {\n\t\t\t\t\t\t\tbackground: transparent;\n\t\t\t\t\t\t\tcursor: not-allowed;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($until: md) {\n\t\t&__title {\n\t\t\tflex-wrap: wrap;\n\t\t}\n\t\t&__label {\n\t\t\tflex: 0 0 auto;\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport {\n\tAccordionClass,\n\tAccordionItemClass,\n\tAccordionSizes,\n\tAccordionSizeType,\n\tAccordionVariants,\n\tAccordionVariantType,\n} from \"./constants\"\nimport { createID } from \"../../utils/string.utils\"\nimport { booleanString, govHost, toBoolAttrIfDefined } from \"../../helpers/Dom/template\"\nimport { AccordionItemEvent } from \"./gov-accordion.types\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\n\n@Component({\n\ttag: \"gov-accordion-item\",\n\tstyleUrl: \"gov-accordion-item.scss\",\n})\nexport class GovAccordionItem {\n\tprivate readonly triggerId: string\n\tprivate readonly contentId: string\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.triggerId = createID(\"GovAccordionItem\")\n\t\tthis.contentId = createID(\"GovAccordionContent\")\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionItemElement\n\t@State() isExpandedState: boolean\n\n\t/*\n\t Style variation of the button.\n\t /\n\t@Prop() variant?: AccordionVariantType\n\t/\n\t Custom accordion item identifier. Otherwise, it will be generated\n\t /\n\t@Prop() readonly identifier: string\n\t/\n\t Accordion’s size.\n\t /\n\t@Prop() size?: AccordionSizeType\n\t/\n\t Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t /\n\t@Prop() readonly disabled: boolean = false\n\t/\n\t Defines whether the accordion is open or closed by default\n\t /\n\t@Prop({ attribute: \"is-expanded\", mutable: true }) isExpanded = false\n\t/\n\t Called when the accordion state changes\n\t /\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<AccordionItemEvent>\n\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionItemClass.root)\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(AccordionVariants, newValue, AccordionItemClass.root)\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({\n\t\t\topen: this.isExpanded,\n\t\t\tcomponent: AccordionItemClass.root,\n\t\t\tref: this.host,\n\t\t})\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.getPropsFromParents()\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\n\t}\n\n\tgetPropsFromParents() {\n\t\tconst accordion = this.h.getParent(AccordionClass.root)\n\t\tif (accordion) {\n\t\t\tthis.size = accordion.getAttribute(\"size\") as AccordionSizeType\n\t\t\tthis.variant = accordion.getAttribute(\"variant\") as AccordionVariantType\n\t\t}\n\t}\n\n\trender() {\n\t\tconst triggerId = this.identifier \|\| this.triggerId\n\t\tconst contentId = this.contentId\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AccordionItemClass.root)} size={this.size} variant={this.variant} role=\"listitem\">\n\t\t\t\t<button\n\t\t\t\t\tid={triggerId}\n\t\t\t\t\tclass={AccordionItemClass.header}\n\t\t\t\t\taria-expanded={booleanString(this.isExpanded)}\n\t\t\t\t\taria-controls={contentId}\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\ttype={\"button\"}\n\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\tonClick={(e: Event) => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\tthis.toggle().finally()\n\t\t\t\t\t}}>\n\n\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t<span class={AccordionItemClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<span class={AccordionItemClass.title}>\n\t\t\t\t\t\t<span class={AccordionItemClass.label}>\n\t\t\t\t\t\t\t<slot name=\"label\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{this.h.hasSlot(\"annotation\") && (\n\t\t\t\t\t\t\t<span class={AccordionItemClass.annotation}>\n\t\t\t\t\t\t\t\t<slot name=\"annotation\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\n\t\t\t\t\t{this.h.hasSlot(\"suffix\") && (\n\t\t\t\t\t\t<span class={AccordionItemClass.suffix}>\n\t\t\t\t\t\t\t<slot name=\"suffix\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<span class={AccordionItemClass.arrow}>\n\t\t\t\t\t\t{this.h.hasSlot(\"toggle-icon\") ? (\n\t\t\t\t\t\t\t<slot name=\"toggle-icon\" />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t\t<div\n\t\t\t\t\tclass={AccordionItemClass.content}\n\t\t\t\t\tid={contentId}\n\t\t\t\t\taria-hidden={booleanString(!this.isExpanded)}\n\t\t\t\t\thidden={!this.isExpanded}\n\t\t\t\t\taria-labelledby={triggerId}>\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\t/\n\t Opening the accordion\n\t /\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpanded = true\n\t\tthis.emmitChange()\n\t}\n\n\t/\n\t Closing the accordion\n\t /\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpanded = false\n\t\tthis.emmitChange()\n\t}\n\n\t/\n\t Accordion switch\n\t /\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpanded = !this.isExpanded\n\t\tthis.emmitChange()\n\t}\n\n\t/\n\t Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpanded\n\t}\n}\n"],"mappings":"uRAAA,MAAMA,EAAsB,8xT,MCmBfC,EAAgBC,EAAA,MAAAD,UAAAE,EAK5B,WAAAC,G,sLAyBqC,M,gBAI2B,MA5B/DC,KAAKC,EAAIC,EAAQF,KAAKG,MACtBH,KAAKI,UAAYC,EAAS,oBAC1BL,KAAKM,UAAYD,EAAS,sB,CAkC3B,YAAAE,CAAaC,GACZC,EAAaC,EAAgBF,EAAUG,EAAmBC,K,CAI3D,eAAAC,CAAgBL,GACfC,EAAaK,EAAmBN,EAAUG,EAAmBC,K,CAGtD,WAAAG,GACPf,KAAKgB,UAAUC,KAAK,CACnBC,KAAMlB,KAAKmB,WACXC,UAAWT,EAAmBC,KAC9BS,IAAKrB,KAAKG,M,CAIZ,iBAAAmB,GACCtB,KAAKuB,sBACLvB,KAAKO,aAAaP,KAAKwB,MACvBxB,KAAKa,gBAAgBb,KAAKyB,Q,CAI3B,mBAAAF,GACC,MAAMG,EAAY1B,KAAKC,EAAE0B,UAAUC,EAAehB,MAClD,GAAIc,EAAW,CACd1B,KAAKwB,KAAOE,EAAUG,aAAa,QACnC7B,KAAKyB,QAAUC,EAAUG,aAAa,U,EAIxC,MAAAC,GACC,MAAM1B,EAAYJ,KAAK+B,YAAc/B,KAAKI,UAC1C,MAAME,EAAYN,KAAKM,UAEvB,OACCL,EAAC+B,EAAI,CAACC,MAAOjC,KAAKC,EAAEiC,QAAQvB,EAAmBC,MAAOY,KAAMxB,KAAKwB,KAAMC,QAASzB,KAAKyB,QAASU,KAAK,YAClGlC,EAAA,UACCmC,GAAIhC,EACJ6B,MAAOtB,EAAmB0B,OAAM,gBACjBC,EAActC,KAAKmB,YAAW,gBAC9Bb,EACfiC,SAAUvC,KAAKuC,SACfC,KAAM,SAAQ,gBACCC,EAAoBzC,KAAKuC,UACxCG,QAAUC,IACTA,EAAEC,kBACF5C,KAAK6C,SAASC,SAAS,GAGvB9C,KAAKC,EAAE8C,QAAQ,SACf9C,EAAA,QAAMgC,MAAOtB,EAAmBqC,MAC/B/C,EAAA,QAAMgD,KAAK,UAIbhD,EAAA,QAAMgC,MAAOtB,EAAmBuC,OAC/BjD,EAAA,QAAMgC,MAAOtB,EAAmBwC,OAC/BlD,EAAA,QAAMgD,KAAK,WAEXjD,KAAKC,EAAE8C,QAAQ,eACf9C,EAAA,QAAMgC,MAAOtB,EAAmByC,YAC/BnD,EAAA,QAAMgD,KAAK,iBAKbjD,KAAKC,EAAE8C,QAAQ,WACf9C,EAAA,QAAMgC,MAAOtB,EAAmB0C,QAC/BpD,EAAA,QAAMgD,KAAK,YAIbhD,EAAA,QAAMgC,MAAOtB,EAAmB2C,OAC9BtD,KAAKC,EAAE8C,QAAQ,eACf9C,EAAA,QAAMgD,KAAK,gBAEXhD,EAAA,YAAUgD,KAAK,mBAIlBhD,EAAA,OACCgC,MAAOtB,EAAmB4C,QAC1BnB,GAAI9B,EAAS,cACAgC,GAAetC,KAAKmB,YACjCqC,QAASxD,KAAKmB,WAAU,kBACPf,GACjBH,EAAA,c,CAUJ,UAAMiB,GACLlB,KAAKmB,WAAa,KAClBnB,KAAKe,a,CAON,WAAM0C,GACLzD,KAAKmB,WAAa,MAClBnB,KAAKe,a,CAON,YAAM8B,GACL7C,KAAKmB,YAAcnB,KAAKmB,WACxBnB,KAAKe,a,CAON,kBAAM2C,GACL,OAAO1D,KAAKmB,U"}

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

@@ -1,2 +1,2 @@
-import{p as a,H as t,c as i,h as o,d as s}from"./p-80c0109d.js";import{v as e}from"./p-26acf964.js";import{A as r,a as n,b as c}from"./p-a5d69694.js";import{V as d}from"./p-ff7365ae.js";import{v as p}from"./p-0f5e2b0a.js";import{c as l}from"./p-34152b51.js";import{d as m}from"./p-03990da5.js";import{g as f}from"./p-3f37ddb6.js";const h=".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-accordion{position:relative;display:block;width:100%}.gov-accordion[no-border] .gov-accordion-item__header::before{background-color:transparent !important}";const g=a(class a extends t{constructor(){super();this.__registerHost();this.govChange=i(this,"gov-change",7);this.size="m";this.variant="primary";this.noBorder=false;this.wcagLabel=undefined;this.wcagLabelledBy=undefined;this.h=f(this.host)}validateSize(a){e(c,a,n.root)}validateVariant(a){e(d,a,n.root)}componentWillLoad(){this.validateSize(this.size);this.validateVariant(this.variant)}componentDidLoad(){this.host.querySelectorAll(r.root).forEach((a=>{a.addEventListener("gov-change",(a=>{a.stopPropagation();this.govChange.emit({component:n.root,open:a.detail.open,ref:a.detail.ref})}))}))}async componentDidRender(){if(l()){await m(500);await this.validateWcag()}}render(){return o(s,{class:this.h.classes(n.root),size:this.size,variant:this.variant},o("div",{role:"list","arial-label":this.wcagLabel,"arial-labelledby":this.wcagLabelledBy},o("slot",null)))}async validateWcag(){p(this.wcagLabel,this.wcagLabelledBy,n.root)}get host(){return this}static get watchers(){return{size:["validateSize"],variant:["validateVariant"]}}static get style(){return h}},[4,"gov-accordion",{size:[1],variant:[1],noBorder:[4,"no-border"],wcagLabel:[1,"wcag-label"],wcagLabelledBy:[1,"wcag-labelled-by"],validateWcag:[64]}]);function v(){if(typeof customElements==="undefined"){return}const a=["gov-accordion"];a.forEach((a=>{switch(a){case"gov-accordion":if(!customElements.get(a)){customElements.define(a,g)}break}}))}v();const b=g;const u=v;export{b as GovAccordion,u as defineCustomElement};
+import{p as a,H as t,c as i,h as o,d as s}from"./p-80c0109d.js";import{v as e}from"./p-26acf964.js";import{A as r,a as n,b as c}from"./p-37a7409e.js";import{V as d}from"./p-ff7365ae.js";import{v as p}from"./p-ae894a40.js";import{c as l}from"./p-cac3881f.js";import{d as m}from"./p-03990da5.js";import{g as f}from"./p-3f37ddb6.js";const h=".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-accordion{position:relative;display:block;width:100%}.gov-accordion[no-border] .gov-accordion-item::before{background-color:transparent !important}";const g=a(class a extends t{constructor(){super();this.__registerHost();this.govChange=i(this,"gov-change",7);this.size="m";this.variant="primary";this.noBorder=false;this.wcagLabel=undefined;this.wcagLabelledBy=undefined;this.h=f(this.host)}validateSize(a){e(c,a,n.root)}validateVariant(a){e(d,a,n.root)}componentWillLoad(){this.validateSize(this.size);this.validateVariant(this.variant)}componentDidLoad(){this.host.querySelectorAll(r.root).forEach((a=>{a.addEventListener("gov-change",(a=>{a.stopPropagation();this.govChange.emit({component:n.root,open:a.detail.open,ref:a.detail.ref})}))}))}async componentDidRender(){if(l()){await m(500);await this.validateWcag()}}render(){return o(s,{class:this.h.classes(n.root),size:this.size,variant:this.variant,role:"list","arial-label":this.wcagLabel,"arial-labelledby":this.wcagLabelledBy},o("slot",null))}async validateWcag(){p(this.wcagLabel,this.wcagLabelledBy,n.root)}get host(){return this}static get watchers(){return{size:["validateSize"],variant:["validateVariant"]}}static get style(){return h}},[4,"gov-accordion",{size:[1],variant:[1],noBorder:[4,"no-border"],wcagLabel:[1,"wcag-label"],wcagLabelledBy:[1,"wcag-labelled-by"],validateWcag:[64]}]);function v(){if(typeof customElements==="undefined"){return}const a=["gov-accordion"];a.forEach((a=>{switch(a){case"gov-accordion":if(!customElements.get(a)){customElements.define(a,g)}break}}))}v();const u=g;const b=v;export{u as GovAccordion,b as defineCustomElement};
 //# sourceMappingURL=gov-accordion.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["govAccordionCss","GovAccordion","proxyCustomElement","H","constructor","this","h","govHost","host","validateSize","newValue","validateProp","AccordionSizes","AccordionClass","root","validateVariant","Variants","componentWillLoad","size","variant","componentDidLoad","querySelectorAll","AccordionItemClass","forEach","child","addEventListener","e","stopPropagation","govChange","emit","component","open","detail","ref","componentDidRender","canValidateWcagOnRender","delay","validateWcag","render","Host","class","classes","role","wcagLabel","wcagLabelledBy","validateWcagLabel"],"sources":["../../../packages/core/src/components/gov-accordion/gov-accordion.scss?tag=gov-accordion","../../../packages/core/src/components/gov-accordion/gov-accordion.tsx"],"sourcesContent":["/\n Accordion\n /\n\n$class: \".gov-accordion\";\n\n#{$class} {\n\t@include base();\n\n\t&[no-border] {\n\t\t.gov-accordion-~~item__header~~::before {\n\t\t\tbackground-color: transparent !important;\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { AccordionClass, AccordionSizes, AccordionSizeType, AccordionItemClass, AccordionVariantType } from './constants'\nimport { Variants } from '../../core/constants/variants'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { AccordionEvent, AccordionItemEvent } from \"./gov-accordion.types\"\n\n@Component({\n\ttag: 'gov-accordion',\n\tstyleUrl: 'gov-accordion.scss',\n})\nexport class GovAccordion {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionElement\n\t/\n\t Accordion’s size.\n\t /\n\t@Prop() readonly size?: AccordionSizeType = 'm'\n\t/\n\t Style variation of the button.\n\t /\n\t@Prop() readonly variant?: AccordionVariantType = 'primary'\n\t/\n\t Accordion item underline\n\t /\n\t@Prop({ attribute: 'no-border' }) readonly noBorder: boolean = false\n\t/\n\t Adds accessible label for the accordion that is only shown for screen readers.\n\t /\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/\n\t String of id's that indicate alternative labels elements\n\t /\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/\n\t Called when the accordion state changes\n\t /\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<AccordionEvent>\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, AccordionClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(AccordionItemClass.root).forEach((child: HTMLGovAccordionItemElement) => {\n\t\t\tchild.addEventListener('gov-change', (e: CustomEvent<AccordionItemEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit({\n\t\t\t\t\tcomponent: AccordionClass.root,\n\t\t\t\t\topen: e.detail.open,\n\t\t\t\t\tref: e.detail.ref\n\t\t\t\t})\n\t\t\t})\n\t\t})\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\treturn (\n\t\t\t<Host ~~class~~={this.h.classes(AccordionClass.root)} ~~size~~={this.size} ~~variant~~={this.variant}>\n\t\t\t\~~t<div role~~={'list'} ~~arial~~-label={this.wcagLabel} ~~arial~~-labelledby={this.wcagLabelledBy}>\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\t/\n\t Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, AccordionClass.root)\n\t}\n}\n"],"mappings":"0UAAA,MAAMA,EAAkB,yf,MCeXC,EAAYC,EAAA,MAAAD,UAAAE,EAGxB,WAAAC,G,8EAQ4C,I,aAIM,U,cAIa,M,uDAf9DC,KAAKC,EAAIC,EAAQF,KAAKG,K,CA8BvB,YAAAC,CAAaC,GACZC,EAAaC,EAAgBF,EAAUG,EAAeC,K,CAIvD,eAAAC,CAAgBL,GACfC,EAAaK,EAAUN,EAAUG,EAAeC,K,CAGjD,iBAAAG,GACCZ,KAAKI,aAAaJ,KAAKa,MACvBb,KAAKU,gBAAgBV,KAAKc,Q,CAG3B,gBAAAC,GACCf,KAAKG,KAAKa,iBAAiBC,EAAmBR,MAAMS,SAASC,IAC5DA,EAAMC,iBAAiB,cAAeC,IACrCA,EAAEC,kBACFtB,KAAKuB,UAAUC,KAAK,CACnBC,UAAWjB,EAAeC,KAC1BiB,KAAML,EAAEM,OAAOD,KACfE,IAAKP,EAAEM,OAAOC,KACb,GACD,G,CAIJ,wBAAMC,GACL,GAAIC,IAA2B,OACxBC,EAAM,WACN/B,KAAKgC,c,EAIb,MAAAC,GACC,OACChC,EAACiC,EAAI,~~CAACC~~,MAAOnC,KAAKC,EAAEmC,QAAQ5B,EAAeC,~~MAAOI~~,KAAMb,KAAKa,~~KAAMC~~,QAASd,KAAKc,~~SAChFb~~,~~EAAA,OAAKoC,~~KAAM,OAAM,~~cAAerC~~,KAAKsC,UAAS,~~mBAAoBtC~~,KAAKuC,~~gBACtEtC~~,EAAA,c,~~CAUJ~~,kBAAM+B,GACLQ,EAAkBxC,KAAKsC,UAAWtC,KAAKuC,eAAgB/B,EAAeC,K"}
1	+ {"version":3,"names":["govAccordionCss","GovAccordion","proxyCustomElement","H","constructor","this","h","govHost","host","validateSize","newValue","validateProp","AccordionSizes","AccordionClass","root","validateVariant","Variants","componentWillLoad","size","variant","componentDidLoad","querySelectorAll","AccordionItemClass","forEach","child","addEventListener","e","stopPropagation","govChange","emit","component","open","detail","ref","componentDidRender","canValidateWcagOnRender","delay","validateWcag","render","Host","class","classes","role","wcagLabel","wcagLabelledBy","validateWcagLabel"],"sources":["../../../packages/core/src/components/gov-accordion/gov-accordion.scss?tag=gov-accordion","../../../packages/core/src/components/gov-accordion/gov-accordion.tsx"],"sourcesContent":["/\n Accordion\n /\n\n$class: \".gov-accordion\";\n\n#{$class} {\n\t@include base();\n\n\t&[no-border] {\n\t\t.gov-accordion-item::before {\n\t\t\tbackground-color: transparent !important;\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { AccordionClass, AccordionSizes, AccordionSizeType, AccordionItemClass, AccordionVariantType } from './constants'\nimport { Variants } from '../../core/constants/variants'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { AccordionEvent, AccordionItemEvent } from \"./gov-accordion.types\"\n\n@Component({\n\ttag: 'gov-accordion',\n\tstyleUrl: 'gov-accordion.scss',\n})\nexport class GovAccordion {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovAccordionElement\n\t/\n\t Accordion’s size.\n\t /\n\t@Prop() readonly size?: AccordionSizeType = 'm'\n\t/\n\t Style variation of the button.\n\t /\n\t@Prop() readonly variant?: AccordionVariantType = 'primary'\n\t/\n\t Accordion item underline\n\t /\n\t@Prop({ attribute: 'no-border' }) readonly noBorder: boolean = false\n\t/\n\t Adds accessible label for the accordion that is only shown for screen readers.\n\t /\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/\n\t String of id's that indicate alternative labels elements\n\t /\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/\n\t Called when the accordion state changes\n\t /\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<AccordionEvent>\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(AccordionSizes, newValue, AccordionClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, AccordionClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(AccordionItemClass.root).forEach((child: HTMLGovAccordionItemElement) => {\n\t\t\tchild.addEventListener('gov-change', (e: CustomEvent<AccordionItemEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit({\n\t\t\t\t\tcomponent: AccordionClass.root,\n\t\t\t\t\topen: e.detail.open,\n\t\t\t\t\tref: e.detail.ref\n\t\t\t\t})\n\t\t\t})\n\t\t})\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\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(AccordionClass.root)}\n\t\t\t\tsize={this.size}\n\t\t\t\tvariant={this.variant}\n\t\t\t\trole={'list'}\n\t\t\t\tarial-label={this.wcagLabel}\n\t\t\t\tarial-labelledby={this.wcagLabelledBy}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/\n\t Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, AccordionClass.root)\n\t}\n}\n"],"mappings":"0UAAA,MAAMA,EAAkB,if,MCeXC,EAAYC,EAAA,MAAAD,UAAAE,EAGxB,WAAAC,G,8EAQ4C,I,aAIM,U,cAIa,M,uDAf9DC,KAAKC,EAAIC,EAAQF,KAAKG,K,CA8BvB,YAAAC,CAAaC,GACZC,EAAaC,EAAgBF,EAAUG,EAAeC,K,CAIvD,eAAAC,CAAgBL,GACfC,EAAaK,EAAUN,EAAUG,EAAeC,K,CAGjD,iBAAAG,GACCZ,KAAKI,aAAaJ,KAAKa,MACvBb,KAAKU,gBAAgBV,KAAKc,Q,CAG3B,gBAAAC,GACCf,KAAKG,KAAKa,iBAAiBC,EAAmBR,MAAMS,SAASC,IAC5DA,EAAMC,iBAAiB,cAAeC,IACrCA,EAAEC,kBACFtB,KAAKuB,UAAUC,KAAK,CACnBC,UAAWjB,EAAeC,KAC1BiB,KAAML,EAAEM,OAAOD,KACfE,IAAKP,EAAEM,OAAOC,KACb,GACD,G,CAIJ,wBAAMC,GACL,GAAIC,IAA2B,OACxBC,EAAM,WACN/B,KAAKgC,c,EAIb,MAAAC,GACC,OACChC,EAACiC,EAAI,CACJC,MAAOnC,KAAKC,EAAEmC,QAAQ5B,EAAeC,MACrCI,KAAMb,KAAKa,KACXC,QAASd,KAAKc,QACduB,KAAM,OAAM,cACCrC,KAAKsC,UAAS,mBACTtC,KAAKuC,gBACvBtC,EAAA,a,CASH,kBAAM+B,GACLQ,EAAkBxC,KAAKsC,UAAWtC,KAAKuC,eAAgB/B,EAAeC,K"}

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

@@ -1,2 +1,2 @@
-import{p as r,H as o,c as a,h as e,d as t}from"./p-80c0109d.js";import{v as n}from"./p-26acf964.js";import{V as v}from"./p-ff7365ae.js";import{p as i,d as l}from"./p-03990da5.js";import{g,a as c}from"./p-3f37ddb6.js";import{F as s}from"./p-1c1d0bbe.js";import{a as d}from"./p-0f5e2b0a.js";import{c as _}from"./p-34152b51.js";import{d as m}from"./p-1026d931.js";import{d as p}from"./p-9da782bf.js";const h=i(v,["PRIMARY","SECONDARY","WARNING","ERROR","SUCCESS"]);const u={root:"gov-alert",section:"gov-alert__section",icon:"gov-alert__icon",content:"gov-alert__content",headline:"gov-alert__headline",close:"gov-alert__close"};const b='.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-alert{position:relative;display:block;width:100%}.gov-alert__section{display:block;width:100%;max-width:calc(var(--gov-container-width, 73.75rem) + 2 * var(--gov-container-padding, 2.5rem));margin-right:auto;margin-left:auto;padding-right:var(--gov-container-padding-mobile, 1.25rem);padding-left:var(--gov-container-padding-mobile, 1.25rem);display:flex;gap:1rem;padding-top:1rem;padding-bottom:1rem}@media (min-width: 48em){.gov-alert__section{padding-right:var(--gov-container-padding, 2.5rem);padding-left:var(--gov-container-padding, 2.5rem)}}.gov-alert__icon{flex:0 0 auto}.gov-alert__icon>*{width:1.25rem;height:1.25rem}.gov-alert__headline{display:flex;gap:1rem}.gov-alert__headline+div{margin-top:0.5rem}.gov-alert__headline p{margin-bottom:0}.gov-alert__headline gov-button{margin-top:-0.25rem}.gov-alert__content{padding-right:3.25rem}.gov-alert__content>*:last-child{margin-bottom:0}.gov-alert__content p{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)}.gov-alert__content a{color:inherit}@media not all and (pointer: coarse){.gov-alert__content a:hover{color:inherit}}.gov-alert__close{position:absolute;top:0.625rem;right:1rem}.gov-alert[variant=warning]{background-color:var(--gov-alert-warning-bg-color, var(--gov-color-warning))}.gov-alert[variant=warning] .gov-alert__icon{color:var(--gov-alert-warning-icon-color, var(--gov-color-secondary))}.gov-alert[variant=warning] .gov-alert__content{color:var(--gov-alert-warning-text-color, var(--gov-color-secondary))}.gov-alert[variant=warning][inverse=""],.gov-alert[variant=warning][inverse=true i],.gov-alert[variant=warning][inverse="1"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=warning][inverse=""] .gov-alert__icon,.gov-alert[variant=warning][inverse=true i] .gov-alert__icon,.gov-alert[variant=warning][inverse="1"] .gov-alert__icon{color:var(--gov-alert-warning-bg-color, var(--gov-color-warning))}.gov-alert[variant=warning][inverse=""] .gov-alert__content,.gov-alert[variant=warning][inverse=true i] .gov-alert__content,.gov-alert[variant=warning][inverse="1"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=error]{background-color:var(--gov-alert-error-bg-color, var(--gov-color-error))}.gov-alert[variant=error] .gov-alert__icon{color:var(--gov-alert-error-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=error] .gov-alert__content{color:var(--gov-alert-error-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=error][inverse=""],.gov-alert[variant=error][inverse=true i],.gov-alert[variant=error][inverse="1"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=error][inverse=""] .gov-alert__icon,.gov-alert[variant=error][inverse=true i] .gov-alert__icon,.gov-alert[variant=error][inverse="1"] .gov-alert__icon{color:var(--gov-alert-error-bg-color, var(--gov-color-error))}.gov-alert[variant=error][inverse=""] .gov-alert__content,.gov-alert[variant=error][inverse=true i] .gov-alert__content,.gov-alert[variant=error][inverse="1"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=secondary]{background-color:var(--gov-alert-secondary-bg-color, var(--gov-color-secondary))}.gov-alert[variant=secondary] .gov-alert__icon{color:var(--gov-alert-secondary-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=secondary] .gov-alert__content{color:var(--gov-alert-secondary-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=secondary][inverse=""],.gov-alert[variant=secondary][inverse=true i],.gov-alert[variant=secondary][inverse="1"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=secondary][inverse=""] .gov-alert__icon,.gov-alert[variant=secondary][inverse=true i] .gov-alert__icon,.gov-alert[variant=secondary][inverse="1"] .gov-alert__icon{color:var(--gov-alert-secondary-bg-color, var(--gov-color-secondary))}.gov-alert[variant=secondary][inverse=""] .gov-alert__content,.gov-alert[variant=secondary][inverse=true i] .gov-alert__content,.gov-alert[variant=secondary][inverse="1"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=success]{background-color:var(--gov-alert-success-bg-color, var(--gov-color-success-500))}.gov-alert[variant=success] .gov-alert__icon{color:var(--gov-alert-success-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=success] .gov-alert__content{color:var(--gov-alert-success-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=success][inverse=""],.gov-alert[variant=success][inverse=true i],.gov-alert[variant=success][inverse="1"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=success][inverse=""] .gov-alert__icon,.gov-alert[variant=success][inverse=true i] .gov-alert__icon,.gov-alert[variant=success][inverse="1"] .gov-alert__icon{color:var(--gov-alert-success-bg-color, var(--gov-color-success-500))}.gov-alert[variant=success][inverse=""] .gov-alert__content,.gov-alert[variant=success][inverse=true i] .gov-alert__content,.gov-alert[variant=success][inverse="1"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=primary]{background-color:var(--gov-alert-primary-bg-color, var(--gov-color-primary))}.gov-alert[variant=primary] .gov-alert__icon{color:var(--gov-alert-primary-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=primary] .gov-alert__content{color:var(--gov-alert-primary-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=primary][inverse=""],.gov-alert[variant=primary][inverse=true i],.gov-alert[variant=primary][inverse="1"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=primary][inverse=""] .gov-alert__icon,.gov-alert[variant=primary][inverse=true i] .gov-alert__icon,.gov-alert[variant=primary][inverse="1"] .gov-alert__icon{color:var(--gov-alert-primary-bg-color, var(--gov-color-primary))}.gov-alert[variant=primary][inverse=""] .gov-alert__content,.gov-alert[variant=primary][inverse=true i] .gov-alert__content,.gov-alert[variant=primary][inverse="1"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}@media (min-width: 75em){.gov-alert__content{padding-right:2rem}}';const y=r(class r extends o{constructor(){super();this.__registerHost();this.govClose=a(this,"gov-close",7);this.headline=undefined;this.variant="primary";this.inverse=false;this.wcagCloseLabel=undefined;this.wcagToggleLabel=undefined;this.closable=false;this.toggleContent=false;this.h=g(this.host)}validateVariant(r){n(h,r,u.root)}componentWillLoad(){this.validateVariant(this.variant)}async componentDidRender(){if(_()){await l(500);await this.validateWcag()}}render(){let r=!this.inverse;let o=this.inverse?"secondary":this.variant;if(this.variant=="warning"){r=false;o="secondary"}const a=e("div",{class:u.close},e("gov-button",{size:"s","aria-label":this.wcagCloseLabel,type:"base",variant:o,inverse:r,"on-gov-click":this.onCloseHandler.bind(this)},e("gov-icon",{name:"x-lg"})));return e(t,{class:this.h.classes(u.root),variant:this.variant},e("section",{class:u.section,role:"alert"},this.h.hasSlot("icon")&&e("div",{class:u.icon},e("slot",{name:"icon"})),e("div",{class:u.content},this.headline?e(s,null,e("div",{class:u.headline},e("p",null,this.headline),e("gov-button",{size:"s","aria-label":this.wcagToggleLabel,type:"base",variant:o,inverse:r,"on-gov-click":()=>this.toggleContent=!this.toggleContent},e("gov-icon",{name:this.toggleContent?"chevron-up":"chevron-down"}))),e("div",{hidden:!this.toggleContent,"aria-hidden":c(this.toggleContent)},e("slot",null))):e("slot",null))),this.closable&&a)}onCloseHandler(r){this.govClose.emit({component:u.root,ref:this.host,originalEvent:r})}async validateWcag(){if(this.closable){d(this.wcagCloseLabel,"wcag-close-label",u.root)}if(this.headline){d(this.wcagToggleLabel,"wcag-toggle-label",u.root)}}get host(){return this}static get watchers(){return{variant:["validateVariant"]}}static get style(){return b}},[4,"gov-alert",{headline:[1],variant:[1],inverse:[4],wcagCloseLabel:[1,"wcag-close-label"],wcagToggleLabel:[1,"wcag-toggle-label"],closable:[4],toggleContent:[32],validateWcag:[64]}]);function f(){if(typeof customElements==="undefined"){return}const r=["gov-alert","gov-button","gov-icon"];r.forEach((r=>{switch(r){case"gov-alert":if(!customElements.get(r)){customElements.define(r,y)}break;case"gov-button":if(!customElements.get(r)){m()}break;case"gov-icon":if(!customElements.get(r)){p()}break}}))}f();const w=y;const k=f;export{w as GovAlert,k as defineCustomElement};
+import{p as r,H as o,c as a,h as e,d as t}from"./p-80c0109d.js";import{v as n}from"./p-26acf964.js";import{V as v}from"./p-ff7365ae.js";import{p as i,d as l}from"./p-03990da5.js";import{g as c,a as g}from"./p-3f37ddb6.js";import{F as s}from"./p-1c1d0bbe.js";import{a as d}from"./p-ae894a40.js";import{c as _}from"./p-cac3881f.js";import{d as m}from"./p-d6ab5b8a.js";import{d as p}from"./p-c055eb68.js";const h=i(v,["PRIMARY","SECONDARY","WARNING","ERROR","SUCCESS"]);const u={root:"gov-alert",section:"gov-alert__section",icon:"gov-alert__icon",content:"gov-alert__content",headline:"gov-alert__headline",close:"gov-alert__close"};const b='.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-alert{position:relative;display:block;width:100%}.gov-alert__section{display:block;width:100%;max-width:calc(var(--gov-container-width, 73.75rem) + 2 * var(--gov-container-padding, 2.5rem));margin-right:auto;margin-left:auto;padding-right:var(--gov-container-padding-mobile, 1.25rem);padding-left:var(--gov-container-padding-mobile, 1.25rem);display:flex;gap:1rem;padding-top:1rem;padding-bottom:1rem}@media (min-width: 48em){.gov-alert__section{padding-right:var(--gov-container-padding, 2.5rem);padding-left:var(--gov-container-padding, 2.5rem)}}.gov-alert__icon{flex:0 0 auto}.gov-alert__icon>*{width:1.25rem;height:1.25rem}.gov-alert__headline{display:flex;gap:1rem}.gov-alert__headline+div{margin-top:0.5rem}.gov-alert__headline p{margin-bottom:0}.gov-alert__headline gov-button{margin-top:-0.25rem}.gov-alert__content{padding-right:3.25rem}.gov-alert__content>*:last-child{margin-bottom:0}.gov-alert__content p{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)}.gov-alert__content a{color:inherit}@media not all and (pointer: coarse){.gov-alert__content a:hover{color:inherit}}.gov-alert__close{position:absolute;top:0.625rem;right:1rem}.gov-alert[variant=warning]{background-color:var(--gov-alert-warning-bg-color, var(--gov-color-warning))}.gov-alert[variant=warning] .gov-alert__icon{color:var(--gov-alert-warning-icon-color, var(--gov-color-secondary))}.gov-alert[variant=warning] .gov-alert__content{color:var(--gov-alert-warning-text-color, var(--gov-color-secondary))}.gov-alert[variant=warning][inverse=""],.gov-alert[variant=warning][inverse=true i],.gov-alert[variant=warning][inverse="1"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=warning][inverse=""] .gov-alert__icon,.gov-alert[variant=warning][inverse=true i] .gov-alert__icon,.gov-alert[variant=warning][inverse="1"] .gov-alert__icon{color:var(--gov-alert-warning-bg-color, var(--gov-color-warning))}.gov-alert[variant=warning][inverse=""] .gov-alert__content,.gov-alert[variant=warning][inverse=true i] .gov-alert__content,.gov-alert[variant=warning][inverse="1"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=error]{background-color:var(--gov-alert-error-bg-color, var(--gov-color-error))}.gov-alert[variant=error] .gov-alert__icon{color:var(--gov-alert-error-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=error] .gov-alert__content{color:var(--gov-alert-error-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=error][inverse=""],.gov-alert[variant=error][inverse=true i],.gov-alert[variant=error][inverse="1"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=error][inverse=""] .gov-alert__icon,.gov-alert[variant=error][inverse=true i] .gov-alert__icon,.gov-alert[variant=error][inverse="1"] .gov-alert__icon{color:var(--gov-alert-error-bg-color, var(--gov-color-error))}.gov-alert[variant=error][inverse=""] .gov-alert__content,.gov-alert[variant=error][inverse=true i] .gov-alert__content,.gov-alert[variant=error][inverse="1"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=secondary]{background-color:var(--gov-alert-secondary-bg-color, var(--gov-color-secondary))}.gov-alert[variant=secondary] .gov-alert__icon{color:var(--gov-alert-secondary-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=secondary] .gov-alert__content{color:var(--gov-alert-secondary-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=secondary][inverse=""],.gov-alert[variant=secondary][inverse=true i],.gov-alert[variant=secondary][inverse="1"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=secondary][inverse=""] .gov-alert__icon,.gov-alert[variant=secondary][inverse=true i] .gov-alert__icon,.gov-alert[variant=secondary][inverse="1"] .gov-alert__icon{color:var(--gov-alert-secondary-bg-color, var(--gov-color-secondary))}.gov-alert[variant=secondary][inverse=""] .gov-alert__content,.gov-alert[variant=secondary][inverse=true i] .gov-alert__content,.gov-alert[variant=secondary][inverse="1"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=success]{background-color:var(--gov-alert-success-bg-color, var(--gov-color-success-500))}.gov-alert[variant=success] .gov-alert__icon{color:var(--gov-alert-success-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=success] .gov-alert__content{color:var(--gov-alert-success-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=success][inverse=""],.gov-alert[variant=success][inverse=true i],.gov-alert[variant=success][inverse="1"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=success][inverse=""] .gov-alert__icon,.gov-alert[variant=success][inverse=true i] .gov-alert__icon,.gov-alert[variant=success][inverse="1"] .gov-alert__icon{color:var(--gov-alert-success-bg-color, var(--gov-color-success-500))}.gov-alert[variant=success][inverse=""] .gov-alert__content,.gov-alert[variant=success][inverse=true i] .gov-alert__content,.gov-alert[variant=success][inverse="1"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}.gov-alert[variant=primary]{background-color:var(--gov-alert-primary-bg-color, var(--gov-color-primary))}.gov-alert[variant=primary] .gov-alert__icon{color:var(--gov-alert-primary-icon-color, var(--gov-color-neutral-white))}.gov-alert[variant=primary] .gov-alert__content{color:var(--gov-alert-primary-text-color, var(--gov-color-neutral-white))}.gov-alert[variant=primary][inverse=""],.gov-alert[variant=primary][inverse=true i],.gov-alert[variant=primary][inverse="1"]{border-bottom:var(--gov-alert-border, 0.0625rem solid var(--gov-color-secondary-400));background-color:var(--gov-alert-inverse-bg, var(--gov-color-neutral-white))}.gov-alert[variant=primary][inverse=""] .gov-alert__icon,.gov-alert[variant=primary][inverse=true i] .gov-alert__icon,.gov-alert[variant=primary][inverse="1"] .gov-alert__icon{color:var(--gov-alert-primary-bg-color, var(--gov-color-primary))}.gov-alert[variant=primary][inverse=""] .gov-alert__content,.gov-alert[variant=primary][inverse=true i] .gov-alert__content,.gov-alert[variant=primary][inverse="1"] .gov-alert__content{color:var(--gov-alert-inverse-color, var(--gov-color-secondary-800))}@media (min-width: 75em){.gov-alert__content{padding-right:2rem}}';const y=r(class r extends o{constructor(){super();this.__registerHost();this.govClose=a(this,"gov-close",7);this.headline=undefined;this.variant="primary";this.inverse=false;this.wcagCloseLabel=undefined;this.wcagToggleLabel=undefined;this.closable=false;this.toggleContent=false;this.h=c(this.host)}validateVariant(r){n(h,r,u.root)}componentWillLoad(){this.validateVariant(this.variant)}async componentDidRender(){if(_()){await l(500);await this.validateWcag()}}render(){let r=!this.inverse;let o=this.inverse?"secondary":this.variant;if(this.variant=="warning"){r=false;o="secondary"}const a=e("div",{class:u.close},e("gov-button",{size:"s","aria-label":this.wcagCloseLabel,type:"base",variant:o,inverse:r,"on-gov-click":this.onCloseHandler.bind(this)},e("gov-icon",{name:"x-lg"})));return e(t,{class:this.h.classes(u.root),variant:this.variant},e("section",{class:u.section,role:"alert"},this.h.hasSlot("icon")&&e("div",{class:u.icon},e("slot",{name:"icon"})),e("div",{class:u.content},this.headline?e(s,null,e("div",{class:u.headline},e("p",null,this.headline),e("gov-button",{size:"s","aria-label":this.wcagToggleLabel,type:"base",variant:o,inverse:r,"on-gov-click":()=>this.toggleContent=!this.toggleContent},e("gov-icon",{name:this.toggleContent?"chevron-up":"chevron-down"}))),e("div",{hidden:!this.toggleContent,"aria-hidden":g(this.toggleContent)},e("slot",null))):e("slot",null))),this.closable&&a)}onCloseHandler(r){this.govClose.emit({component:u.root,ref:this.host,originalEvent:r})}async validateWcag(){if(this.closable){d(this.wcagCloseLabel,"wcag-close-label",u.root)}if(this.headline){d(this.wcagToggleLabel,"wcag-toggle-label",u.root)}}get host(){return this}static get watchers(){return{variant:["validateVariant"]}}static get style(){return b}},[4,"gov-alert",{headline:[1],variant:[1],inverse:[4],wcagCloseLabel:[1,"wcag-close-label"],wcagToggleLabel:[1,"wcag-toggle-label"],closable:[4],toggleContent:[32],validateWcag:[64]}]);function w(){if(typeof customElements==="undefined"){return}const r=["gov-alert","gov-button","gov-icon"];r.forEach((r=>{switch(r){case"gov-alert":if(!customElements.get(r)){customElements.define(r,y)}break;case"gov-button":if(!customElements.get(r)){m()}break;case"gov-icon":if(!customElements.get(r)){p()}break}}))}w();const f=y;const k=w;export{f as GovAlert,k as defineCustomElement};
 //# sourceMappingURL=gov-alert.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["AlertVariants","pick","Variants","AlertClass","root","section","icon","content","headline","close","govAlertCss","GovAlert","proxyCustomElement","H","constructor","this","h","govHost","host","validateVariant","newValue","validateProp","componentWillLoad","variant","componentDidRender","canValidateWcagOnRender","delay","validateWcag","render","inverse","closeButton","class","size","wcagCloseLabel","type","onCloseHandler","bind","name","Host","classes","role","hasSlot","Fragment","wcagToggleLabel","toggleContent","hidden","toBoolAttr","closable","e","govClose","emit","component","ref","originalEvent","validateWcagProp"],"sources":["../../../packages/core/src/components/gov-alert/constants.ts","../../../packages/core/src/components/gov-alert/gov-alert.scss?tag=gov-alert","../../../packages/core/src/components/gov-alert/gov-alert.tsx"],"sourcesContent":["import { Variants } from '../../core/constants/variants'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const AlertVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'WARNING', 'ERROR', 'SUCCESS'])\nexport type VariantType = `${ValueOf<typeof AlertVariants>}`\n\nexport const AlertClass = {\n\troot: 'gov-alert',\n\tsection: 'gov-alert__section',\n\ticon: 'gov-alert__icon',\n\tcontent: 'gov-alert__content',\n\theadline: 'gov-alert__headline',\n\tclose: 'gov-alert__close',\n}\n","/\n Alert\n /\n\n$class: \".gov-alert\";\n\n#{$class} {\n\t@include base();\n\t&__section {\n\t\t@include container();\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tpadding-top: rem-calc(16);\n\t\tpadding-bottom: rem-calc(16);\n\t}\n\t&__icon {\n\t\tflex: 0 0 auto;\n\t\t& > {\n\t\t\twidth: rem-calc(20);\n\t\t\theight: rem-calc(20);\n\t\t}\n\t}\n\t&__headline {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\n\t\t+ div {\n\t\t\tmargin-top: rem-calc(8);\n\t\t}\n\n\t\tp {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\n\t\tgov-button {\n\t\t\tmargin-top: rem-calc(-4);\n\t\t}\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t\tpadding-right: rem-calc(52);\n\t\tp {\n\t\t\t@include typography($font-size-m);\n\t\t}\n\t\ta {\n\t\t\tcolor: inherit;\n\t\t\t@include hover() {\n\t\t\t\tcolor: inherit;\n\t\t\t}\n\t\t}\n\t}\n\t&__close {\n\t\tposition: absolute;\n\t\ttop: rem-calc(10);\n\t\tright: rem-calc(16);\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $alert-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tbackground-color: get(\"bg-color\", $definitions);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tcolor: get(\"icon-color\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tcolor: get(\"text-color\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if deep-map-check($definitions, \"border\") {\n\t\t\t\tborder-bottom: $alert-border;\n\t\t\t}\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tborder-bottom: $alert-border;\n\t\t\t\tbackground-color: $alert-inverse-bg;\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__icon {\n\t\t\t\t\t\tcolor: get(\"bg-color\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t&__content {\n\t\t\t\t\t\tcolor: $alert-inverse-color;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: xl) {\n\t\t&__content {\n\t\t\tpadding-right: rem-calc(32);\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { AlertClass, AlertVariants, VariantType } from \"./constants\"\nimport { govHost, toBoolAttr } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { AlertEvent } from \"./gov-alert.types\"\nimport { ButtonEvent } from \"../gov-button/default/gov-button.types\"\nimport Fragment from \"../../helpers/Fragment\"\nimport { validateWcagProp } from \"../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\n\n@Component({\n\ttag: \"gov-alert\",\n\tstyleUrl: \"gov-alert.scss\",\n})\nexport class GovAlert {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovAlertElement\n\n\t/*\n\t Style variation of the button.\n\t /\n\t@Prop() readonly headline: string\n\t/\n\t Style variation of the button.\n\t /\n\t@Prop() readonly variant: VariantType = \"primary\"\n\t/\n\t Determine if component should have inverse colors to be used on dark background\n\t /\n\t@Prop() readonly inverse: boolean = false\n\t/\n\t Aria label for the closing button. It is mandatory if the alert is closable\n\t /\n\t@Prop({ attribute: \"wcag-close-label\" }) readonly wcagCloseLabel: string\n\t/\n\t Aria label for the toggle button. It is mandatory if the alert has headline\n\t /\n\t@Prop({ attribute: \"wcag-toggle-label\" }) readonly wcagToggleLabel: string\n\t/\n\t Called when the close button is clicked\n\t /\n\t@Event({ eventName: \"gov-close\" }) govClose: EventEmitter<AlertEvent>\n\t/\n\t Displays the option to close the alert\n\t /\n\t@Prop() readonly closable?: boolean = false\n\n\t@State() toggleContent = false\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(AlertVariants, newValue, AlertClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\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\tlet inverse = !this.inverse\n\t\tlet variant = this.inverse ? \"secondary\" : this.variant\n\n\t\tif (this.variant == \"warning\") {\n\t\t\tinverse = false\n\t\t\tvariant = \"secondary\"\n\t\t}\n\n\t\tconst closeButton = (\n\t\t\t<div class={AlertClass.close}>\n\t\t\t\t<gov-button\n\t\t\t\t\tsize=\"s\"\n\t\t\t\t\taria-label={this.wcagCloseLabel}\n\t\t\t\t\ttype=\"base\"\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tinverse={inverse}\n\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t>\n\t\t\t\t\t<gov-icon name=\"x-lg\"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t)\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AlertClass.root)} variant={this.variant}>\n\t\t\t\t<section class={AlertClass.section} role=\"alert\">\n\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t<div class={AlertClass.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={AlertClass.content}>\n\t\t\t\t\t\t{this.headline ? (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<div class={AlertClass.headline}>\n\t\t\t\t\t\t\t\t\t<p>{this.headline}</p>\n\t\t\t\t\t\t\t\t\t<gov-button\n\t\t\t\t\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\t\t\t\t\taria-label={this.wcagToggleLabel}\n\t\t\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\t\t\t\tinverse={inverse}\n\t\t\t\t\t\t\t\t\t\ton-gov-click={() => this.toggleContent = !this.toggleContent}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<gov-icon name={this.toggleContent ? 'chevron-up' : 'chevron-down'}></gov-icon>\n\t\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div hidden={!this.toggleContent} aria-hidden={toBoolAttr(this.toggleContent)}>\n\t\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t\t{this.closable && closeButton}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tonCloseHandler(e: CustomEvent<ButtonEvent>) {\n\t\tthis.govClose.emit({\n\t\t\tcomponent: AlertClass.root,\n\t\t\tref: this.host,\n\t\t\toriginalEvent: e,\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.closable) {\n\t\t\tvalidateWcagProp(this.wcagCloseLabel, 'wcag-close-label', AlertClass.root)\n\t\t}\n\t\tif (this.headline) {\n\t\t\tvalidateWcagProp(this.wcagToggleLabel, 'wcag-toggle-label', AlertClass.root)\n\t\t}\n\t}\n}\n"],"mappings":"~~6YAIO~~,MAAMA,EAAgBC,EAAKC,EAAU,CAAC,UAAW,YAAa,UAAW,QAAS,YAGlF,MAAMC,EAAa,CACzBC,KAAM,YACNC,QAAS,qBACTC,KAAM,kBACNC,QAAS,qBACTC,SAAU,sBACVC,MAAO,oBCbR,MAAMC,EAAc,gqO,MCgBPC,EAAQC,EAAA,MAAAD,UAAAE,EAGpB,WAAAC,G,uGAawC,U,aAIJ,M,2EAgBE,M,mBAEb,MAlCxBC,KAAKC,EAAIC,EAAQF,KAAKG,K,CAqCvB,eAAAC,CAAgBC,GACfC,EAAarB,EAAeoB,EAAUjB,EAAWC,K,CAGlD,iBAAAkB,GACCP,KAAKI,gBAAgBJ,KAAKQ,Q,CAG3B,wBAAMC,GACL,GAAIC,IAA2B,OACxBC,EAAM,WACNX,KAAKY,c,EAIb,MAAAC,GACC,IAAIC,GAAWd,KAAKc,QACpB,IAAIN,EAAUR,KAAKc,QAAU,YAAcd,KAAKQ,QAEhD,GAAIR,KAAKQ,SAAW,UAAW,CAC9BM,EAAU,MACVN,EAAU,W,CAGX,MAAMO,EACLd,EAAA,OAAKe,MAAO5B,EAAWM,OACtBO,EAAA,cACCgB,KAAK,IAAG,aACIjB,KAAKkB,eACjBC,KAAK,OACLX,QAASA,EACTM,QAASA,EAAO,eACFd,KAAKoB,eAAeC,KAAKrB,OAEvCC,EAAA,YAAUqB,KAAK,WAKlB,OACCrB,EAACsB,EAAI,CAACP,MAAOhB,KAAKC,EAAEuB,QAAQpC,EAAWC,MAAOmB,QAASR,KAAKQ,SAC3DP,EAAA,WAASe,MAAO5B,EAAWE,QAASmC,KAAK,SACvCzB,KAAKC,EAAEyB,QAAQ,SACfzB,EAAA,OAAKe,MAAO5B,EAAWG,MACtBU,EAAA,QAAMqB,KAAK,UAGbrB,EAAA,OAAKe,MAAO5B,EAAWI,SACrBQ,KAAKP,SACLQ,EAAC0B,EAAQ,KACR1B,EAAA,OAAKe,MAAO5B,EAAWK,UACtBQ,EAAA,SAAID,KAAKP,UACTQ,EAAA,cACCgB,KAAK,IAAG,aACIjB,KAAK4B,gBACjBT,KAAK,OACLX,QAASA,EACTM,QAASA,EAAO,eACF,IAAMd,KAAK6B,eAAiB7B,KAAK6B,eAE/C5B,EAAA,YAAUqB,KAAMtB,KAAK6B,cAAgB,aAAe,mBAGtD5B,EAAA,OAAK6B,QAAS9B,KAAK6B,cAAa,cAAeE,EAAW/B,KAAK6B,gBAC9D5B,EAAA,eAIFA,EAAA,eAIFD,KAAKgC,UAAYjB,E,CAKrB,cAAAK,CAAea,GACdjC,KAAKkC,SAASC,KAAK,CAClBC,UAAWhD,EAAWC,KACtBgD,IAAKrC,KAAKG,KACVmC,cAAeL,G,CAQjB,kBAAMrB,GACL,GAAIZ,KAAKgC,SAAU,CAClBO,EAAiBvC,KAAKkB,eAAgB,mBAAoB9B,EAAWC,K,CAEtE,GAAIW,KAAKP,SAAU,CAClB8C,EAAiBvC,KAAK4B,gBAAiB,oBAAqBxC,EAAWC,K"}
1	+ {"version":3,"names":["AlertVariants","pick","Variants","AlertClass","root","section","icon","content","headline","close","govAlertCss","GovAlert","proxyCustomElement","H","constructor","this","h","govHost","host","validateVariant","newValue","validateProp","componentWillLoad","variant","componentDidRender","canValidateWcagOnRender","delay","validateWcag","render","inverse","closeButton","class","size","wcagCloseLabel","type","onCloseHandler","bind","name","Host","classes","role","hasSlot","Fragment","wcagToggleLabel","toggleContent","hidden","toBoolAttr","closable","e","govClose","emit","component","ref","originalEvent","validateWcagProp"],"sources":["../../../packages/core/src/components/gov-alert/constants.ts","../../../packages/core/src/components/gov-alert/gov-alert.scss?tag=gov-alert","../../../packages/core/src/components/gov-alert/gov-alert.tsx"],"sourcesContent":["import { Variants } from '../../core/constants/variants'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const AlertVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'WARNING', 'ERROR', 'SUCCESS'])\nexport type VariantType = `${ValueOf<typeof AlertVariants>}`\n\nexport const AlertClass = {\n\troot: 'gov-alert',\n\tsection: 'gov-alert__section',\n\ticon: 'gov-alert__icon',\n\tcontent: 'gov-alert__content',\n\theadline: 'gov-alert__headline',\n\tclose: 'gov-alert__close',\n}\n","/\n Alert\n /\n\n$class: \".gov-alert\";\n\n#{$class} {\n\t@include base();\n\t&__section {\n\t\t@include container();\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tpadding-top: rem-calc(16);\n\t\tpadding-bottom: rem-calc(16);\n\t}\n\t&__icon {\n\t\tflex: 0 0 auto;\n\t\t& > {\n\t\t\twidth: rem-calc(20);\n\t\t\theight: rem-calc(20);\n\t\t}\n\t}\n\t&__headline {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\n\t\t+ div {\n\t\t\tmargin-top: rem-calc(8);\n\t\t}\n\n\t\tp {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\n\t\tgov-button {\n\t\t\tmargin-top: rem-calc(-4);\n\t\t}\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t\tpadding-right: rem-calc(52);\n\t\tp {\n\t\t\t@include typography($font-size-m);\n\t\t}\n\t\ta {\n\t\t\tcolor: inherit;\n\t\t\t@include hover() {\n\t\t\t\tcolor: inherit;\n\t\t\t}\n\t\t}\n\t}\n\t&__close {\n\t\tposition: absolute;\n\t\ttop: rem-calc(10);\n\t\tright: rem-calc(16);\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $alert-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tbackground-color: get(\"bg-color\", $definitions);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tcolor: get(\"icon-color\", $definitions);\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tcolor: get(\"text-color\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t\t@if deep-map-check($definitions, \"border\") {\n\t\t\t\tborder-bottom: $alert-border;\n\t\t\t}\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tborder-bottom: $alert-border;\n\t\t\t\tbackground-color: $alert-inverse-bg;\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__icon {\n\t\t\t\t\t\tcolor: get(\"bg-color\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t&__content {\n\t\t\t\t\t\tcolor: $alert-inverse-color;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: xl) {\n\t\t&__content {\n\t\t\tpadding-right: rem-calc(32);\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { AlertClass, AlertVariants, VariantType } from \"./constants\"\nimport { govHost, toBoolAttr } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { AlertEvent } from \"./gov-alert.types\"\nimport { ButtonEvent } from \"../gov-button/default/gov-button.types\"\nimport Fragment from \"../../helpers/Fragment\"\nimport { validateWcagProp } from \"../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\n\n@Component({\n\ttag: \"gov-alert\",\n\tstyleUrl: \"gov-alert.scss\",\n})\nexport class GovAlert {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovAlertElement\n\n\t/*\n\t Style variation of the button.\n\t /\n\t@Prop() readonly headline: string\n\t/\n\t Style variation of the button.\n\t /\n\t@Prop() readonly variant: VariantType = \"primary\"\n\t/\n\t Determine if component should have inverse colors to be used on dark background\n\t /\n\t@Prop() readonly inverse: boolean = false\n\t/\n\t Aria label for the closing button. It is mandatory if the alert is closable\n\t /\n\t@Prop({ attribute: \"wcag-close-label\" }) readonly wcagCloseLabel: string\n\t/\n\t Aria label for the toggle button. It is mandatory if the alert has headline\n\t /\n\t@Prop({ attribute: \"wcag-toggle-label\" }) readonly wcagToggleLabel: string\n\t/\n\t Called when the close button is clicked\n\t /\n\t@Event({ eventName: \"gov-close\" }) govClose: EventEmitter<AlertEvent>\n\t/\n\t Displays the option to close the alert\n\t /\n\t@Prop() readonly closable?: boolean = false\n\n\t@State() toggleContent = false\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(AlertVariants, newValue, AlertClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\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\tlet inverse = !this.inverse\n\t\tlet variant = this.inverse ? \"secondary\" : this.variant\n\n\t\tif (this.variant == \"warning\") {\n\t\t\tinverse = false\n\t\t\tvariant = \"secondary\"\n\t\t}\n\n\t\tconst closeButton = (\n\t\t\t<div class={AlertClass.close}>\n\t\t\t\t<gov-button\n\t\t\t\t\tsize=\"s\"\n\t\t\t\t\taria-label={this.wcagCloseLabel}\n\t\t\t\t\ttype=\"base\"\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tinverse={inverse}\n\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t>\n\t\t\t\t\t<gov-icon name=\"x-lg\"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t)\n\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AlertClass.root)} variant={this.variant}>\n\t\t\t\t<section class={AlertClass.section} role=\"alert\">\n\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t<div class={AlertClass.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={AlertClass.content}>\n\t\t\t\t\t\t{this.headline ? (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t<div class={AlertClass.headline}>\n\t\t\t\t\t\t\t\t\t<p>{this.headline}</p>\n\t\t\t\t\t\t\t\t\t<gov-button\n\t\t\t\t\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\t\t\t\t\taria-label={this.wcagToggleLabel}\n\t\t\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\t\t\t\tinverse={inverse}\n\t\t\t\t\t\t\t\t\t\ton-gov-click={() => this.toggleContent = !this.toggleContent}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<gov-icon name={this.toggleContent ? 'chevron-up' : 'chevron-down'}></gov-icon>\n\t\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div hidden={!this.toggleContent} aria-hidden={toBoolAttr(this.toggleContent)}>\n\t\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t\t{this.closable && closeButton}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tonCloseHandler(e: CustomEvent<ButtonEvent>) {\n\t\tthis.govClose.emit({\n\t\t\tcomponent: AlertClass.root,\n\t\t\tref: this.host,\n\t\t\toriginalEvent: e,\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.closable) {\n\t\t\tvalidateWcagProp(this.wcagCloseLabel, 'wcag-close-label', AlertClass.root)\n\t\t}\n\t\tif (this.headline) {\n\t\t\tvalidateWcagProp(this.wcagToggleLabel, 'wcag-toggle-label', AlertClass.root)\n\t\t}\n\t}\n}\n"],"mappings":"kZAIO,MAAMA,EAAgBC,EAAKC,EAAU,CAAC,UAAW,YAAa,UAAW,QAAS,YAGlF,MAAMC,EAAa,CACzBC,KAAM,YACNC,QAAS,qBACTC,KAAM,kBACNC,QAAS,qBACTC,SAAU,sBACVC,MAAO,oBCbR,MAAMC,EAAc,gqO,MCgBPC,EAAQC,EAAA,MAAAD,UAAAE,EAGpB,WAAAC,G,uGAawC,U,aAIJ,M,2EAgBE,M,mBAEb,MAlCxBC,KAAKC,EAAIC,EAAQF,KAAKG,K,CAqCvB,eAAAC,CAAgBC,GACfC,EAAarB,EAAeoB,EAAUjB,EAAWC,K,CAGlD,iBAAAkB,GACCP,KAAKI,gBAAgBJ,KAAKQ,Q,CAG3B,wBAAMC,GACL,GAAIC,IAA2B,OACxBC,EAAM,WACNX,KAAKY,c,EAIb,MAAAC,GACC,IAAIC,GAAWd,KAAKc,QACpB,IAAIN,EAAUR,KAAKc,QAAU,YAAcd,KAAKQ,QAEhD,GAAIR,KAAKQ,SAAW,UAAW,CAC9BM,EAAU,MACVN,EAAU,W,CAGX,MAAMO,EACLd,EAAA,OAAKe,MAAO5B,EAAWM,OACtBO,EAAA,cACCgB,KAAK,IAAG,aACIjB,KAAKkB,eACjBC,KAAK,OACLX,QAASA,EACTM,QAASA,EAAO,eACFd,KAAKoB,eAAeC,KAAKrB,OAEvCC,EAAA,YAAUqB,KAAK,WAKlB,OACCrB,EAACsB,EAAI,CAACP,MAAOhB,KAAKC,EAAEuB,QAAQpC,EAAWC,MAAOmB,QAASR,KAAKQ,SAC3DP,EAAA,WAASe,MAAO5B,EAAWE,QAASmC,KAAK,SACvCzB,KAAKC,EAAEyB,QAAQ,SACfzB,EAAA,OAAKe,MAAO5B,EAAWG,MACtBU,EAAA,QAAMqB,KAAK,UAGbrB,EAAA,OAAKe,MAAO5B,EAAWI,SACrBQ,KAAKP,SACLQ,EAAC0B,EAAQ,KACR1B,EAAA,OAAKe,MAAO5B,EAAWK,UACtBQ,EAAA,SAAID,KAAKP,UACTQ,EAAA,cACCgB,KAAK,IAAG,aACIjB,KAAK4B,gBACjBT,KAAK,OACLX,QAASA,EACTM,QAASA,EAAO,eACF,IAAMd,KAAK6B,eAAiB7B,KAAK6B,eAE/C5B,EAAA,YAAUqB,KAAMtB,KAAK6B,cAAgB,aAAe,mBAGtD5B,EAAA,OAAK6B,QAAS9B,KAAK6B,cAAa,cAAeE,EAAW/B,KAAK6B,gBAC9D5B,EAAA,eAIFA,EAAA,eAIFD,KAAKgC,UAAYjB,E,CAKrB,cAAAK,CAAea,GACdjC,KAAKkC,SAASC,KAAK,CAClBC,UAAWhD,EAAWC,KACtBgD,IAAKrC,KAAKG,KACVmC,cAAeL,G,CAQjB,kBAAMrB,GACL,GAAIZ,KAAKgC,SAAU,CAClBO,EAAiBvC,KAAKkB,eAAgB,mBAAoB9B,EAAWC,K,CAEtE,GAAIW,KAAKP,SAAU,CAClB8C,EAAiBvC,KAAK4B,gBAAiB,oBAAqBxC,EAAWC,K"}