@gov-design-system-ce/components 0.0.1 → 0.0.2

package/dist/cjs/gov-attachments_3.cjs.entry.js

@@ -2,32 +2,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f0dd3088.js');
-const win = require('./win-aa54b884.js');
-const utils = require('./utils-a51135ab.js');
-const constants = require('./constants-1d5ec4c5.js');
-const template = require('./template-26608353.js');
-const variants = require('./variants-04113a72.js');
-const props = require('./props-bb89fb59.js');
-const string_utils = require('./string.utils-f9b3501b.js');
-require('./gov.log-4527e960.js');
+const index = require('./index-356717ae.js');
+const wcag = require('./wcag-eca97102.js');
+const win = require('./win-ac5c1806.js');
+const utils = require('./utils-4ae73637.js');
+const template = require('./template-e1c4ff78.js');
+const constants = require('./constants-24f26d54.js');
+const variants = require('./variants-bacf037a.js');
+const props = require('./props-cc21d3d7.js');
+const string_utils = require('./string.utils-0f08c48c.js');
+require('./gov.log-0c9dca27.js');
 
 const AttachmentsClass = {
-  root: "gov-attachments",
-  label: "gov-attachments__label",
+  root: 'gov-attachments',
+  label: 'gov-attachments__label',
+  list: 'gov-attachments__list',
 };
 const AttachmentsItemClass = {
   root: 'gov-attachments-item',
   name: 'gov-attachments-item__name',
+  file: 'gov-attachments-item__file',
+  messages: 'gov-attachments-item__messages',
 };
 
