npm - @gov-design-system-ce/components - Versions diffs - 0.0.19 → 0.0.21 - Mend

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"gov-alert.js","sourceRoot":"","sources":["../../../../../../src/components/gov-alert/gov-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;~~AAC7F~~,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAe,MAAM,aAAa,CAAA;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;~~AAOpD~~,MAAM,OAAO,QAAQ;EAGpB~~;mBASwC~~,SAAS;mBAIb,KAAK~~;;oBAYH~~,KAAK;~~IAxB1C~~,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;~~EA0BD~~,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,aAAa,EAAE,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;EACvD,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EACnC,CAAC;EAED,MAAM;IACL,IAAI,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;IAC3B,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAA;IAEvD,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE;MAC9B,OAAO,GAAG,KAAK,CAAA;MACf,OAAO,GAAG,WAAW,CAAA;KACrB;IAED,MAAM,WAAW,GAAG,CACnB,WAAK,KAAK,EAAE,UAAU,CAAC,KAAK;MAC3B,kBACC,IAAI,EAAC,GAAG,gBACI,IAAI,CAAC,cAAc,EAC/B,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,~~EAChB~~,~~OAAO~~,~~EAAE,~~CAAC,~~CAAe~~,~~EAAE,EAAE,~~CAAC,IAAI,CAAC,~~QAAQ,CAAC,~~IAAI,CAAC~~,CAAC,CAAC~~;~~QAEnD~~,gBAAU,IAAI,EAAC,MAAM,GAAY,CACrB,CACR,CACN,CAAA;IAED,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;MAClE,eAAS,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,IAAI,EAAC,OAAO;QAC9C,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAC1B,WAAK,KAAK,EAAE,UAAU,CAAC,IAAI;UAC1B,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN;~~QAED~~,WAAK,KAAK,EAAE,UAAU,CAAC,OAAO;~~UAC7B~~,eAAQ,CACH,CACG;MACT,IAAI,CAAC,QAAQ,IAAI,WAAW,CACvB,CACP,CAAA;EACF,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { AlertClass, AlertVariants, VariantType } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\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 variant: VariantType = 'primary'\n\t/\n\t ~~Determide~~ if component should have ~~inversed~~ colors to be used on dark background\n\t /\n\t@Prop() readonly inverse: boolean = false\n\t/\n\t 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 Called when the close button is clicked\n\t /\n\t@Event({ eventName: 'gov-close' }) govClose: EventEmitter<~~PointerEvent~~>\n\t/\n\t Displays the option to close the alert\n\t */\n\t@Prop() readonly closable?: boolean = 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\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\~~tonClick~~={~~(e: PointerEvent) =>~~ this.~~govClose~~.~~emit~~(e)}\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\n\t\t\t\t\t<div class={AlertClass.~~content~~}>\n\t\t\t\t\t\t<slot />\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"]}
1	+ {"version":3,"file":"gov-alert.js","sourceRoot":"","sources":["../../../../../../src/components/gov-alert/gov-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["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/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"]}

package/dist/collection/components/gov-alert/gov-alert.types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=gov-alert.types.js.map

package/dist/collection/components/gov-alert/gov-alert.types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"gov-alert.types.js","sourceRoot":"","sources":["../../../../../../src/components/gov-alert/gov-alert.types.ts"],"names":[],"mappings":"","sourcesContent":["import { GovBaseEvent } from \"../../types/event.types\"\n\nexport interface AlertEvent extends GovBaseEvent {\n\tref: HTMLGovAlertElement\n}\n\n"]}

package/dist/collection/components/gov-modal/gov-modal.js CHANGED Viewed

@@ -13,11 +13,10 @@ export class GovModal {
     this.label = undefined;
     this.role = "dialog";
     this.labelTag = "h2";
-    this.wcaglabelledBy = undefined;
+    this.wcagLabelledBy = undefined;
     this.wcagDescribedBy = undefined;
     this.wcagCloseLabel = undefined;
     this.wcagCloseLabelledBy = undefined;
-    this.modalVisible = false;
     this.h = govHost(this.host);
     this.labelId = createID("GovModalLabel");
     this.contentId = createID("GovModalContent");
@@ -31,18 +30,18 @@ export class GovModal {
     }
   }
   watchOpen(newValue) {
-    this.modalVisible = newValue;
+    this.open = newValue;
   }
   showModal() {
-    this.modalVisible = true;
+    this.open = true;
     document.body.classList.add(ModalClass.bodyFix);
   }
   hideModal() {
-    this.modalVisible = false;
+    this.open = false;
     document.body.classList.remove(ModalClass.bodyFix);
   }
   async componentWillRender() {
-    if (this.modalVisible) {
+    if (this.open) {
       this.showModal();
     }
     else {
@@ -50,7 +49,6 @@ export class GovModal {
     }
   }
   async componentDidRender() {
-    this.modalVisible = this.open;
     if (canValidateWcagOnRender()) {
       await delay(500);
       await this.validateWcag();
@@ -58,7 +56,7 @@ export class GovModal {
   }
   render() {
     const LabelTag = this.labelTag;
-    return (h(Host, { class: this.h.classes(ModalClass.root), open: this.modalVisible }, h("dialog", { class: ModalClass.dialog, hidden: !this.modalVisible, tabindex: "-1", open: this.modalVisible, "aria-modal": "true", "aria-hidden": toBoolAttr(!this.modalVisible), "aria-labelledby": this.wcaglabelledBy || this.labelId, "aria-describedby": this.wcagDescribedBy || this.contentId, role: this.role }, h("div", { class: ModalClass.inner }, h("div", { class: ModalClass.header }, this.h.hasSlot("icon") && (h("div", { class: ModalClass.icon }, h("slot", { name: "icon" }))), this.label && (h(LabelTag, { class: ModalClass.title, id: this.labelId }, this.label)), h("gov-button", { class: ModalClass.close, variant: "primary", wcagLabel: this.wcagCloseLabel, wcagLabelledBy: this.wcagCloseLabelledBy, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, h("gov-icon", { name: "x-lg" }))), h("div", { class: ModalClass.content, id: this.contentId }, h("slot", null)))), this.modalVisible ? (h("gov-backdrop", { "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })) : null));
+    return (h(Host, { class: this.h.classes(ModalClass.root), open: this.open }, h("dialog", { class: ModalClass.dialog, hidden: !this.open, tabindex: "-1", open: this.open, "aria-modal": "true", "aria-hidden": toBoolAttr(!this.open), "aria-labelledby": this.wcagLabelledBy || this.labelId, "aria-describedby": this.wcagDescribedBy || this.contentId, role: this.role }, h("div", { class: ModalClass.inner }, h("div", { class: ModalClass.header }, this.h.hasSlot("icon") && (h("div", { class: ModalClass.icon }, h("slot", { name: "icon" }))), this.label && (h(LabelTag, { class: ModalClass.title, id: this.labelId }, this.label)), h("gov-button", { class: ModalClass.close, variant: "primary", wcagLabel: this.wcagCloseLabel, wcagLabelledBy: this.wcagCloseLabelledBy, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, h("gov-icon", { name: "x-lg" }))), h("div", { class: ModalClass.content, id: this.contentId }, h("slot", null)))), this.open ? (h("gov-backdrop", { "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })) : null));
   }
   onCloseHandler(e) {
     e.stopPropagation();
@@ -72,7 +70,7 @@ export class GovModal {
     this.showModal();
   }
   /**
-   * Hidding the modal
+   * Hiding the modal
    */
   async hide() {
     this.hideModal();
@@ -81,8 +79,8 @@ export class GovModal {
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    validateWcagRef(this.wcaglabelledBy, "aria-labelledby", ModalClass.root);
-    validateWcagRef(this.wcagDescribedBy, "aria-describedby", ModalClass.root);
+    validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", ModalClass.root);
+    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", ModalClass.root);
   }
   static get is() { return "gov-modal"; }
   static get originalStyleUrls() {
@@ -99,7 +97,7 @@ export class GovModal {
     return {
       "open": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -162,13 +160,13 @@ export class GovModal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Used to change the HMTL tag in the modal label for correct semantic structure"
+          "text": "Used to change the HTML tag in the modal label for correct semantic structure"
         },
         "attribute": "label-tag",
         "reflect": false,
         "defaultValue": "\"h2\""
       },
-      "wcaglabelledBy": {
+      "wcagLabelledBy": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -238,11 +236,6 @@ export class GovModal {
       }
     };
   }
-  static get states() {
-    return {
-      "modalVisible": {}
-    };
-  }
   static get events() {
     return [{
         "method": "govClose",
@@ -295,7 +288,7 @@ export class GovModal {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Hidding the modal",
+          "text": "Hiding the modal",
           "tags": []
         }
       },

package/dist/collection/components/gov-modal/gov-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gov-modal.js","sourceRoot":"","sources":["../../../../../../src/components/gov-modal/gov-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,~~KAAK,EAAE,~~MAAM,eAAe,CAAA;~~AAC5G~~,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAMvD,MAAM,OAAO,QAAQ;EAKpB;~~gBAWe~~,KAAK;;~~gBAQgB~~,QAAQ;oBAIkB,IAAI;;;;;~~wBAsB1C~~,~~KAAK;IA5C5B,~~IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IACxC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAA;GAC5C;~~EA4CD~~,gBAAgB,CAAC,QAAgB;IAChC,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;IACtD,IAAI,QAAQ,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClC,WAAW,CAAC,IAAI,UAAU,CAAC,IAAI,UAAU,QAAQ,kBAAkB,CAAC,CAAA;OACpE;KACD;EACF,CAAC;EAGD,SAAS,CAAC,QAAiB;IAC1B,IAAI,CAAC,~~YAAY~~,GAAG,QAAQ,CAAA;~~EAC7B~~,CAAC;EAEO,SAAS;IAChB,IAAI,CAAC,~~YAAY~~,GAAG,IAAI,CAAA;~~IACxB~~,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;EAChD,CAAC;EAEO,SAAS;IAChB,IAAI,CAAC,~~YAAY~~,GAAG,KAAK,CAAA;~~IACzB~~,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;EACnD,CAAC;EAED,KAAK,CAAC,mBAAmB;IACxB,IAAI,IAAI,CAAC,~~YAAY~~,EAAE;~~MACtB~~,IAAI,CAAC,SAAS,EAAE,CAAA;KAChB;SAAM;MACN,IAAI,CAAC,SAAS,EAAE,CAAA;KAChB;EACF,CAAC;EAED,KAAK,CAAC,kBAAkB;IACvB,IAAI,~~CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAA;IAC7B,IAAI,~~uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;EACF,CAAC;EAED,MAAM;IACL,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;IAC9B,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,~~YAAY~~;~~MACpE~~,cACC,KAAK,EAAE,UAAU,CAAC,MAAM,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,~~YAAY~~,~~EAC1B~~,QAAQ,EAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,~~YAAY~~,~~gBACZ~~,MAAM,iBACJ,UAAU,CAAC,CAAC,IAAI,CAAC,~~YAAY~~,CAAC,~~qBAC1B~~,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,sBAClC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,SAAS,EACxD,IAAI,EAAE,IAAI,CAAC,IAAI;QAEf,WAAK,KAAK,EAAE,UAAU,CAAC,KAAK;UAC3B,WAAK,KAAK,EAAE,UAAU,CAAC,MAAM;YAC3B,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAC1B,WAAK,KAAK,EAAE,UAAU,CAAC,IAAI;cAC1B,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN;YACA,IAAI,CAAC,KAAK,IAAI,CACd,EAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,IACjD,IAAI,CAAC,KAAK,CACD,CACX;YACD,kBACC,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,OAAO,EAAC,SAAS,EACjB,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,cAAc,EAAE,IAAI,CAAC,mBAAmB,EACxC,IAAI,EAAC,MAAM,kBACG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;cAE5C,gBAAU,IAAI,EAAC,MAAM,GAAG,CACZ,CACR;UACN,WAAK,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,SAAS;YACjD,eAAQ,CACH,CACD,CACE;MAER,IAAI,CAAC,~~YAAY~~,CAAC,CAAC,CAAC,~~CACpB~~,kCACa,IAAI,CAAC,cAAc,sBACb,IAAI,CAAC,mBAAmB,kBAC5B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,GAC3C,CACF,CAAC,CAAC,CAAC,IAAI,CACF,CACP,CAAA;EACF,CAAC;EAEO,cAAc,CAAC,CAAe;IACrC,CAAC,CAAC,eAAe,EAAE,CAAA;IACnB,IAAI,CAAC,SAAS,EAAE,CAAA;IAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;EACtB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,IAAI;IACT,IAAI,CAAC,SAAS,EAAE,CAAA;EACjB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,IAAI;IACT,IAAI,CAAC,SAAS,EAAE,CAAA;EACjB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IACjB,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,~~iBAAiB~~,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;~~IACxE~~,eAAe,CAAC,IAAI,CAAC,eAAe,EAAE,~~kBAAkB~~,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;~~EAC3E~~,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, Element, EventEmitter, h, Host, Method, Prop, Watch, ~~State~~ } from \"@stencil/core\"\nimport { createID } from \"../../utils/string.utils\"\nimport { validateWcagRef } from \"../../helpers/Validate/wcag\"\nimport { ModalClass } from \"./constants\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\nimport { toBoolAttr } from \"../../helpers/Dom/template\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\n\n@Component({\n\ttag: \"gov-modal\",\n\tstyleUrl: \"gov-modal.scss\",\n})\nexport class GovModal {\n\tprivate h: GovHost\n\tprivate readonly labelId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.labelId = createID(\"GovModalLabel\")\n\t\tthis.contentId = createID(\"GovModalContent\")\n\t}\n\n\t@Element() host: HTMLGovModalElement\n\n\t/*\n\t Attribute for modal window display\n\t /\n\t@Prop() open = false\n\t/\n\t Title of modal window\n\t /\n\t@Prop() label: string\n\t/\n\t Role of modal\n\t /\n\t@Prop({ attribute: \"role\" }) role = \"dialog\"\n\t/\n\t Used to change the ~~HMTL~~ tag in the modal label for correct semantic structure\n\t /\n\t@Prop({ attribute: \"label-tag\" }) readonly labelTag: string = \"h2\"\n\t/\n\t String of id's that indicate alternative labels elements\n\t /\n\t@Prop({ attribute: \"wcag-labelled-by\" }) ~~wcaglabelledBy~~: string\n\t/\n\t Indicates the id of a component that describes the modal.\n\t /\n\t@Prop({ attribute: \"wcag-described-by\" }) wcagDescribedBy: string\n\t/\n\t Adds accessible label for the modal close button that is only shown for screen readers.\n\t /\n\t@Prop({ attribute: \"wcag-close-label\" }) wcagCloseLabel: string\n\t/\n\t A string of identifiers that indicate alternative label elements for closing the modal window\n\t /\n\t@Prop({ attribute: \"wcag-close-labelled-by\" }) wcagCloseLabelledBy: string\n\t/\n\t Emitted when modal window closes.\n\t /\n\t@Event({ eventName: \"gov-close\" }) govClose: EventEmitter<PointerEvent>\n\n\t@~~State() modalVisible = false\n\n\t@~~Watch(\"labelTag\")\n\tvalidateLabelTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${ModalClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch(\"open\")\n\twatchOpen(newValue: boolean): void {\n\t\tthis.~~modalVisible~~ = newValue\n\t}\n\n\tprivate showModal() {\n\t\tthis.~~modalVisible~~ = true\n\t\tdocument.body.classList.add(ModalClass.bodyFix)\n\t}\n\n\tprivate hideModal() {\n\t\tthis.~~modalVisible~~ = false\n\t\tdocument.body.classList.remove(ModalClass.bodyFix)\n\t}\n\n\tasync componentWillRender() {\n\t\tif (this.~~modalVisible~~) {\n\t\t\tthis.showModal()\n\t\t} else {\n\t\t\tthis.hideModal()\n\t\t}\n\t}\n\n\tasync componentDidRender() {\n\t\~~tthis.modalVisible = this.open\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 LabelTag = this.labelTag\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ModalClass.root)} open={this.~~modalVisible~~}>\n\t\t\t\t<dialog\n\t\t\t\t\tclass={ModalClass.dialog}\n\t\t\t\t\thidden={!this.~~modalVisible~~}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\topen={this.~~modalVisible~~}\n\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\taria-hidden={toBoolAttr(!this.~~modalVisible~~)}\n\t\t\t\t\taria-labelledby={this.~~wcaglabelledBy~~ \|\| this.labelId}\n\t\t\t\t\taria-describedby={this.wcagDescribedBy \|\| this.contentId}\n\t\t\t\t\trole={this.role}\n\t\t\t\t>\n\t\t\t\t\t<div class={ModalClass.inner}>\n\t\t\t\t\t\t<div class={ModalClass.header}>\n\t\t\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t\t\t<div class={ModalClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\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\t{this.label && (\n\t\t\t\t\t\t\t\t<LabelTag class={ModalClass.title} id={this.labelId}>\n\t\t\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t\t\t</LabelTag>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<gov-button\n\t\t\t\t\t\t\t\tclass={ModalClass.close}\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\twcagLabel={this.wcagCloseLabel}\n\t\t\t\t\t\t\t\twcagLabelledBy={this.wcagCloseLabelledBy}\n\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<gov-icon name=\"x-lg\" />\n\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class={ModalClass.content} id={this.contentId}>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</dialog>\n\n\t\t\t\t{this.~~modalVisible~~ ? (\n\t\t\t\t\t<gov-backdrop\n\t\t\t\t\t\twcag-label={this.wcagCloseLabel}\n\t\t\t\t\t\twcag-labelled-by={this.wcagCloseLabelledBy}\n\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onCloseHandler(e: PointerEvent) {\n\t\te.stopPropagation()\n\t\tthis.hideModal()\n\t\tthis.govClose.emit(e)\n\t}\n\n\t/\n\t Showing the modal\n\t /\n\t@Method()\n\tasync show(): Promise<void> {\n\t\tthis.showModal()\n\t}\n\n\t/\n\t ~~Hidding~~ the modal\n\t /\n\t@Method()\n\tasync hide(): Promise<void> {\n\t\tthis.hideModal()\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.~~wcaglabelledBy~~, \"~~aria~~-~~labelledby~~\", ModalClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"~~aria~~-~~describedby~~\", ModalClass.root)\n\t}\n}\n"]}
1	+ {"version":3,"file":"gov-modal.js","sourceRoot":"","sources":["../../../../../../src/components/gov-modal/gov-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Element, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { createID } from \"../../utils/string.utils\"\nimport { validateWcagRef } from \"../../helpers/Validate/wcag\"\nimport { ModalClass } from \"./constants\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\nimport { toBoolAttr } from \"../../helpers/Dom/template\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\n\n@Component({\n\ttag: \"gov-modal\",\n\tstyleUrl: \"gov-modal.scss\",\n})\nexport class GovModal {\n\tprivate h: GovHost\n\tprivate readonly labelId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.labelId = createID(\"GovModalLabel\")\n\t\tthis.contentId = createID(\"GovModalContent\")\n\t}\n\n\t@Element() host: HTMLGovModalElement\n\n\t/*\n\t Attribute for modal window display\n\t /\n\t@Prop({mutable: true}) open = false\n\t/\n\t Title of modal window\n\t /\n\t@Prop() label: string\n\t/\n\t Role of modal\n\t /\n\t@Prop({ attribute: \"role\" }) role = \"dialog\"\n\t/\n\t Used to change the HTML tag in the modal label for correct semantic structure\n\t /\n\t@Prop({ attribute: \"label-tag\" }) readonly labelTag: string = \"h2\"\n\t/\n\t String of id's that indicate alternative labels elements\n\t /\n\t@Prop({ attribute: \"wcag-labelled-by\" }) wcagLabelledBy: string\n\t/\n\t Indicates the id of a component that describes the modal.\n\t /\n\t@Prop({ attribute: \"wcag-described-by\" }) wcagDescribedBy: string\n\t/\n\t Adds accessible label for the modal close button that is only shown for screen readers.\n\t /\n\t@Prop({ attribute: \"wcag-close-label\" }) wcagCloseLabel: string\n\t/\n\t A string of identifiers that indicate alternative label elements for closing the modal window\n\t /\n\t@Prop({ attribute: \"wcag-close-labelled-by\" }) wcagCloseLabelledBy: string\n\t/\n\t Emitted when modal window closes.\n\t /\n\t@Event({ eventName: \"gov-close\" }) govClose: EventEmitter<PointerEvent>\n\n\t@Watch(\"labelTag\")\n\tvalidateLabelTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${ModalClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch(\"open\")\n\twatchOpen(newValue: boolean): void {\n\t\tthis.open = newValue\n\t}\n\n\tprivate showModal() {\n\t\tthis.open = true\n\t\tdocument.body.classList.add(ModalClass.bodyFix)\n\t}\n\n\tprivate hideModal() {\n\t\tthis.open = false\n\t\tdocument.body.classList.remove(ModalClass.bodyFix)\n\t}\n\n\tasync componentWillRender() {\n\t\tif (this.open) {\n\t\t\tthis.showModal()\n\t\t} else {\n\t\t\tthis.hideModal()\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\tconst LabelTag = this.labelTag\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ModalClass.root)} open={this.open}>\n\t\t\t\t<dialog\n\t\t\t\t\tclass={ModalClass.dialog}\n\t\t\t\t\thidden={!this.open}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\topen={this.open}\n\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\taria-hidden={toBoolAttr(!this.open)}\n\t\t\t\t\taria-labelledby={this.wcagLabelledBy \|\| this.labelId}\n\t\t\t\t\taria-describedby={this.wcagDescribedBy \|\| this.contentId}\n\t\t\t\t\trole={this.role}\n\t\t\t\t>\n\t\t\t\t\t<div class={ModalClass.inner}>\n\t\t\t\t\t\t<div class={ModalClass.header}>\n\t\t\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t\t\t<div class={ModalClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\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\t{this.label && (\n\t\t\t\t\t\t\t\t<LabelTag class={ModalClass.title} id={this.labelId}>\n\t\t\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t\t\t</LabelTag>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<gov-button\n\t\t\t\t\t\t\t\tclass={ModalClass.close}\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\twcagLabel={this.wcagCloseLabel}\n\t\t\t\t\t\t\t\twcagLabelledBy={this.wcagCloseLabelledBy}\n\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<gov-icon name=\"x-lg\" />\n\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class={ModalClass.content} id={this.contentId}>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</dialog>\n\n\t\t\t\t{this.open ? (\n\t\t\t\t\t<gov-backdrop\n\t\t\t\t\t\twcag-label={this.wcagCloseLabel}\n\t\t\t\t\t\twcag-labelled-by={this.wcagCloseLabelledBy}\n\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onCloseHandler(e: PointerEvent) {\n\t\te.stopPropagation()\n\t\tthis.hideModal()\n\t\tthis.govClose.emit(e)\n\t}\n\n\t/\n\t Showing the modal\n\t /\n\t@Method()\n\tasync show(): Promise<void> {\n\t\tthis.showModal()\n\t}\n\n\t/\n\t Hiding the modal\n\t /\n\t@Method()\n\tasync hide(): Promise<void> {\n\t\tthis.hideModal()\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.wcagLabelledBy, \"wcag-labelled-by\", ModalClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", ModalClass.root)\n\t}\n}\n"]}

package/dist/collection/components/gov-promp/gov-prompt.js CHANGED Viewed

@@ -13,11 +13,10 @@ export class GovPrompt {
     this.label = undefined;
     this.role = "dialog";
     this.labelTag = "h2";
-    this.wcaglabelledBy = undefined;
+    this.wcagLabelledBy = undefined;
     this.wcagDescribedBy = undefined;
     this.wcagCloseLabel = undefined;
     this.wcagCloseLabelledBy = undefined;
-    this.modalVisible = false;
     this.h = govHost(this.host);
     this.labelId = createID("GovPromptLabel");
     this.contentId = createID("GovPromptContent");
@@ -31,18 +30,18 @@ export class GovPrompt {
     }
   }
   watchOpen(newValue) {
-    this.modalVisible = newValue;
+    this.open = newValue;
   }
   showModal() {
-    this.modalVisible = true;
+    this.open = true;
     document.body.classList.add(ModalClass.bodyFix);
   }
   hideModal() {
-    this.modalVisible = false;
+    this.open = false;
     document.body.classList.remove(ModalClass.bodyFix);
   }
   async componentWillRender() {
-    if (this.modalVisible) {
+    if (this.open) {
       this.showModal();
     }
     else {
@@ -50,7 +49,6 @@ export class GovPrompt {
     }
   }
   async componentDidRender() {
-    this.modalVisible = this.open;
     if (canValidateWcagOnRender()) {
       await delay(500);
       await this.validateWcag();
@@ -58,7 +56,7 @@ export class GovPrompt {
   }
   render() {
     const LabelTag = this.labelTag;
-    return (h(Host, { class: this.h.classes(ModalClass.rootPrompt), open: this.modalVisible }, h("dialog", { class: ModalClass.dialog, hidden: !this.modalVisible, tabindex: "-1", open: this.modalVisible, "aria-modal": "true", "aria-hidden": toBoolAttr(!this.modalVisible), "aria-labelledby": this.wcaglabelledBy || this.labelId, "aria-describedby": this.wcagDescribedBy || this.contentId, role: this.role }, h("div", { class: ModalClass.inner }, h("div", { class: ModalClass.header }, this.h.hasSlot("icon") && (h("div", { class: ModalClass.icon }, h("slot", { name: "icon" }))), this.label && (h(LabelTag, { class: ModalClass.title, id: this.labelId }, this.label)), h("gov-button", { class: ModalClass.close, variant: "primary", wcagLabel: this.wcagCloseLabel, wcagLabelledBy: this.wcagCloseLabelledBy, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, h("gov-icon", { name: "x-lg" }))), h("div", { class: ModalClass.content, id: this.contentId }, h("slot", null)), h("div", { class: ModalClass.actions }, h("slot", { name: "actions" })))), this.modalVisible ? (h("gov-backdrop", { "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })) : null));
+    return (h(Host, { class: this.h.classes(ModalClass.rootPrompt), open: this.open }, h("dialog", { class: ModalClass.dialog, hidden: !this.open, tabindex: "-1", open: this.open, "aria-modal": "true", "aria-hidden": toBoolAttr(!this.open), "aria-labelledby": this.wcagLabelledBy || this.labelId, "aria-describedby": this.wcagDescribedBy || this.contentId, role: this.role }, h("div", { class: ModalClass.inner }, h("div", { class: ModalClass.header }, this.h.hasSlot("icon") && (h("div", { class: ModalClass.icon }, h("slot", { name: "icon" }))), this.label && (h(LabelTag, { class: ModalClass.title, id: this.labelId }, this.label)), h("gov-button", { class: ModalClass.close, variant: "primary", wcagLabel: this.wcagCloseLabel, wcagLabelledBy: this.wcagCloseLabelledBy, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, h("gov-icon", { name: "x-lg" }))), h("div", { class: ModalClass.content, id: this.contentId }, h("slot", null)), h("div", { class: ModalClass.actions }, h("slot", { name: "actions" })))), this.open ? (h("gov-backdrop", { "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })) : null));
   }
   onCloseHandler(e) {
     e.stopPropagation();
@@ -72,7 +70,7 @@ export class GovPrompt {
     this.showModal();
   }
   /**
-   * Hidding the modal
+   * Hiding the modal
    */
   async hide() {
     this.hideModal();
@@ -81,8 +79,8 @@ export class GovPrompt {
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    validateWcagRef(this.wcaglabelledBy, "aria-labelledby", ModalClass.root);
-    validateWcagRef(this.wcagDescribedBy, "aria-describedby", ModalClass.root);
+    validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", ModalClass.root);
+    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", ModalClass.root);
   }
   static get is() { return "gov-prompt"; }
   static get originalStyleUrls() {
@@ -99,7 +97,7 @@ export class GovPrompt {
     return {
       "open": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -162,13 +160,13 @@ export class GovPrompt {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Used to change the HMTL tag in the modal label for correct semantic structure"
+          "text": "Used to change the HTML tag in the modal label for correct semantic structure"
         },
         "attribute": "label-tag",
         "reflect": false,
         "defaultValue": "\"h2\""
       },
-      "wcaglabelledBy": {
+      "wcagLabelledBy": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -238,11 +236,6 @@ export class GovPrompt {
       }
     };
   }
-  static get states() {
-    return {
-      "modalVisible": {}
-    };
-  }
   static get events() {
     return [{
         "method": "govClose",
@@ -295,7 +288,7 @@ export class GovPrompt {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Hidding the modal",
+          "text": "Hiding the modal",
           "tags": []
         }
       },

package/dist/collection/components/gov-promp/gov-prompt.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gov-prompt.js","sourceRoot":"","sources":["../../../../../../src/components/gov-promp/gov-prompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,~~KAAK,EAAE,~~MAAM,eAAe,CAAA;~~AAC5G~~,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AACnD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAMvD,MAAM,OAAO,SAAS;EAKrB;~~gBAUe~~,KAAK;;~~gBAQgB~~,QAAQ;oBAIkB,IAAI;;;;;~~wBAsB1C~~,~~KAAK;IA3C5B,~~IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAA;IACzC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAA;GAC7C;~~EA2CD~~,gBAAgB,CAAC,QAAgB;IAChC,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;IACtD,IAAI,QAAQ,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClC,WAAW,CAAC,IAAI,UAAU,CAAC,IAAI,UAAU,QAAQ,kBAAkB,CAAC,CAAA;OACpE;KACD;EACF,CAAC;EAGD,SAAS,CAAC,QAAiB;IAC1B,IAAI,CAAC,~~YAAY~~,GAAG,QAAQ,CAAA;~~EAC7B~~,CAAC;EAEO,SAAS;IAChB,IAAI,CAAC,~~YAAY~~,GAAG,IAAI,CAAA;~~IACxB~~,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;EAChD,CAAC;EAEO,SAAS;IAChB,IAAI,CAAC,~~YAAY~~,GAAG,KAAK,CAAA;~~IACzB~~,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;EACnD,CAAC;EAED,KAAK,CAAC,mBAAmB;IACxB,IAAI,IAAI,CAAC,~~YAAY~~,EAAE;~~MACtB~~,IAAI,CAAC,SAAS,EAAE,CAAA;KAChB;SAAM;MACN,IAAI,CAAC,SAAS,EAAE,CAAA;KAChB;EACF,CAAC;EAED,KAAK,CAAC,kBAAkB;IACvB,IAAI,~~CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAA;IAC7B,IAAI,~~uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;EACF,CAAC;EAED,MAAM;IACL,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;IAC9B,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,~~YAAY~~;~~MAC1E~~,cACC,KAAK,EAAE,UAAU,CAAC,MAAM,EACxB,MAAM,EAAE,CAAC,IAAI,CAAC,~~YAAY~~,~~EAC1B~~,QAAQ,EAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,~~YAAY~~,~~gBACZ~~,MAAM,iBACJ,UAAU,CAAC,CAAC,IAAI,CAAC,~~YAAY~~,CAAC,~~qBAC1B~~,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,sBAClC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,SAAS,EACxD,IAAI,EAAE,IAAI,CAAC,IAAI;QAEf,WAAK,KAAK,EAAE,UAAU,CAAC,KAAK;UAC3B,WAAK,KAAK,EAAE,UAAU,CAAC,MAAM;YAC3B,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAC1B,WAAK,KAAK,EAAE,UAAU,CAAC,IAAI;cAC1B,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN;YACA,IAAI,CAAC,KAAK,IAAI,CACd,EAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,IACjD,IAAI,CAAC,KAAK,CACD,CACX;YACD,kBACC,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,OAAO,EAAC,SAAS,EACjB,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,cAAc,EAAE,IAAI,CAAC,mBAAmB,EACxC,IAAI,EAAC,MAAM,kBACG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;cAE5C,gBAAU,IAAI,EAAC,MAAM,GAAG,CACZ,CACR;UACN,WAAK,KAAK,EAAE,UAAU,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,SAAS;YACjD,eAAQ,CACH;UACN,WAAK,KAAK,EAAE,UAAU,CAAC,OAAO;YAC7B,YAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACD,CACE;MAER,IAAI,CAAC,~~YAAY~~,CAAC,CAAC,CAAC,~~CACpB~~,kCACa,IAAI,CAAC,cAAc,sBACb,IAAI,CAAC,mBAAmB,kBAC5B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,GAC3C,CACF,CAAC,CAAC,CAAC,IAAI,CACF,CACP,CAAA;EACF,CAAC;EAEO,cAAc,CAAC,CAAe;IACrC,CAAC,CAAC,eAAe,EAAE,CAAA;IACnB,IAAI,CAAC,SAAS,EAAE,CAAA;IAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;EACtB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,IAAI;IACT,IAAI,CAAC,SAAS,EAAE,CAAA;EACjB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,IAAI;IACT,IAAI,CAAC,SAAS,EAAE,CAAA;EACjB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,YAAY;IACjB,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,~~iBAAiB~~,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;~~IACxE~~,eAAe,CAAC,IAAI,CAAC,eAAe,EAAE,~~kBAAkB~~,EAAE,UAAU,CAAC,IAAI,CAAC,CAAA;~~EAC3E~~,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, Element, EventEmitter, h, Host, Method, Prop, Watch, ~~State~~ } from \"@stencil/core\"\nimport { createID } from \"../../utils/string.utils\"\nimport { validateWcagRef } from \"../../helpers/Validate/wcag\"\nimport { ModalClass } from \"../gov-modal/constants\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\nimport { toBoolAttr } from \"../../helpers/Dom/template\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\n\n@Component({\n\ttag: \"gov-prompt\",\n\tstyleUrl: \"gov-prompt.scss\",\n})\nexport class GovPrompt {\n\tprivate h: GovHost\n\tprivate readonly labelId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.labelId = createID(\"GovPromptLabel\")\n\t\tthis.contentId = createID(\"GovPromptContent\")\n\t}\n\n\t@Element() host: HTMLGovPromptElement\n\t/*\n\t Attribute for modal window display\n\t /\n\t@Prop() open = false\n\t/\n\t Title of modal window\n\t /\n\t@Prop() label: string\n\t/\n\t Role of modal\n\t /\n\t@Prop({ attribute: \"role\" }) role = \"dialog\"\n\t/\n\t Used to change the ~~HMTL~~ tag in the modal label for correct semantic structure\n\t /\n\t@Prop({ attribute: \"label-tag\" }) readonly labelTag: string = \"h2\"\n\t/\n\t String of id's that indicate alternative labels elements\n\t /\n\t@Prop({ attribute: \"wcag-labelled-by\" }) ~~wcaglabelledBy~~: string\n\t/\n\t Indicates the id of a component that describes the modal.\n\t /\n\t@Prop({ attribute: \"wcag-described-by\" }) wcagDescribedBy: string\n\t/\n\t Adds accessible label for the modal close button that is only shown for screen readers.\n\t /\n\t@Prop({ attribute: \"wcag-close-label\" }) wcagCloseLabel: string\n\t/\n\t A string of identifiers that indicate alternative label elements for closing the modal window\n\t /\n\t@Prop({ attribute: \"wcag-close-labelled-by\" }) wcagCloseLabelledBy: string\n\t/\n\t Emitted when modal window closes.\n\t /\n\t@Event({ eventName: \"gov-close\" }) govClose: EventEmitter<PointerEvent>\n\n\t@~~State() modalVisible = false\n\n\t@~~Watch(\"labelTag\")\n\tvalidateLabelTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${ModalClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch(\"open\")\n\twatchOpen(newValue: boolean): void {\n\t\tthis.~~modalVisible~~ = newValue\n\t}\n\n\tprivate showModal() {\n\t\tthis.~~modalVisible~~ = true\n\t\tdocument.body.classList.add(ModalClass.bodyFix)\n\t}\n\n\tprivate hideModal() {\n\t\tthis.~~modalVisible~~ = false\n\t\tdocument.body.classList.remove(ModalClass.bodyFix)\n\t}\n\n\tasync componentWillRender() {\n\t\tif (this.~~modalVisible~~) {\n\t\t\tthis.showModal()\n\t\t} else {\n\t\t\tthis.hideModal()\n\t\t}\n\t}\n\n\tasync componentDidRender() {\n\t\~~tthis.modalVisible = this.open\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 LabelTag = this.labelTag\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ModalClass.rootPrompt)} open={this.~~modalVisible~~}>\n\t\t\t\t<dialog\n\t\t\t\t\tclass={ModalClass.dialog}\n\t\t\t\t\thidden={!this.~~modalVisible~~}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\topen={this.~~modalVisible~~}\n\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\taria-hidden={toBoolAttr(!this.~~modalVisible~~)}\n\t\t\t\t\taria-labelledby={this.~~wcaglabelledBy~~ \|\| this.labelId}\n\t\t\t\t\taria-describedby={this.wcagDescribedBy \|\| this.contentId}\n\t\t\t\t\trole={this.role}\n\t\t\t\t>\n\t\t\t\t\t<div class={ModalClass.inner}>\n\t\t\t\t\t\t<div class={ModalClass.header}>\n\t\t\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t\t\t<div class={ModalClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\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\t{this.label && (\n\t\t\t\t\t\t\t\t<LabelTag class={ModalClass.title} id={this.labelId}>\n\t\t\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t\t\t</LabelTag>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<gov-button\n\t\t\t\t\t\t\t\tclass={ModalClass.close}\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\twcagLabel={this.wcagCloseLabel}\n\t\t\t\t\t\t\t\twcagLabelledBy={this.wcagCloseLabelledBy}\n\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<gov-icon name=\"x-lg\" />\n\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class={ModalClass.content} id={this.contentId}>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class={ModalClass.actions}>\n\t\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</dialog>\n\n\t\t\t\t{this.~~modalVisible~~ ? (\n\t\t\t\t\t<gov-backdrop\n\t\t\t\t\t\twcag-label={this.wcagCloseLabel}\n\t\t\t\t\t\twcag-labelled-by={this.wcagCloseLabelledBy}\n\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onCloseHandler(e: PointerEvent) {\n\t\te.stopPropagation()\n\t\tthis.hideModal()\n\t\tthis.govClose.emit(e)\n\t}\n\n\t/\n\t Showing the modal\n\t /\n\t@Method()\n\tasync show(): Promise<void> {\n\t\tthis.showModal()\n\t}\n\n\t/\n\t ~~Hidding~~ the modal\n\t /\n\t@Method()\n\tasync hide(): Promise<void> {\n\t\tthis.hideModal()\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.~~wcaglabelledBy~~, \"~~aria~~-~~labelledby~~\", ModalClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"~~aria~~-~~describedby~~\", ModalClass.root)\n\t}\n}\n"]}
1	+ {"version":3,"file":"gov-prompt.js","sourceRoot":"","sources":["../../../../../../src/components/gov-promp/gov-prompt.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Element, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { createID } from \"../../utils/string.utils\"\nimport { validateWcagRef } from \"../../helpers/Validate/wcag\"\nimport { ModalClass } from \"../gov-modal/constants\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\nimport { toBoolAttr } from \"../../helpers/Dom/template\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\n\n@Component({\n\ttag: \"gov-prompt\",\n\tstyleUrl: \"gov-prompt.scss\",\n})\nexport class GovPrompt {\n\tprivate h: GovHost\n\tprivate readonly labelId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.labelId = createID(\"GovPromptLabel\")\n\t\tthis.contentId = createID(\"GovPromptContent\")\n\t}\n\n\t@Element() host: HTMLGovPromptElement\n\t/*\n\t Attribute for modal window display\n\t /\n\t@Prop({mutable: true}) open = false\n\t/\n\t Title of modal window\n\t /\n\t@Prop() label: string\n\t/\n\t Role of modal\n\t /\n\t@Prop({ attribute: \"role\" }) role = \"dialog\"\n\t/\n\t Used to change the HTML tag in the modal label for correct semantic structure\n\t /\n\t@Prop({ attribute: \"label-tag\" }) readonly labelTag: string = \"h2\"\n\t/\n\t String of id's that indicate alternative labels elements\n\t /\n\t@Prop({ attribute: \"wcag-labelled-by\" }) wcagLabelledBy: string\n\t/\n\t Indicates the id of a component that describes the modal.\n\t /\n\t@Prop({ attribute: \"wcag-described-by\" }) wcagDescribedBy: string\n\t/\n\t Adds accessible label for the modal close button that is only shown for screen readers.\n\t /\n\t@Prop({ attribute: \"wcag-close-label\" }) wcagCloseLabel: string\n\t/\n\t A string of identifiers that indicate alternative label elements for closing the modal window\n\t /\n\t@Prop({ attribute: \"wcag-close-labelled-by\" }) wcagCloseLabelledBy: string\n\t/\n\t Emitted when modal window closes.\n\t /\n\t@Event({ eventName: \"gov-close\" }) govClose: EventEmitter<PointerEvent>\n\n\t@Watch(\"labelTag\")\n\tvalidateLabelTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${ModalClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch(\"open\")\n\twatchOpen(newValue: boolean): void {\n\t\tthis.open = newValue\n\t}\n\n\tprivate showModal() {\n\t\tthis.open = true\n\t\tdocument.body.classList.add(ModalClass.bodyFix)\n\t}\n\n\tprivate hideModal() {\n\t\tthis.open = false\n\t\tdocument.body.classList.remove(ModalClass.bodyFix)\n\t}\n\n\tasync componentWillRender() {\n\t\tif (this.open) {\n\t\t\tthis.showModal()\n\t\t} else {\n\t\t\tthis.hideModal()\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\tconst LabelTag = this.labelTag\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ModalClass.rootPrompt)} open={this.open}>\n\t\t\t\t<dialog\n\t\t\t\t\tclass={ModalClass.dialog}\n\t\t\t\t\thidden={!this.open}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\topen={this.open}\n\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\taria-hidden={toBoolAttr(!this.open)}\n\t\t\t\t\taria-labelledby={this.wcagLabelledBy \|\| this.labelId}\n\t\t\t\t\taria-describedby={this.wcagDescribedBy \|\| this.contentId}\n\t\t\t\t\trole={this.role}\n\t\t\t\t>\n\t\t\t\t\t<div class={ModalClass.inner}>\n\t\t\t\t\t\t<div class={ModalClass.header}>\n\t\t\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t\t\t<div class={ModalClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\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\t{this.label && (\n\t\t\t\t\t\t\t\t<LabelTag class={ModalClass.title} id={this.labelId}>\n\t\t\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t\t\t</LabelTag>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<gov-button\n\t\t\t\t\t\t\t\tclass={ModalClass.close}\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\twcagLabel={this.wcagCloseLabel}\n\t\t\t\t\t\t\t\twcagLabelledBy={this.wcagCloseLabelledBy}\n\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<gov-icon name=\"x-lg\" />\n\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class={ModalClass.content} id={this.contentId}>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class={ModalClass.actions}>\n\t\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</dialog>\n\n\t\t\t\t{this.open ? (\n\t\t\t\t\t<gov-backdrop\n\t\t\t\t\t\twcag-label={this.wcagCloseLabel}\n\t\t\t\t\t\twcag-labelled-by={this.wcagCloseLabelledBy}\n\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onCloseHandler(e: PointerEvent) {\n\t\te.stopPropagation()\n\t\tthis.hideModal()\n\t\tthis.govClose.emit(e)\n\t}\n\n\t/\n\t Showing the modal\n\t /\n\t@Method()\n\tasync show(): Promise<void> {\n\t\tthis.showModal()\n\t}\n\n\t/\n\t Hiding the modal\n\t /\n\t@Method()\n\tasync hide(): Promise<void> {\n\t\tthis.hideModal()\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.wcagLabelledBy, \"wcag-labelled-by\", ModalClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", ModalClass.root)\n\t}\n}\n"]}

package/dist/collection/pages/Alert.js CHANGED Viewed

@@ -2,7 +2,14 @@ class AlertPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
 		<h2>Alert</h2>
+		<gov-alert variant="secondary" headline="Tohle bude super nadpis pro všechno" closable>
+			<gov-icon name="info" slot="icon"></gov-icon>
+			<p>
+				Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+			</p>
+		</gov-alert>
+		<br>
 		<gov-alert variant="secondary" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>

package/dist/collection/pages/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../../src/pages/Alert.ts"],"names":[],"mappings":"AAAA,MAAM,SAAU,SAAQ,WAAW;EAClC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EhB~~,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE;EACnD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAA;CAC9C","sourcesContent":["class AlertPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>Alert</h2>\n\n\t\t<gov-alert variant=\"secondary\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert variant=\"warning\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tWarning - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert variant=\"error\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert variant=\"success\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert variant=\"primary\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\n\t\t<h3>Inverse</h3>\n\t\t<br>\n\t\t<gov-alert inverse=\"TRUE\" variant=\"secondary\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert inverse=\"True\" variant=\"warning\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tWarning - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert inverse=\"1\" variant=\"error\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert inverse=\"true\" variant=\"success\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert inverse=\"true\" variant=\"primary\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t`\n\t}\n}\n\nif (customElements.get('alert-page') === undefined) {\n\tcustomElements.define('alert-page', AlertPage)\n}\n"]}
1	+ {"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../../src/pages/Alert.ts"],"names":[],"mappings":"AAAA,MAAM,SAAU,SAAQ,WAAW;EAClC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE;EACnD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAA;CAC9C","sourcesContent":["class AlertPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>Alert</h2>\n\t\t\n\t\t<gov-alert variant=\"secondary\" headline=\"Tohle bude super nadpis pro všechno\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert variant=\"secondary\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert variant=\"warning\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tWarning - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert variant=\"error\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert variant=\"success\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert variant=\"primary\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\n\t\t<h3>Inverse</h3>\n\t\t<br>\n\t\t<gov-alert inverse=\"TRUE\" variant=\"secondary\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert inverse=\"True\" variant=\"warning\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tWarning - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert inverse=\"1\" variant=\"error\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert inverse=\"true\" variant=\"success\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t<br>\n\t\t<gov-alert inverse=\"true\" variant=\"primary\" closable>\n\t\t\t<gov-icon name=\"info\" slot=\"icon\"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20. 12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V uvedeném termínu bude nedostupné přihlášení k Portálu občana prostřednictvím datové schránky. Více informací <a href=\"#\">zde</a>.\n\t\t\t</p>\n\t\t</gov-alert>\n\t\t`\n\t}\n}\n\nif (customElements.get('alert-page') === undefined) {\n\tcustomElements.define('alert-page', AlertPage)\n}\n"]}

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

@@ -1,8 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as validateProp } from './props.js';
 import { V as Variants } from './variants.js';
-import { p as pick } from './utils.js';
-import { g as govHost } from './template.js';
+import { p as pick, d as delay } from './utils.js';
+import { g as govHost, a as toBoolAttr } from './template.js';
+import { F as Fragment } from './Fragment.js';
+import { a as validateWcagProp } from './wcag.js';
+import { c as canValidateWcagOnRender } from './win.js';
 import { d as defineCustomElement$3 } from './gov-button2.js';
 import { d as defineCustomElement$2 } from './gov-icon2.js';
@@ -12,20 +15,24 @@ const AlertClass = {
   section: 'gov-alert__section',
   icon: 'gov-alert__icon',
   content: 'gov-alert__content',
+  headline: 'gov-alert__headline',
   close: 'gov-alert__close',
 };
-const govAlertCss = ".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__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 govAlertCss = ".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 GovAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.govClose = createEvent(this, "gov-close", 7);
-    this.variant = 'primary';
+    this.headline = undefined;
+    this.variant = "primary";
     this.inverse = false;
     this.wcagCloseLabel = undefined;
+    this.wcagToggleLabel = undefined;
     this.closable = false;
+    this.toggleContent = false;
     this.h = govHost(this.host);
   }
   validateVariant(newValue) {
@@ -34,15 +41,39 @@ const GovAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   componentWillLoad() {
     this.validateVariant(this.variant);
   }
+  async componentDidRender() {
+    if (canValidateWcagOnRender()) {
+      await delay(500);
+      await this.validateWcag();
+    }
+  }
   render() {
     let inverse = !this.inverse;
-    let variant = this.inverse ? 'secondary' : this.variant;
-    if (this.variant == 'warning') {
+    let variant = this.inverse ? "secondary" : this.variant;
+    if (this.variant == "warning") {
       inverse = false;
-      variant = 'secondary';
+      variant = "secondary";
+    }
+    const closeButton = (h("div", { class: AlertClass.close }, h("gov-button", { size: "s", "aria-label": this.wcagCloseLabel, type: "base", variant: variant, inverse: inverse, "on-gov-click": this.onCloseHandler.bind(this) }, h("gov-icon", { name: "x-lg" }))));
+    return (h(Host, { class: this.h.classes(AlertClass.root), variant: this.variant }, h("section", { class: AlertClass.section, role: "alert" }, this.h.hasSlot("icon") && (h("div", { class: AlertClass.icon }, h("slot", { name: "icon" }))), h("div", { class: AlertClass.content }, this.headline ? (h(Fragment, null, h("div", { class: AlertClass.headline }, h("p", null, this.headline), h("gov-button", { size: "s", "aria-label": this.wcagToggleLabel, type: "base", variant: variant, inverse: inverse, "on-gov-click": () => this.toggleContent = !this.toggleContent }, h("gov-icon", { name: this.toggleContent ? 'chevron-up' : 'chevron-down' }))), h("div", { hidden: !this.toggleContent, "aria-hidden": toBoolAttr(this.toggleContent) }, h("slot", null)))) : (h("slot", null)))), this.closable && closeButton));
+  }
+  onCloseHandler(e) {
+    this.govClose.emit({
+      component: AlertClass.root,
+      ref: this.host,
+      originalEvent: e,
+    });
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    if (this.closable) {
+      validateWcagProp(this.wcagCloseLabel, 'wcag-close-label', AlertClass.root);
+    }
+    if (this.headline) {
+      validateWcagProp(this.wcagToggleLabel, 'wcag-toggle-label', AlertClass.root);
     }
-    const closeButton = (h("div", { class: AlertClass.close }, h("gov-button", { size: "s", "aria-label": this.wcagCloseLabel, type: "base", variant: variant, inverse: inverse, onClick: (e) => this.govClose.emit(e) }, h("gov-icon", { name: "x-lg" }))));
-    return (h(Host, { class: this.h.classes(AlertClass.root), variant: this.variant }, h("section", { class: AlertClass.section, role: "alert" }, this.h.hasSlot('icon') && (h("div", { class: AlertClass.icon }, h("slot", { name: "icon" }))), h("div", { class: AlertClass.content }, h("slot", null))), this.closable && closeButton));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -50,10 +81,14 @@ const GovAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return govAlertCss; }
 }, [4, "gov-alert", {
+    "headline": [1],
     "variant": [1],
     "inverse": [4],
     "wcagCloseLabel": [1, "wcag-close-label"],
-    "closable": [4]
+    "wcagToggleLabel": [1, "wcag-toggle-label"],
+    "closable": [4],
+    "toggleContent": [32],
+    "validateWcag": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {