@gov-design-system-ce/components 0.0.1

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

@@ -0,0 +1 @@
+{"file":"gov-pagination.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-pagination/constants.ts","../../../packages/core/src/components/gov-pagination/pagination.ts","../../../packages/core/src/components/gov-pagination/gov-pagination.scss?tag=gov-pagination","../../../packages/core/src/components/gov-pagination/gov-pagination.tsx"],"sourcesContent":["export const PaginationClass = {\n\troot: \"gov-pagination\",\n\tlist: \"gov-pagination__list\",\n\titem: \"gov-pagination__item\",\n\titemArrow: \"gov-pagination__item--arrow\",\n\titemSelect: \"gov-pagination__item--select\",\n\tinner: \"gov-pagination__inner\",\n}","export interface Pagination {\n\ttotalItems: number,\n\tcurrentPage: number,\n\tpageSize: number,\n\ttotalPages: number,\n\tstartPage: number,\n\tendPage: number,\n\tstartIndex: number,\n\tendIndex: number,\n\tpages: number[],\n}\n\nexport function paginate(\n\ttotalItems: number,\n\tcurrentPage: number = 1,\n\tpageSize: number = 10,\n\tmaxPages: number = 10,\n): Pagination {\n\t// calculate total pages\n\tlet totalPages = Math.ceil(totalItems / pageSize)\n\n\t// ensure current page isn't out of range\n\tif (currentPage < 1) {\n\t\tcurrentPage = 1\n\t} else if (currentPage > totalPages) {\n\t\tcurrentPage = totalPages\n\t}\n\n\tlet startPage: number, endPage: number\n\tif (totalPages <= maxPages) {\n\t\t// total pages less than max so show all pages\n\t\tstartPage = 1\n\t\tendPage = totalPages\n\t} else {\n\t\t// total pages more than max so calculate start and end pages\n\t\tlet maxPagesBeforeCurrentPage = Math.floor(maxPages / 2)\n\t\tlet maxPagesAfterCurrentPage = Math.ceil(maxPages / 2) - 1\n\t\tif (currentPage <= maxPagesBeforeCurrentPage) {\n\t\t\t// current page near the start\n\t\t\tstartPage = 1\n\t\t\tendPage = maxPages\n\t\t} else if (currentPage + maxPagesAfterCurrentPage >= totalPages) {\n\t\t\t// current page near the end\n\t\t\tstartPage = totalPages - maxPages + 1\n\t\t\tendPage = totalPages\n\t\t} else {\n\t\t\t// current page somewhere in the middle\n\t\t\tstartPage = currentPage - maxPagesBeforeCurrentPage\n\t\t\tendPage = currentPage + maxPagesAfterCurrentPage\n\t\t}\n\t}\n\n\t// calculate start and end item indexes\n\tlet startIndex = (currentPage - 1) * pageSize\n\tlet endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1)\n\n\t// create an array of pages to ng-repeat in the pager control\n\tlet pages = Array.from(Array((endPage + 1) - startPage).keys()).map(i => startPage + i)\n\n\t// return object with all pager properties required by the view\n\treturn {\n\t\ttotalItems: totalItems,\n\t\tcurrentPage: currentPage,\n\t\tpageSize: pageSize,\n\t\ttotalPages: totalPages,\n\t\tstartPage: startPage,\n\t\tendPage: endPage,\n\t\tstartIndex: startIndex,\n\t\tendIndex: endIndex,\n\t\tpages: pages,\n\t}\n}\n","/*\n *   Pagination\n */\n\n$class: \".gov-pagination\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n\t&__list {\n\t\t@extend %reset-ul;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tfont-weight: bold;\n\t\ttext-align: center;\n\t}\n\t&__list &__item {\n\t\t@extend %reset-ul-li;\n\t\tdisplay: none;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tmin-width: rem-calc(41);\n\t\tmin-height: rem-calc(48);\n\t\tmargin: 0;\n\t\tborder-radius: $border-radius;\n\t\toverflow: hidden;\n\t\t.gov-icon {\n\t\t\twidth: rem-calc(12);\n\t\t\theight: rem-calc(12);\n\t\t\tmargin: 0;\n\t\t}\n\t\t&--arrow {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t&--select {\n\t\t\tz-index: 1;\n\t\t\tdisplay: flex;\n\t\t\toverflow: visible;\n\t\t}\n\t}\n\t&__inner {\n\t\t@include typography($font-size-s);\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\talign-self: stretch;\n\t\twidth: 100%;\n\t\tpadding: rem-calc(13 16 14);\n\t\tcolor: $pagination-color;\n\t\tfont-weight: inherit;\n\t\ttext-decoration: none;\n\t}\n\n\t// STATES\n\t&__item.is-active &__inner {\n\t\tbackground-color: $pagination-bg-active;\n\t\tcolor: $pagination-color-active;\n\t}\n\n\t@at-root & {\n\t\tbutton#{&}__inner,\n\t\ta#{&}__inner {\n\t\t\t@include button-core();\n\t\t\ttransition: background-color $t, color $t;\n\t\t\t@include hover() {\n\t\t\t\tbackground-color: $pagination-bg-active;\n\t\t\t\tcolor: $pagination-color-active;\n\t\t\t}\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: md) {\n\t\t&__list &__item {\n\t\t\tdisplay: flex;\n\t\t\t&--select {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\"\nimport { PaginationClass } from \"./constants\"\nimport { prepareClasses } from \"../../helpers/Dom/template\"\nimport { paginate, Pagination } from \"./pagination\"\nimport { toBoolAttrIfDefined, toBoolAttr } from \"../../helpers/Dom/template\"\nimport { validateWcagLabel, validateWcagProp } from \"../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\nimport { createID } from \"../../utils/string.utils\"\n\n@Component({\n\ttag: \"gov-pagination\",\n\tstyleUrl: \"gov-pagination.scss\",\n})\nexport class GovPagination {\n\t@Element() readonly host: HTMLGovPaginationElement\n\n\tprivate readonly pageSelectId: string\n\n\tconstructor() {\n\t\tthis.pageSelectId = createID(\"GovPageSelect\")\n\t}\n\n\t/**\n\t * Currently displayed page\n\t */\n\t@Prop() readonly current: number = 1\n\t@Prop() readonly total: number\n\t/**\n\t * Maximum number of entries per page\n\t */\n\t@Prop({ attribute: \"page-size\" }) readonly pageSize: number = 10\n\t/**\n\t * Maximum pages displayed for selection\n\t */\n\t@Prop({ attribute: \"max-pages\" }) readonly maxPages: number = 5\n\t/**\n\t * Setting a link to redirect to a given page.\n\t * The {PAGE} wildcard can be used in the link to replace the page number.\n\t * Note that in the case of paging through a link, it is always necessary to send to the component the current page where the user is.\n\t */\n\t@Prop() readonly link: string\n\t/**\n\t * Adds accessible label for the pagination that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\t/**\n\t * Indicates the id of a component that labels the pagination.\n\t */\n\t@Prop({ attribute: \"wcag-labelded-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Adds accessible label for the page select\n\t */\n\t@Prop({ attribute: \"wcag-select-label\" }) readonly wcagSelectLabel: string = \"Vybrat stranu\"\n\t/**\n\t * Adds accessible label for the page item\n\t */\n\t@Prop({ attribute: \"wcag-page-label\" }) readonly wcagPageLabel: string = \"Strana\"\n\t/**\n\t * Event called when changing the page with the current setting of the whole paging\n\t */\n\t@Event({ eventName: \"gov-page\" }) govPage: EventEmitter<Pagination>\n\n\t@State() pagination: Pagination\n\n\tcomponentWillLoad() {\n\t\tthis.recalculatePagination(this.current)\n\t\tconsole.log(this.pagination)\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\tprivate recalculatePagination(currentPage: number) {\n\t\tthis.pagination = paginate(this.total, currentPage, this.pageSize, this.maxPages)\n\t}\n\n\tprivate isActivePageClass(originalClass: string, page: number) {\n\t\tif (this.pagination.currentPage === page) {\n\t\t\treturn originalClass + \" is-active\"\n\t\t} else {\n\t\t\treturn originalClass\n\t\t}\n\t}\n\n\trender() {\n\t\tconst pageResolver = (page: number, content: any) => {\n\t\t\tconst isDisabled = page === -1\n\t\t\tconst ariaCurrent = toBoolAttrIfDefined(this.pagination.currentPage === page ? true : undefined)\n\t\t\tif (this.link) {\n\t\t\t\tconst Tag = isDisabled ? \"span\" : \"a\"\n\t\t\t\treturn (\n\t\t\t\t\t<Tag\n\t\t\t\t\t\thref={isDisabled ? undefined : String(this.link).replace('{PAGE}', String(page))}\n\t\t\t\t\t\taria-hidden={toBoolAttrIfDefined(isDisabled ? true : undefined)}\n\t\t\t\t\t\taria-label={this.wcagPageLabel + \" \" + page}\n\t\t\t\t\t\taria-current={ariaCurrent}\n\t\t\t\t\t\tclass={PaginationClass.inner}>\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</Tag>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<button\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tonClick={() => this.onClickHandler(page)}\n\t\t\t\t\taria-disabled={toBoolAttr(isDisabled)}\n\t\t\t\t\taria-label={this.wcagPageLabel + \" \" + page}\n\t\t\t\t\taria-current={ariaCurrent}\n\t\t\t\t\tclass={PaginationClass.inner}>\n\t\t\t\t\t{content}\n\t\t\t\t</button>\n\t\t\t)\n\t\t}\n\t\treturn (\n\t\t\t<Host class={PaginationClass.root}>\n\t\t\t\t<nav aria-label={this.wcagLabel} aria-labelledby={this.wcagLabelledBy}>\n\t\t\t\t\t<ul class={PaginationClass.list}>\n\t\t\t\t\t\t<li class={prepareClasses([PaginationClass.item, PaginationClass.itemArrow])}>\n\t\t\t\t\t\t\t{pageResolver(this.pagination.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1,\n\t\t\t\t\t\t\t\t<gov-icon name=\"double-arrow-left\"></gov-icon>)}\n\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t<li class={prepareClasses([PaginationClass.item, PaginationClass.itemArrow])}>\n\t\t\t\t\t\t\t{pageResolver(this.pagination.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1,\n\t\t\t\t\t\t\t\t<gov-icon name=\"arrow-left\"></gov-icon>)}\n\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t<li class={prepareClasses([PaginationClass.item, PaginationClass.itemSelect])}>\n\t\t\t\t\t\t\t<span class={PaginationClass.inner}>\n\t\t\t\t\t\t\t\t<span id={this.pageSelectId} hidden>{this.wcagSelectLabel}</span>\n\t\t\t\t\t\t\t\t<gov-form-select size=\"l\" wcag-labelded-by={this.pageSelectId}>\n\t\t\t\t\t\t\t\t\t{this.pagination.pages.map((page) => (\n\t\t\t\t\t\t\t\t\t\t<option value={page} selected={this.pagination.currentPage === page}>{page}</option>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</gov-form-select>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t{this.pagination.pages.map((page) => (\n\t\t\t\t\t\t\t<li class={this.isActivePageClass(PaginationClass.item, page)}>\n\t\t\t\t\t\t\t\t{pageResolver(page, page)}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<li class={PaginationClass.item}>\n\t\t\t\t\t\t\t<span class={PaginationClass.inner}>\n\t\t\t\t\t\t\t\t&hellip;\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t<li class={prepareClasses([PaginationClass.item, PaginationClass.itemArrow])}>\n\t\t\t\t\t\t\t{pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.currentPage + 1 : -1,\n\t\t\t\t\t\t\t\t<gov-icon name=\"arrow-right\"></gov-icon>)}\n\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t<li class={prepareClasses([PaginationClass.item, PaginationClass.itemArrow])}>\n\t\t\t\t\t\t\t{pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.totalPages : -1,\n\t\t\t\t\t\t\t\t<gov-icon name=\"double-arrow-right\"></gov-icon>)}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onClickHandler(page: number): void {\n\t\tthis.recalculatePagination(page)\n\t\tthis.govPage.emit({ ...this.pagination })\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.wcagPageLabel, \"wcag-page-label\", PaginationClass.root)\n\t\tvalidateWcagProp(this.wcagSelectLabel, \"wcag-select-label\", PaginationClass.root)\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, PaginationClass.root)\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,95 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e498b7fa.js';
+import { c as createID } from './string.utils-858e1565.js';
+import { c as canValidateWcagOnRender, a as validateWcagRef } from './win-fe20a39d.js';
+import { M as ModalClass } from './constants-ba13b28f.js';
+import { d as delay } from './utils-43789c71.js';
+import { g as govHost, a as toBoolAttr } from './template-c616c14f.js';
+import { a as govErrorLog } from './gov.log-3b6eb67c.js';
+
+const govPromptCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.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-secondary-100));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 GovPrompt = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.govClose = createEvent(this, "gov-close", 7);
+    this.open = false;
+    this.label = undefined;
+    this.role = "dialog";
+    this.labelTag = "h2";
+    this.wcaglabelledBy = undefined;
+    this.wcagDescribedBy = undefined;
+    this.wcagCloseLabel = undefined;
+    this.wcagCloseLabelledBy = undefined;
+    this.h = govHost(this.host);
+    this.labelId = createID("GovPromptLabel");
+    this.contentId = createID("GovPromptContent");
+  }
+  validateLabelTag(newValue) {
+    const validTags = ["h1", "h2", "h3", "h4", "h5", "h6"];
+    if (newValue) {
+      if (!validTags.includes(newValue)) {
+        govErrorLog(`[${ModalClass.root}]: Tag ${newValue} is not allowed.`);
+      }
+    }
+  }
+  showModal() {
+    this.open = true;
+    document.body.classList.add(ModalClass.bodyFix);
+  }
+  hideModal() {
+    this.open = false;
+    document.body.classList.remove(ModalClass.bodyFix);
+  }
+  async componentWillRender() {
+    if (this.open) {
+      this.showModal();
+    }
+    else {
+      this.hideModal();
+    }
+  }
+  async componentDidRender() {
+    if (canValidateWcagOnRender()) {
+      await delay(500);
+      await this.validateWcag();
+    }
+  }
+  render() {
+    const LabelTag = this.labelTag;
+    return (h(Host, { class: 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("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) })));
+  }
+  onCloseHandler(e) {
+    e.stopPropagation();
+    this.hideModal();
+    this.govClose.emit(e);
+  }
+  /**
+   * Showing the modal
+   */
+  async show() {
+    this.showModal();
+  }
+  /**
+   * Hidding the modal
+   */
+  async hide() {
+    this.hideModal();
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    validateWcagRef(this.wcaglabelledBy, 'aria-labelledby', ModalClass.root);
+    validateWcagRef(this.wcagDescribedBy, 'aria-describedby', ModalClass.root);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "labelTag": ["validateLabelTag"]
+  }; }
+};
+GovPrompt.style = govPromptCss;
+
+export { GovPrompt as gov_prompt };
+
+//# sourceMappingURL=gov-prompt.entry.js.map

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

@@ -0,0 +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.d'\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\n\t/**\n\t * Attribute for modal window display\n\t */\n\t@Prop() open: boolean = 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: string = \"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\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={ModalClass.rootPrompt} open={this.open}>\n\t\t\t\t<dialog class={ModalClass.dialog}\n\t\t\t\t\t hidden={!this.open}\n\t\t\t\t\t tabindex=\"-1\"\n\t\t\t\t\t open={this.open}\n\t\t\t\t\t aria-modal=\"true\"\n\t\t\t\t\t aria-hidden={toBoolAttr(!this.open)}\n\t\t\t\t\t aria-labelledby={this.wcaglabelledBy || this.labelId}\n\t\t\t\t\t aria-describedby={this.wcagDescribedBy || this.contentId}\n\t\t\t\t\t role={this.role}>\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}>{this.label}</LabelTag>\n\t\t\t\t\t\t\t}\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 visible={this.open}\n\t\t\t\t\t\t\t  wcag-label={this.wcagCloseLabel}\n\t\t\t\t\t\t\t  wcag-labelled-by={this.wcagCloseLabelledBy}\n\t\t\t\t\t\t\t  on-gov-click={this.onCloseHandler.bind(this)} />\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

@@ -0,0 +1,90 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e498b7fa.js';
+import { a as govErrorLog } from './gov.log-3b6eb67c.js';
+import { S as SideNavItemClass } from './constants-8729f0c0.js';
+import { g as govHost, p as prepareClasses, b as booleanString } from './template-c616c14f.js';
+
+const govSideNavItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-side-nav-item{position:relative;display:block;width:100%}.gov-side-nav-item__header{display:flex;align-items:center;border-bottom:0.0625rem solid var(--gov-color-secondary-500)}.gov-side-nav-item__name{display:inline-flex;vertical-align:middle;justify-content:center;align-items:center;border:0;background-color:transparent;text-align:center;text-decoration:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing);display:flex;gap:1rem;flex:1 1 auto;justify-content:flex-start;padding:0.75rem 1rem 0.75rem 0.5rem;color:var(--gov-color-secondary);text-align:left;transition:background-color 150ms}.gov-side-nav-item__name:focus{outline:none}.gov-side-nav-item__name:focus{outline:none}.gov-side-nav-item__name:focus-visible{border-radius:var(--gov-border-radius, 0.1875rem);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0}@media not all and (pointer: coarse){.gov-side-nav-item__name:hover{background:var(--gov-color-primary-200)}}button.gov-side-nav-item__name{padding-right:0 !important}.gov-side-nav-item__icon{flex:0 0 auto;width:1rem;height:1rem}.gov-side-nav-item__icon .gov-icon{margin:0}.gov-side-nav-item__label{color:inherit}.gov-side-nav-item__badge{display:flex;flex:0 0 auto}.gov-side-nav-item__arrow{display:inline-flex;vertical-align:middle;justify-content:center;align-items:center;border:0;background-color:transparent;text-align:center;text-decoration:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:0 0 auto;align-self:stretch;width:3rem;margin-left:auto;color:var(--gov-color-primary);transition:background-color 150ms}.gov-side-nav-item__arrow:focus{outline:none}.gov-side-nav-item__arrow:focus{outline:none}.gov-side-nav-item__arrow:focus-visible{border-radius:var(--gov-border-radius, 0.1875rem);outline:var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);outline-offset:0}.gov-side-nav-item__arrow .gov-icon{width:0.75rem;height:0.75rem}@media not all and (pointer: coarse){.gov-side-nav-item__arrow:hover{background:var(--gov-color-primary-200)}}.gov-side-nav-item__content{display:none}.gov-side-nav-item--w-icon .gov-side-nav-item__label{margin-left:2rem}.gov-side-nav-item--w-icon .gov-side-nav-item__icon+.gov-side-nav-item__label{margin-left:0}.gov-side-nav-item .gov-side-nav-item .gov-side-nav-item__header{border:none !important}.gov-side-nav-item .gov-side-nav-item .gov-side-nav-item__name{font-weight:var(--gov-text-s-font-weight);font-size:var(--gov-text-s-font-size);line-height:var(--gov-text-s-line-height);letter-spacing:var(--gov-text-s-letter-spacing);padding:0.625rem 0.5rem;font-weight:bold}.gov-side-nav-item .gov-side-nav-item[aria-expanded=\"\"],.gov-side-nav-item .gov-side-nav-item[aria-expanded=true i],.gov-side-nav-item .gov-side-nav-item[aria-expanded=\"1\"]{background:var(--gov-color-secondary-300)}.gov-side-nav-item .gov-side-nav-item[aria-expanded=\"\"][inverse=\"\"],.gov-side-nav-item .gov-side-nav-item[aria-expanded=\"\"][inverse=true i],.gov-side-nav-item .gov-side-nav-item[aria-expanded=\"\"][inverse=\"1\"],.gov-side-nav-item .gov-side-nav-item[aria-expanded=true i][inverse=\"\"],.gov-side-nav-item .gov-side-nav-item[aria-expanded=true i][inverse=true i],.gov-side-nav-item .gov-side-nav-item[aria-expanded=true i][inverse=\"1\"],.gov-side-nav-item .gov-side-nav-item[aria-expanded=\"1\"][inverse=\"\"],.gov-side-nav-item .gov-side-nav-item[aria-expanded=\"1\"][inverse=true i],.gov-side-nav-item .gov-side-nav-item[aria-expanded=\"1\"][inverse=\"1\"]{background:var(--gov-color-secondary-100)}.gov-side-nav-item .gov-side-nav-item .gov-side-nav-item .gov-side-nav-item__name{gap:0.75rem;font-weight:inherit}.gov-side-nav-item[compact=\"\"] .gov-side-nav-item__header,.gov-side-nav-item[compact=true i] .gov-side-nav-item__header,.gov-side-nav-item[compact=\"1\"] .gov-side-nav-item__header{border-bottom:none}.gov-side-nav-item[aria-expanded=\"\"]>.gov-side-nav-item__header .gov-side-nav-item__arrow .gov-icon,.gov-side-nav-item[aria-expanded=true i]>.gov-side-nav-item__header .gov-side-nav-item__arrow .gov-icon,.gov-side-nav-item[aria-expanded=\"1\"]>.gov-side-nav-item__header .gov-side-nav-item__arrow .gov-icon{transform:scale(-1)}.gov-side-nav-item[aria-expanded=\"\"]>.gov-side-nav-item__content,.gov-side-nav-item[aria-expanded=true i]>.gov-side-nav-item__content,.gov-side-nav-item[aria-expanded=\"1\"]>.gov-side-nav-item__content{display:block}";
+
+const GovSideNavItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.govChange = createEvent(this, "gov-change", 7);
+    this.isExpandedState = undefined;
+    this.inverse = false;
+    this.compact = false;
+    this.identifier = undefined;
+    this.count = false;
+    this.label = undefined;
+    this.disabled = false;
+    this.href = undefined;
+    this.isExpanded = false;
+    this.h = govHost(this.host);
+  }
+  validateLabel(newValue) {
+    if (!newValue) {
+      govErrorLog(`[${SideNavItemClass.root}]: Parameter label is required.`);
+    }
+  }
+  emmitChange() {
+    this.govChange.emit({ open: this.isExpandedState, element: this.host });
+  }
+  componentWillLoad() {
+    this.isExpandedState = this.isExpanded;
+    this.validateLabel(this.label);
+  }
+  get classNames() {
+    const { h } = this;
+    return prepareClasses([
+      SideNavItemClass.root,
+      h.hasSlot("icon") && SideNavItemClass.rootWithIcon,
+    ]);
+  }
+  render() {
+    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: "xs", 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))));
+  }
+  /**
+   * Opening the sidenav
+   */
+  async open() {
+    this.isExpandedState = true;
+    this.emmitChange();
+  }
+  /**
+   * Closing the sidenav
+   */
+  async close() {
+    this.isExpandedState = false;
+    this.emmitChange();
+  }
+  /**
+   * sidenav switch
+   */
+  async toggle() {
+    this.isExpandedState = !this.isExpandedState;
+    this.emmitChange();
+  }
+  /**
+   * Returns the current state of the component
+   */
+  async currentState() {
+    return this.isExpandedState;
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "label": ["validateLabel"]
+  }; }
+};
+GovSideNavItem.style = govSideNavItemCss;
+
+export { GovSideNavItem as gov_side_nav_item };
+
+//# sourceMappingURL=gov-side-nav-item.entry.js.map

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