-const govAttachmentsCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-attachments{display:block;width:100%}.gov-attachments__label{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing);color:var(--gov-form-label-color, #686868)}";
+const govAttachmentsCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-attachments{position:relative;display:block;width:100%}.gov-attachments__label{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing);color:var(--gov-form-label-color, #686868)}.gov-attachments__list>*:last-child{margin-bottom:0}";
 
 const GovAttachments = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.label = undefined;
     this.wcagLabel = undefined;
+    this.h = template.govHost(this.host);
   }
   async componentDidRender() {
     if (win.canValidateWcagOnRender()) {
@@ -36,19 +41,19 @@ const GovAttachments = class {
     }
   }
   render() {
-    return (index.h(index.Host, { class: AttachmentsClass.root }, this.label ? (index.h("p", { class: AttachmentsClass.label }, this.label)) : null, index.h("div", { role: "list", "aria-label": this.wcagLabel }, index.h("slot", null))));
+    return (index.h(index.Host, { class: this.h.classes(AttachmentsClass.root) }, this.label ? index.h("p", { class: AttachmentsClass.label }, this.label) : null, index.h("div", { class: AttachmentsClass.list, role: "list", "aria-label": this.wcagLabel }, index.h("slot", null))));
   }
   /**
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    win.validateWcagProp(this.wcagLabel, "wcag-label", AttachmentsClass.root);
+    wcag.validateWcagProp(this.wcagLabel, "wcag-label", AttachmentsClass.root);
   }
   get host() { return index.getElement(this); }
 };
 GovAttachments.style = govAttachmentsCss;
 
-const govAttachmentsItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-attachments-item{display:flex;gap:1rem;width:100%;margin:0rem 0rem 0.5rem}.gov-attachments-item:last-child{margin:0}.gov-attachments-item__name{display:flex;gap:0 0.5rem;flex-wrap:wrap;align-items:center;align-self:center;color:var(--gov-attachments-name-color, var(--gov-color-primary))}.gov-attachments-item__name span{font-weight:var(--gov-text-xs-font-weight);font-size:var(--gov-text-xs-font-size);line-height:var(--gov-text-xs-line-height);letter-spacing:var(--gov-text-xs-letter-spacing);color:var(--gov-attachments-decor-color, var(--gov-color-secondary-700))}";
+const govAttachmentsItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-attachments-item{position:relative;display:block;width:100%;margin:0rem 0rem 0.5rem}.gov-attachments-item__messages>*:last-child{margin-bottom:0}.gov-attachments-item__file{display:flex;gap:1rem}.gov-attachments-item__name{display:flex;gap:0 0.5rem;flex-wrap:wrap;align-items:center;align-self:center;margin:0;color:var(--gov-attachments-name-color, var(--gov-color-primary))}.gov-attachments-item__name span{font-weight:var(--gov-text-xs-font-weight);font-size:var(--gov-text-xs-font-size);line-height:var(--gov-text-xs-line-height);letter-spacing:var(--gov-text-xs-letter-spacing);color:var(--gov-attachments-decor-color, var(--gov-color-secondary-700))}";
 
 const GovAttachmentsItem = class {
   constructor(hostRef) {
@@ -56,6 +61,7 @@ const GovAttachmentsItem = class {
     this.govRemove = index.createEvent(this, "gov-remove", 7);
     this.wcagRemoveLabel = undefined;
     this.wcagRemoveLabelledBy = undefined;
+    this.h = template.govHost(this.host);
   }
   async componentDidRender() {
     if (win.canValidateWcagOnRender()) {
@@ -64,26 +70,26 @@ const GovAttachmentsItem = class {
     }
   }
   render() {
-    return (index.h(index.Host, { class: AttachmentsItemClass.root, role: "listitem" }, index.h("span", { class: AttachmentsItemClass.name }, index.h("slot", null), index.h("slot", { name: "info" })), index.h("gov-button", { variant: "primary", type: "base", size: "s", "wcag-label": this.wcagRemoveLabel, "wcag-labelled-by": this.wcagRemoveLabelledBy, "on-gov-click": this.govRemove.emit }, index.h("gov-icon", { slot: "left-icon", name: "cross" }))));
+    return (index.h(index.Host, { class: this.h.classes(AttachmentsItemClass.root), role: "listitem" }, index.h("div", { class: AttachmentsItemClass.file }, index.h("p", { class: AttachmentsItemClass.name }, index.h("slot", null), index.h("slot", { name: "info" })), index.h("gov-button", { variant: "primary", type: "base", size: "s", "wcag-label": this.wcagRemoveLabel, "wcag-labelled-by": this.wcagRemoveLabelledBy, "on-gov-click": this.govRemove.emit }, index.h("gov-icon", { slot: "left-icon", name: "cross" }))), this.h.hasSlot('message') && (index.h("div", { class: AttachmentsItemClass.messages }, index.h("slot", { name: "message" })))));
   }
   /**
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    win.validateWcagLabel(this.wcagRemoveLabel, this.wcagRemoveLabelledBy, AttachmentsItemClass.root);
+    wcag.validateWcagLabel(this.wcagRemoveLabel, this.wcagRemoveLabelledBy, AttachmentsItemClass.root);
   }
   get host() { return index.getElement(this); }
 };
 GovAttachmentsItem.style = govAttachmentsItemCss;
 
-const govFormMessageCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-form-message{font-weight:var(--gov-text-xs-font-weight);font-size:var(--gov-text-xs-font-size);line-height:var(--gov-text-xs-line-height);letter-spacing:var(--gov-text-xs-letter-spacing);display:flex;gap:0.5rem;margin:0rem 0rem 1rem}.gov-form-message__icon{position:relative;top:calc(var(--gov-text-xs-font-size) / 6);display:flex}.gov-form-message__icon>*{width:calc(var(--gov-text-xs-font-size) * 1.167);height:calc(var(--gov-text-xs-font-size) * 1.167)}.gov-form-message[variant=error]{color:var(--gov-form-message-error-color, var(--gov-color-error-400))}.gov-form-message[variant=secondary]{color:var(--gov-form-message-secondary-color, var(--gov-color-secondary-700))}.gov-form-message[variant=warning]{color:var(--gov-form-message-warning-color, var(--gov-color-warning-500))}.gov-form-message[variant=success]{color:var(--gov-form-message-success-color, var(--gov-color-success-500))}";
+const govFormMessageCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-form-message{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing);display:flex;gap:0.5rem;margin:0rem 0rem 1rem}.gov-form-message__icon{position:relative;top:calc(var(--gov-text-s-font-size) / 6);display:flex}.gov-form-message__icon>*{width:calc(var(--gov-text-s-font-size) * 1.167);height:calc(var(--gov-text-s-font-size) * 1.167)}.gov-form-message[variant=error]{color:var(--gov-form-message-error-color, var(--gov-color-error-400))}.gov-form-message[variant=secondary]{color:var(--gov-form-message-secondary-color, var(--gov-color-secondary-700))}.gov-form-message[variant=warning]{color:var(--gov-form-message-warning-color, var(--gov-color-warning-500))}.gov-form-message[variant=success]{color:var(--gov-form-message-success-color, var(--gov-color-success-500))}";
 
 const GovFormMessage = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.variant = variants.Variants.SECONDARY;
     this.h = template.govHost(this.host);
-    this.messageId = string_utils.createID("GovFormMessage");
+    this.messageId = string_utils.createID('GovFormMessage');
   }
   validateVariant(newValue) {
     props.validateProp(constants.Variants, newValue, constants.FormMessageClass.root);
@@ -92,7 +98,7 @@ const GovFormMessage = class {
     this.validateVariant(this.variant);
   }
   render() {
-    return (index.h(index.Host, { class: this.h.classes(constants.FormMessageClass.root), variant: this.variant }, this.h.hasSlot("icon") && (index.h("span", { class: constants.FormMessageClass.icon }, index.h("slot", { name: "icon" }))), index.h("span", { id: this.messageId, class: constants.FormMessageClass.content }, index.h("slot", null))));
+    return (index.h(index.Host, { class: this.h.classes(constants.FormMessageClass.root), variant: this.variant }, this.h.hasSlot('icon') && (index.h("span", { class: constants.FormMessageClass.icon }, index.h("slot", { name: "icon" }))), index.h("span", { id: this.messageId, class: constants.FormMessageClass.content }, index.h("slot", null))));
   }
   /**
    * Returns unique identfiier of message

package/dist/cjs/gov-attachments_3.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-attachments.gov-attachments-item.gov-form-message.entry.cjs.js","mappings":"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","names":["canValidateWcagOnRender","delay","h","Host","validateWcagProp","validateWcagLabel","GlobalVariants","govHost","createID","validateProp","Variants","FormMessageClass"],"sources":["../../../packages/core/src/components/gov-attachments/constants.ts","../../../packages/core/src/components/gov-attachments/gov-attachments.scss?tag=gov-attachments","../../../packages/core/src/components/gov-attachments/gov-attachments.tsx","../../../packages/core/src/components/gov-attachments/gov-attachments-item.scss?tag=gov-attachments-item","../../../packages/core/src/components/gov-attachments/gov-attachments-item.tsx","../../../packages/core/src/components/gov-form/message/gov-form-message.scss?tag=gov-form-message","../../../packages/core/src/components/gov-form/message/gov-form-message.tsx"],"sourcesContent":["export const AttachmentsClass = {\n\troot: \"gov-attachments\",\n\tlabel: \"gov-attachments__label\",\n}\n\nexport const AttachmentsItemClass = {\n\troot: 'gov-attachments-item',\n\tname: 'gov-attachments-item__name',\n}\n","/*\n *   Attachments\n */\n\n$class: \".gov-attachments\";\n\n#{$class} {\n\tdisplay: block;\n\twidth: 100%;\n\t&__label {\n\t\t@include typography($font-size-s);\n\t\tcolor: $form-label-color;\n\t}\n}\n","import { Component, Element, h, Host, Method, Prop } from \"@stencil/core\"\nimport { AttachmentsClass } from \"./constants\"\nimport { validateWcagProp } from \"../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\n\n@Component({\n\ttag: \"gov-attachments\",\n\tstyleUrl: \"gov-attachments.scss\",\n})\nexport class GovAttachments {\n\t@Element() readonly host: HTMLGovAttachmentsElement\n\n\t/**\n\t * Label of attachments section\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Adds accessible label for the attachment section that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={AttachmentsClass.root}>\n\t\t\t\t{this.label ? (\n\t\t\t\t\t<p class={AttachmentsClass.label}>\n\t\t\t\t\t\t{this.label}\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<div role=\"list\" aria-label={this.wcagLabel}>\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\tvalidateWcagProp(this.wcagLabel, \"wcag-label\", AttachmentsClass.root)\n\t}\n\n}\n","/*\n *   Attachments - Item\n */\n\n$class: \".gov-attachments-item\";\n\n#{$class} {\n\tdisplay: flex;\n\tgap: rem-calc(16);\n\twidth: 100%;\n\tmargin: rem-calc(0 0 8);\n\t&:last-child {\n\t\tmargin: 0;\n\t}\n\t&__name {\n\t\tdisplay: flex;\n\t\tgap: 0 rem-calc(8);\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\t\talign-self: center;\n\t\tcolor: $attachments-name-color;\n\t\tspan {\n\t\t\t@include typography($font-size-xs);\n\t\t\tcolor: $attachments-decor-color;\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\"\nimport { AttachmentsItemClass } from \"./constants\"\nimport { validateWcagLabel } from \"../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\n\n@Component({\n\ttag: \"gov-attachments-item\",\n\tstyleUrl: \"gov-attachments-item.scss\",\n})\nexport class GovAttachmentsItem {\n\t@Element() readonly host: HTMLGovAttachmentsItemElement\n\n\t/**\n\t * Adds accessible label for the remove button that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-remove-label\" }) readonly wcagRemoveLabel: string\n\t/**\n\t * Indicates the id of a component that labels the remove button.\n\t */\n\t@Prop({ attribute: \"wcag-remove-labelled-by\" }) readonly wcagRemoveLabelledBy: string\n\t/**\n\t * Emitted when the file is removed\n\t */\n\t@Event({ eventName: \"gov-remove\" }) govRemove: EventEmitter\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={AttachmentsItemClass.root} role=\"listitem\">\n\t\t\t\t<span class={AttachmentsItemClass.name}>\n\t\t\t\t\t<slot />\n\t\t\t\t\t<slot name=\"info\" />\n\t\t\t\t</span>\n\n\t\t\t\t<gov-button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\ttype=\"base\"\n\t\t\t\t\tsize=\"s\"\n\t\t\t\t\twcag-label={this.wcagRemoveLabel}\n\t\t\t\t\twcag-labelled-by={this.wcagRemoveLabelledBy}\n\t\t\t\t\ton-gov-click={this.govRemove.emit}>\n\t\t\t\t\t<gov-icon slot=\"left-icon\" name=\"cross\"></gov-icon>\n\t\t\t\t</gov-button>\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.wcagRemoveLabel, this.wcagRemoveLabelledBy, AttachmentsItemClass.root)\n\t}\n}\n","/*\n *   Form Message\n */\n\n$class: \".gov-form-message\";\n$font-size: $font-size-xs;\n\n#{$class} {\n\t@include typography($font-size);\n\tdisplay: flex;\n\tgap: rem-calc(8);\n\tmargin: rem-calc(0 0 16);\n\t&__icon {\n\t\tposition: relative;\n\t\ttop: calc(var(--gov-text-#{$font-size}-font-size) / 6);\n\t\tdisplay: flex;\n\t\t& > * {\n\t\t\twidth: calc(var(--gov-text-#{$font-size}-font-size) * 1.167);\n\t\t\theight: calc(var(--gov-text-#{$font-size}-font-size) * 1.167);\n\t\t}\n\t}\n\n\t@each $variant, $definitions in $form-message-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tcolor: get(\"color\", $definitions);\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { FormMessageClass, Variants, VariantType } from \"./constants\"\nimport { govHost } from \"../../../helpers/Dom/template\"\nimport { GovHost } from \"../../../helpers/Dom/template.d\"\nimport { Variants as GlobalVariants } from \"../../../core/constants/variants\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { createID } from \"../../../utils/string.utils\"\n\n@Component({\n\ttag: \"gov-form-message\",\n\tstyleUrl: \"gov-form-message.scss\",\n})\nexport class GovFormMessage {\n\th: GovHost\n\tprivate readonly messageId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.messageId = createID(\"GovFormMessage\")\n\t}\n\n\t@Element() host: HTMLGovFormMessageElement\n\t/**\n\t * Style variation of the mesage.\n\t */\n\t@Prop({ attribute: \"variant\" }) readonly variant?: VariantType = GlobalVariants.SECONDARY\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, FormMessageClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(FormMessageClass.root)} variant={this.variant}>\n\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t<span class={FormMessageClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<span id={this.messageId} class={FormMessageClass.content}>\n\t\t\t\t\t<slot />\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns unique identfiier of message\n\t */\n\t@Method()\n\tasync identifier(): Promise<string> {\n\t\treturn this.messageId\n\t}\n}\n"],"version":3}
+{"file":"gov-attachments.gov-attachments-item.gov-form-message.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAO,MAAM,gBAAgB,GAAG;EAC/B,IAAI,EAAE,iBAAiB;EACvB,KAAK,EAAE,wBAAwB;EAC/B,IAAI,EAAE,uBAAuB;CAC7B,CAAA;AAEM,MAAM,oBAAoB,GAAG;EACnC,IAAI,EAAE,sBAAsB;EAC5B,IAAI,EAAE,4BAA4B;EAClC,IAAI,EAAE,4BAA4B;EAClC,QAAQ,EAAE,gCAAgC;CAC1C;;ACXD,MAAM,iBAAiB,GAAG,ohBAAohB;;MCYjiB,cAAc;EAG1B;;;;IACC,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAYD,MAAM,kBAAkB;IACvB,IAAIC,2BAAuB,EAAE,EAAE;MAC9B,MAAMC,WAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAChD,IAAI,CAAC,KAAK,GAAGD,eAAG,KAAK,EAAE,gBAAgB,CAAC,KAAK,IAAG,IAAI,CAAC,KAAK,CAAK,GAAG,IAAI,EACvEA,iBAAK,KAAK,EAAE,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,gBAAa,IAAI,CAAC,SAAS,IACxEA,qBAAQ,CACH,CACA,EACP;GACD;;;;EAMD,MAAM,YAAY;IACjBE,qBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAA;GACrE;;;;;ACrDF,MAAM,qBAAqB,GAAG,40BAA40B;;MCY71B,kBAAkB;EAG9B;;;;;IACC,IAAI,CAAC,CAAC,GAAGL,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAiBD,MAAM,kBAAkB;IACvB,IAAIC,2BAAuB,EAAE,EAAE;MAC9B,MAAMC,WAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAED,MAAM;IACL,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,UAAU,IACtED,iBAAK,KAAK,EAAE,oBAAoB,CAAC,IAAI,IACpCA,eAAG,KAAK,EAAE,oBAAoB,CAAC,IAAI,IAClCA,qBAAQ,EACRA,kBAAM,IAAI,EAAC,MAAM,GAAG,CACjB,EACJA,wBACC,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,GAAG,gBACI,IAAI,CAAC,eAAe,sBACd,IAAI,CAAC,oBAAoB,kBAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,IACjCA,sBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,GAAY,CACvC,CACR,EAEL,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,KACzBA,iBAAK,KAAK,EAAE,oBAAoB,CAAC,QAAQ,IACxCA,kBAAM,IAAI,EAAC,SAAS,GAAG,CAClB,CACN,CACK,EACP;GACD;;;;EAMD,MAAM,YAAY;IACjBG,sBAAiB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAA;GAC7F;;;;;AC3EF,MAAM,iBAAiB,GAAG,ijCAAijC;;MCY9jC,cAAc;EAI1B;;mBASiEC,iBAAc,CAAC,SAAS;IARxF,IAAI,CAAC,CAAC,GAAGP,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,SAAS,GAAGQ,qBAAQ,CAAC,gBAAgB,CAAC,CAAA;GAC3C;EASD,eAAe,CAAC,QAAgB;IAC/BC,kBAAY,CAACC,kBAAQ,EAAE,QAAQ,EAAEC,0BAAgB,CAAC,IAAI,CAAC,CAAA;GACvD;EAED,iBAAiB;IAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAED,MAAM;IACL,QACCR,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAACO,0BAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACvE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtBR,kBAAM,KAAK,EAAEQ,0BAAgB,CAAC,IAAI,IACjCR,kBAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP,EACDA,kBAAM,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAEQ,0BAAgB,CAAC,OAAO,IACxDR,qBAAQ,CACF,CACD,EACP;GACD;;;;EAMD,MAAM,UAAU;IACf,OAAO,IAAI,CAAC,SAAS,CAAA;GACrB;;;;;;;;;;;;","names":["govHost","canValidateWcagOnRender","delay","h","Host","validateWcagProp","validateWcagLabel","GlobalVariants","createID","validateProp","Variants","FormMessageClass"],"sources":["../../../packages/core/src/components/gov-attachments/constants.ts","../../../packages/core/src/components/gov-attachments/gov-attachments.scss?tag=gov-attachments","../../../packages/core/src/components/gov-attachments/gov-attachments.tsx","../../../packages/core/src/components/gov-attachments/gov-attachments-item.scss?tag=gov-attachments-item","../../../packages/core/src/components/gov-attachments/gov-attachments-item.tsx","../../../packages/core/src/components/gov-form/message/gov-form-message.scss?tag=gov-form-message","../../../packages/core/src/components/gov-form/message/gov-form-message.tsx"],"sourcesContent":["export const AttachmentsClass = {\n\troot: 'gov-attachments',\n\tlabel: 'gov-attachments__label',\n\tlist: 'gov-attachments__list',\n}\n\nexport const AttachmentsItemClass = {\n\troot: 'gov-attachments-item',\n\tname: 'gov-attachments-item__name',\n\tfile: 'gov-attachments-item__file',\n\tmessages: 'gov-attachments-item__messages',\n}\n","/*\n *   Attachments\n */\n\n$class: \".gov-attachments\";\n\n#{$class} {\n\t@include base();\n\t&__label {\n\t\t@include typography($font-size-s);\n\t\tcolor: $form-label-color;\n\t}\n\t&__list {\n\t\t@include reset-last-margin();\n\t}\n}\n","import { Component, Element, h, Host, Method, Prop } from \"@stencil/core\"\nimport { AttachmentsClass } from \"./constants\"\nimport { validateWcagProp } 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.d\"\n\n@Component({\n\ttag: \"gov-attachments\",\n\tstyleUrl: \"gov-attachments.scss\",\n})\nexport class GovAttachments {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovAttachmentsElement\n\t/**\n\t * Label of attachments section\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Adds accessible label for the attachment section that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(AttachmentsClass.root)}>\n\t\t\t\t{this.label ? <p class={AttachmentsClass.label}>{this.label}</p> : null}\n\t\t\t\t<div class={AttachmentsClass.list} role=\"list\" aria-label={this.wcagLabel}>\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\tvalidateWcagProp(this.wcagLabel, \"wcag-label\", AttachmentsClass.root)\n\t}\n}\n","/*\n *   Attachments - Item\n */\n\n$class: \".gov-attachments-item\";\n\n#{$class} {\n\t@include base();\n\tmargin: rem-calc(0 0 8);\n\t&__messages {\n\t\t@include reset-last-margin();\n\t}\n\t&__file {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t}\n\t&__name {\n\t\tdisplay: flex;\n\t\tgap: 0 rem-calc(8);\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\t\talign-self: center;\n\t\tmargin: 0;\n\t\tcolor: $attachments-name-color;\n\t\tspan {\n\t\t\t@include typography($font-size-xs);\n\t\t\tcolor: $attachments-decor-color;\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\"\nimport { AttachmentsItemClass } from \"./constants\"\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.d'\n\n@Component({\n\ttag: \"gov-attachments-item\",\n\tstyleUrl: \"gov-attachments-item.scss\",\n})\nexport class GovAttachmentsItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovAttachmentsItemElement\n\n\t/**\n\t * Adds accessible label for the remove button that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-remove-label\" }) readonly wcagRemoveLabel: string\n\t/**\n\t * Indicates the id of a component that labels the remove button.\n\t */\n\t@Prop({ attribute: \"wcag-remove-labelled-by\" }) readonly wcagRemoveLabelledBy: string\n\t/**\n\t * Emitted when the file is removed\n\t */\n\t@Event({ eventName: \"gov-remove\" }) govRemove: EventEmitter<PointerEvent>\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(AttachmentsItemClass.root)} role=\"listitem\">\n\t\t\t\t<div class={AttachmentsItemClass.file}>\n\t\t\t\t\t<p class={AttachmentsItemClass.name}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t<slot name=\"info\" />\n\t\t\t\t\t</p>\n\t\t\t\t\t<gov-button\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\twcag-label={this.wcagRemoveLabel}\n\t\t\t\t\t\twcag-labelled-by={this.wcagRemoveLabelledBy}\n\t\t\t\t\t\ton-gov-click={this.govRemove.emit}>\n\t\t\t\t\t\t<gov-icon slot=\"left-icon\" name=\"cross\"></gov-icon>\n\t\t\t\t\t</gov-button>\n\t\t\t\t</div>\n\n\t\t\t\t{this.h.hasSlot('message') && (\n\t\t\t\t\t<div class={AttachmentsItemClass.messages}>\n\t\t\t\t\t\t<slot name=\"message\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagRemoveLabel, this.wcagRemoveLabelledBy, AttachmentsItemClass.root)\n\t}\n}\n","/*\n *   Form Message\n */\n\n$class: \".gov-form-message\";\n$font-size: $font-size-s;\n\n#{$class} {\n\t@include typography($font-size);\n\tdisplay: flex;\n\tgap: rem-calc(8);\n\tmargin: rem-calc(0 0 16);\n\t&__icon {\n\t\tposition: relative;\n\t\ttop: calc(var(--gov-text-#{$font-size}-font-size) / 6);\n\t\tdisplay: flex;\n\t\t& > * {\n\t\t\twidth: calc(var(--gov-text-#{$font-size}-font-size) * 1.167);\n\t\t\theight: calc(var(--gov-text-#{$font-size}-font-size) * 1.167);\n\t\t}\n\t}\n\n\t@each $variant, $definitions in $form-message-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tcolor: get(\"color\", $definitions);\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Method, Prop, Watch } from '@stencil/core'\nimport { FormMessageClass, Variants, VariantType } from './constants'\nimport { govHost } from '../../../helpers/Dom/template'\nimport { GovHost } from '../../../helpers/Dom/template.d'\nimport { Variants as GlobalVariants } from '../../../core/constants/variants'\nimport { validateProp } from '../../../helpers/Validate/props'\nimport { createID } from '../../../utils/string.utils'\n\n@Component({\n\ttag: 'gov-form-message',\n\tstyleUrl: 'gov-form-message.scss',\n})\nexport class GovFormMessage {\n\th: GovHost\n\tprivate readonly messageId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.messageId = createID('GovFormMessage')\n\t}\n\n\t@Element() host: HTMLGovFormMessageElement\n\t/**\n\t * Style variation of the mesage.\n\t */\n\t@Prop({ attribute: 'variant' }) readonly variant?: VariantType = GlobalVariants.SECONDARY\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, FormMessageClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(FormMessageClass.root)} variant={this.variant}>\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<span class={FormMessageClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<span id={this.messageId} class={FormMessageClass.content}>\n\t\t\t\t\t<slot />\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Returns unique identfiier of message\n\t */\n\t@Method()\n\tasync identifier(): Promise<string> {\n\t\treturn this.messageId\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-backdrop.cjs.entry.js

@@ -2,25 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f0dd3088.js');
-const win = require('./win-aa54b884.js');
-const utils = require('./utils-a51135ab.js');
-require('./gov.log-4527e960.js');
-require('./string.utils-f9b3501b.js');
+const index = require('./index-356717ae.js');
+const wcag = require('./wcag-eca97102.js');
+const win = require('./win-ac5c1806.js');
+const utils = require('./utils-4ae73637.js');
+const template = require('./template-e1c4ff78.js');
+require('./gov.log-0c9dca27.js');
+require('./string.utils-0f08c48c.js');
 
 const BackdropClass = {
   root: 'gov-backdrop',
+  bg: 'gov-backdrop__bg',
 };
 
-const govBackdropCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-backdrop{z-index:100;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--gov-backdrop-bg, var(--gov-color-secondary));opacity:0;transition:opacity 150ms;will-change:opacity}.gov-backdrop.is-visible{opacity:var(--gov-backdrop-opacity, 0.45)}";
+const govBackdropCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}.gov-backdrop__bg{z-index:100;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--gov-backdrop-bg, var(--gov-color-secondary));opacity:var(--gov-backdrop-opacity, 0.45)}.gov-backdrop[inverse=\"\"] .gov-backdrop__bg,.gov-backdrop[inverse=true i] .gov-backdrop__bg,.gov-backdrop[inverse=\"1\"] .gov-backdrop__bg{background-color:var(--gov-backdrop-bg-inverse, var(--gov-color-neutral-white));opacity:var(--gov-backdrop-opacity, 0.8)}";
 
 const GovBackdrop = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.govClick = index.createEvent(this, "gov-click", 7);
+    this.inverse = false;
     this.visible = false;
     this.wcagLabel = undefined;
     this.wcagLabelledBy = undefined;
+    this.h = template.govHost(this.host);
   }
   async componentDidRender() {
     if (win.canValidateWcagOnRender()) {
@@ -31,14 +36,15 @@ const GovBackdrop = class {
   render() {
     if (!this.visible)
       return null;
-    return (index.h("div", { role: 'button', "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onClick: (e) => this.govClick.emit(e), class: "gov-backdrop is-visible" }));
+    return (index.h(index.Host, { class: this.h.classes(BackdropClass.root), inverse: template.booleanString(this.inverse) }, index.h("div", { role: "button", "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onClick: (e) => this.govClick.emit(e), class: BackdropClass.bg })));
   }
   /**
    * Validate the WCAG attributes of the component
    */
   async validateWcag() {
-    win.validateWcagLabel(this.wcagLabel, this.wcagLabelledBy, BackdropClass.root);
+    wcag.validateWcagLabel(this.wcagLabel, this.wcagLabelledBy, BackdropClass.root);
   }
+  get host() { return index.getElement(this); }
 };
 GovBackdrop.style = govBackdropCss;
 

package/dist/cjs/gov-backdrop.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-backdrop.entry.cjs.js","mappings":";;;;;;;;;;AAAO,MAAM,aAAa,GAAG;EAC5B,IAAI,EAAE,cAAc;CACpB;;ACFD,MAAM,cAAc,GAAG,+YAA+Y;;MCUzZ,WAAW;;;;mBAII,KAAK;;;;EAchC,MAAM,kBAAkB;IACvB,IAAIA,2BAAuB,EAAE,EAAE;MAC9B,MAAMC,WAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAED,MAAM;IACL,IAAI,CAAC,IAAI,CAAC,OAAO;MAAE,OAAO,IAAI,CAAA;IAC9B,QACCC,iBAAK,IAAI,EAAE,QAAQ,gBACF,IAAI,CAAC,SAAS,qBACT,IAAI,CAAC,cAAc,EACpC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EACrC,KAAK,EAAC,yBAAyB,GAC9B,EACN;GACD;;;;EAMD,MAAM,YAAY;IACjBC,qBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;GAC1E;;;;;;","names":["canValidateWcagOnRender","delay","h","validateWcagLabel"],"sources":["../../../packages/core/src/components/gov-backdrop/constants.ts","../../../packages/core/src/components/gov-backdrop/gov-backdrop.scss?tag=gov-backdrop","../../../packages/core/src/components/gov-backdrop/gov-backdrop.tsx"],"sourcesContent":["export const BackdropClass = {\n\troot: 'gov-backdrop',\n}\n","/*\n *   Backdrop\n */\n\n$class: \".gov-backdrop\";\n\n#{$class} {\n\t@include z-index(\"modal\", 0);\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tbackground-color: $backdrop-bg;\n\topacity: 0;\n\ttransition: opacity $t;\n\twill-change: opacity;\n\t&.is-visible {\n\t\topacity: $backdrop-opacity;\n\t}\n}\n","import { Component, Event, EventEmitter, h, Method, Prop } from \"@stencil/core\"\nimport { validateWcagLabel } from \"../../helpers/Validate/wcag\"\nimport { BackdropClass } from \"./constants\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\n\n@Component({\n\ttag: \"gov-backdrop\",\n\tstyleUrl: \"gov-backdrop.scss\",\n})\nexport class GovBackdrop {\n\t/**\n\t * Default attribute for backdrop display\n\t */\n\t@Prop() visible: boolean = false\n\t/**\n\t * Adds accessible label for the backdrop 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 * Emitted when button clicks.\n\t */\n\t@Event({ eventName: \"gov-click\" }) govClick: EventEmitter<MouseEvent>\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\tif (!this.visible) return null\n\t\treturn (\n\t\t\t<div role={'button'}\n\t\t\t     aria-label={this.wcagLabel}\n\t\t\t     aria-labelledby={this.wcagLabelledBy}\n\t\t\t     onClick={(e) => this.govClick.emit(e)}\n\t\t\t     class=\"gov-backdrop is-visible\">\n\t\t\t</div>\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, BackdropClass.root)\n\t}\n\n}\n"],"version":3}
+{"file":"gov-backdrop.entry.cjs.js","mappings":";;;;;;;;;;;;AAAO,MAAM,aAAa,GAAG;EAC5B,IAAI,EAAE,cAAc;EACpB,EAAE,EAAE,kBAAkB;CACtB;;ACHD,MAAM,cAAc,GAAG,snBAAsnB;;MCYhoB,WAAW;EAGvB;;;mBAQoC,KAAK;mBAIvB,KAAK;;;IAXtB,IAAI,CAAC,CAAC,GAAGA,gBAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAwBD,MAAM,kBAAkB;IACvB,IAAIC,2BAAuB,EAAE,EAAE;MAC9B,MAAMC,WAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAED,MAAM;IACL,IAAI,CAAC,IAAI,CAAC,OAAO;MAAE,OAAO,IAAI,CAAA;IAC9B,QACCC,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAEC,sBAAa,CAAC,IAAI,CAAC,OAAO,CAAC,IACpFF,iBAAK,IAAI,EAAE,QAAQ,gBACF,IAAI,CAAC,SAAS,qBACT,IAAI,CAAC,cAAc,EACpC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EACrC,KAAK,EAAE,aAAa,CAAC,EAAE,GACtB,CACA,EACP;GACD;;;;EAMD,MAAM,YAAY;IACjBG,sBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;GAC1E;;;;;;;","names":["govHost","canValidateWcagOnRender","delay","h","Host","booleanString","validateWcagLabel"],"sources":["../../../packages/core/src/components/gov-backdrop/constants.ts","../../../packages/core/src/components/gov-backdrop/gov-backdrop.scss?tag=gov-backdrop","../../../packages/core/src/components/gov-backdrop/gov-backdrop.tsx"],"sourcesContent":["export const BackdropClass = {\n\troot: 'gov-backdrop',\n\tbg: 'gov-backdrop__bg',\n}\n","/*\n *   Backdrop\n */\n\n$class: \".gov-backdrop\";\n\n#{$class} {\n\t&__bg {\n\t\t@include z-index(\"modal\", 0);\n\t\tposition: fixed;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tbackground-color: $backdrop-bg;\n\t\topacity: $backdrop-opacity;\n\t}\n\n\t// VARIANTS\n\t@include parameter(\"inverse\") {\n\t\t#{$class} {\n\t\t\t&__bg {\n\t\t\t\tbackground-color: $backdrop-bg-inverse;\n\t\t\t\topacity: $backdrop-opacity-inverse;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Event, EventEmitter, h, Method, Prop, Host, Element } from \"@stencil/core\"\nimport { validateWcagLabel } from \"../../helpers/Validate/wcag\"\nimport { BackdropClass } from \"./constants\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\nimport { booleanString, govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.d\"\n\n@Component({\n\ttag: \"gov-backdrop\",\n\tstyleUrl: \"gov-backdrop.scss\",\n})\nexport class GovBackdrop {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovAlertElement\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 * Default attribute for backdrop display\n\t */\n\t@Prop() visible = false\n\t/**\n\t * Adds accessible label for the backdrop 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 * Emitted when button clicks.\n\t */\n\t@Event({ eventName: \"gov-click\" }) govClick: EventEmitter<MouseEvent>\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\tif (!this.visible) return null\n\t\treturn (\n\t\t\t<Host class={this.h.classes(BackdropClass.root)} inverse={booleanString(this.inverse)}>\n\t\t\t\t<div role={\"button\"}\n\t\t\t\t     aria-label={this.wcagLabel}\n\t\t\t\t     aria-labelledby={this.wcagLabelledBy}\n\t\t\t\t     onClick={(e) => this.govClick.emit(e)}\n\t\t\t\t     class={BackdropClass.bg}>\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, BackdropClass.root)\n\t}\n}\n"],"version":3}