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

package/dist/esm/gov-prompt.entry.js

@@ -7,7 +7,7 @@ import { d as delay } from './utils-c057a3fa.js';
 import { g as govHost, a as toBoolAttr } from './template-10332292.js';
 import { a as govErrorLog } from './gov.log-af905420.js';
 
-const govPromptCss = ".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-modal{display:none}.gov-modal__dialog{z-index:101;position:fixed;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:100%;max-width:var(--gov-modal-max-width, 52.5rem);height:100%;padding:0.5rem;border:none;background:transparent;transform:translate(-50%, -50%);pointer-events:none}.gov-modal__inner{position:relative;display:flex;flex-direction:column;width:100%;max-height:100%;border-radius:var(--gov-border-radius, 0.1875rem);background:var(--gov-modal-bg, var(--gov-color-neutral-white));overflow:hidden;pointer-events:auto;box-shadow:0 0 1.5rem rgba(var(--gov-color-secondary-800-rgb), 0.24)}.gov-modal__header{display:flex;gap:1rem;align-items:flex-start;padding:1.5rem 0.25rem 1.5rem 1rem;border-bottom:var(--gov-modal-border-color, 0.0625rem solid var(--gov-color-secondary-500))}.gov-modal__icon{flex:0 0 auto;padding-top:calc((var(--gov-text-3xl-font-size) * 1.5 - 1.5rem) / 2)}.gov-modal__icon>*{width:1.5rem;height:1.5rem}.gov-modal__title{font-weight:var(--gov-text-3xl-font-weight);font-size:var(--gov-text-3xl-font-size);line-height:var(--gov-text-3xl-line-height);letter-spacing:var(--gov-text-3xl-letter-spacing);margin:0}.gov-modal__close{flex:0 0 auto;margin-left:auto;padding-top:calc((var(--gov-text-3xl-font-size) * 1.5 - 2rem) / 2)}.gov-modal__content{height:100%;padding:1.5rem 1rem;color:var(--gov-modal-text-color, var(--gov-color-secondary-700));overflow:auto}.gov-modal__content>*:last-child{margin-bottom:0}.gov-modal__actions{display:flex;gap:0.5rem 1rem;flex-wrap:wrap;justify-content:flex-end;padding:1.5rem 1rem;border-top:var(--gov-modal-border-color, 0.0625rem solid var(--gov-color-secondary-500))}.gov-modal__dialog:focus .gov-modal__inner{outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base)}.gov-modal[open=\"\"],.gov-modal[open=true i],.gov-modal[open=\"1\"]{display:block}@media (min-width: 30em){.gov-modal__dialog{max-width:calc(var(--gov-modal-max-width, 52.5rem) + 3rem);padding:1.5rem}.gov-modal__dialog:focus{outline-offset:-1.5rem}.gov-modal__inner{box-shadow:0 0 2rem rgba(var(--gov-color-secondary-800-rgb), 0.32)}.gov-modal--prompt .gov-modal__dialog{max-width:calc(var(--gov-modal-prompt-max-width, 33.125rem) + 3rem)}}@media (min-width: 48em){.gov-modal__header{gap:1.25rem;padding:2rem 2.25rem 2rem 3rem}.gov-modal__close{padding-top:calc((var(--gov-text-3xl-font-size) * 1.5 - 2.5rem) / 2)}.gov-modal__content{padding:1.5rem 3rem 2rem}.gov-modal--prompt .gov-modal__header,.gov-modal--prompt .gov-modal__content,.gov-modal--prompt .gov-modal__actions{padding:1.5rem}}";
+const govPromptCss = ".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-modal{display:none}.gov-modal__dialog{z-index:101;position:fixed;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:100%;max-width:var(--gov-modal-max-width, 52.5rem);height:100%;padding:0.5rem;border:none;background:transparent;transform:translate(-50%, -50%);pointer-events:none}.gov-modal__inner{position:relative;display:flex;flex-direction:column;width:100%;max-height:100%;border-radius:var(--gov-border-radius, 0.1875rem);background:var(--gov-modal-bg, var(--gov-color-neutral-white));overflow:hidden;pointer-events:auto;box-shadow:0 0 1.5rem rgba(var(--gov-color-secondary-800-rgb), 0.24)}.gov-modal__header{display:flex;gap:1rem;align-items:flex-start;padding:1.5rem 1rem;border-bottom:var(--gov-modal-border-color, 0.0625rem solid var(--gov-color-secondary-500))}.gov-modal__icon{flex:0 0 auto;padding-top:calc((var(--gov-text-3xl-font-size) * 1.5 - 1.5rem) / 2)}.gov-modal__icon>*{width:1.5rem;height:1.5rem}.gov-modal__title{font-weight:var(--gov-text-3xl-font-weight);font-size:var(--gov-text-3xl-font-size);line-height:var(--gov-text-3xl-line-height);letter-spacing:var(--gov-text-3xl-letter-spacing);margin:0}.gov-modal__close{flex:0 0 auto;margin-left:auto;padding-top:calc((var(--gov-text-3xl-font-size) * 1.5 - 2rem) / 2)}.gov-modal__content{height:100%;padding:1.5rem 1rem;color:var(--gov-modal-text-color, var(--gov-color-secondary-700));overflow:auto}.gov-modal__content>*:last-child{margin-bottom:0}.gov-modal__actions{display:flex;gap:0.5rem 1rem;flex-wrap:wrap;justify-content:flex-end;padding:1.5rem 1rem;border-top:var(--gov-modal-border-color, 0.0625rem solid var(--gov-color-secondary-500))}.gov-modal__dialog:focus .gov-modal__inner{outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base)}.gov-modal[open=\"\"],.gov-modal[open=true i],.gov-modal[open=\"1\"]{display:block}@media (min-width: 30em){.gov-modal__dialog{max-width:calc(var(--gov-modal-max-width, 52.5rem) + 3rem);padding:1.5rem}.gov-modal__dialog:focus{outline-offset:-1.5rem}.gov-modal__inner{box-shadow:0 0 2rem rgba(var(--gov-color-secondary-800-rgb), 0.32)}.gov-modal--prompt .gov-modal__dialog{max-width:calc(var(--gov-modal-prompt-max-width, 33.125rem) + 3rem)}}@media (min-width: 48em){.gov-modal__header{gap:1.25rem;padding:2rem 2.5rem 2rem 3rem}.gov-modal__close{padding-top:calc((var(--gov-text-3xl-font-size) * 1.5 - 2.5rem) / 2)}.gov-modal__content{padding:2rem 3rem}.gov-modal--prompt .gov-modal__header,.gov-modal--prompt .gov-modal__content,.gov-modal--prompt .gov-modal__actions{padding:1.5rem}}";
 
 const GovPrompt = class {
   constructor(hostRef) {
@@ -21,6 +21,7 @@ const GovPrompt = class {
     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');
@@ -33,16 +34,19 @@ const GovPrompt = class {
       }
     }
   }
+  watchOpen(newValue) {
+    this.modalVisible = newValue;
+  }
   showModal() {
-    this.open = true;
+    this.modalVisible = true;
     document.body.classList.add(ModalClass.bodyFix);
   }
   hideModal() {
-    this.open = false;
+    this.modalVisible = false;
     document.body.classList.remove(ModalClass.bodyFix);
   }
   async componentWillRender() {
-    if (this.open) {
+    if (this.modalVisible) {
       this.showModal();
     }
     else {
@@ -50,6 +54,7 @@ const GovPrompt = class {
     }
   }
   async componentDidRender() {
+    this.modalVisible = this.open;
     if (canValidateWcagOnRender()) {
       await delay(500);
       await this.validateWcag();
@@ -57,7 +62,7 @@ const GovPrompt = class {
   }
   render() {
     const LabelTag = this.labelTag;
-    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: "cross" }))), h("div", { class: ModalClass.content, id: this.contentId }, h("slot", null)), h("div", { class: ModalClass.actions }, h("slot", { name: "actions" })))), h("gov-backdrop", { visible: this.open, "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })));
+    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" })))), h("gov-backdrop", { visible: this.modalVisible, "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })));
   }
   onCloseHandler(e) {
     e.stopPropagation();
@@ -85,7 +90,8 @@ const GovPrompt = class {
   }
   get host() { return getElement(this); }
   static get watchers() { return {
-    "labelTag": ["validateLabelTag"]
+    "labelTag": ["validateLabelTag"],
+    "open": ["watchOpen"]
   }; }
 };
 GovPrompt.style = govPromptCss;

package/dist/esm/gov-prompt.entry.js.map

@@ -1 +1 @@
-{"file":"gov-prompt.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-promp/gov-prompt.scss?tag=gov-prompt","../../../packages/core/src/components/gov-promp/gov-prompt.tsx"],"sourcesContent":["/*\n *   Prompt\n */\n\n// $class: \".gov-prompt\";\n@import \"../gov-modal/gov-modal.scss\";\n\n// #{$class} {\n// \t//\n// }\n","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() 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@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\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=\"cross\" />\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<gov-backdrop\n\t\t\t\t\tvisible={this.open}\n\t\t\t\t\twcag-label={this.wcagCloseLabel}\n\t\t\t\t\twcag-labelled-by={this.wcagCloseLabelledBy}\n\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t/>\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"],"version":3}
+{"file":"gov-prompt.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-promp/gov-prompt.scss?tag=gov-prompt","../../../packages/core/src/components/gov-promp/gov-prompt.tsx"],"sourcesContent":["/*\n *   Prompt\n */\n\n// $class: \".gov-prompt\";\n@import \"../gov-modal/gov-modal.scss\";\n\n// #{$class} {\n// \t//\n// }\n","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<gov-backdrop\n\t\t\t\t\tvisible={this.modalVisible}\n\t\t\t\t\twcag-label={this.wcagCloseLabel}\n\t\t\t\t\twcag-labelled-by={this.wcagCloseLabelledBy}\n\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t/>\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"],"version":3}

package/dist/esm/gov-side-nav-item.entry.js