@@ -0,0 +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\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n\t&__header {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tborder-bottom: rem-calc(1) solid color(\"secondary.500\");\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: color(\"secondary\");\n\t\ttext-align: left;\n\t\ttransition: background-color $t;\n\t\t@include hover() {\n\t\t\tbackground: color(\"primary.200\");\n\t\t}\n\t\t@at-root button#{&} {\n\t\t\tpadding-right: 0 !important;\n\t\t}\n\t}\n\t&__icon {\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}\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: color(\"primary\");\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: color(\"primary.200\");\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: color(\"secondary.300\");\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tbackground: color(\"secondary.100\");\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.d\"\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([\n\t\t\tSideNavItemClass.root,\n\t\t\th.hasSlot(\"icon\") && SideNavItemClass.rootWithIcon,\n\t\t])\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}\n\t\t\t\t\t\t\thref={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}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</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=\"xs\" inverse={this.inverse}>\n\t\t\t\t\t\t\t\t\t\t{/* // TODO: správný počet zanořených childů */}\n\t\t\t\t\t\t\t\t\t\t3\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\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} \n\t\t\t\t\t\t\t\ttype=\"button\" \n\t\t\t\t\t\t\t\tonClick={() => 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}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</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\t\t\t\t}\n\t\t\t\t\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}\n"],"version":3}

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

@@ -0,0 +1,52 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e498b7fa.js';
+import { S as SideNavItemClass, a as SideNavClass } from './constants-8729f0c0.js';
+import { c as canValidateWcagOnRender, v as validateWcagLabel } from './win-fe20a39d.js';
+import { d as delay } from './utils-43789c71.js';
+import { b as booleanString } from './template-c616c14f.js';
+import './gov.log-3b6eb67c.js';
+import './string.utils-858e1565.js';
+
+const govSideNavCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-side-nav{position:relative;display:block;width:100%}";
+
+const GovSideNav = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.govChange = createEvent(this, "gov-change", 7);
+    this.inverse = false;
+    this.compact = false;
+    this.wcagLabel = undefined;
+    this.wcagLabelledBy = undefined;
+  }
+  componentDidLoad() {
+    console.log(this.inverse);
+    this.host.querySelectorAll(SideNavItemClass.root).forEach((child) => {
+      child.setAttribute('inverse', booleanString(this.inverse));
+      child.setAttribute('compact', booleanString(this.compact));
+      child.addEventListener('gov-change', (e) => {
+        e.stopPropagation();
+        this.govChange.emit(e.detail);
+      });
+    });
+  }
+  async componentDidRender() {
+    if (canValidateWcagOnRender()) {
+      await delay(500);
+      await this.validateWcag();
+    }
+  }
+  render() {
+    return (h(Host, { class: SideNavClass.root, compact: this.compact, inverse: this.inverse, role: 'list', "arial-label": this.wcagLabel, "arial-labelledby": this.wcagLabelledBy }, h("slot", null)));
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    validateWcagLabel(this.wcagLabel, this.wcagLabelledBy, SideNavClass.root);
+  }
+  get host() { return getElement(this); }
+};
+GovSideNav.style = govSideNavCss;
+
+export { GovSideNav as gov_side_nav };
+
+//# sourceMappingURL=gov-side-nav.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-side-nav.entry.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,mMAAmM;;MCa5M,UAAU;;;;mBAMc,KAAK;mBAIL,KAAK;;;;EAczC,gBAAgB;IACf,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAgC;MAC1F,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;MAC1D,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;MAC1D,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAuD;QAC5F,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;OAC7B,CAAC,CAAA;KACF,CAAC,CAAA;GACF;EAED,MAAM,kBAAkB;IACvB,IAAI,uBAAuB,EAAE,EAAE;MAC9B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;MAChB,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;KACzB;GACD;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAe,IAAI,CAAC,SAAS,sBAAoB,IAAI,CAAC,cAAc,IAC7J,eAAQ,CACF,EACP;GACD;;;;EAMD,MAAM,YAAY;IACjB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;GACzE;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-side-nav/gov-side-nav.scss?tag=gov-side-nav","../../../packages/core/src/components/gov-side-nav/gov-side-nav.tsx"],"sourcesContent":["/*\n *   Side nav\n */\n\n$class: \".gov-side-nav\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n\twidth: 100%;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\"\nimport { SideNavClass, SideNavItemClass } from './constants'\nimport { GovSideNavItemCustomEvent } from '../../components'\nimport { GovSideNavItemChangeEvent } from './gov-side-nav-item.d'\nimport { validateWcagLabel } from \"../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\nimport { booleanString } from \"../../helpers/Dom/template\"\n\n@Component({\n\ttag: 'gov-side-nav',\n\tstyleUrl: 'gov-side-nav.scss',\n})\nexport class GovSideNav {\n\t@Element() readonly host: HTMLGovSideNavElement\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 * Adds accessible label for the sidenav that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-label\" }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Called when the sidenav state changes\n\t */\n\t@Event({ eventName: 'gov-change' }) govChange: EventEmitter\n\n\tcomponentDidLoad() {\n\t\tconsole.log(this.inverse);\n\t\tthis.host.querySelectorAll(SideNavItemClass.root).forEach((child: HTMLGovSideNavItemElement) => {\n\t\t\tchild.setAttribute('inverse', booleanString(this.inverse))\n\t\t\tchild.setAttribute('compact', booleanString(this.compact))\n\t\t\tchild.addEventListener('gov-change', (e: GovSideNavItemCustomEvent<GovSideNavItemChangeEvent>) => {\n\t\t\t\te.stopPropagation()\n\t\t\t\tthis.govChange.emit(e.detail)\n\t\t\t})\n\t\t})\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={SideNavClass.root} compact={this.compact} inverse={this.inverse} role={'list'} arial-label={this.wcagLabel} arial-labelledby={this.wcagLabelledBy}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, SideNavClass.root)\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,52 @@
+import { r as registerInstance, h, H as Host } from './index-e498b7fa.js';
+import { v as validateProp } from './props-5a1380a0.js';
+import { S as Sizes } from './sizes-6c5943b4.js';
+import './gov.log-3b6eb67c.js';
+
+const BreakpointTable = {
+  none: '0em',
+  sm: '30em',
+  md: '48em',
+  lg: '64em',
+  xl: '75em',
+};
+const BreakpointNames = Object.keys(BreakpointTable);
+
+BreakpointNames.push(undefined);
+const SpacerSize = [undefined, Sizes._2XS, Sizes._XS, Sizes._S, Sizes._M, Sizes._L, Sizes._XL, Sizes._2XL, Sizes._3XL, Sizes._5XL];
+const SpacerBreakpoints = BreakpointNames;
+const SpacerClass = {
+  root: 'gov-spacer',
+};
+
+const govSpacerCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-spacer{display:block;width:100%}.gov-spacer[size=unset]{height:0}.gov-spacer[size=\"2xs\"]{height:0.25rem}.gov-spacer[size=xs]{height:0.5rem}.gov-spacer[size=s]{height:0.75rem}.gov-spacer[size=m]{height:1rem}.gov-spacer[size=l]{height:1.25rem}.gov-spacer[size=xl]{height:1.75rem}.gov-spacer[size=\"2xl\"]{height:2rem}.gov-spacer[size=\"3xl\"]{height:3rem}.gov-spacer[size=\"4xl\"]{height:4.5rem}.gov-spacer[breakpoint=none]{display:none}.gov-spacer[breakpoint=sm]{display:none}@media (min-width: 30em){.gov-spacer[breakpoint=sm]{display:block}}.gov-spacer[breakpoint=md]{display:none}@media (min-width: 48em){.gov-spacer[breakpoint=md]{display:block}}.gov-spacer[breakpoint=lg]{display:none}@media (min-width: 64em){.gov-spacer[breakpoint=lg]{display:block}}.gov-spacer[breakpoint=xl]{display:none}@media (min-width: 75em){.gov-spacer[breakpoint=xl]{display:block}}";
+
+const GovSpacer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = undefined;
+    this.breakpoint = undefined;
+  }
+  validateSize(newValue) {
+    validateProp(SpacerSize, newValue, SpacerClass.root);
+  }
+  validateBreakpoint(newValue) {
+    validateProp(SpacerBreakpoints, newValue, SpacerClass.root);
+  }
+  componentWillLoad() {
+    this.validateSize(this.size);
+    this.validateBreakpoint(this.breakpoint);
+  }
+  render() {
+    return h(Host, { class: SpacerClass.root });
+  }
+  static get watchers() { return {
+    "size": ["validateSize"],
+    "breakpoint": ["validateBreakpoint"]
+  }; }
+};
+GovSpacer.style = govSpacerCss;
+
+export { GovSpacer as gov_spacer };
+
+//# sourceMappingURL=gov-spacer.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-spacer.entry.js","mappings":";;;;;AAAO,MAAM,eAAe,GAAG;EAC9B,IAAI,EAAE,KAAK;EACX,EAAE,EAAE,MAAM;EACV,EAAE,EAAE,MAAM;EACV,EAAE,EAAE,MAAM;EACV,EAAE,EAAE,MAAM;CACV,CAAA;AAEM,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC;;ACL3D,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAExB,MAAM,UAAU,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAU,CAAA;AAG3I,MAAM,iBAAiB,GAAG,eAAe,CAAA;AAGzC,MAAM,WAAW,GAAG;EAC1B,IAAI,EAAE,YAAY;CAClB;;ACbD,MAAM,YAAY,GAAG,g/BAAg/B;;MCQx/B,SAAS;;;gBACmB,SAAS;sBACI,SAAS;;EAG9D,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,WAAW,CAAC,IAAI,GAAS,CAAA;GAC7C;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/core/constants/breakpoint.ts","../../../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":["export const BreakpointTable = {\n\tnone: '0em',\n\tsm: '30em',\n\tmd: '48em',\n\tlg: '64em',\n\txl: '75em',\n}\n\nexport const BreakpointNames = Object.keys(BreakpointTable)\n","import { BreakpointNames } from '../../core/constants/breakpoint'\nimport { Sizes } from '../../core/constants/sizes'\n\nBreakpointNames.push(undefined)\n\nexport const SpacerSize = [undefined, Sizes._2XS, Sizes._XS, Sizes._S, Sizes._M, Sizes._L, Sizes._XL, Sizes._2XL, Sizes._3XL, Sizes._5XL] as const\nexport type SpacerSizeType = typeof SpacerSize[number]\n\nexport const SpacerBreakpoints = BreakpointNames\nexport type SpacerBreakpointsType = typeof SpacerBreakpoints[number]\n\nexport const SpacerClass = {\n\troot: 'gov-spacer',\n}\n","/*\n *   Spacer\n */\n\n$class: \".gov-spacer\";\n\n#{$class} {\n\tdisplay: block;\n\twidth: 100%;\n\n\t@each $name, $value in $sizes {\n\t\t&[size=\"#{$name}\"] {\n\t\t\theight: #{$value};\n\t\t}\n\t}\n\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, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { SpacerBreakpoints, SpacerBreakpointsType, SpacerClass, SpacerSize, SpacerSizeType } from './constants'\n\n@Component({\n\ttag: 'gov-spacer',\n\tstyleUrl: 'gov-spacer.scss',\n})\nexport class GovSpacer {\n\t@Prop() readonly size: SpacerSizeType = undefined\n\t@Prop() readonly breakpoint: SpacerBreakpointsType = undefined\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={SpacerClass.root}></Host>\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,33 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-e498b7fa.js';
+import { g as govHost } from './template-c616c14f.js';
+import { v as validateProp } from './props-5a1380a0.js';
+import { S as StatsBarItemClass, b as StatsBarIconPosition } from './constants-1f1d1d3e.js';
+import './gov.log-3b6eb67c.js';
+
+const govStatsbarItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-statsbar-item{position:relative;display:block;padding:1.25rem}.gov-statsbar-item__icon,.gov-statsbar-item__number{margin-bottom:1rem}.gov-statsbar-item__icon{display:block;width:2rem;height:2rem}.gov-statsbar-item__number{font-weight:var(--gov-text-5xl-font-weight);font-size:var(--gov-text-5xl-font-size);line-height:var(--gov-text-5xl-line-height);letter-spacing:var(--gov-text-5xl-letter-spacing)}.gov-statsbar-item__text{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);letter-spacing:0.0125em}.gov-statsbar-item__text>:last-child{margin-bottom:0}.gov-statsbar-item[icon-position=left]{padding-left:3rem}.gov-statsbar-item[icon-position=left] .gov-statsbar-item__icon{position:absolute;top:1.5rem;left:0}@media (min-width: 30em){.gov-statsbar-item{flex:1 0 50%;max-width:50%}}@media (min-width: 48em){.gov-statsbar-item{padding:2.5rem}.gov-statsbar-item__icon{width:3rem;height:3rem}.gov-statsbar-item[icon-position=left]{padding-left:4rem}.gov-statsbar-item[icon-position=left] .gov-statsbar-item__icon{top:2.75rem}}@media (min-width: 64em){.gov-statsbar-item{flex-basis:auto;max-width:25%}}";
+
+const GovStatsbarItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.iconPosition = undefined;
+    this.h = govHost(this.host);
+  }
+  validateIconPosition(newValue) {
+    validateProp(StatsBarIconPosition, newValue, StatsBarItemClass.root);
+  }
+  componentWillLoad() {
+    this.validateIconPosition(this.iconPosition);
+  }
+  render() {
+    return (h(Host, { class: StatsBarItemClass.root }, h("article", null, this.h.hasSlot('icon') && (h("span", { class: StatsBarItemClass.icon }, h("slot", { name: "icon" }))), h("p", { class: StatsBarItemClass.number }, h("slot", null)), this.h.hasSlot('text') && (h("div", { class: StatsBarItemClass.text }, h("slot", { name: "text" }))))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "iconPosition": ["validateIconPosition"]
+  }; }
+};
+GovStatsbarItem.style = govStatsbarItemCss;
+
+export { GovStatsbarItem as gov_statsbar_item };
+
+//# sourceMappingURL=gov-statsbar-item.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-statsbar-item.entry.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,o1CAAo1C;;MCUl2C,eAAe;EAG3B;;wBAM2D,SAAS;IALnE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAOD,oBAAoB,CAAC,QAAgB;IACpC,YAAY,CAAC,oBAAoB,EAAE,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;GACpE;EAED,iBAAiB;IAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;GAC5C;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,iBAAiB,CAAC,IAAI,IAClC,mBACE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,YAAM,KAAK,EAAE,iBAAiB,CAAC,IAAI,IAClC,YAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP,EAED,SAAG,KAAK,EAAE,iBAAiB,CAAC,MAAM,IACjC,eAAQ,CACL,EAEH,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,WAAK,KAAK,EAAE,iBAAiB,CAAC,IAAI,IACjC,YAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACN,CACQ,CACJ,EACP;GACD;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-statsbar/gov-statsbar-item.scss?tag=gov-statsbar-item","../../../packages/core/src/components/gov-statsbar/gov-statsbar-item.tsx"],"sourcesContent":["/*\n *   Statsbar - Item\n */\n\n$class: \".gov-statsbar-item\";\n\n#{$class} {\n\tposition: relative;\n\tdisplay: block;\n\tpadding: rem-calc(20);\n\n\t&__icon,\n\t&__number {\n\t\tmargin-bottom: rem-calc(16);\n\t}\n\n\t&__icon {\n\t\tdisplay: block;\n\t\twidth: rem-calc(32);\n\t\theight: rem-calc(32);\n\t}\n\n\t&__number {\n\t\t@include typography($font-size-5xl);\n\t}\n\n\t&__text {\n\t\t@include typography($font-size-xl);\n\t\tletter-spacing: em-calc(0.2);\n\n\t\t> :last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t}\n\n\t// Variants\n\t&[icon-position=\"left\"] {\n\t\tpadding-left: rem-calc(48);\n\n\t\t#{$class} {\n\t\t\t&__icon {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: rem-calc(24);\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Media queries\n\t@include mq($from: sm) {\n\t\tflex: 1 0 50%;\n\t\tmax-width: 50%;\n\t}\n\n\t@include mq($from: md) {\n\t\tpadding: rem-calc(40);\n\n\t\t&__icon {\n\t\t\twidth: rem-calc(48);\n\t\t\theight: rem-calc(48);\n\t\t}\n\n\t\t// Variants\n\t\t&[icon-position=\"left\"] {\n\t\t\tpadding-left: rem-calc(64);\n\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\ttop: rem-calc(44);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@include mq($from: lg) {\n\t\tflex-basis: auto;\n\t\tmax-width: 25%;\n\t}\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.d'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { StatsBarItemClass, StatsBarIconPosition, StatsBarIconPositionType } from './constants'\n\n@Component({\n\ttag: 'gov-statsbar-item',\n\tstyleUrl: 'gov-statsbar-item.scss',\n})\nexport class GovStatsbarItem {\n\th: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovStatsbarItemElement\n\n\t@Prop() readonly iconPosition?: StatsBarIconPositionType = undefined\n\n\t@Watch('iconPosition')\n\tvalidateIconPosition(newValue: string): void {\n\t\tvalidateProp(StatsBarIconPosition, newValue, StatsBarItemClass.root)\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateIconPosition(this.iconPosition)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={StatsBarItemClass.root}>\n\t\t\t\t<article>\n\t\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t\t<span class={StatsBarItemClass.icon}>\n\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<p class={StatsBarItemClass.number}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</p>\n\n\t\t\t\t\t{this.h.hasSlot('text') && (\n\t\t\t\t\t\t<div class={StatsBarItemClass.text}>\n\t\t\t\t\t\t\t<slot name=\"text\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</article>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,45 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-e498b7fa.js';
+import { v as validateProp } from './props-5a1380a0.js';
+import { S as StatsBarItemClass, a as StatsBarClass, b as StatsBarIconPosition, c as StatsBarVariant } from './constants-1f1d1d3e.js';
+import { V as Variants } from './variants-3bade035.js';
+import './gov.log-3b6eb67c.js';
+
+const govStatsbarCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-statsbar{display:block;padding:1.25rem 0}.gov-statsbar__section{display:block;width:100%;max-width:var(--gov-container-width, 75rem);margin-right:auto;margin-left:auto;padding-right:var(--gov-container-padding-mobile, 1.25rem);padding-left:var(--gov-container-padding-mobile, 1.25rem)}@media (min-width: 48em){.gov-statsbar__section{padding-right:var(--gov-container-padding, 2.5rem);padding-left:var(--gov-container-padding, 2.5rem)}}.gov-statsbar[variant=primary]{background-color:var(--gov-statsbar-primary-bg-color, var(--gov-color-primary-200));color:var(--gov-statsbar-primary-text-color, var(--gov-color-primary))}.gov-statsbar[variant=primary][inverse=\"\"],.gov-statsbar[variant=primary][inverse=true i],.gov-statsbar[variant=primary][inverse=\"1\"]{background:var(--gov-color-secondary-100);color:var(--gov-statsbar-primary-text-color-inverse, var(--gov-color-primary))}.gov-statsbar[variant=secondary]{background-color:var(--gov-statsbar-secondary-bg-color, var(--gov-color-secondary));color:var(--gov-statsbar-secondary-text-color, var(--gov-color-secondary-100))}.gov-statsbar[variant=secondary][inverse=\"\"],.gov-statsbar[variant=secondary][inverse=true i],.gov-statsbar[variant=secondary][inverse=\"1\"]{background:var(--gov-color-secondary-100);color:var(--gov-statsbar-secondary-text-color-inverse, var(--gov-color-secondary))}@media (min-width: 30em){.gov-statsbar__section{display:flex;flex-wrap:wrap;justify-content:center}}@media (min-width: 48em){.gov-statsbar{padding:0}}";
+
+const GovStatsbar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.iconPosition = undefined;
+    this.variant = Variants.PRIMARY;
+  }
+  validateIconPosition(newValue) {
+    validateProp(StatsBarIconPosition, newValue, StatsBarClass.root);
+  }
+  validateVariant(newValue) {
+    validateProp(StatsBarVariant, newValue, StatsBarClass.root);
+  }
+  componentWillLoad() {
+    this.validateIconPosition(this.iconPosition);
+    this.validateVariant(this.variant);
+  }
+  componentDidLoad() {
+    this.host.querySelectorAll(StatsBarItemClass.root).forEach((node) => {
+      if (this.iconPosition === 'left') {
+        node.setAttribute('icon-position', 'left');
+      }
+    });
+  }
+  render() {
+    return (h(Host, { class: StatsBarClass.root, variant: this.variant }, h("section", { class: StatsBarClass.section }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "iconPosition": ["validateIconPosition"],
+    "variant": ["validateVariant"]
+  }; }
+};
+GovStatsbar.style = govStatsbarCss;
+
+export { GovStatsbar as gov_statsbar };
+
+//# sourceMappingURL=gov-statsbar.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-statsbar.entry.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,smDAAsmD;;MCShnD,WAAW;;;wBAGoC,SAAS;mBACK,QAAQ,CAAC,OAAO;;EAGzF,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,aAAa,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACrD,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\tdisplay: block;\n\tpadding: rem-calc(20) 0;\n\t&__section {\n\t\t@include container();\n\t}\n\n\t// VARIANTS\n\t// colors\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(\"secondary.100\");\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 { Variants } from '../../core/constants/variants'\n\n@Component({\n\ttag: 'gov-statsbar',\n\tstyleUrl: 'gov-statsbar.scss',\n})\nexport class GovStatsbar {\n\t@Element() host: HTMLGovStatsbarElement\n\n\t@Prop() readonly iconPosition?: StatsBarIconPositionType = undefined\n\t@Prop({ attribute: 'variant' }) readonly variant?: StatsBarVariantType = Variants.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={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-stepper-item.entry.js

@@ -0,0 +1,71 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e498b7fa.js';
+import { a as govErrorLog } from './gov.log-3b6eb67c.js';
+import { v as validateProp } from './props-5a1380a0.js';
+import { S as StepperItemClass } from './constants-b5974ead.js';
+import { c as createID } from './string.utils-858e1565.js';
+import { g as govHost } from './template-c616c14f.js';
+import { V as Variants } from './variants-3bade035.js';
+import './sizes-6c5943b4.js';
+
+const govStepperItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}.gov-stepper-item{position:relative;display:block;width:100%}.gov-stepper-item__header{position:relative;width:100%}.gov-stepper-item__header>.gov-icon{flex:0 0 auto;width:0.75rem;height:0.75rem}.gov-stepper-item__title{margin:0;padding:0;font-family:\"Roboto\", sans-serif;font-weight:400;box-sizing:border-box;display:flex;gap:1rem;align-items:center}.gov-stepper-item__prefix{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);display:flex;flex:0 0 auto;justify-content:center;align-items:center;border-radius:50%;text-align:center}.gov-stepper-item__prefix i,.gov-stepper-item__prefix .gov-icon{width:1.125rem;height:1.125rem}.gov-stepper-item__content p:last-child{margin-bottom:0}.gov-stepper-item[variant=primary] .gov-stepper-item__header{color:var(--gov-wizzard-primary-color, var(--gov-color-primary-800))}.gov-stepper-item[variant=primary] .gov-stepper-item__prefix{background:var(--gov-wizzard-primary-indicator-bg, var(--gov-color-primary-300));color:var(--gov-wizzard-primary-indicator-color, var(--gov-color-primary-800))}.gov-stepper-item[variant=secondary] .gov-stepper-item__header{color:var(--gov-wizzard-secondary-color, var(--gov-color-secondary-700))}.gov-stepper-item[variant=secondary] .gov-stepper-item__prefix{background:var(--gov-wizzard-secondary-indicator-bg, var(--gov-color-secondary-400));color:var(--gov-wizzard-secondary-indicator-color, var(--gov-color-secondary-700))}.gov-stepper-item[variant=success] .gov-stepper-item__header{color:var(--gov-wizzard-success-color, var(--gov-color-success-500))}.gov-stepper-item[variant=success] .gov-stepper-item__prefix{background:var(--gov-wizzard-success-indicator-bg, var(--gov-color-success));color:var(--gov-wizzard-success-indicator-color, var(--gov-color-secondary-100))}.gov-stepper-item[variant=error] .gov-stepper-item__header{color:var(--gov-wizzard-error-color, var(--gov-color-error-500))}.gov-stepper-item[variant=error] .gov-stepper-item__prefix{background:var(--gov-wizzard-error-indicator-bg, var(--gov-color-error));color:var(--gov-wizzard-error-indicator-color, var(--gov-color-secondary-100))}.gov-stepper-item[variant=warning] .gov-stepper-item__header{color:var(--gov-wizzard-warning-color, var(--gov-color-warning-500))}.gov-stepper-item[variant=warning] .gov-stepper-item__prefix{background:var(--gov-wizzard-warning-indicator-bg, var(--gov-color-warning));color:var(--gov-wizzard-warning-indicator-color, var(--gov-color-secondary-100))}.gov-stepper-item::before{content:\"\";position:absolute;display:block;width:0.125rem}.gov-stepper-item:last-child::before{content:none}.gov-stepper-item[variant=primary]::before{background:var(--gov-wizzard-primary-indicator-bg, var(--gov-color-primary-300))}.gov-stepper-item[variant=secondary]::before{background:var(--gov-wizzard-secondary-indicator-bg, var(--gov-color-secondary-400))}.gov-stepper-item[variant=success]::before{background:var(--gov-wizzard-success-indicator-bg, var(--gov-color-success))}.gov-stepper-item[variant=error]::before{background:var(--gov-wizzard-error-indicator-bg, var(--gov-color-error))}.gov-stepper-item[variant=warning]::before{background:var(--gov-wizzard-warning-indicator-bg, var(--gov-color-warning))}.gov-stepper-item[size=s]{min-height:5rem}.gov-stepper-item[size=s]::before{top:3rem;bottom:1rem;left:0.9375rem}.gov-stepper-item[size=s]:last-child{min-height:0}.gov-stepper-item[size=s] .gov-stepper-item__title{font-weight:var(--gov-text-l-font-weight);font-size:var(--gov-text-l-font-size);line-height:var(--gov-text-l-line-height);letter-spacing:var(--gov-text-l-letter-spacing)}.gov-stepper-item[size=s] .gov-stepper-item__prefix{width:2rem;height:2rem}.gov-stepper-item[size=s] .gov-stepper-item__content{padding:1rem 1rem 2rem 3rem}.gov-stepper-item[size=m]{min-height:5.5rem}.gov-stepper-item[size=m]::before{top:3.5rem;bottom:1rem;left:1.1875rem}.gov-stepper-item[size=m]:last-child{min-height:0}.gov-stepper-item[size=m] .gov-stepper-item__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)}.gov-stepper-item[size=m] .gov-stepper-item__prefix{width:2.5rem;height:2.5rem}.gov-stepper-item[size=m] .gov-stepper-item__content{padding:1rem 1rem 2rem 3.5rem}";
+
+const GovStepperItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.govChange = createEvent(this, "gov-change", 7);
+    this.isExpandedState = undefined;
+    this.variant = Variants.PRIMARY;
+    this.identifier = undefined;
+    this.label = undefined;
+    this.triggerTag = "h3";
+    this.h = govHost(this.host);
+    this.triggerId = createID("GovStepperItem");
+    this.contentId = createID("GovStepperContent");
+  }
+  validateLabel(newValue) {
+    if (!newValue) {
+      govErrorLog(`[${StepperItemClass.root}]: Parameter label is required.`);
+    }
+  }
+  validateTriggerTag(newValue) {
+    const validTags = ["h1", "h2", "h3", "h4", "h5", "h6", "span"];
+    if (newValue) {
+      if (!validTags.includes(newValue)) {
+        govErrorLog(`[${StepperItemClass.root}]: Tag ${newValue} is not allowed.`);
+      }
+    }
+  }
+  validateVariant(newValue) {
+    validateProp(Variants, newValue, StepperItemClass.root);
+  }
+  componentWillLoad() {
+    this.validateLabel(this.label);
+    this.validateVariant(this.variant);
+    this.validateTriggerTag(this.triggerTag);
+  }
+  render() {
+    const triggerId = this.identifier || this.triggerId;
+    const contentId = this.contentId;
+    const { label } = this;
+    const TriggerTag = this.triggerTag;
+    return (h(Host, { class: StepperItemClass.root, variant: this.variant }, h("div", { id: triggerId, class: StepperItemClass.header, role: "listitem" }, h(TriggerTag, { class: StepperItemClass.title }, this.h.hasSlot("prefix") &&
+      h("span", { class: StepperItemClass.prefix }, h("slot", { name: "prefix" })), h("span", { class: StepperItemClass.label }, label))), this.h.hasSlot('content') && (h("div", { class: StepperItemClass.content, id: contentId, "aria-labelledby": triggerId, role: "tabpanel" }, h("slot", { name: "content" })))));
+  }
+  /**
+   * Returns the current state of the component
+   */
+  async currentState() {
+    return this.isExpandedState;
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "label": ["validateLabel"],
+    "triggerTag": ["validateTriggerTag"],
+    "variant": ["validateVariant"]
+  }; }
+};
+GovStepperItem.style = govStepperItemCss;
+
+export { GovStepperItem as gov_stepper_item };
+
+//# sourceMappingURL=gov-stepper-item.entry.js.map