@@ -40,7 +40,7 @@ const GovSideNavItem = class {
     const { isExpandedState, label } = this;
     // TODO: správný počet zanořených childů
     const hasChilds = this.host.children.length > 1;
-    return (h(Host, { class: this.classNames, role: "listitem", inverse: this.inverse, "aria-expanded": booleanString(isExpandedState) }, this.href ? (h("div", { class: SideNavItemClass.header }, h("a", { class: SideNavItemClass.name, href: this.href }, this.h.hasSlot('icon') && (h("span", { class: SideNavItemClass.icon }, h("slot", { name: "icon" }))), h("span", { class: SideNavItemClass.label }, label), this.count && (h("span", { class: SideNavItemClass.badge }, h("gov-badge", { variant: "secondary", size: "s", inverse: this.inverse }, "3")))), hasChilds && (h("button", { type: "button", class: SideNavItemClass.arrow, onClick: () => this.toggle() }, h("gov-icon", { name: "arrow-down" }))))) : (h("div", { class: SideNavItemClass.header }, h("button", { class: SideNavItemClass.name, type: "button", onClick: () => this.toggle() }, this.h.hasSlot('icon') && (h("span", { class: SideNavItemClass.icon }, h("slot", { name: "icon" }))), h("span", { class: SideNavItemClass.label }, label), hasChilds && (h("span", { class: SideNavItemClass.arrow }, h("gov-icon", { name: "arrow-down" })))))), hasChilds && (h("div", { class: SideNavItemClass.content }, h("slot", null)))));
+    return (h(Host, { class: this.classNames, role: "listitem", inverse: this.inverse, "aria-expanded": booleanString(isExpandedState) }, this.href ? (h("div", { class: SideNavItemClass.header }, h("a", { class: SideNavItemClass.name, href: this.href }, this.h.hasSlot('icon') && (h("span", { class: SideNavItemClass.icon }, h("slot", { name: "icon" }))), h("span", { class: SideNavItemClass.label }, label), this.count && (h("span", { class: SideNavItemClass.badge }, h("gov-badge", { variant: "secondary", size: "s", inverse: this.inverse }, "3")))), hasChilds && (h("button", { type: "button", class: SideNavItemClass.arrow, onClick: () => this.toggle() }, h("gov-icon", { name: "chevron-down" }))))) : (h("div", { class: SideNavItemClass.header }, h("button", { class: SideNavItemClass.name, type: "button", onClick: () => this.toggle() }, this.h.hasSlot('icon') && (h("span", { class: SideNavItemClass.icon }, h("slot", { name: "icon" }))), h("span", { class: SideNavItemClass.label }, label), hasChilds && (h("span", { class: SideNavItemClass.arrow }, h("gov-icon", { name: "chevron-down" })))))), hasChilds && (h("div", { class: SideNavItemClass.content }, h("slot", null)))));
   }
   /**
    * Opening the sidenav

package/dist/esm/gov-side-nav-item.entry.js.map

@@ -1 +1 @@
-{"file":"gov-side-nav-item.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-side-nav/gov-side-nav-item.scss?tag=gov-side-nav-item","../../../packages/core/src/components/gov-side-nav/gov-side-nav-item.tsx"],"sourcesContent":["/*\n *   Side nav - Item\n */\n\n$class: \".gov-side-nav-item\";\n\n#{$class} {\n\t@include base();\n\t&__header {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tborder-bottom: $side-nav-border;\n\t}\n\t&__name {\n\t\t@include button-core();\n\t\t@include typography($font-size-m);\n\t\t@include focus-outline();\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tflex: 1 1 auto;\n\t\tjustify-content: flex-start;\n\t\tpadding: rem-calc(12 16 12 8);\n\t\tcolor: $side-nav-color;\n\t\ttext-align: left;\n\t\ttransition: background-color $t;\n\t\t@at-root button#{&} {\n\t\t\tpadding-right: 0 !important;\n\t\t}\n\n\t\t// HOVERS\n\t\t@include hover() {\n\t\t\tbackground: $side-nav-hover-bg;\n\t\t}\n\t}\n\t&__icon {\n\t\tdisplay: flex;\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(16);\n\t\theight: rem-calc(16);\n\t\t.gov-icon {\n\t\t\tmargin: 0;\n\t\t\tcolor: $side-nav-color;\n\t\t}\n\t}\n\t&__label {\n\t\tcolor: inherit;\n\t}\n\t&__badge {\n\t\tdisplay: flex;\n\t\tflex: 0 0 auto;\n\t}\n\t&__arrow {\n\t\t@include button-core();\n\t\t@include focus-outline();\n\t\tflex: 0 0 auto;\n\t\talign-self: stretch;\n\t\twidth: rem-calc(48);\n\t\tmargin-left: auto;\n\t\tcolor: $side-nav-arrow-color;\n\t\ttransition: background-color $t;\n\t\t.gov-icon {\n\t\t\twidth: rem-calc(12);\n\t\t\theight: rem-calc(12);\n\t\t}\n\t\t@include hover() {\n\t\t\tbackground: $side-nav-hover-bg;\n\t\t}\n\t}\n\t&__content {\n\t\tdisplay: none;\n\t}\n\n\t// VARIANTS\n\t&--w-icon &__label {\n\t\tmargin-left: rem-calc(32);\n\t}\n\t&--w-icon &__icon + &__label {\n\t\tmargin-left: 0;\n\t}\n\t// nested styles\n\t& & {\n\t\t#{$class} {\n\t\t\t&__header {\n\t\t\t\tborder: none !important;\n\t\t\t}\n\t\t\t&__name {\n\t\t\t\t@include typography($font-size-s);\n\t\t\t\tpadding: rem-calc(10 8);\n\t\t\t\tfont-weight: bold;\n\t\t\t}\n\t\t}\n\t\t@include parameter(\"aria-expanded\") {\n\t\t\tbackground: $side-nav-bg-level-2;\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tbackground: $side-nav-bg-level-2-inverse;\n\t\t\t}\n\t\t}\n\t}\n\t& & & {\n\t\t#{$class} {\n\t\t\t&__name {\n\t\t\t\tgap: rem-calc(12);\n\t\t\t\tfont-weight: inherit;\n\t\t\t}\n\t\t}\n\t}\n\t@include parameter(\"compact\") {\n\t\t#{$class} {\n\t\t\t&__header {\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t// STATES\n\t@include parameter(\"aria-expanded\") {\n\t\t& > #{$class}__header #{$class}__arrow .gov-icon {\n\t\t\ttransform: scale(-1);\n\t\t}\n\t\t& > #{$class}__content {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Prop, State, Watch, Host, Method, Event, EventEmitter } from '@stencil/core'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { SideNavItemClass } from './constants'\nimport { booleanString, prepareClasses } from '../../helpers/Dom/template'\nimport { GovSideNavItemChangeEvent } from './gov-side-nav-item.d'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-side-nav-item',\n\tstyleUrl: 'gov-side-nav-item.scss',\n})\nexport class GovSideNavItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovSideNavItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Determide if component should have compact styles.\n\t */\n\t@Prop() readonly compact: boolean = false\n\t/**\n\t * Custom sidenav item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Defined the count of nested items\n\t */\n\t@Prop() readonly count: boolean = false\n\t/**\n\t * Item name of the sidenav\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Defines whether the sidenav is open or closed by default\n\t */\n\t@Prop({ attribute: 'is-expanded' }) readonly isExpanded: boolean = false\n\t/**\n\t * Called when the sidenav state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovSideNavItemChangeEvent>\n\n\t@Watch('label')\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${SideNavItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({ open: this.isExpandedState, element: this.host })\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpandedState = this.isExpanded\n\t\tthis.validateLabel(this.label)\n\t}\n\n\tget classNames(): string {\n\t\tconst { h } = this\n\n\t\treturn prepareClasses([SideNavItemClass.root, h.hasSlot('icon') && SideNavItemClass.rootWithIcon])\n\t}\n\n\trender() {\n\t\tconst { isExpandedState, label } = this\n\t\t// TODO: správný počet zanořených childů\n\t\tconst hasChilds = this.host.children.length > 1\n\n\t\treturn (\n\t\t\t<Host class={this.classNames} role=\"listitem\" inverse={this.inverse} aria-expanded={booleanString(isExpandedState)}>\n\t\t\t\t{this.href ? (\n\t\t\t\t\t<div class={SideNavItemClass.header}>\n\t\t\t\t\t\t<a class={SideNavItemClass.name} href={this.href}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class={SideNavItemClass.label}>{label}</span>\n\n\t\t\t\t\t\t\t{this.count && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.badge}>\n\t\t\t\t\t\t\t\t\t<gov-badge variant=\"secondary\" size=\"s\" inverse={this.inverse}>\n\t\t\t\t\t\t\t\t\t\t{/* // TODO: správný počet zanořených childů */}3\n\t\t\t\t\t\t\t\t\t</gov-badge>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</a>\n\n\t\t\t\t\t\t{hasChilds && (\n\t\t\t\t\t\t\t<button type=\"button\" class={SideNavItemClass.arrow} onClick={() => this.toggle()}>\n\t\t\t\t\t\t\t\t<gov-icon name=\"arrow-down\"></gov-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div class={SideNavItemClass.header}>\n\t\t\t\t\t\t<button class={SideNavItemClass.name} type=\"button\" onClick={() => this.toggle()}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class={SideNavItemClass.label}>{label}</span>\n\n\t\t\t\t\t\t\t{hasChilds && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.arrow}>\n\t\t\t\t\t\t\t\t\t<gov-icon name=\"arrow-down\"></gov-icon>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{hasChilds && (\n\t\t\t\t\t<div class={SideNavItemClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Opening the sidenav\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpandedState = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the sidenav\n\t */\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpandedState = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * sidenav switch\n\t */\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpandedState = !this.isExpandedState\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpandedState\n\t}\n}\n"],"version":3}
+{"file":"gov-side-nav-item.entry.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,s+JAAs+J;;MCYn/J,cAAc;EAG1B;;;;mBAUoC,KAAK;mBAIL,KAAK;;iBAQP,KAAK;;oBASF,KAAK;;sBASyB,KAAK;IAvCvE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EA6CD,aAAa,CAAC,QAAgB;IAC7B,IAAI,CAAC,QAAQ,EAAE;MACd,WAAW,CAAC,IAAI,gBAAgB,CAAC,IAAI,iCAAiC,CAAC,CAAA;KACvE;GACD;EAEO,WAAW;IAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;GACvE;EAED,iBAAiB;IAChB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAA;IACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;GAC9B;EAED,IAAI,UAAU;IACb,MAAM,EAAE,CAAC,EAAE,GAAG,IAAI,CAAA;IAElB,OAAO,cAAc,CAAC,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAA;GAClG;EAED,MAAM;IACL,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;;IAEvC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;IAE/C,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,mBAAiB,aAAa,CAAC,eAAe,CAAC,IAChH,IAAI,CAAC,IAAI,IACT,WAAK,KAAK,EAAE,gBAAgB,CAAC,MAAM,IAClC,SAAG,KAAK,EAAE,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAC9C,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,YAAM,KAAK,EAAE,gBAAgB,CAAC,IAAI,IACjC,YAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP,EACD,YAAM,KAAK,EAAE,gBAAgB,CAAC,KAAK,IAAG,KAAK,CAAQ,EAElD,IAAI,CAAC,KAAK,KACV,YAAM,KAAK,EAAE,gBAAgB,CAAC,KAAK,IAClC,iBAAW,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,QAEjD,CACN,CACP,CACE,EAEH,SAAS,KACT,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,IAChF,gBAAU,IAAI,EAAC,cAAc,GAAY,CACjC,CACT,CACI,KAEN,WAAK,KAAK,EAAE,gBAAgB,CAAC,MAAM,IAClC,cAAQ,KAAK,EAAE,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,IAC9E,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,YAAM,KAAK,EAAE,gBAAgB,CAAC,IAAI,IACjC,YAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP,EACD,YAAM,KAAK,EAAE,gBAAgB,CAAC,KAAK,IAAG,KAAK,CAAQ,EAElD,SAAS,KACT,YAAM,KAAK,EAAE,gBAAgB,CAAC,KAAK,IAClC,gBAAU,IAAI,EAAC,cAAc,GAAY,CACnC,CACP,CACO,CACJ,CACN,EAEA,SAAS,KACT,WAAK,KAAK,EAAE,gBAAgB,CAAC,OAAO,IACnC,eAAQ,CACH,CACN,CACK,EACP;GACD;;;;EAMD,MAAM,IAAI;IACT,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;IAC3B,IAAI,CAAC,WAAW,EAAE,CAAA;GAClB;;;;EAMD,MAAM,KAAK;IACV,IAAI,CAAC,eAAe,GAAG,KAAK,CAAA;IAC5B,IAAI,CAAC,WAAW,EAAE,CAAA;GAClB;;;;EAMD,MAAM,MAAM;IACX,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAA;IAC5C,IAAI,CAAC,WAAW,EAAE,CAAA;GAClB;;;;EAMD,MAAM,YAAY;IACjB,OAAO,IAAI,CAAC,eAAe,CAAA;GAC3B;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-side-nav/gov-side-nav-item.scss?tag=gov-side-nav-item","../../../packages/core/src/components/gov-side-nav/gov-side-nav-item.tsx"],"sourcesContent":["/*\n *   Side nav - Item\n */\n\n$class: \".gov-side-nav-item\";\n\n#{$class} {\n\t@include base();\n\t&__header {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tborder-bottom: $side-nav-border;\n\t}\n\t&__name {\n\t\t@include button-core();\n\t\t@include typography($font-size-m);\n\t\t@include focus-outline();\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tflex: 1 1 auto;\n\t\tjustify-content: flex-start;\n\t\tpadding: rem-calc(12 16 12 8);\n\t\tcolor: $side-nav-color;\n\t\ttext-align: left;\n\t\ttransition: background-color $t;\n\t\t@at-root button#{&} {\n\t\t\tpadding-right: 0 !important;\n\t\t}\n\n\t\t// HOVERS\n\t\t@include hover() {\n\t\t\tbackground: $side-nav-hover-bg;\n\t\t}\n\t}\n\t&__icon {\n\t\tdisplay: flex;\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(16);\n\t\theight: rem-calc(16);\n\t\t.gov-icon {\n\t\t\tmargin: 0;\n\t\t\tcolor: $side-nav-color;\n\t\t}\n\t}\n\t&__label {\n\t\tcolor: inherit;\n\t}\n\t&__badge {\n\t\tdisplay: flex;\n\t\tflex: 0 0 auto;\n\t}\n\t&__arrow {\n\t\t@include button-core();\n\t\t@include focus-outline();\n\t\tflex: 0 0 auto;\n\t\talign-self: stretch;\n\t\twidth: rem-calc(48);\n\t\tmargin-left: auto;\n\t\tcolor: $side-nav-arrow-color;\n\t\ttransition: background-color $t;\n\t\t.gov-icon {\n\t\t\twidth: rem-calc(12);\n\t\t\theight: rem-calc(12);\n\t\t}\n\t\t@include hover() {\n\t\t\tbackground: $side-nav-hover-bg;\n\t\t}\n\t}\n\t&__content {\n\t\tdisplay: none;\n\t}\n\n\t// VARIANTS\n\t&--w-icon &__label {\n\t\tmargin-left: rem-calc(32);\n\t}\n\t&--w-icon &__icon + &__label {\n\t\tmargin-left: 0;\n\t}\n\t// nested styles\n\t& & {\n\t\t#{$class} {\n\t\t\t&__header {\n\t\t\t\tborder: none !important;\n\t\t\t}\n\t\t\t&__name {\n\t\t\t\t@include typography($font-size-s);\n\t\t\t\tpadding: rem-calc(10 8);\n\t\t\t\tfont-weight: bold;\n\t\t\t}\n\t\t}\n\t\t@include parameter(\"aria-expanded\") {\n\t\t\tbackground: $side-nav-bg-level-2;\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tbackground: $side-nav-bg-level-2-inverse;\n\t\t\t}\n\t\t}\n\t}\n\t& & & {\n\t\t#{$class} {\n\t\t\t&__name {\n\t\t\t\tgap: rem-calc(12);\n\t\t\t\tfont-weight: inherit;\n\t\t\t}\n\t\t}\n\t}\n\t@include parameter(\"compact\") {\n\t\t#{$class} {\n\t\t\t&__header {\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t// STATES\n\t@include parameter(\"aria-expanded\") {\n\t\t& > #{$class}__header #{$class}__arrow .gov-icon {\n\t\t\ttransform: scale(-1);\n\t\t}\n\t\t& > #{$class}__content {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Prop, State, Watch, Host, Method, Event, EventEmitter } from '@stencil/core'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { SideNavItemClass } from './constants'\nimport { booleanString, prepareClasses } from '../../helpers/Dom/template'\nimport { GovSideNavItemChangeEvent } from './gov-side-nav-item.d'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-side-nav-item',\n\tstyleUrl: 'gov-side-nav-item.scss',\n})\nexport class GovSideNavItem {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() readonly host: HTMLGovSideNavItemElement\n\t@State() isExpandedState: boolean\n\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background\n\t */\n\t@Prop() readonly inverse: boolean = false\n\t/**\n\t * Determide if component should have compact styles.\n\t */\n\t@Prop() readonly compact: boolean = false\n\t/**\n\t * Custom sidenav item identifier. Otherwise, it will be generated\n\t */\n\t@Prop() readonly identifier: string\n\t/**\n\t * Defined the count of nested items\n\t */\n\t@Prop() readonly count: boolean = false\n\t/**\n\t * Item name of the sidenav\n\t */\n\t@Prop() readonly label: string\n\t/**\n\t * Makes the button component disabled.\n\t * This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Defines whether the sidenav is open or closed by default\n\t */\n\t@Prop({ attribute: 'is-expanded' }) readonly isExpanded: boolean = false\n\t/**\n\t * Called when the sidenav state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<GovSideNavItemChangeEvent>\n\n\t@Watch('label')\n\tvalidateLabel(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${SideNavItemClass.root}]: Parameter label is required.`)\n\t\t}\n\t}\n\n\tprivate emmitChange(): void {\n\t\tthis.govChange.emit({ open: this.isExpandedState, element: this.host })\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.isExpandedState = this.isExpanded\n\t\tthis.validateLabel(this.label)\n\t}\n\n\tget classNames(): string {\n\t\tconst { h } = this\n\n\t\treturn prepareClasses([SideNavItemClass.root, h.hasSlot('icon') && SideNavItemClass.rootWithIcon])\n\t}\n\n\trender() {\n\t\tconst { isExpandedState, label } = this\n\t\t// TODO: správný počet zanořených childů\n\t\tconst hasChilds = this.host.children.length > 1\n\n\t\treturn (\n\t\t\t<Host class={this.classNames} role=\"listitem\" inverse={this.inverse} aria-expanded={booleanString(isExpandedState)}>\n\t\t\t\t{this.href ? (\n\t\t\t\t\t<div class={SideNavItemClass.header}>\n\t\t\t\t\t\t<a class={SideNavItemClass.name} href={this.href}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class={SideNavItemClass.label}>{label}</span>\n\n\t\t\t\t\t\t\t{this.count && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.badge}>\n\t\t\t\t\t\t\t\t\t<gov-badge variant=\"secondary\" size=\"s\" inverse={this.inverse}>\n\t\t\t\t\t\t\t\t\t\t{/* // TODO: správný počet zanořených childů */}3\n\t\t\t\t\t\t\t\t\t</gov-badge>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</a>\n\n\t\t\t\t\t\t{hasChilds && (\n\t\t\t\t\t\t\t<button type=\"button\" class={SideNavItemClass.arrow} onClick={() => this.toggle()}>\n\t\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div class={SideNavItemClass.header}>\n\t\t\t\t\t\t<button class={SideNavItemClass.name} type=\"button\" onClick={() => this.toggle()}>\n\t\t\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class={SideNavItemClass.label}>{label}</span>\n\n\t\t\t\t\t\t\t{hasChilds && (\n\t\t\t\t\t\t\t\t<span class={SideNavItemClass.arrow}>\n\t\t\t\t\t\t\t\t\t<gov-icon name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{hasChilds && (\n\t\t\t\t\t<div class={SideNavItemClass.content}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Opening the sidenav\n\t */\n\t@Method()\n\tasync open(): Promise<void> {\n\t\tthis.isExpandedState = true\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Closing the sidenav\n\t */\n\t@Method()\n\tasync close(): Promise<void> {\n\t\tthis.isExpandedState = false\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * sidenav switch\n\t */\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tthis.isExpandedState = !this.isExpandedState\n\t\tthis.emmitChange()\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync currentState(): Promise<boolean> {\n\t\treturn this.isExpandedState\n\t}\n}\n"],"version":3}

package/dist/esm/gov-spacer.entry.js

@@ -24,7 +24,7 @@ const GovSpacer = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.size = undefined;
-    this.breakpoint = undefined;
+    this.breakpoint = SpacerBreakpoints.NONE;
     this.h = govHost(this.host);
   }
   validateSize(newValue) {

package/dist/esm/gov-spacer.entry.js.map

@@ -1 +1 @@
-{"file":"gov-spacer.entry.js","mappings":";;;;;;;AAIO,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAGvG,IAAY,iBAMX;AAND,WAAY,iBAAiB;EAC5B,kCAAa,CAAA;EACb,8BAAS,CAAA;EACT,8BAAS,CAAA;EACT,8BAAS,CAAA;EACT,8BAAS,CAAA;AACV,CAAC,EANW,iBAAiB,KAAjB,iBAAiB,QAM5B;AAGM,MAAM,WAAW,GAAG;EAC1B,IAAI,EAAE,YAAY;CAClB;;AClBD,MAAM,YAAY,GAAG,+iCAA+iC;;MCUvjC,SAAS;EAErB;;;;IACC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAYD,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;GACpD;EAGD,kBAAkB,CAAC,QAAgB;IAClC,YAAY,CAAC,iBAAiB,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;GAC3D;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;GACxC;EAED,MAAM;IACL,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,GAAS,CAAA;GAC3G;;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-spacer/constants.tsx","../../../packages/core/src/components/gov-spacer/gov-spacer.scss?tag=gov-spacer","../../../packages/core/src/components/gov-spacer/gov-spacer.tsx"],"sourcesContent":["import { Sizes } from '../../core/constants/sizes'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const SpacerSize = pick(Sizes, ['_2XS', '_XS', '_S', '_M', '_L', '_XL', '_2XL', '_3XL', '_5XL'])\nexport type SpacerSizeType = `${ValueOf<typeof SpacerSize>}`\n\nexport enum SpacerBreakpoints {\n\tNONE = 'none',\n\tSM = 'sm',\n\tMD = 'md',\n\tLG = 'lg',\n\tXL = 'xl',\n}\nexport type SpacerBreakpointsType = `${ValueOf<typeof SpacerBreakpoints>}`\n\nexport const SpacerClass = {\n\troot: 'gov-spacer',\n}\n","/*\n *   Spacer\n */\n\n$class: \".gov-spacer\";\n\n#{$class} {\n\t@include base();\n\n\t// VARIANTS\n\t@each $name, $value in $sizes {\n\t\t&[size=\"#{$name}\"] {\n\t\t\theight: #{$value};\n\t\t}\n\t}\n\t@each $name, $value in $mq-breakpoints {\n\t\t&[breakpoint=\"#{$name}\"] {\n\t\t\tdisplay: none;\n\n\t\t\t@if #{$value} != \"0\" {\n\t\t\t\t@include mq($from: #{$name}) {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { SpacerBreakpoints, SpacerBreakpointsType, SpacerClass, SpacerSize, SpacerSizeType } from './constants'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { govHost } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-spacer',\n\tstyleUrl: 'gov-spacer.scss',\n})\nexport class GovSpacer {\n\tprivate h: GovHost\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\t@Element() host: HTMLGovSpacerElement\n\t/**\n\t * Spacer’s size\n\t */\n\t@Prop() readonly size?: SpacerSizeType\n\t/**\n\t * Breakpoint\n\t */\n\t@Prop() readonly breakpoint?: SpacerBreakpointsType\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(SpacerSize, newValue, SpacerClass.root)\n\t}\n\n\t@Watch('breakpoint')\n\tvalidateBreakpoint(newValue: string): void {\n\t\tvalidateProp(SpacerBreakpoints, newValue, SpacerClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateBreakpoint(this.breakpoint)\n\t}\n\n\trender() {\n\t\treturn <Host class={this.h.classes(SpacerClass.root)} size={this.size} breakpoint={this.breakpoint}></Host>\n\t}\n}\n"],"version":3}
+{"file":"gov-spacer.entry.js","mappings":";;;;;;;AAIO,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAGvG,IAAY,iBAMX;AAND,WAAY,iBAAiB;EAC5B,kCAAa,CAAA;EACb,8BAAS,CAAA;EACT,8BAAS,CAAA;EACT,8BAAS,CAAA;EACT,8BAAS,CAAA;AACV,CAAC,EANW,iBAAiB,KAAjB,iBAAiB,QAM5B;AAGM,MAAM,WAAW,GAAG;EAC1B,IAAI,EAAE,YAAY;CAClB;;AClBD,MAAM,YAAY,GAAG,+iCAA+iC;;MCUvjC,SAAS;EAErB;;;sBAWsD,iBAAiB,CAAC,IAAI;IAV3E,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAYD,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;GACpD;EAGD,kBAAkB,CAAC,QAAgB;IAClC,YAAY,CAAC,iBAAiB,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;GAC3D;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;GACxC;EAED,MAAM;IACL,OAAO,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,GAAS,CAAA;GAC3G;;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-spacer/constants.tsx","../../../packages/core/src/components/gov-spacer/gov-spacer.scss?tag=gov-spacer","../../../packages/core/src/components/gov-spacer/gov-spacer.tsx"],"sourcesContent":["import { Sizes } from '../../core/constants/sizes'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const SpacerSize = pick(Sizes, ['_2XS', '_XS', '_S', '_M', '_L', '_XL', '_2XL', '_3XL', '_5XL'])\nexport type SpacerSizeType = `${ValueOf<typeof SpacerSize>}`\n\nexport enum SpacerBreakpoints {\n\tNONE = 'none',\n\tSM = 'sm',\n\tMD = 'md',\n\tLG = 'lg',\n\tXL = 'xl',\n}\nexport type SpacerBreakpointsType = `${ValueOf<typeof SpacerBreakpoints>}`\n\nexport const SpacerClass = {\n\troot: 'gov-spacer',\n}\n","/*\n *   Spacer\n */\n\n$class: \".gov-spacer\";\n\n#{$class} {\n\t@include base();\n\n\t// VARIANTS\n\t@each $name, $value in $sizes {\n\t\t&[size=\"#{$name}\"] {\n\t\t\theight: #{$value};\n\t\t}\n\t}\n\t@each $name, $value in $mq-breakpoints {\n\t\t&[breakpoint=\"#{$name}\"] {\n\t\t\tdisplay: none;\n\n\t\t\t@if #{$value} != \"0\" {\n\t\t\t\t@include mq($from: #{$name}) {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { SpacerBreakpoints, SpacerBreakpointsType, SpacerClass, SpacerSize, SpacerSizeType } from './constants'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { govHost } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-spacer',\n\tstyleUrl: 'gov-spacer.scss',\n})\nexport class GovSpacer {\n\tprivate h: GovHost\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\t@Element() host: HTMLGovSpacerElement\n\t/**\n\t * Spacer’s size\n\t */\n\t@Prop() readonly size?: SpacerSizeType\n\t/**\n\t * Breakpoint\n\t */\n\t@Prop() readonly breakpoint?: SpacerBreakpointsType = SpacerBreakpoints.NONE\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(SpacerSize, newValue, SpacerClass.root)\n\t}\n\n\t@Watch('breakpoint')\n\tvalidateBreakpoint(newValue: string): void {\n\t\tvalidateProp(SpacerBreakpoints, newValue, SpacerClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateBreakpoint(this.breakpoint)\n\t}\n\n\trender() {\n\t\treturn <Host class={this.h.classes(SpacerClass.root)} size={this.size} breakpoint={this.breakpoint}></Host>\n\t}\n}\n"],"version":3}

package/dist/esm/gov-statsbar-item.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-00e9a0d5.js';
 import { g as govHost } from './template-10332292.js';
 import { v as validateProp } from './props-789f7529.js';
-import { S as StatsBarItemClass, b as StatsBarIconPosition } from './constants-d550c816.js';
+import { S as StatsBarItemClass, b as StatsBarIconPosition } from './constants-037c35bc.js';
 import './gov.log-af905420.js';
 import './utils-c057a3fa.js';
 import './variants-2b936d58.js';

package/dist/esm/gov-statsbar.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-00e9a0d5.js';
 import { v as validateProp } from './props-789f7529.js';
-import { S as StatsBarItemClass, a as StatsBarClass, b as StatsBarIconPosition, c as StatsBarVariant } from './constants-d550c816.js';
+import { S as StatsBarItemClass, a as StatsBarClass, b as StatsBarIconPosition, c as StatsBarVariants } from './constants-037c35bc.js';
 import { g as govHost } from './template-10332292.js';
 import './gov.log-af905420.js';
 import './utils-c057a3fa.js';
@@ -19,7 +19,7 @@ const GovStatsbar = class {
     validateProp(StatsBarIconPosition, newValue, StatsBarClass.root);
   }
   validateVariant(newValue) {
-    validateProp(StatsBarVariant, newValue, StatsBarClass.root);
+    validateProp(StatsBarVariants, newValue, StatsBarClass.root);
   }
   componentWillLoad() {
     this.validateIconPosition(this.iconPosition);

package/dist/esm/gov-statsbar.entry.js.map

@@ -1 +1 @@
-{"file":"gov-statsbar.entry.js","mappings":";;;;;;;;AAAA,MAAM,cAAc,GAAG,ouDAAouD;;MCU9uD,WAAW;EAGvB;;;mBAayE,SAAS;IAZjF,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAcD,oBAAoB,CAAC,QAAgB;IACpC,YAAY,CAAC,oBAAoB,EAAE,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;GAChE;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,eAAe,EAAE,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;GAC3D;EAED,iBAAiB;IAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAC5C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,IAAS;MACpE,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;QACjC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;OAC1C;KACD,CAAC,CAAA;GACF;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACrE,eAAS,KAAK,EAAE,aAAa,CAAC,OAAO,IACpC,eAAQ,CACC,CACJ,EACP;GACD;;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-statsbar/gov-statsbar.scss?tag=gov-statsbar","../../../packages/core/src/components/gov-statsbar/gov-statsbar.tsx"],"sourcesContent":["/*\n *   Statsbar\n */\n\n$class: \".gov-statsbar\";\n\n#{$class} {\n\t@include base();\n\tpadding: rem-calc(20) 0;\n\t&__section {\n\t\t@include container();\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $statsbar-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tbackground-color: #{get(\"bg-color\", $definitions)};\n\t\t\tcolor: #{get(\"text-color\", $definitions)};\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tbackground: color(\"neutral.white\");\n\t\t\t\tcolor: #{get(\"text-color-inverse\", $definitions)};\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t&__section {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\tpadding: 0;\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StatsBarClass, StatsBarVariant, StatsBarVariantType, StatsBarItemClass, StatsBarIconPosition, StatsBarIconPositionType } from './constants'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { govHost } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-statsbar',\n\tstyleUrl: 'gov-statsbar.scss',\n})\nexport class GovStatsbar {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovStatsbarElement\n\n\t/**\n\t * Icon’s position\n\t */\n\t@Prop() readonly iconPosition?: StatsBarIconPositionType\n\t/**\n\t * Style variation\n\t */\n\t@Prop({ attribute: 'variant' }) readonly variant?: StatsBarVariantType = 'primary'\n\n\t@Watch('iconPosition')\n\tvalidateIconPosition(newValue: string): void {\n\t\tvalidateProp(StatsBarIconPosition, newValue, StatsBarClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(StatsBarVariant, newValue, StatsBarClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateIconPosition(this.iconPosition)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(StatsBarItemClass.root).forEach((node: any) => {\n\t\t\tif (this.iconPosition === 'left') {\n\t\t\t\tnode.setAttribute('icon-position', 'left')\n\t\t\t}\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(StatsBarClass.root)} variant={this.variant}>\n\t\t\t\t<section class={StatsBarClass.section}>\n\t\t\t\t\t<slot />\n\t\t\t\t</section>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"gov-statsbar.entry.js","mappings":";;;;;;;;AAAA,MAAM,cAAc,GAAG,ouDAAouD;;MCU9uD,WAAW;EAGvB;;;mBAayE,SAAS;IAZjF,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAcD,oBAAoB,CAAC,QAAgB;IACpC,YAAY,CAAC,oBAAoB,EAAE,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;GAChE;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,gBAAgB,EAAE,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;GAC5D;EAED,iBAAiB;IAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAC5C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAClC;EAED,gBAAgB;IACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,IAAS;MACpE,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;QACjC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;OAC1C;KACD,CAAC,CAAA;GACF;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACrE,eAAS,KAAK,EAAE,aAAa,CAAC,OAAO,IACpC,eAAQ,CACC,CACJ,EACP;GACD;;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-statsbar/gov-statsbar.scss?tag=gov-statsbar","../../../packages/core/src/components/gov-statsbar/gov-statsbar.tsx"],"sourcesContent":["/*\n *   Statsbar\n */\n\n$class: \".gov-statsbar\";\n\n#{$class} {\n\t@include base();\n\tpadding: rem-calc(20) 0;\n\t&__section {\n\t\t@include container();\n\t}\n\n\t// VARIANTS\n\t@each $variant, $definitions in $statsbar-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tbackground-color: #{get(\"bg-color\", $definitions)};\n\t\t\tcolor: #{get(\"text-color\", $definitions)};\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tbackground: color(\"neutral.white\");\n\t\t\t\tcolor: #{get(\"text-color-inverse\", $definitions)};\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t&__section {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\tpadding: 0;\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StatsBarClass, StatsBarVariants, StatsBarVariantType, StatsBarItemClass, StatsBarIconPosition, StatsBarIconPositionType } from './constants'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { govHost } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-statsbar',\n\tstyleUrl: 'gov-statsbar.scss',\n})\nexport class GovStatsbar {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovStatsbarElement\n\n\t/**\n\t * Icon’s position\n\t */\n\t@Prop() readonly iconPosition?: StatsBarIconPositionType\n\t/**\n\t * Style variation\n\t */\n\t@Prop({ attribute: 'variant' }) readonly variant?: StatsBarVariantType = 'primary'\n\n\t@Watch('iconPosition')\n\tvalidateIconPosition(newValue: string): void {\n\t\tvalidateProp(StatsBarIconPosition, newValue, StatsBarClass.root)\n\t}\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(StatsBarVariants, newValue, StatsBarClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateIconPosition(this.iconPosition)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.host.querySelectorAll(StatsBarItemClass.root).forEach((node: any) => {\n\t\t\tif (this.iconPosition === 'left') {\n\t\t\t\tnode.setAttribute('icon-position', 'left')\n\t\t\t}\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(StatsBarClass.root)} variant={this.variant}>\n\t\t\t\t<section class={StatsBarClass.section}>\n\t\t\t\t\t<slot />\n\t\t\t\t</section>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/esm/gov-tabs.entry.js

@@ -98,7 +98,7 @@ const GovTabs = class {
     resizeObserver.observe(this.tabsRef);
   }
   render() {
-    return (h(Host, { class: this.h.classes(TabsClass.root), variant: this.variant, type: this.type, role: "tablist", ref: el => (this.tabsRef = el), "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onKeyDown: this.onKeydownHandler.bind(this) }, h("div", { class: TabsClass.tabs, "aria-hidden": toBoolAttr(this.compactControls) }, h("ul", { class: TabsClass.list }, this.controller.map((control, index) => (h("li", { class: TabsClass.item }, this.type == 'text' ? (h("button", { class: TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control, index), "aria-selected": toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active ? -1 : 0, ref: el => (this.triggerRefs[control.triggerIdentifier] = el) }, control.label)) : (h("gov-badge", { variant: this.variant, type: toBoolAttr(control.active) == 'true' ? 'solid' : 'outlined', nativeType: toBoolAttr(control.active) == 'true' ? 'span' : 'button', "on-gov-click": () => this.onSelectHandler(control, index) }, control.label))))))), h("span", { id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (h("gov-form-select", { "wcag-labelled-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controller.map(control => (h("option", { value: control.triggerIdentifier, selected: control.active }, control.label))))) : null, h("slot", null)));
+    return (h(Host, { class: this.h.classes(TabsClass.root), variant: this.variant, type: this.type, role: "tablist", ref: el => (this.tabsRef = el), "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onKeyDown: this.onKeydownHandler.bind(this) }, h("div", { class: TabsClass.tabs, "aria-hidden": toBoolAttr(this.compactControls) }, h("ul", { class: TabsClass.list }, this.controller.map((control, index) => (h("li", { class: TabsClass.item }, this.type == 'text' ? (h("button", { class: TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control, index), "aria-selected": toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active ? -1 : 0, ref: el => (this.triggerRefs[control.triggerIdentifier] = el) }, control.label)) : (h("gov-badge", { variant: this.variant, type: toBoolAttr(control.active) == 'true' ? 'solid' : 'outlined', "on-gov-click": () => this.onSelectHandler(control, index) }, control.label))))))), h("span", { id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (h("gov-form-select", { "wcag-labelled-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controller.map(control => (h("option", { value: control.triggerIdentifier, selected: control.active }, control.label))))) : null, h("slot", null)));
   }
   getCurrentTab() {
     return this.controller.find(control => control.active) || null;

package/dist/esm/gov-tabs.entry.js.map

@@ -1 +1 @@
-{"file":"gov-tabs.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-tabs/gov-tabs.scss?tag=gov-tabs","../../../packages/core/src/components/gov-tabs/gov-tabs.tsx"],"sourcesContent":["/*\n *   Tabs\n */\n\n$class: \".gov-tabs\";\n\n#{$class} {\n\t@include base();\n\t&__list {\n\t\t@extend %reset-ul;\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tmargin: rem-calc(0 0 20);\n\t}\n\t&__list > &__item {\n\t\t@extend %reset-ul-li;\n\t\tdisplay: flex;\n\t\tmargin: 0;\n\t}\n\t&__btn {\n\t\t@include typography($font-size-s);\n\t\t@include button-core();\n\t\t@include focus-outline();\n\t\tmargin: 0;\n\t\tpadding: rem-calc(12 0 10);\n\t\tborder-bottom: rem-calc(2) solid transparent;\n\t\tfont-weight: 700;\n\t\ttext-align: center;\n\t\ttext-transform: uppercase;\n\t\ttransition: $t linear color, $t linear border-color;\n\t}\n\n\t// VARIANTS\n\t@each $type, $definitions in $tabs-types {\n\t\t&[type=\"#{$type}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__list {\n\t\t\t\t\tgap: get(\"item-spacing\", $definitions);\n\t\t\t\t\t@if deep-map-check($definitions, \"border\") {\n\t\t\t\t\t\tborder-bottom: $tabs-list-border;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@each $variant, $definitions in $tabs-variants {\n\t\t&[variant=\"#{$variant}\"][type=\"text\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__btn {\n\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t\t@include hover() {\n\t\t\t\t\t\tcolor: get(\"color-hover\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t// STATES\n\t\t\t\t&__btn[aria-selected=\"true\"] {\n\t\t\t\t\tborder-bottom-color: get(\"color-active\", $definitions);\n\t\t\t\t\tcolor: get(\"color-active\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t&[orientation=\"vertical\"] {\n\t\t#{$class}__btn {\n\t\t\ttext-align: left;\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: xl) {\n\t\t&[orientation=\"vertical\"] {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\n\t\t\t#{$class}__list {\n\t\t\t\tflex-wrap: nowrap;\n\t\t\t\tflex-direction: column;\n\t\t\t\twidth: max-content;\n\t\t\t\tmax-width: 30vw;\n\t\t\t\tmargin-right: rem-calc(20);\n\t\t\t\tpadding: rem-calc(0 8);\n\t\t\t\tborder-bottom: none;\n\t\t\t\tborder-right: $tabs-list-border;\n\t\t\t}\n\n\t\t\t#{$class}__item {\n\t\t\t\tjustify-content: flex-end;\n\t\t\t}\n\n\t\t\t#{$class}__btn {\n\t\t\t\tpadding: rem-calc(8 12);\n\t\t\t\ttext-align: right;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, Host, h, State, Method, Event, EventEmitter, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { TabsItemClass, TabVariants, VariantType } from './constants'\nimport { GovTabControllerItem } from './gov-tabs.types'\nimport { govHost, toBoolAttr } from '../../helpers/Dom/template'\nimport { validateWcagLabel, validateWcagProp } from '../../helpers/Validate/wcag'\nimport { TabsClass, TabType, TabTypes, TabOrientationType } from './constants'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay, throttle } from '../../utils/utils'\nimport { createID } from '../../utils/string.utils'\nimport { Nullable } from '../../types/interfaces'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-tabs',\n\tstyleUrl: 'gov-tabs.scss',\n})\nexport class GovTabs {\n\tprivate h: GovHost\n\tprivate triggerRefs: { [key: string]: HTMLButtonElement } = {}\n\tprivate tabsRef?: HTMLDivElement\n\n\tprivate readonly formSelectId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.formSelectId = createID('GovForSelect')\n\t}\n\n\t@Element() host: HTMLGovTabsElement\n\t@State() controller: GovTabControllerItem[] = []\n\t@State() focusIndex = 0\n\t@State() compactControls = false\n\t/**\n\t * Tabs type\n\t */\n\t@Prop() readonly type: TabType = 'text'\n\t/**\n\t * Style variation of the tab badges.\n\t */\n\t@Prop() readonly variant?: VariantType = 'primary'\n\t/**\n\t * Tabs orientation\n\t */\n\t@Prop() readonly orientation: TabOrientationType = 'horizontal'\n\t/**\n\t * Adds accessible label for the tabs that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * Adds accessible label for the tabs select\n\t */\n\t@Prop({ attribute: 'wcag-select-label' }) readonly wcagSelectLabel: string\n\t/**\n\t * Indicates the id of a component that labels the tabs.\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/**\n\t * Emitted when the tab is changed.\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<HTMLGovTabsItemElement>\n\n\t@Watch('type')\n\tvalidateType(newValue: string): void {\n\t\tvalidateProp(TabTypes, newValue, TabsClass.root)\n\t}\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(TabVariants, newValue, TabsClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.prepareDataSource()\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\n\t\tthis.resizeObserver()\n\t}\n\n\tprivate prepareDataSource(): void {\n\t\tthis.controller = []\n\t\tconst promises: Promise<GovTabControllerItem>[] = []\n\t\tthis.host.querySelectorAll(TabsItemClass.root).forEach((tab: HTMLGovTabsItemElement) => {\n\t\t\tconst controlItem = Promise.all([tab.getIdentifier(), tab.getTriggerIdentifier()]).then(([identifier, triggerIdentifier]) => {\n\t\t\t\tconst isDefault = typeof tab.getAttribute('default') === 'string'\n\t\t\t\treturn {\n\t\t\t\t\tlabel: tab.getAttribute('label'),\n\t\t\t\t\tcontentIdentifier: identifier,\n\t\t\t\t\ttriggerIdentifier: triggerIdentifier,\n\t\t\t\t\telement: tab,\n\t\t\t\t\tactive: false,\n\t\t\t\t\tdefault: isDefault,\n\t\t\t\t}\n\t\t\t})\n\t\t\tpromises.push(controlItem)\n\t\t})\n\t\tPromise.all(promises).then(controllers => {\n\t\t\tlet defaultTab = controllers.findIndex(controller => controller.default)\n\t\t\tif (defaultTab === -1) defaultTab = 0\n\t\t\tthis.focusIndex = defaultTab\n\t\t\tcontrollers[defaultTab].active = true\n\t\t\tthis.controller = [...controllers]\n\t\t\tthis.reRender()\n\t\t})\n\t}\n\n\tprivate setActiveByIdentifier(identifier: string) {\n\t\tconst temp = []\n\t\tthis.controller.map(item => {\n\t\t\titem.active = identifier === item.triggerIdentifier || identifier === item.contentIdentifier\n\t\t\ttemp.push(item)\n\t\t})\n\t\tthis.controller = [...temp]\n\t}\n\n\tprivate reRender() {\n\t\tthis.controller.map(control => {\n\t\t\tcontrol.element.setActiveStatus(control.active)\n\t\t})\n\t}\n\n\t/*\n\tprivate evaluateControls() {\n\t\tthis.compactControls = false\n\t\tlet sumOfWidth = this.tabsRef.querySelector(\"ul\").offsetWidth\n\t\tthis.compactControls = this.tabsRef.offsetWidth < sumOfWidth\n\t}\n\t*/\n\n\tprivate resizeObserver() {\n\t\tconst resizeObserver = new ResizeObserver(\n\t\t\tthrottle(() => {\n\t\t\t\t// this.evaluateControls()\n\t\t\t}, 200)\n\t\t)\n\n\t\tresizeObserver.observe(this.tabsRef)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(TabsClass.root)}\n\t\t\t\tvariant={this.variant}\n\t\t\t\ttype={this.type}\n\t\t\t\trole=\"tablist\"\n\t\t\t\tref={el => (this.tabsRef = el as HTMLDivElement)}\n\t\t\t\taria-label={this.wcagLabel}\n\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\tonKeyDown={this.onKeydownHandler.bind(this)}\n\t\t\t>\n\t\t\t\t<div class={TabsClass.tabs} aria-hidden={toBoolAttr(this.compactControls)}>\n\t\t\t\t\t<ul class={TabsClass.list}>\n\t\t\t\t\t\t{this.controller.map((control, index) => (\n\t\t\t\t\t\t\t<li class={TabsClass.item}>\n\t\t\t\t\t\t\t\t{this.type == 'text' ? (\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tclass={TabsClass.btn}\n\t\t\t\t\t\t\t\t\t\tid={control.triggerIdentifier}\n\t\t\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => this.onSelectHandler(control, index)}\n\t\t\t\t\t\t\t\t\t\taria-selected={toBoolAttr(control.active)}\n\t\t\t\t\t\t\t\t\t\taria-controls={control.contentIdentifier}\n\t\t\t\t\t\t\t\t\t\ttabindex={control.active ? -1 : 0}\n\t\t\t\t\t\t\t\t\t\tref={el => (this.triggerRefs[control.triggerIdentifier] = el as HTMLInputElement)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{control.label}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<gov-badge\n\t\t\t\t\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\t\t\t\t\ttype={toBoolAttr(control.active) == 'true' ? 'solid' : 'outlined'}\n\t\t\t\t\t\t\t\t\t\tnativeType={toBoolAttr(control.active) == 'true' ? 'span' : 'button'}\n\t\t\t\t\t\t\t\t\t\ton-gov-click={() => this.onSelectHandler(control, index)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{control.label}\n\t\t\t\t\t\t\t\t\t</gov-badge>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\n\t\t\t\t<span id={this.formSelectId} hidden>\n\t\t\t\t\t{this.wcagSelectLabel}\n\t\t\t\t</span>\n\t\t\t\t{this.compactControls ? (\n\t\t\t\t\t<gov-form-select wcag-labelled-by={this.formSelectId} onGov-change={this.onChangeHandler.bind(this)}>\n\t\t\t\t\t\t{this.controller.map(control => (\n\t\t\t\t\t\t\t<option value={control.triggerIdentifier} selected={control.active}>\n\t\t\t\t\t\t\t\t{control.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t) : null}\n\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate getCurrentTab(): GovTabControllerItem | null {\n\t\treturn this.controller.find(control => control.active) || null\n\t}\n\n\tprivate onSelectHandler(control: GovTabControllerItem, index: number) {\n\t\tthis.focusIndex = index\n\t\tthis.setActiveByIdentifier(control.triggerIdentifier)\n\t\tthis.reRender()\n\t\tthis.govChange.emit(this.getCurrentTab().element)\n\t}\n\n\tprivate onChangeHandler(e: CustomEvent) {\n\t\tconst triggerId = (e.target as HTMLSelectElement).value\n\t\te.stopPropagation()\n\t\tthis.setActiveByIdentifier(triggerId)\n\t\tthis.reRender()\n\t\tthis.govChange.emit(this.getCurrentTab().element)\n\t}\n\n\tprivate onKeydownHandler(e: KeyboardEvent) {\n\t\tconst keyCode = e.keyCode\n\t\te.stopPropagation()\n\t\tif (keyCode === 39 || keyCode === 37) {\n\t\t\tif (false === (this.focusIndex >= 0 && this.focusIndex <= this.controller.length - 1)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.controller[this.focusIndex].active = false\n\t\t\tif (keyCode === 39) {\n\t\t\t\tthis.focusIndex++\n\t\t\t\tif (this.focusIndex >= this.controller.length) {\n\t\t\t\t\tthis.focusIndex = 0\n\t\t\t\t}\n\t\t\t} else if (keyCode === 37) {\n\t\t\t\tthis.focusIndex--\n\t\t\t\tif (this.focusIndex < 0) {\n\t\t\t\t\tthis.focusIndex = this.controller.length - 1\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (this.focusIndex >= 0 && this.focusIndex <= this.controller.length - 1) {\n\t\t\t\tconst current = this.controller[this.focusIndex]\n\t\t\t\tcurrent.active = true\n\t\t\t\tthis.triggerRefs[current.triggerIdentifier].focus()\n\t\t\t\tthis.controller = [...this.controller]\n\t\t\t\tthis.reRender()\n\t\t\t\tthis.govChange.emit(this.getCurrentTab().element)\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Regenerate tabs controllers\n\t */\n\t@Method()\n\tasync refresh(): Promise<void> {\n\t\tthis.prepareDataSource()\n\t}\n\n\t/**\n\t * Returns the currently selected tabs-item\n\t */\n\t@Method()\n\tasync currentTab(): Promise<Nullable<HTMLGovTabsItemElement>> {\n\t\treturn this.getCurrentTab().element || null\n\t}\n\n\t/**\n\t * Regenerate tabs controllers\n\t */\n\t@Method()\n\tasync setActiveTab(identifier: string): Promise<void> {\n\t\tthis.setActiveByIdentifier(identifier)\n\t\tthis.reRender()\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.wcagSelectLabel, 'wcag-select-label', TabsClass.root)\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, TabsClass.root)\n\t}\n}\n"],"version":3}
+{"file":"gov-tabs.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-tabs/gov-tabs.scss?tag=gov-tabs","../../../packages/core/src/components/gov-tabs/gov-tabs.tsx"],"sourcesContent":["/*\n *   Tabs\n */\n\n$class: \".gov-tabs\";\n\n#{$class} {\n\t@include base();\n\t&__list {\n\t\t@extend %reset-ul;\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tmargin: rem-calc(0 0 20);\n\t}\n\t&__list > &__item {\n\t\t@extend %reset-ul-li;\n\t\tdisplay: flex;\n\t\tmargin: 0;\n\t}\n\t&__btn {\n\t\t@include typography($font-size-s);\n\t\t@include button-core();\n\t\t@include focus-outline();\n\t\tmargin: 0;\n\t\tpadding: rem-calc(12 0 10);\n\t\tborder-bottom: rem-calc(2) solid transparent;\n\t\tfont-weight: 700;\n\t\ttext-align: center;\n\t\ttext-transform: uppercase;\n\t\ttransition: $t linear color, $t linear border-color;\n\t}\n\n\t// VARIANTS\n\t@each $type, $definitions in $tabs-types {\n\t\t&[type=\"#{$type}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__list {\n\t\t\t\t\tgap: get(\"item-spacing\", $definitions);\n\t\t\t\t\t@if deep-map-check($definitions, \"border\") {\n\t\t\t\t\t\tborder-bottom: $tabs-list-border;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@each $variant, $definitions in $tabs-variants {\n\t\t&[variant=\"#{$variant}\"][type=\"text\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__btn {\n\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t\t@include hover() {\n\t\t\t\t\t\tcolor: get(\"color-hover\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t// STATES\n\t\t\t\t&__btn[aria-selected=\"true\"] {\n\t\t\t\t\tborder-bottom-color: get(\"color-active\", $definitions);\n\t\t\t\t\tcolor: get(\"color-active\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t&[orientation=\"vertical\"] {\n\t\t#{$class}__btn {\n\t\t\ttext-align: left;\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: xl) {\n\t\t&[orientation=\"vertical\"] {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\n\t\t\t#{$class}__list {\n\t\t\t\tflex-wrap: nowrap;\n\t\t\t\tflex-direction: column;\n\t\t\t\twidth: max-content;\n\t\t\t\tmax-width: 30vw;\n\t\t\t\tmargin-right: rem-calc(20);\n\t\t\t\tpadding: rem-calc(0 8);\n\t\t\t\tborder-bottom: none;\n\t\t\t\tborder-right: $tabs-list-border;\n\t\t\t}\n\n\t\t\t#{$class}__item {\n\t\t\t\tjustify-content: flex-end;\n\t\t\t}\n\n\t\t\t#{$class}__btn {\n\t\t\t\tpadding: rem-calc(8 12);\n\t\t\t\ttext-align: right;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, Host, h, State, Method, Event, EventEmitter, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { TabsItemClass, TabVariants, VariantType } from './constants'\nimport { GovTabControllerItem } from './gov-tabs.types'\nimport { govHost, toBoolAttr } from '../../helpers/Dom/template'\nimport { validateWcagLabel, validateWcagProp } from '../../helpers/Validate/wcag'\nimport { TabsClass, TabType, TabTypes, TabOrientationType } from './constants'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay, throttle } from '../../utils/utils'\nimport { createID } from '../../utils/string.utils'\nimport { Nullable } from '../../types/interfaces'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-tabs',\n\tstyleUrl: 'gov-tabs.scss',\n})\nexport class GovTabs {\n\tprivate h: GovHost\n\tprivate triggerRefs: { [key: string]: HTMLButtonElement } = {}\n\tprivate tabsRef?: HTMLDivElement\n\n\tprivate readonly formSelectId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.formSelectId = createID('GovForSelect')\n\t}\n\n\t@Element() host: HTMLGovTabsElement\n\t@State() controller: GovTabControllerItem[] = []\n\t@State() focusIndex = 0\n\t@State() compactControls = false\n\t/**\n\t * Tabs type\n\t */\n\t@Prop() readonly type: TabType = 'text'\n\t/**\n\t * Style variation of the tab badges.\n\t */\n\t@Prop() readonly variant?: VariantType = 'primary'\n\t/**\n\t * Tabs orientation\n\t */\n\t@Prop() readonly orientation: TabOrientationType = 'horizontal'\n\t/**\n\t * Adds accessible label for the tabs that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * Adds accessible label for the tabs select\n\t */\n\t@Prop({ attribute: 'wcag-select-label' }) readonly wcagSelectLabel: string\n\t/**\n\t * Indicates the id of a component that labels the tabs.\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\t/**\n\t * Emitted when the tab is changed.\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter<HTMLGovTabsItemElement>\n\n\t@Watch('type')\n\tvalidateType(newValue: string): void {\n\t\tvalidateProp(TabTypes, newValue, TabsClass.root)\n\t}\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(TabVariants, newValue, TabsClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.prepareDataSource()\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\n\t\tthis.resizeObserver()\n\t}\n\n\tprivate prepareDataSource(): void {\n\t\tthis.controller = []\n\t\tconst promises: Promise<GovTabControllerItem>[] = []\n\t\tthis.host.querySelectorAll(TabsItemClass.root).forEach((tab: HTMLGovTabsItemElement) => {\n\t\t\tconst controlItem = Promise.all([tab.getIdentifier(), tab.getTriggerIdentifier()]).then(([identifier, triggerIdentifier]) => {\n\t\t\t\tconst isDefault = typeof tab.getAttribute('default') === 'string'\n\t\t\t\treturn {\n\t\t\t\t\tlabel: tab.getAttribute('label'),\n\t\t\t\t\tcontentIdentifier: identifier,\n\t\t\t\t\ttriggerIdentifier: triggerIdentifier,\n\t\t\t\t\telement: tab,\n\t\t\t\t\tactive: false,\n\t\t\t\t\tdefault: isDefault,\n\t\t\t\t}\n\t\t\t})\n\t\t\tpromises.push(controlItem)\n\t\t})\n\t\tPromise.all(promises).then(controllers => {\n\t\t\tlet defaultTab = controllers.findIndex(controller => controller.default)\n\t\t\tif (defaultTab === -1) defaultTab = 0\n\t\t\tthis.focusIndex = defaultTab\n\t\t\tcontrollers[defaultTab].active = true\n\t\t\tthis.controller = [...controllers]\n\t\t\tthis.reRender()\n\t\t})\n\t}\n\n\tprivate setActiveByIdentifier(identifier: string) {\n\t\tconst temp = []\n\t\tthis.controller.map(item => {\n\t\t\titem.active = identifier === item.triggerIdentifier || identifier === item.contentIdentifier\n\t\t\ttemp.push(item)\n\t\t})\n\t\tthis.controller = [...temp]\n\t}\n\n\tprivate reRender() {\n\t\tthis.controller.map(control => {\n\t\t\tcontrol.element.setActiveStatus(control.active)\n\t\t})\n\t}\n\n\t/*\n\tprivate evaluateControls() {\n\t\tthis.compactControls = false\n\t\tlet sumOfWidth = this.tabsRef.querySelector(\"ul\").offsetWidth\n\t\tthis.compactControls = this.tabsRef.offsetWidth < sumOfWidth\n\t}\n\t*/\n\n\tprivate resizeObserver() {\n\t\tconst resizeObserver = new ResizeObserver(\n\t\t\tthrottle(() => {\n\t\t\t\t// this.evaluateControls()\n\t\t\t}, 200)\n\t\t)\n\n\t\tresizeObserver.observe(this.tabsRef)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(TabsClass.root)}\n\t\t\t\tvariant={this.variant}\n\t\t\t\ttype={this.type}\n\t\t\t\trole=\"tablist\"\n\t\t\t\tref={el => (this.tabsRef = el as HTMLDivElement)}\n\t\t\t\taria-label={this.wcagLabel}\n\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\tonKeyDown={this.onKeydownHandler.bind(this)}\n\t\t\t>\n\t\t\t\t<div class={TabsClass.tabs} aria-hidden={toBoolAttr(this.compactControls)}>\n\t\t\t\t\t<ul class={TabsClass.list}>\n\t\t\t\t\t\t{this.controller.map((control, index) => (\n\t\t\t\t\t\t\t<li class={TabsClass.item}>\n\t\t\t\t\t\t\t\t{this.type == 'text' ? (\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tclass={TabsClass.btn}\n\t\t\t\t\t\t\t\t\t\tid={control.triggerIdentifier}\n\t\t\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => this.onSelectHandler(control, index)}\n\t\t\t\t\t\t\t\t\t\taria-selected={toBoolAttr(control.active)}\n\t\t\t\t\t\t\t\t\t\taria-controls={control.contentIdentifier}\n\t\t\t\t\t\t\t\t\t\ttabindex={control.active ? -1 : 0}\n\t\t\t\t\t\t\t\t\t\tref={el => (this.triggerRefs[control.triggerIdentifier] = el as HTMLInputElement)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{control.label}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<gov-badge\n\t\t\t\t\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\t\t\t\t\ttype={toBoolAttr(control.active) == 'true' ? 'solid' : 'outlined'}\n\t\t\t\t\t\t\t\t\t\ton-gov-click={() => this.onSelectHandler(control, index)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{control.label}\n\t\t\t\t\t\t\t\t\t</gov-badge>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\n\t\t\t\t<span id={this.formSelectId} hidden>\n\t\t\t\t\t{this.wcagSelectLabel}\n\t\t\t\t</span>\n\t\t\t\t{this.compactControls ? (\n\t\t\t\t\t<gov-form-select wcag-labelled-by={this.formSelectId} onGov-change={this.onChangeHandler.bind(this)}>\n\t\t\t\t\t\t{this.controller.map(control => (\n\t\t\t\t\t\t\t<option value={control.triggerIdentifier} selected={control.active}>\n\t\t\t\t\t\t\t\t{control.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</gov-form-select>\n\t\t\t\t) : null}\n\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate getCurrentTab(): GovTabControllerItem | null {\n\t\treturn this.controller.find(control => control.active) || null\n\t}\n\n\tprivate onSelectHandler(control: GovTabControllerItem, index: number) {\n\t\tthis.focusIndex = index\n\t\tthis.setActiveByIdentifier(control.triggerIdentifier)\n\t\tthis.reRender()\n\t\tthis.govChange.emit(this.getCurrentTab().element)\n\t}\n\n\tprivate onChangeHandler(e: CustomEvent) {\n\t\tconst triggerId = (e.target as HTMLSelectElement).value\n\t\te.stopPropagation()\n\t\tthis.setActiveByIdentifier(triggerId)\n\t\tthis.reRender()\n\t\tthis.govChange.emit(this.getCurrentTab().element)\n\t}\n\n\tprivate onKeydownHandler(e: KeyboardEvent) {\n\t\tconst keyCode = e.keyCode\n\t\te.stopPropagation()\n\t\tif (keyCode === 39 || keyCode === 37) {\n\t\t\tif (false === (this.focusIndex >= 0 && this.focusIndex <= this.controller.length - 1)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.controller[this.focusIndex].active = false\n\t\t\tif (keyCode === 39) {\n\t\t\t\tthis.focusIndex++\n\t\t\t\tif (this.focusIndex >= this.controller.length) {\n\t\t\t\t\tthis.focusIndex = 0\n\t\t\t\t}\n\t\t\t} else if (keyCode === 37) {\n\t\t\t\tthis.focusIndex--\n\t\t\t\tif (this.focusIndex < 0) {\n\t\t\t\t\tthis.focusIndex = this.controller.length - 1\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (this.focusIndex >= 0 && this.focusIndex <= this.controller.length - 1) {\n\t\t\t\tconst current = this.controller[this.focusIndex]\n\t\t\t\tcurrent.active = true\n\t\t\t\tthis.triggerRefs[current.triggerIdentifier].focus()\n\t\t\t\tthis.controller = [...this.controller]\n\t\t\t\tthis.reRender()\n\t\t\t\tthis.govChange.emit(this.getCurrentTab().element)\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Regenerate tabs controllers\n\t */\n\t@Method()\n\tasync refresh(): Promise<void> {\n\t\tthis.prepareDataSource()\n\t}\n\n\t/**\n\t * Returns the currently selected tabs-item\n\t */\n\t@Method()\n\tasync currentTab(): Promise<Nullable<HTMLGovTabsItemElement>> {\n\t\treturn this.getCurrentTab().element || null\n\t}\n\n\t/**\n\t * Regenerate tabs controllers\n\t */\n\t@Method()\n\tasync setActiveTab(identifier: string): Promise<void> {\n\t\tthis.setActiveByIdentifier(identifier)\n\t\tthis.reRender()\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.wcagSelectLabel, 'wcag-select-label', TabsClass.root)\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, TabsClass.root)\n\t}\n}\n"],"version":3}

package/dist/esm/gov-tile.entry.js

@@ -11,7 +11,7 @@ const TileClass = {
   content: 'gov-tile__content',
 };
 
-const govTileCss = ".gov-tile__link::before{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.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-tile{position:relative;display:block;width:100%;padding:0.75rem;transition:background-color 150ms}.gov-tile__icon{display:flex;margin:0rem 0rem 0.75rem;color:var(--gov-tile-icon-color, var(--gov-color-secondary))}.gov-tile__icon .gov-icon{width:2.5rem;height:2.5rem}.gov-tile__title{font-weight:var(--gov-text-xl-font-weight);font-size:var(--gov-text-xl-font-size);line-height:var(--gov-text-xl-line-height);letter-spacing:var(--gov-text-xl-letter-spacing);margin:0 0 0.5rem}.gov-tile__link{display:flex;gap:0.5rem;justify-content:space-between;color:var(--gov-tile-main-color, var(--gov-color-primary));text-decoration:none}.gov-tile__arrow{flex:0 0 auto;width:0.75rem;height:2rem;margin:0.5rem;color:inherit}.gov-tile__content{color:var(--gov-tile-text-color, var(--gov-color-secondary-700))}.gov-tile__content>*:last-child{margin-bottom:0}.gov-tile__content a{position:relative;z-index:1}@media not all and (pointer: coarse){.gov-tile[href]:hover{background:var(--gov-tile-hover-bg, var(--gov-color-primary-200))}.gov-tile[href]:hover .gov-tile__link{color:var(--gov-tile-main-color, var(--gov-color-primary))}}@media (min-width: 30em){.gov-tile[promotion=\"\"],.gov-tile[promotion=true i],.gov-tile[promotion=\"1\"]{display:grid;grid-template-columns:auto 1fr;gap:0 0.875rem}.gov-tile[promotion=\"\"] .gov-tile__icon,.gov-tile[promotion=true i] .gov-tile__icon,.gov-tile[promotion=\"1\"] .gov-tile__icon{grid-area:1/1/3/1;margin:0}.gov-tile[promotion=\"\"] .gov-tile__title,.gov-tile[promotion=true i] .gov-tile__title,.gov-tile[promotion=\"1\"] .gov-tile__title{grid-area:1/2/1/2}.gov-tile[promotion=\"\"] .gov-tile__content,.gov-tile[promotion=true i] .gov-tile__content,.gov-tile[promotion=\"1\"] .gov-tile__content{grid-area:2/2/2/2}}@media (min-width: 48em){.gov-tile{padding:1.5rem}.gov-tile__icon{margin:0rem 0rem 1.5rem}.gov-tile__icon .gov-icon{width:3rem;height:3rem}}@media (min-width: 64em){.gov-tile[promotion=\"\"],.gov-tile[promotion=true i],.gov-tile[promotion=\"1\"]{gap:0 1.625rem}}";
+const govTileCss = ".gov-tile__link::before{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.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-tile{position:relative;display:block;width:100%;padding:0.75rem;transition:background-color 150ms}.gov-tile__icon{display:flex;margin:0rem 0rem 0.75rem;color:var(--gov-tile-main-color, var(--gov-color-primary))}.gov-tile__icon .gov-icon{width:2.5rem;height:2.5rem}.gov-tile__title{font-weight:var(--gov-text-xl-font-weight);font-size:var(--gov-text-xl-font-size);line-height:var(--gov-text-xl-line-height);letter-spacing:var(--gov-text-xl-letter-spacing);margin:0 0 0.5rem}.gov-tile__link{display:flex;gap:0.5rem;justify-content:space-between;color:var(--gov-tile-main-color, var(--gov-color-primary));text-decoration:none}.gov-tile__arrow{flex:0 0 auto;width:0.75rem;height:2rem;margin:0.5rem;color:inherit}.gov-tile__content{color:var(--gov-tile-text-color, var(--gov-color-secondary-700))}.gov-tile__content>*:last-child{margin-bottom:0}.gov-tile__content a{position:relative;z-index:1}@media not all and (pointer: coarse){.gov-tile[href]:hover{background:var(--gov-tile-hover-bg, var(--gov-color-primary-200))}.gov-tile[href]:hover .gov-tile__link{color:var(--gov-tile-main-color, var(--gov-color-primary))}}@media (min-width: 30em){.gov-tile[promotion=\"\"],.gov-tile[promotion=true i],.gov-tile[promotion=\"1\"]{display:grid;grid-template-columns:auto 1fr;gap:0 0.875rem}.gov-tile[promotion=\"\"] .gov-tile__icon,.gov-tile[promotion=true i] .gov-tile__icon,.gov-tile[promotion=\"1\"] .gov-tile__icon{grid-area:1/1/3/1;margin:0}.gov-tile[promotion=\"\"] .gov-tile__title,.gov-tile[promotion=true i] .gov-tile__title,.gov-tile[promotion=\"1\"] .gov-tile__title{grid-area:1/2/1/2}.gov-tile[promotion=\"\"] .gov-tile__content,.gov-tile[promotion=true i] .gov-tile__content,.gov-tile[promotion=\"1\"] .gov-tile__content{grid-area:2/2/2/2}}@media (min-width: 48em){.gov-tile{padding:1.5rem}.gov-tile__icon{margin:0rem 0rem 1.5rem}.gov-tile__icon .gov-icon{width:3rem;height:3rem}}@media (min-width: 64em){.gov-tile[promotion=\"\"],.gov-tile[promotion=true i],.gov-tile[promotion=\"1\"]{gap:0 1.625rem}}";
 
 const GovTile = class {
   constructor(hostRef) {
@@ -31,7 +31,7 @@ const GovTile = class {
   }
   render() {
     // tag type
-    return (h(Host, { class: this.h.classes(TileClass.root), promotion: this.promotion }, this.h.hasSlot('icon') && (h("div", { class: TileClass.icon }, h("slot", { name: "icon" }))), h("h3", { class: TileClass.title }, this.href ? (h("a", { href: this.href, class: TileClass.link }, this.name, h("gov-icon", { class: TileClass.arrow, name: "arrow-right" }))) : (h("span", null, this.name))), h("div", { class: TileClass.content }, h("slot", null))));
+    return (h(Host, { class: this.h.classes(TileClass.root), promotion: this.promotion }, this.h.hasSlot('icon') && (h("div", { class: TileClass.icon }, h("slot", { name: "icon" }))), h("h3", { class: TileClass.title }, this.href ? (h("a", { href: this.href, class: TileClass.link }, this.name, h("gov-icon", { class: TileClass.arrow, name: "chevron-right" }))) : (h("span", null, this.name))), h("div", { class: TileClass.content }, h("slot", null))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/gov-tile.entry.js.map

@@ -1 +1 @@
-{"file":"gov-tile.entry.js","mappings":";;;;AAAO,MAAM,SAAS,GAAG;EACxB,IAAI,EAAE,UAAU;EAChB,IAAI,EAAE,gBAAgB;EACtB,KAAK,EAAE,iBAAiB;EACxB,KAAK,EAAE,iBAAiB;EACxB,IAAI,EAAE,gBAAgB;EACtB,OAAO,EAAE,mBAAmB;CAC5B;;ACPD,MAAM,UAAU,GAAG,+uEAA+uE;;MCUrvE,OAAO;EAGnB;;qBAQsC,KAAK;;;IAP1C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAkBD,YAAY,CAAC,QAAgB;IAC5B,IAAI,CAAC,QAAQ,EAAE;MACd,WAAW,CAAC,IAAI,SAAS,CAAC,IAAI,iCAAiC,CAAC,CAAA;KAChE;GACD;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC5B;EAED,MAAM;;IAEL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,IACpE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,WAAK,KAAK,EAAE,SAAS,CAAC,IAAI,IACzB,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EACD,UAAI,KAAK,EAAE,SAAS,CAAC,KAAK,IACxB,IAAI,CAAC,IAAI,IACT,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,IAAI,IACvC,IAAI,CAAC,IAAI,EACV,gBAAU,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,IAAI,EAAC,aAAa,GAAY,CAC7D,KAEJ,gBAAO,IAAI,CAAC,IAAI,CAAQ,CACxB,CACG,EACL,WAAK,KAAK,EAAE,SAAS,CAAC,OAAO,IAC5B,eAAQ,CACH,CACA,EACP;GACD;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-tile/constants.ts","../../../packages/core/src/components/gov-tile/gov-tile.scss?tag=gov-tile","../../../packages/core/src/components/gov-tile/gov-tile.tsx"],"sourcesContent":["export const TileClass = {\n\troot: 'gov-tile',\n\ticon: 'gov-tile__icon',\n\tarrow: 'gov-tile__arrow',\n\ttitle: 'gov-tile__title',\n\tlink: 'gov-tile__link',\n\tcontent: 'gov-tile__content',\n}\n","/*\n *   Tile\n */\n\n$class: \".gov-tile\";\n\n#{$class} {\n\t@include base();\n\tpadding: rem-calc(12);\n\ttransition: background-color $t;\n\t&__icon {\n\t\tdisplay: flex;\n\t\tmargin: rem-calc(0 0 12);\n\t\tcolor: $tile-icon-color;\n\t\t.gov-icon {\n\t\t\twidth: rem-calc(40);\n\t\t\theight: rem-calc(40);\n\t\t}\n\t}\n\t&__title {\n\t\t@include typography($font-size-xl);\n\t\tmargin: 0 0 rem-calc(8);\n\t}\n\t&__link {\n\t\t@extend %link-mask;\n\t\tdisplay: flex;\n\t\tgap: rem-calc(8);\n\t\tjustify-content: space-between;\n\t\tcolor: $tile-main-color;\n\t\ttext-decoration: none;\n\t}\n\t&__arrow {\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(12);\n\t\theight: rem-calc(32);\n\t\tmargin: rem-calc(8);\n\t\tcolor: inherit;\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t\tcolor: $tile-text-color;\n\t\ta {\n\t\t\tposition: relative;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\n\t// HOVERS\n\t&[href] {\n\t\t@include hover() {\n\t\t\tbackground: $tile-hover-bg;\n\t\t\t#{$class} {\n\t\t\t\t&__link {\n\t\t\t\t\tcolor: $tile-main-color;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t// VARIANTS\n\t\t@include parameter(\"promotion\") {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: auto 1fr;\n\t\t\tgap: 0 rem-calc(14);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tgrid-area: 1/1/3/1;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t}\n\t\t\t\t&__title {\n\t\t\t\t\tgrid-area: 1/2/1/2;\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tgrid-area: 2/2/2/2;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\tpadding: rem-calc(24);\n\t\t&__icon {\n\t\t\tmargin: rem-calc(0 0 24);\n\t\t\t.gov-icon {\n\t\t\t\twidth: rem-calc(48);\n\t\t\t\theight: rem-calc(48);\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: lg) {\n\t\t// VARIANTS\n\t\t@include parameter(\"promotion\") {\n\t\t\tgap: 0 rem-calc(26);\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { TileClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-tile',\n\tstyleUrl: 'gov-tile.scss',\n})\nexport class GovTile {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovTileElement\n\t/**\n\t * Style variation of the card.\n\t */\n\t@Prop() readonly promotion: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Item name\n\t */\n\t@Prop() readonly name: string\n\n\t@Watch('name')\n\tvalidateName(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${TileClass.root}]: Parameter title is required.`)\n\t\t}\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateName(this.name)\n\t}\n\n\trender() {\n\t\t// tag type\n\t\treturn (\n\t\t\t<Host class={this.h.classes(TileClass.root)} promotion={this.promotion}>\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<div class={TileClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<h3 class={TileClass.title}>\n\t\t\t\t\t{this.href ? (\n\t\t\t\t\t\t<a href={this.href} class={TileClass.link}>\n\t\t\t\t\t\t\t{this.name}\n\t\t\t\t\t\t\t<gov-icon class={TileClass.arrow} name=\"arrow-right\"></gov-icon>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span>{this.name}</span>\n\t\t\t\t\t)}\n\t\t\t\t</h3>\n\t\t\t\t<div class={TileClass.content}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"gov-tile.entry.js","mappings":";;;;AAAO,MAAM,SAAS,GAAG;EACxB,IAAI,EAAE,UAAU;EAChB,IAAI,EAAE,gBAAgB;EACtB,KAAK,EAAE,iBAAiB;EACxB,KAAK,EAAE,iBAAiB;EACxB,IAAI,EAAE,gBAAgB;EACtB,OAAO,EAAE,mBAAmB;CAC5B;;ACPD,MAAM,UAAU,GAAG,6uEAA6uE;;MCUnvE,OAAO;EAGnB;;qBAQsC,KAAK;;;IAP1C,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAkBD,YAAY,CAAC,QAAgB;IAC5B,IAAI,CAAC,QAAQ,EAAE;MACd,WAAW,CAAC,IAAI,SAAS,CAAC,IAAI,iCAAiC,CAAC,CAAA;KAChE;GACD;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC5B;EAED,MAAM;;IAEL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,IACpE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,WAAK,KAAK,EAAE,SAAS,CAAC,IAAI,IACzB,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,EACD,UAAI,KAAK,EAAE,SAAS,CAAC,KAAK,IACxB,IAAI,CAAC,IAAI,IACT,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,IAAI,IACvC,IAAI,CAAC,IAAI,EACV,gBAAU,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,IAAI,EAAC,eAAe,GAAY,CAC/D,KAEJ,gBAAO,IAAI,CAAC,IAAI,CAAQ,CACxB,CACG,EACL,WAAK,KAAK,EAAE,SAAS,CAAC,OAAO,IAC5B,eAAQ,CACH,CACA,EACP;GACD;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-tile/constants.ts","../../../packages/core/src/components/gov-tile/gov-tile.scss?tag=gov-tile","../../../packages/core/src/components/gov-tile/gov-tile.tsx"],"sourcesContent":["export const TileClass = {\n\troot: 'gov-tile',\n\ticon: 'gov-tile__icon',\n\tarrow: 'gov-tile__arrow',\n\ttitle: 'gov-tile__title',\n\tlink: 'gov-tile__link',\n\tcontent: 'gov-tile__content',\n}\n","/*\n *   Tile\n */\n\n$class: \".gov-tile\";\n\n#{$class} {\n\t@include base();\n\tpadding: rem-calc(12);\n\ttransition: background-color $t;\n\t&__icon {\n\t\tdisplay: flex;\n\t\tmargin: rem-calc(0 0 12);\n\t\tcolor: $tile-main-color;\n\t\t.gov-icon {\n\t\t\twidth: rem-calc(40);\n\t\t\theight: rem-calc(40);\n\t\t}\n\t}\n\t&__title {\n\t\t@include typography($font-size-xl);\n\t\tmargin: 0 0 rem-calc(8);\n\t}\n\t&__link {\n\t\t@extend %link-mask;\n\t\tdisplay: flex;\n\t\tgap: rem-calc(8);\n\t\tjustify-content: space-between;\n\t\tcolor: $tile-main-color;\n\t\ttext-decoration: none;\n\t}\n\t&__arrow {\n\t\tflex: 0 0 auto;\n\t\twidth: rem-calc(12);\n\t\theight: rem-calc(32);\n\t\tmargin: rem-calc(8);\n\t\tcolor: inherit;\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t\tcolor: $tile-text-color;\n\t\ta {\n\t\t\tposition: relative;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\n\t// HOVERS\n\t&[href] {\n\t\t@include hover() {\n\t\t\tbackground: $tile-hover-bg;\n\t\t\t#{$class} {\n\t\t\t\t&__link {\n\t\t\t\t\tcolor: $tile-main-color;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t// VARIANTS\n\t\t@include parameter(\"promotion\") {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: auto 1fr;\n\t\t\tgap: 0 rem-calc(14);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tgrid-area: 1/1/3/1;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t}\n\t\t\t\t&__title {\n\t\t\t\t\tgrid-area: 1/2/1/2;\n\t\t\t\t}\n\t\t\t\t&__content {\n\t\t\t\t\tgrid-area: 2/2/2/2;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\tpadding: rem-calc(24);\n\t\t&__icon {\n\t\t\tmargin: rem-calc(0 0 24);\n\t\t\t.gov-icon {\n\t\t\t\twidth: rem-calc(48);\n\t\t\t\theight: rem-calc(48);\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: lg) {\n\t\t// VARIANTS\n\t\t@include parameter(\"promotion\") {\n\t\t\tgap: 0 rem-calc(26);\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { TileClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-tile',\n\tstyleUrl: 'gov-tile.scss',\n})\nexport class GovTile {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovTileElement\n\t/**\n\t * Style variation of the card.\n\t */\n\t@Prop() readonly promotion: boolean = false\n\t/**\n\t * Same as original parameter\n\t * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href\n\t */\n\t@Prop() readonly href: string\n\t/**\n\t * Item name\n\t */\n\t@Prop() readonly name: string\n\n\t@Watch('name')\n\tvalidateName(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${TileClass.root}]: Parameter title is required.`)\n\t\t}\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateName(this.name)\n\t}\n\n\trender() {\n\t\t// tag type\n\t\treturn (\n\t\t\t<Host class={this.h.classes(TileClass.root)} promotion={this.promotion}>\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<div class={TileClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<h3 class={TileClass.title}>\n\t\t\t\t\t{this.href ? (\n\t\t\t\t\t\t<a href={this.href} class={TileClass.link}>\n\t\t\t\t\t\t\t{this.name}\n\t\t\t\t\t\t\t<gov-icon class={TileClass.arrow} name=\"chevron-right\"></gov-icon>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span>{this.name}</span>\n\t\t\t\t\t)}\n\t\t\t\t</h3>\n\t\t\t\t<div class={TileClass.content}>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/esm/gov-tiles.entry.js

@@ -5,12 +5,13 @@ const TilesClass = {
   root: 'gov-tiles',
 };
 
-const govTilesCss = ".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-tiles{overflow:hidden}.gov-tiles>*{margin:0 -0.0625rem -0.0625rem 0;border:0.0625rem solid var(--gov-tiles-border-color, var(--gov-color-secondary-500));border-width:0 0 0.0625rem}.gov-tiles>*:last-child{border-bottom-width:0}@media (min-width: 48em){.gov-tiles{display:grid}.gov-tiles--x2{grid-template-columns:repeat(2, 1fr)}.gov-tiles--x2>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x2>*:nth-child(-n+3){border-top-width:0}.gov-tiles--x2>*:nth-child(2n+2){border-right-width:0}}@media (min-width: 48em) and (max-width: 63.99em){.gov-tiles--x3,.gov-tiles--x4{grid-template-columns:repeat(2, 1fr)}.gov-tiles--x3>*,.gov-tiles--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x3>*:nth-child(-n+3),.gov-tiles--x4>*:nth-child(-n+3){border-top-width:0}.gov-tiles--x3>*:nth-child(2n+2),.gov-tiles--x4>*:nth-child(2n+2){border-right-width:0}}@media (min-width: 64em){.gov-tiles--x3{grid-template-columns:repeat(3, 1fr)}.gov-tiles--x3>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x3>*:nth-child(-n+4){border-top-width:0}.gov-tiles--x3>*:nth-child(3n+3){border-right-width:0}}@media (min-width: 64em) and (max-width: 74.99em){.gov-tiles--x4{grid-template-columns:repeat(3, 1fr)}.gov-tiles--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x4>*:nth-child(-n+4){border-top-width:0}.gov-tiles--x4>*:nth-child(3n+3){border-right-width:0}}@media (min-width: 75em){.gov-tiles--x4{grid-template-columns:repeat(4, 1fr)}.gov-tiles--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x4>*:nth-child(-n+5){border-top-width:0}.gov-tiles--x4>*:nth-child(4n+4){border-right-width:0}}";
+const govTilesCss = ".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-tiles{overflow:hidden}.gov-tiles>*{margin:0 -0.0625rem -0.0625rem 0;border:0.0625rem solid var(--gov-tiles-border-color, var(--gov-color-secondary-500));border-width:0 0 0.0625rem}.gov-tiles>*:last-child{border-bottom-width:0}.gov-tiles[no-border]>*{border:none}@media (min-width: 48em){.gov-tiles{display:grid}.gov-tiles--x2{grid-template-columns:repeat(2, 1fr)}.gov-tiles--x2>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x2>*:nth-child(-n+3){border-top-width:0}.gov-tiles--x2>*:nth-child(2n+2){border-right-width:0}}@media (min-width: 48em) and (max-width: 63.99em){.gov-tiles--x3,.gov-tiles--x4{grid-template-columns:repeat(2, 1fr)}.gov-tiles--x3>*,.gov-tiles--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x3>*:nth-child(-n+3),.gov-tiles--x4>*:nth-child(-n+3){border-top-width:0}.gov-tiles--x3>*:nth-child(2n+2),.gov-tiles--x4>*:nth-child(2n+2){border-right-width:0}}@media (min-width: 64em){.gov-tiles--x3{grid-template-columns:repeat(3, 1fr)}.gov-tiles--x3>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x3>*:nth-child(-n+4){border-top-width:0}.gov-tiles--x3>*:nth-child(3n+3){border-right-width:0}}@media (min-width: 64em) and (max-width: 74.99em){.gov-tiles--x4{grid-template-columns:repeat(3, 1fr)}.gov-tiles--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x4>*:nth-child(-n+4){border-top-width:0}.gov-tiles--x4>*:nth-child(3n+3){border-right-width:0}}@media (min-width: 75em){.gov-tiles--x4{grid-template-columns:repeat(4, 1fr)}.gov-tiles--x4>*{border-width:0.0625rem 0.0625rem 0.0625rem 0}.gov-tiles--x4>*:nth-child(-n+5){border-top-width:0}.gov-tiles--x4>*:nth-child(4n+4){border-right-width:0}}";
 
 const GovTiles = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.columns = 3;
+    this.noBorder = false;
     this.h = govHost(this.host);
   }
   get classNames() {

package/dist/esm/gov-tiles.entry.js.map

@@ -1 +1 @@
-{"file":"gov-tiles.entry.js","mappings":";;;AAAO,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;CACjB;;ACFD,MAAM,WAAW,GAAG,wxDAAwxD;;MCU/xD,QAAQ;EAGpB;;mBAMmC,CAAC;IALnC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAQD,IAAI,UAAU;IACb,OAAO,cAAc,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,UAAU,CAAC,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;GAChG;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAC3C,eAAQ,CACF,EACP;GACD;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-tiles/constants.ts","../../../packages/core/src/components/gov-tiles/gov-tiles.scss?tag=gov-tiles","../../../packages/core/src/components/gov-tiles/gov-tiles.tsx"],"sourcesContent":["export const TilesClass = {\n\troot: 'gov-tiles',\n}\n","/*\n *   Tiles\n */\n\n$class: \".gov-tiles\";\n$line-width: rem-calc(1);\n\n@mixin grid-lines($i) {\n\tgrid-template-columns: repeat(#{$i}, 1fr);\n\t& > * {\n\t\tborder-width: $line-width $line-width $line-width 0;\n\t\t&:nth-child(-n + #{$i + 1}) {\n\t\t\tborder-top-width: 0;\n\t\t}\n\t\t&:nth-child(#{$i}n + #{$i}) {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n}\n\n#{$class} {\n\toverflow: hidden;\n\t& > * {\n\t\tmargin: 0 calc($line-width * -1) calc($line-width * -1) 0;\n\t\tborder: $line-width solid $tiles-border-color;\n\t\tborder-width: 0 0 $line-width;\n\t\t&:last-child {\n\t\t\tborder-bottom-width: 0;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@include mq($from: md) {\n\t\tdisplay: grid;\n\t\t&--x2 {\n\t\t\t@include grid-lines(2);\n\t\t}\n\t\t@include mq($until: lg) {\n\t\t\t&--x3,\n\t\t\t&--x4 {\n\t\t\t\t@include grid-lines(2);\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: lg) {\n\t\t&--x3 {\n\t\t\t@include grid-lines(3);\n\t\t}\n\t\t@include mq($until: xl) {\n\t\t\t&--x4 {\n\t\t\t\t@include grid-lines(3);\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: xl) {\n\t\t&--x4 {\n\t\t\t@include grid-lines(4);\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { TilesClass } from './constants'\nimport { prepareClasses } from '../../helpers/Dom/template'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-tiles',\n\tstyleUrl: 'gov-tiles.scss',\n})\nexport class GovTiles {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\t/**\n\t * Number of columns between 1-4\n\t */\n\t@Prop() readonly columns: number = 3\n\n\t@Element() host: HTMLGovTilesElement\n\n\tget classNames(): string {\n\t\treturn prepareClasses([TilesClass.root, this.columns && TilesClass.root + '--x' + this.columns])\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(this.classNames)}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
+{"file":"gov-tiles.entry.js","mappings":";;;AAAO,MAAM,UAAU,GAAG;EACzB,IAAI,EAAE,WAAW;CACjB;;ACFD,MAAM,WAAW,GAAG,4zDAA4zD;;MCUn0D,QAAQ;EAGpB;;mBAMmC,CAAC;oBAI2B,KAAK;IATnE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAYD,IAAI,UAAU;IACb,OAAO,cAAc,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,UAAU,CAAC,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;GAChG;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAC3C,eAAQ,CACF,EACP;GACD;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-tiles/constants.ts","../../../packages/core/src/components/gov-tiles/gov-tiles.scss?tag=gov-tiles","../../../packages/core/src/components/gov-tiles/gov-tiles.tsx"],"sourcesContent":["export const TilesClass = {\n\troot: 'gov-tiles',\n}\n","/*\n *   Tiles\n */\n\n$class: \".gov-tiles\";\n$line-width: rem-calc(1);\n\n@mixin grid-lines($i) {\n\tgrid-template-columns: repeat(#{$i}, 1fr);\n\t& > * {\n\t\tborder-width: $line-width $line-width $line-width 0;\n\t\t&:nth-child(-n + #{$i + 1}) {\n\t\t\tborder-top-width: 0;\n\t\t}\n\t\t&:nth-child(#{$i}n + #{$i}) {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n}\n\n#{$class} {\n\toverflow: hidden;\n\t& > * {\n\t\tmargin: 0 calc($line-width * -1) calc($line-width * -1) 0;\n\t\tborder: $line-width solid $tiles-border-color;\n\t\tborder-width: 0 0 $line-width;\n\t\t&:last-child {\n\t\t\tborder-bottom-width: 0;\n\t\t}\n\t}\n\t&[no-border] {\n\t\t& > * {\n\t\t\tborder: none;\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@include mq($from: md) {\n\t\tdisplay: grid;\n\t\t&--x2 {\n\t\t\t@include grid-lines(2);\n\t\t}\n\t\t@include mq($until: lg) {\n\t\t\t&--x3,\n\t\t\t&--x4 {\n\t\t\t\t@include grid-lines(2);\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: lg) {\n\t\t&--x3 {\n\t\t\t@include grid-lines(3);\n\t\t}\n\t\t@include mq($until: xl) {\n\t\t\t&--x4 {\n\t\t\t\t@include grid-lines(3);\n\t\t\t}\n\t\t}\n\t}\n\t@include mq($from: xl) {\n\t\t&--x4 {\n\t\t\t@include grid-lines(4);\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { TilesClass } from './constants'\nimport { prepareClasses } from '../../helpers/Dom/template'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-tiles',\n\tstyleUrl: 'gov-tiles.scss',\n})\nexport class GovTiles {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\t/**\n\t * Number of columns between 1-4\n\t */\n\t@Prop() readonly columns: number = 3\n\t/**\n\t * Tiles border\n\t */\n\t@Prop({ attribute: 'no-border' }) readonly noBorder: boolean = false\n\n\t@Element() host: HTMLGovTilesElement\n\n\tget classNames(): string {\n\t\treturn prepareClasses([TilesClass.root, this.columns && TilesClass.root + '--x' + this.columns])\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(this.classNames)}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

package/dist/esm/gov-toast.entry.js

@@ -61,7 +61,7 @@ const GovToast = class {
     }
   }
   render() {
-    return (h(Host, { class: this.h.classes([ToastClass.root, 'gov-box-shadow--m']), "data-toast-id": this.toastId, gravity: this.gravity, position: this.position, variant: this.variant, type: this.type, style: { '--toast-duration': this.time + 'ms' } }, this.h.hasSlot('icon') && (h("span", { class: ToastClass.icon }, h("slot", { name: "icon" }))), h("div", { class: ToastClass.content, "aria-live": "polite", role: "status" }, h("slot", null)), h("div", { class: ToastClass.close }, h("gov-button", { size: "s", "wcag-label": this.wcagCloseLabel, variant: this.isSolid ? this.variant : 'secondary', inverse: this.isSolid, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, this.closeLabel ? this.closeLabel : h("gov-icon", { name: "cross" }))), h("div", { class: ToastClass.timer })));
+    return (h(Host, { class: this.h.classes([ToastClass.root, 'gov-box-shadow--m']), "data-toast-id": this.toastId, gravity: this.gravity, position: this.position, variant: this.variant, type: this.type, style: { '--toast-duration': this.time + 'ms' } }, this.h.hasSlot('icon') && (h("span", { class: ToastClass.icon }, h("slot", { name: "icon" }))), h("div", { class: ToastClass.content, "aria-live": "polite", role: "status" }, h("slot", null)), h("div", { class: ToastClass.close }, h("gov-button", { size: "s", "wcag-label": this.wcagCloseLabel, variant: this.isSolid ? this.variant : 'secondary', inverse: this.isSolid, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, this.closeLabel ? this.closeLabel : h("gov-icon", { name: "x-lg" }))), h("div", { class: ToastClass.timer })));
   }
   onCloseHandler() {
     this.destroy()

package/dist/esm/gov-toast.entry.js.map

@@ -1 +1 @@
-{"file":"gov-toast.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-toast/constants.ts","../../../packages/core/src/components/gov-toast/gov-toast.scss?tag=gov-toast","../../../packages/core/src/components/gov-toast/gov-toast.tsx"],"sourcesContent":["import { Variants, Types } from '../../core/constants/variants'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const ToastVariants = pick(Variants, ['SUCCESS', 'WARNING', 'ERROR', 'SECONDARY', 'PRIMARY'])\nexport type ToastVariantType = `${ValueOf<typeof ToastVariants>}`\n\nexport const ToastTypes = pick(Types, ['CLASSIC', 'SOLID'])\nexport type ToastTypesType = `${ValueOf<typeof ToastTypes>}`\n\nexport const ToastClass = {\n\troot: 'gov-toast',\n\thidden: 'gov-toast--hidden',\n\ticon: 'gov-toast__icon',\n\tcontent: 'gov-toast__content',\n\tclose: 'gov-toast__close',\n\ttimer: 'gov-toast__timer',\n}\n","/*\n *   Alert\n */\n\n@import \"./gov-toast-message-core.scss\";\n$class: \".gov-toast\";\n\n#{$class} {\n\t@include toast-message-core;\n\t@include z-index(\"toast\", 1);\n\tposition: relative;\n\tposition: fixed;\n\tmax-width: rem-calc(375);\n\tpadding-right: rem-calc(50);\n\topacity: 1;\n\ttransition: opacity 300ms ease-in-out;\n\t&__content {\n\t\tpadding-right: 0;\n\t}\n\t&__close {\n\t\tposition: absolute;\n\t\ttop: rem-calc(8);\n\t\tright: rem-calc(12);\n\t}\n\t&__timer {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tz-index: -1;\n\t}\n\n\t// VARIANTS\n\t&--hidden {\n\t\topacity: 0;\n\t}\n\t&[gravity=\"top\" i] {\n\t\ttop: rem-calc(16);\n\t}\n\t&[gravity=\"bottom\" i] {\n\t\tbottom: rem-calc(16);\n\t}\n\t&[position=\"left\" i] {\n\t\tleft: rem-calc(16);\n\t}\n\t&[position=\"center\" i] {\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t}\n\t&[position=\"right\" i] {\n\t\tright: rem-calc(16);\n\t}\n\t&[type=\"solid\" i] {\n\t\tborder: none;\n\t\tborder-radius: rem-calc(4);\n\t\toverflow: hidden;\n\t\tbox-shadow: none;\n\t\t&.is-initialized #{$class}__timer {\n\t\t\ttransform-origin: left;\n\t\t\tanimation: countdown linear forwards var(--toast-duration, 0);\n\t\t}\n\t}\n\n\t@each $variant, $definitions in $toast-message-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tborder-left-color: get(\"decor-color\", $definitions);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tcolor: get(\"decor-color\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[type=\"solid\" i] {\n\t\t\t\tbackground-color: get(\"background\", $definitions);\n\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__icon {\n\t\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t&__timer {\n\t\t\t\t\t\tbackground-color: get(\"timer-background\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t&__content {\n\t\t\tpadding-right: rem-calc(32);\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch, Method } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { ToastClass, ToastTypesType, ToastVariants } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { ToastVariantType } from './constants'\nimport { createID } from '../../utils/string.utils'\n\n@Component({\n\ttag: 'gov-toast',\n\tstyleUrl: 'gov-toast.scss',\n})\nexport class GovToast {\n\tprivate h: GovHost\n\tprivate timeout\n\tprivate readonly toastId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.toastId = createID('GovToast')\n\t}\n\n\t@Element() host: HTMLGovToastElement\n\t/**\n\t * Style variation of the toast message.\n\t */\n\t@Prop() readonly variant?: ToastVariantType = 'primary'\n\n\t/**\n\t * Toast’s gravity\n\t */\n\t@Prop() readonly gravity: 'top' | 'bottom' = 'top'\n\t/**\n\t * Toast’s position\n\t */\n\t@Prop() readonly position: 'left' | 'center' | 'right' = 'right'\n\t/**\n\t * Toast type\n\t */\n\t@Prop() readonly type?: ToastTypesType = 'classic'\n\t/**\n\t * Number of milliseconds to wait before Toast disappear\n\t */\n\t@Prop() readonly time: number = 0\n\t/**\n\t * Closing button texting instead of icons\n\t */\n\t@Prop({ attribute: 'close-label' }) readonly closeLabel: string\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<string>\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(ToastVariants, newValue, ToastClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.runTimer()\n\t}\n\n\tcomponentDidLoad() {\n\t\tconst existedToasts = document.querySelectorAll(`gov-toast[gravity=\"${this.gravity}\"][position=\"${this.position}\"]:not([data-toast-id=\"${this.toastId}\"])`)\n\t\tif (existedToasts.length > 0) {\n\t\t\tArray.from(existedToasts).map((toast: HTMLGovToastElement) => toast.destroy().then())\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tclearTimeout(this.timeout)\n\t}\n\n\tprivate runTimer() {\n\t\tif (this.isSolid) {\n\t\t\tthis.host.classList.add('is-initialized')\n\t\t}\n\t\tif (this.isTimer) {\n\t\t\tthis.timeout = setTimeout(() => {\n\t\t\t\tthis.host.classList.add(ToastClass.hidden)\n\t\t\t\tsetTimeout(this.destroy.bind(this), 600)\n\t\t\t}, this.time)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([ToastClass.root, 'gov-box-shadow--m'])}\n\t\t\t\tdata-toast-id={this.toastId}\n\t\t\t\tgravity={this.gravity}\n\t\t\t\tposition={this.position}\n\t\t\t\tvariant={this.variant}\n\t\t\t\ttype={this.type}\n\t\t\t\tstyle={{ '--toast-duration': this.time + 'ms' }}\n\t\t\t>\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<span class={ToastClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\n\t\t\t\t<div class={ToastClass.content} aria-live=\"polite\" role=\"status\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\n\t\t\t\t<div class={ToastClass.close}>\n\t\t\t\t\t<gov-button\n\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\twcag-label={this.wcagCloseLabel}\n\t\t\t\t\t\tvariant={this.isSolid ? this.variant : 'secondary'}\n\t\t\t\t\t\tinverse={this.isSolid}\n\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.closeLabel ? this.closeLabel : <gov-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<div class={ToastClass.timer}></div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onCloseHandler(): void {\n\t\tthis.destroy()\n\t\t\t.then(() => this.govClose.emit(this.toastId))\n\t\t\t.catch()\n\t}\n\n\tget isSolid(): boolean {\n\t\treturn this.type === 'solid'\n\t}\n\n\tget isTimer(): boolean {\n\t\treturn Number.isInteger(this.time) && this.time > 0\n\t}\n\n\t/**\n\t * Remove toast from dom\n\t */\n\t@Method()\n\tasync destroy(): Promise<void> {\n\t\tclearTimeout(this.timeout)\n\t\tconst toast = document.querySelector(`[data-toast-id=\"${this.toastId}\"]`)\n\t\tif (toast) {\n\t\t\ttoast.classList.add(ToastClass.hidden)\n\t\t\tif (typeof toast.remove === 'function') {\n\t\t\t\ttoast.remove()\n\t\t\t}\n\t\t}\n\t}\n}\n"],"version":3}
+{"file":"gov-toast.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-toast/constants.ts","../../../packages/core/src/components/gov-toast/gov-toast.scss?tag=gov-toast","../../../packages/core/src/components/gov-toast/gov-toast.tsx"],"sourcesContent":["import { Variants, Types } from '../../core/constants/variants'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const ToastVariants = pick(Variants, ['SUCCESS', 'WARNING', 'ERROR', 'SECONDARY', 'PRIMARY'])\nexport type ToastVariantType = `${ValueOf<typeof ToastVariants>}`\n\nexport const ToastTypes = pick(Types, ['CLASSIC', 'SOLID'])\nexport type ToastTypesType = `${ValueOf<typeof ToastTypes>}`\n\nexport const ToastClass = {\n\troot: 'gov-toast',\n\thidden: 'gov-toast--hidden',\n\ticon: 'gov-toast__icon',\n\tcontent: 'gov-toast__content',\n\tclose: 'gov-toast__close',\n\ttimer: 'gov-toast__timer',\n}\n","/*\n *   Alert\n */\n\n@import \"./gov-toast-message-core.scss\";\n$class: \".gov-toast\";\n\n#{$class} {\n\t@include toast-message-core;\n\t@include z-index(\"toast\", 1);\n\tposition: relative;\n\tposition: fixed;\n\tmax-width: rem-calc(375);\n\tpadding-right: rem-calc(50);\n\topacity: 1;\n\ttransition: opacity 300ms ease-in-out;\n\t&__content {\n\t\tpadding-right: 0;\n\t}\n\t&__close {\n\t\tposition: absolute;\n\t\ttop: rem-calc(8);\n\t\tright: rem-calc(12);\n\t}\n\t&__timer {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tz-index: -1;\n\t}\n\n\t// VARIANTS\n\t&--hidden {\n\t\topacity: 0;\n\t}\n\t&[gravity=\"top\" i] {\n\t\ttop: rem-calc(16);\n\t}\n\t&[gravity=\"bottom\" i] {\n\t\tbottom: rem-calc(16);\n\t}\n\t&[position=\"left\" i] {\n\t\tleft: rem-calc(16);\n\t}\n\t&[position=\"center\" i] {\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t}\n\t&[position=\"right\" i] {\n\t\tright: rem-calc(16);\n\t}\n\t&[type=\"solid\" i] {\n\t\tborder: none;\n\t\tborder-radius: rem-calc(4);\n\t\toverflow: hidden;\n\t\tbox-shadow: none;\n\t\t&.is-initialized #{$class}__timer {\n\t\t\ttransform-origin: left;\n\t\t\tanimation: countdown linear forwards var(--toast-duration, 0);\n\t\t}\n\t}\n\n\t@each $variant, $definitions in $toast-message-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tborder-left-color: get(\"decor-color\", $definitions);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tcolor: get(\"decor-color\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&[type=\"solid\" i] {\n\t\t\t\tbackground-color: get(\"background\", $definitions);\n\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t#{$class} {\n\t\t\t\t\t&__icon {\n\t\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t\t&__timer {\n\t\t\t\t\t\tbackground-color: get(\"timer-background\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t&__content {\n\t\t\tpadding-right: rem-calc(32);\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch, Method } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { ToastClass, ToastTypesType, ToastVariants } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { ToastVariantType } from './constants'\nimport { createID } from '../../utils/string.utils'\n\n@Component({\n\ttag: 'gov-toast',\n\tstyleUrl: 'gov-toast.scss',\n})\nexport class GovToast {\n\tprivate h: GovHost\n\tprivate timeout\n\tprivate readonly toastId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.toastId = createID('GovToast')\n\t}\n\n\t@Element() host: HTMLGovToastElement\n\t/**\n\t * Style variation of the toast message.\n\t */\n\t@Prop() readonly variant?: ToastVariantType = 'primary'\n\n\t/**\n\t * Toast’s gravity\n\t */\n\t@Prop() readonly gravity: 'top' | 'bottom' = 'top'\n\t/**\n\t * Toast’s position\n\t */\n\t@Prop() readonly position: 'left' | 'center' | 'right' = 'right'\n\t/**\n\t * Toast type\n\t */\n\t@Prop() readonly type?: ToastTypesType = 'classic'\n\t/**\n\t * Number of milliseconds to wait before Toast disappear\n\t */\n\t@Prop() readonly time: number = 0\n\t/**\n\t * Closing button texting instead of icons\n\t */\n\t@Prop({ attribute: 'close-label' }) readonly closeLabel: string\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<string>\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(ToastVariants, newValue, ToastClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.runTimer()\n\t}\n\n\tcomponentDidLoad() {\n\t\tconst existedToasts = document.querySelectorAll(`gov-toast[gravity=\"${this.gravity}\"][position=\"${this.position}\"]:not([data-toast-id=\"${this.toastId}\"])`)\n\t\tif (existedToasts.length > 0) {\n\t\t\tArray.from(existedToasts).map((toast: HTMLGovToastElement) => toast.destroy().then())\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tclearTimeout(this.timeout)\n\t}\n\n\tprivate runTimer() {\n\t\tif (this.isSolid) {\n\t\t\tthis.host.classList.add('is-initialized')\n\t\t}\n\t\tif (this.isTimer) {\n\t\t\tthis.timeout = setTimeout(() => {\n\t\t\t\tthis.host.classList.add(ToastClass.hidden)\n\t\t\t\tsetTimeout(this.destroy.bind(this), 600)\n\t\t\t}, this.time)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes([ToastClass.root, 'gov-box-shadow--m'])}\n\t\t\t\tdata-toast-id={this.toastId}\n\t\t\t\tgravity={this.gravity}\n\t\t\t\tposition={this.position}\n\t\t\t\tvariant={this.variant}\n\t\t\t\ttype={this.type}\n\t\t\t\tstyle={{ '--toast-duration': this.time + 'ms' }}\n\t\t\t>\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<span class={ToastClass.icon}>\n\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\n\t\t\t\t<div class={ToastClass.content} aria-live=\"polite\" role=\"status\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\n\t\t\t\t<div class={ToastClass.close}>\n\t\t\t\t\t<gov-button\n\t\t\t\t\t\tsize=\"s\"\n\t\t\t\t\t\twcag-label={this.wcagCloseLabel}\n\t\t\t\t\t\tvariant={this.isSolid ? this.variant : 'secondary'}\n\t\t\t\t\t\tinverse={this.isSolid}\n\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.closeLabel ? this.closeLabel : <gov-icon name=\"x-lg\"></gov-icon>}\n\t\t\t\t\t</gov-button>\n\t\t\t\t</div>\n\n\t\t\t\t<div class={ToastClass.timer}></div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onCloseHandler(): void {\n\t\tthis.destroy()\n\t\t\t.then(() => this.govClose.emit(this.toastId))\n\t\t\t.catch()\n\t}\n\n\tget isSolid(): boolean {\n\t\treturn this.type === 'solid'\n\t}\n\n\tget isTimer(): boolean {\n\t\treturn Number.isInteger(this.time) && this.time > 0\n\t}\n\n\t/**\n\t * Remove toast from dom\n\t */\n\t@Method()\n\tasync destroy(): Promise<void> {\n\t\tclearTimeout(this.timeout)\n\t\tconst toast = document.querySelector(`[data-toast-id=\"${this.toastId}\"]`)\n\t\tif (toast) {\n\t\t\ttoast.classList.add(ToastClass.hidden)\n\t\t\tif (typeof toast.remove === 'function') {\n\t\t\t\ttoast.remove()\n\t\t\t}\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/esm/gov-wizzard-item.entry.js

@@ -62,7 +62,7 @@ const GovWizzardItem = class {
     const triggerId = this.identifier || this.triggerId;
     const LabelTag = this.labelTag;
     const Tag = this.collapsible ? Tags.BUTTON : Tags.DIV;
-    const label = (h(LabelTag, { class: WizzardItemClass.title }, this.h.hasSlot('prefix') && (h("span", { class: WizzardItemClass.prefix }, h("slot", { name: "prefix" }))), h("span", { class: WizzardItemClass.name }, h("span", { class: WizzardItemClass.label }, h("span", null, this.label), this.collapsible && h("gov-icon", { class: WizzardItemClass.arrow, name: "arrow-down" })), this.annotation && h("span", { class: WizzardItemClass.annot }, this.annotation))));
+    const label = (h(LabelTag, { class: WizzardItemClass.title }, this.h.hasSlot('prefix') && (h("span", { class: WizzardItemClass.prefix }, h("slot", { name: "prefix" }))), h("span", { class: WizzardItemClass.name }, h("span", { class: WizzardItemClass.label }, h("span", null, this.label), this.collapsible && h("gov-icon", { class: WizzardItemClass.arrow, name: "chevron-down" })), this.annotation && h("span", { class: WizzardItemClass.annot }, this.annotation))));
     return (h(Host, { class: this.h.classes(WizzardItemClass.root), variant: this.variant, size: this.size, role: "listitem", collapsible: this.collapsible }, this.collapsible ? (h(Tag, { id: triggerId, class: WizzardItemClass.header, "aria-expanded": booleanString(this.isExpandedState), "aria-controls": this.contentId, disabled: this.disabled, "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: () => (this.collapsible ? this.toggle() : false) }, label)) : (h("div", { class: WizzardItemClass.header }, label)), this.collapsible ? (h("div", { class: WizzardItemClass.content, id: this.contentId, "aria-hidden": booleanString(!this.isExpandedState), hidden: !this.isExpandedState, "aria-labelledby": triggerId }, h("slot", null))) : (h("div", { class: WizzardItemClass.content, "aria-hidden": booleanString(!this.isExpandedState), hidden: !this.isExpandedState }, h("slot", null)))));
   }
   /**