@gov-design-system-ce/components 0.0.25 → 0.0.27

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

@@ -0,0 +1 @@
+{"file":"gov-layout.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,smDAAsmD;;MCS9mD,SAAS;EAGrB;;gBAQqC,SAAS;;mBAQV,KAAK;IAfxC,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAgBO,SAAS,CAAC,aAAqB,EAAE,IAAY,EAAE,OAAe,EAAE,OAAgB;IACvF,MAAM,MAAM,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,EAAE,CAAA;IACrC,MAAM,SAAS,GAAG,OAAO,GAAG,GAAG,GAAG,OAAO,GAAG,EAAE,CAAA;IAC9C,MAAM,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,EAAE,CAAA;IAC3C,OAAO,aAAa,GAAG,GAAG,GAAG,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;GAC3E;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,IAC7D,eAAS,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IACzF,eAAQ,CACC,CACJ,EACP;GACD;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-layout/gov-layout.scss?tag=gov-layout","../../../packages/core/src/components/gov-layout/gov-layout.tsx"],"sourcesContent":["/*\n *   Layout\n */\n\n$class: \".gov-layout\";\n\n@mixin big() {\n\tflex: 1 1 auto;\n\twidth: auto;\n}\n\n@mixin small() {\n\tflex: 0 0 auto;\n\twidth: calc($container-width / 3 - $layout-gap);\n}\n\n#{$class} {\n\t@include base();\n\t&__section {\n\t\tdisplay: flex;\n\t\tgap: $layout-gap;\n\t\tflex-direction: column;\n\t}\n\n\t// MQ\n\t@include mq($from: lg) {\n\t\t&__section {\n\t\t\tflex-direction: row;\n\n\t\t\t&-aside-right,\n\t\t\t&-aside {\n\t\t\t\t#{$class}-column:first-child {\n\t\t\t\t\t@include big;\n\t\t\t\t}\n\n\t\t\t\t#{$class}-column:last-child {\n\t\t\t\t\t@include small;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-aside-left {\n\t\t\t\t#{$class}-column:first-child {\n\t\t\t\t\t@include small;\n\t\t\t\t}\n\n\t\t\t\t#{$class}-column:last-child {\n\t\t\t\t\t@include big;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-aside-right-inverse {\n\t\t\t\t#{$class}-column:first-child {\n\t\t\t\t\torder: 1;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-aside-left-inverse {\n\t\t\t\t#{$class}-column:first-child {\n\t\t\t\t\torder: 2;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-text {\n\t\t\t\twidth: $layout-content-width;\n\t\t\t\tmargin-right: auto;\n\t\t\t\tmargin-left: auto;\n\t\t\t}\n\n\t\t\t&-text-left {\n\t\t\t\twidth: $layout-content-width;\n\t\t\t\tmargin-right: auto;\n\t\t\t}\n\n\t\t\t&-text-right {\n\t\t\t\twidth: $layout-content-width;\n\t\t\t\tmargin-left: auto;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { LayoutClass, LayoutType, LayoutVariantType } from './constants'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { govHost } from '../../helpers/Dom/template'\n\n@Component({\n\ttag: 'gov-layout',\n\tstyleUrl: 'gov-layout.scss',\n})\nexport class GovLayout {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovLayoutElement\n\t/**\n\t * Layout type\n\t */\n\t@Prop() readonly type?: LayoutType = 'stretch'\n\t/**\n\t * Layout align\n\t */\n\t@Prop() readonly variant?: LayoutVariantType\n\t/**\n\t * Determine if component should have inverse column order\n\t */\n\t@Prop() readonly inverse: boolean = false\n\n\tprivate typeClass(originalClass: string, type: string, variant: string, inverse: boolean) {\n\t\tconst isType = type ? '-' + type : ''\n\t\tconst isVariant = variant ? '-' + variant : ''\n\t\tconst isInverse = inverse ? '-inverse' : ''\n\t\treturn originalClass + ' ' + originalClass + isType + isVariant + isInverse\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host type={this.type} class={this.h.classes(LayoutClass.root)}>\n\t\t\t\t<section class={this.typeClass(LayoutClass.section, this.type, this.variant, this.inverse)}>\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-loading.entry.js

@@ -0,0 +1,27 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { g as govHost, p as prepareClasses } from './template-10332292.js';
+
+const LoadingClass = {
+  root: 'gov-loading',
+  content: 'gov-loading__content',
+  icon: 'gov-loading__icon',
+};
+
+const govLoadingCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-loading{display:none}.gov-loading__content{z-index:101;position:fixed;top:50%;left:50%;display:flex;gap:1rem;flex-direction:column;align-items:center;min-width:9.6875rem;padding:1.5rem;border-radius:0.5rem;background:var(--gov-loading-bg, rgba(var(--gov-color-secondary-400-rgb), 0.8));color:var(--gov-loading-color, var(--gov-color-primary));text-align:center;transform:translate(-50%, -50%)}.gov-loading__icon{width:4rem;height:4rem;line-height:1}.gov-loading[loading=\"\"],.gov-loading[loading=true i],.gov-loading[loading=\"1\"]{display:block}";
+
+const GovLoading = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.loading = false;
+    this.h = govHost(this.host);
+  }
+  render() {
+    return (h(Host, { class: this.h.classes(LoadingClass.root), loading: this.loading }, h("div", { class: LoadingClass.content }, h("gov-icon", { class: prepareClasses([LoadingClass.icon, 'gov-spin-animation']), name: "loader" }), h("slot", null)), this.loading ? (h("gov-backdrop", { inverse: true })) : null));
+  }
+  get host() { return getElement(this); }
+};
+GovLoading.style = govLoadingCss;
+
+export { GovLoading as gov_loading };
+
+//# sourceMappingURL=gov-loading.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-loading.entry.js","mappings":";;;AAAO,MAAM,YAAY,GAAG;EAC3B,IAAI,EAAE,aAAa;EACnB,OAAO,EAAE,sBAAsB;EAC/B,IAAI,EAAE,mBAAmB;CACzB;;ACJD,MAAM,aAAa,GAAG,g4BAAg4B;;MCSz4B,UAAU;EAGtB;;mBAQkB,KAAK;IAPtB,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAQD,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IACpE,WAAK,KAAK,EAAE,YAAY,CAAC,OAAO,IAC/B,gBAAU,KAAK,EAAE,cAAc,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC,EAAE,IAAI,EAAC,QAAQ,GAAY,EACrG,eAAQ,CACH,EACL,IAAI,CAAC,OAAO,IAAI,oBAAc,OAAO,EAAE,IAAI,GAAI,IAAI,IAAI,CAClD,EACP;GACD;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-loading/loading/constants.ts","../../../packages/core/src/components/gov-loading/loading/gov-loading.scss?tag=gov-loading","../../../packages/core/src/components/gov-loading/loading/gov-loading.tsx"],"sourcesContent":["export const LoadingClass = {\n\troot: 'gov-loading',\n\tcontent: 'gov-loading__content',\n\ticon: 'gov-loading__icon',\n}\n","/*\n *   Loading\n */\n\n$class: \".gov-loading\";\n\n#{$class} {\n\tdisplay: none;\n\t&__content {\n\t\t@include z-index(\"modal\", 1);\n\t\tposition: fixed;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tmin-width: rem-calc(155);\n\t\tpadding: rem-calc(24);\n\t\tborder-radius: rem-calc(8);\n\t\tbackground: $loading-bg;\n\t\tcolor: $loading-color;\n\t\ttext-align: center;\n\t\ttransform: translate(-50%, -50%);\n\t}\n\t&__icon {\n\t\twidth: rem-calc(64);\n\t\theight: rem-calc(64);\n\t\tline-height: 1;\n\t}\n\n\t// STATES\n\t@include parameter(\"loading\") {\n\t\tdisplay: block;\n\t}\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { LoadingClass } from './constants'\nimport { govHost, prepareClasses } from '../../../helpers/Dom/template'\nimport { GovHost } from '../../../helpers/Dom/template.types'\n\n@Component({\n\ttag: 'gov-loading',\n\tstyleUrl: 'gov-loading.scss',\n})\nexport class GovLoading {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovLoadingElement\n\t/**\n\t * Determine if loading is active\n\t */\n\t@Prop() loading = false\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(LoadingClass.root)} loading={this.loading}>\n\t\t\t\t<div class={LoadingClass.content}>\n\t\t\t\t\t<gov-icon class={prepareClasses([LoadingClass.icon, 'gov-spin-animation'])} name=\"loader\"></gov-icon>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t\t{this.loading ? (<gov-backdrop inverse={true} />) : null}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,39 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { v as validateProp } from './props-789f7529.js';
+import { V as Variants } from './variants-2b936d58.js';
+import { p as pick } from './utils-c057a3fa.js';
+import { g as govHost } from './template-10332292.js';
+import './gov.log-af905420.js';
+
+pick(Variants, ['PRIMARY', 'SECONDARY', 'WARNING', 'ERROR', 'SUCCESS']);
+const MessageClass = {
+  root: 'gov-message',
+  icon: 'gov-message__icon',
+  content: 'gov-message__content',
+  close: 'gov-message__close',
+};
+
+const govMessageCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-message{position:relative;display:flex;gap:1rem;flex-direction:column;padding:0.75rem 1rem;border-left:0.25rem solid transparent;background:var(--gov-toast-message-bg, var(--gov-color-neutral-white))}.gov-message__icon{flex:0 0 1.25rem;width:1.25rem;height:1.25rem}.gov-message__content{flex:1 1 auto}.gov-message__content>*:last-child{margin-bottom:0}.gov-message__content p{font-weight:var(--gov-text-m-font-weight);font-size:var(--gov-text-m-font-size);line-height:var(--gov-text-m-line-height);letter-spacing:var(--gov-text-m-letter-spacing)}@media (min-width: 30em){.gov-message{flex-direction:row}}.gov-message[shadow=\"\"],.gov-message[shadow=true i],.gov-message[shadow=\"1\"]{box-shadow:var(--gov-message-box-shadow, 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1))}.gov-message[variant=warning]{border-left-color:var(--gov-message-warning-color, var(--gov-color-warning));background:var(--gov-message-warning-bg-color, var(--gov-color-warning-100))}.gov-message[variant=warning] .gov-message__icon{color:var(--gov-message-warning-color, var(--gov-color-warning))}.gov-message[variant=warning][inverse=\"\"],.gov-message[variant=warning][inverse=true i],.gov-message[variant=warning][inverse=\"1\"]{background:var(--gov-message-bg-inverse, var(--gov-color-neutral-white))}.gov-message[variant=error]{border-left-color:var(--gov-message-error-color, var(--gov-color-error));background:var(--gov-message-error-bg-color, var(--gov-color-error-100))}.gov-message[variant=error] .gov-message__icon{color:var(--gov-message-error-color, var(--gov-color-error))}.gov-message[variant=error][inverse=\"\"],.gov-message[variant=error][inverse=true i],.gov-message[variant=error][inverse=\"1\"]{background:var(--gov-message-bg-inverse, var(--gov-color-neutral-white))}.gov-message[variant=secondary]{border-left-color:var(--gov-message-secondary-color, var(--gov-color-secondary));background:var(--gov-message-secondary-bg-color, var(--gov-color-secondary-200))}.gov-message[variant=secondary] .gov-message__icon{color:var(--gov-message-secondary-color, var(--gov-color-secondary))}.gov-message[variant=secondary][inverse=\"\"],.gov-message[variant=secondary][inverse=true i],.gov-message[variant=secondary][inverse=\"1\"]{background:var(--gov-message-bg-inverse, var(--gov-color-neutral-white))}.gov-message[variant=success]{border-left-color:var(--gov-message-success-color, var(--gov-color-success));background:var(--gov-message-success-bg-color, var(--gov-color-success-100))}.gov-message[variant=success] .gov-message__icon{color:var(--gov-message-success-color, var(--gov-color-success))}.gov-message[variant=success][inverse=\"\"],.gov-message[variant=success][inverse=true i],.gov-message[variant=success][inverse=\"1\"]{background:var(--gov-message-bg-inverse, var(--gov-color-neutral-white))}.gov-message[variant=primary]{border-left-color:var(--gov-message-primary-color, var(--gov-color-primary));background:var(--gov-message-primary-bg-color, var(--gov-color-primary-100))}.gov-message[variant=primary] .gov-message__icon{color:var(--gov-message-primary-color, var(--gov-color-primary))}.gov-message[variant=primary][inverse=\"\"],.gov-message[variant=primary][inverse=true i],.gov-message[variant=primary][inverse=\"1\"]{background:var(--gov-message-bg-inverse, var(--gov-color-neutral-white))}";
+
+const GovMessage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = Variants.PRIMARY;
+    this.h = govHost(this.host);
+  }
+  validateVariant(newValue) {
+    validateProp(Variants, newValue, MessageClass.root);
+  }
+  render() {
+    return (h(Host, { class: this.h.classes(MessageClass.root), variant: this.variant, role: "alert" }, this.h.hasSlot('icon') && (h("span", { class: MessageClass.icon }, h("slot", { name: "icon" }))), h("div", { class: MessageClass.content }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "variant": ["validateVariant"]
+  }; }
+};
+GovMessage.style = govMessageCss;
+
+export { GovMessage as gov_message };
+
+//# sourceMappingURL=gov-message.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-message.entry.js","mappings":";;;;;;;AAI+B,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,EAAC;AAG/F,MAAM,YAAY,GAAG;EAC3B,IAAI,EAAE,aAAa;EACnB,IAAI,EAAE,mBAAmB;EACzB,OAAO,EAAE,sBAAsB;EAC/B,KAAK,EAAE,oBAAoB;CAC3B;;ACZD,MAAM,aAAa,GAAG,2jHAA2jH;;MCYpkH,UAAU;EAGtB;;mBAS+C,QAAQ,CAAC,OAAO;IAR9D,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAUD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;GACnD;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,OAAO,IACjF,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,KACtB,YAAM,KAAK,EAAE,YAAY,CAAC,IAAI,IAC7B,YAAM,IAAI,EAAC,MAAM,GAAG,CACd,CACP,EAED,WAAK,KAAK,EAAE,YAAY,CAAC,OAAO,IAC/B,eAAQ,CACH,CACA,EACP;GACD;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-message/constants.ts","../../../packages/core/src/components/gov-message/gov-message.scss?tag=gov-message","../../../packages/core/src/components/gov-message/gov-message.tsx"],"sourcesContent":["import { Variants } from '../../core/constants/variants'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const MessageVariants = pick(Variants, ['PRIMARY', 'SECONDARY', 'WARNING', 'ERROR', 'SUCCESS'])\nexport type MessageVariantType = `${ValueOf<typeof MessageVariants>}`\n\nexport const MessageClass = {\n\troot: 'gov-message',\n\ticon: 'gov-message__icon',\n\tcontent: 'gov-message__content',\n\tclose: 'gov-message__close',\n}\n","/*\n *   Alert\n */\n\n@import \"../gov-toast/gov-toast-message-core.scss\";\n$class: \".gov-message\";\n\n#{$class} {\n\t@include toast-message-core;\n\n\t// VARIANTS\n\t@include parameter(\"shadow\") {\n\t\tbox-shadow: $message-box-shadow;\n\t}\n\t@each $variant, $definitions in $message-variants {\n\t\t&[variant=\"#{$variant}\"] {\n\t\t\tborder-left-color: get(\"color\", $definitions);\n\t\t\tbackground: get(\"bg-color\", $definitions);\n\t\t\t#{$class} {\n\t\t\t\t&__icon {\n\t\t\t\t\tcolor: get(\"color\", $definitions);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// STATES\n\t\t\t@include parameter(\"inverse\") {\n\t\t\t\tbackground: $message-bg-inverse;\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 { MessageClass } from './constants'\nimport { govHost } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { Variants } from '../../core/constants/variants'\nimport { MessageVariantType } from './constants'\n\n@Component({\n\ttag: 'gov-message',\n\tstyleUrl: 'gov-message.scss',\n})\nexport class GovMessage {\n\tprivate h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovMessageElement\n\n\t/**\n\t * Style variation of the content message.\n\t */\n\t@Prop() readonly variant: MessageVariantType = Variants.PRIMARY\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, MessageClass.root)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.h.classes(MessageClass.root)} variant={this.variant} role=\"alert\">\n\t\t\t\t{this.h.hasSlot('icon') && (\n\t\t\t\t\t<span class={MessageClass.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={MessageClass.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-modal.entry.js

@@ -0,0 +1,99 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { c as createID } from './string.utils-f268fc6b.js';
+import { b as validateWcagRef } from './wcag-d588d144.js';
+import { M as ModalClass } from './constants-ba13b28f.js';
+import { c as canValidateWcagOnRender } from './win-9c8460bb.js';
+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 govModalCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-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 GovModal = 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("GovModalLabel");
+    this.contentId = createID("GovModalContent");
+  }
+  validateLabelTag(newValue) {
+    const validTags = ["h1", "h2", "h3", "h4", "h5", "h6"];
+    if (newValue) {
+      if (!validTags.includes(newValue)) {
+        govErrorLog(`[${ModalClass.root}]: Tag ${newValue} is not allowed.`);
+      }
+    }
+  }
+  watchOpen(newValue) {
+    this.open = newValue;
+  }
+  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: this.h.classes(ModalClass.root), open: this.open }, h("dialog", { class: ModalClass.dialog, hidden: !this.open, tabindex: "-1", open: this.open, "aria-modal": "true", "aria-hidden": toBoolAttr(!this.open), "aria-labelledby": this.wcagLabelledBy || this.labelId, "aria-describedby": this.wcagDescribedBy || this.contentId, role: this.role }, h("div", { class: ModalClass.inner }, h("div", { class: ModalClass.header }, this.h.hasSlot("icon") && (h("div", { class: ModalClass.icon }, h("slot", { name: "icon" }))), this.label && (h(LabelTag, { class: ModalClass.title, id: this.labelId }, this.label)), h("gov-button", { class: ModalClass.close, variant: "primary", wcagLabel: this.wcagCloseLabel, wcagLabelledBy: this.wcagCloseLabelledBy, type: "base", "on-gov-click": this.onCloseHandler.bind(this) }, h("gov-icon", { name: "x-lg" }))), h("div", { class: ModalClass.content, id: this.contentId }, h("slot", null)))), this.open ? (h("gov-backdrop", { "wcag-label": this.wcagCloseLabel, "wcag-labelled-by": this.wcagCloseLabelledBy, "on-gov-click": this.onCloseHandler.bind(this) })) : null));
+  }
+  onCloseHandler(e) {
+    e.stopPropagation();
+    this.hideModal();
+    this.govClose.emit(e);
+  }
+  /**
+   * Showing the modal
+   */
+  async show() {
+    this.showModal();
+  }
+  /**
+   * Hiding the modal
+   */
+  async hide() {
+    this.hideModal();
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    validateWcagRef(this.wcagLabelledBy, "wcag-labelled-by", ModalClass.root);
+    validateWcagRef(this.wcagDescribedBy, "wcag-described-by", ModalClass.root);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "labelTag": ["validateLabelTag"],
+    "open": ["watchOpen"]
+  }; }
+};
+GovModal.style = govModalCss;
+
+export { GovModal as gov_modal };
+
+//# sourceMappingURL=gov-modal.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-modal.entry.js","mappings":"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","names":[],"sources":["../../../packages/core/src/components/gov-modal/gov-modal.scss?tag=gov-modal","../../../packages/core/src/components/gov-modal/gov-modal.tsx"],"sourcesContent":["/*\n *   Modal\n */\n\n$class: \".gov-modal\";\n\n#{$class} {\n\tdisplay: none;\n\t&__dialog {\n\t\t@include z-index(\"modal\", 1);\n\t\tposition: fixed;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t\tmax-width: $modal-max-width;\n\t\theight: 100%;\n\t\tpadding: rem-calc(8);\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\ttransform: translate(-50%, -50%);\n\t\tpointer-events: none;\n\t}\n\t&__inner {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t\tmax-height: 100%;\n\t\tborder-radius: $border-radius;\n\t\tbackground: $modal-bg;\n\t\toverflow: hidden;\n\t\tpointer-events: auto;\n\t\tbox-shadow: get($shadow-l, $shadows);\n\t}\n\t&__header {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(16);\n\t\talign-items: flex-start;\n\t\tpadding: rem-calc(24 16);\n\t\tborder-bottom: $modal-border;\n\t}\n\t&__icon {\n\t\tflex: 0 0 auto;\n\t\tpadding-top: calc(((var(--gov-text-#{$font-size-3xl}-font-size) * 1.5) - rem-calc(24)) / 2);\n\t\t& > * {\n\t\t\twidth: rem-calc(24);\n\t\t\theight: rem-calc(24);\n\t\t}\n\t}\n\t&__title {\n\t\t@include typography($font-size-3xl);\n\t\tmargin: 0;\n\t}\n\t&__close {\n\t\tflex: 0 0 auto;\n\t\tmargin-left: auto;\n\t\tpadding-top: calc(((var(--gov-text-#{$font-size-3xl}-font-size) * 1.5) - rem-calc(32)) / 2);\n\t}\n\t&__content {\n\t\t@include reset-last-margin();\n\t\theight: 100%;\n\t\tpadding: rem-calc(24 16);\n\t\tcolor: $modal-text-color;\n\t\toverflow: auto;\n\t}\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: rem-calc(8 16);\n\t\tflex-wrap: wrap;\n\t\tjustify-content: flex-end;\n\t\tpadding: rem-calc(24 16);\n\t\tborder-top: $modal-border;\n\t}\n\n\t// STATES\n\t&__dialog:focus &__inner {\n\t\toutline: $outline;\n\t}\n\t@include parameter(\"open\") {\n\t\tdisplay: block;\n\t}\n\n\t// MQ\n\t@include mq($from: sm) {\n\t\t&__dialog {\n\t\t\tmax-width: calc($modal-max-width + 2 * rem-calc(24));\n\t\t\tpadding: rem-calc(24);\n\t\t\t&:focus {\n\t\t\t\toutline-offset: rem-calc(-24);\n\t\t\t}\n\t\t}\n\t\t&__inner {\n\t\t\tbox-shadow: get($shadow-xl, $shadows);\n\t\t}\n\n\t\t// VARIANTS\n\t\t&--prompt &__dialog {\n\t\t\tmax-width: calc($modal-prompt-max-width + 2 * rem-calc(24));\n\t\t}\n\t}\n\t@include mq($from: md) {\n\t\t&__header {\n\t\t\tgap: rem-calc(20);\n\t\t\tpadding: rem-calc(32 40 32 48);\n\t\t}\n\t\t&__close {\n\t\t\tpadding-top: calc(((var(--gov-text-#{$font-size-3xl}-font-size) * 1.5) - rem-calc(40)) / 2);\n\t\t}\n\t\t&__content {\n\t\t\tpadding: rem-calc(32 48);\n\t\t}\n\n\t\t// VARIANTS\n\t\t&--prompt {\n\t\t\t#{$class} {\n\t\t\t\t&__header,\n\t\t\t\t&__content,\n\t\t\t\t&__actions {\n\t\t\t\t\tpadding: rem-calc(24);\n\t\t\t\t}\n\t\t\t}\n\t\t}\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 \"./constants\"\nimport { canValidateWcagOnRender } from \"../../helpers/Dom/win\"\nimport { delay } from \"../../utils/utils\"\nimport { toBoolAttr } from \"../../helpers/Dom/template\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { govErrorLog } from \"../../helpers/Log/gov.log\"\n\n@Component({\n\ttag: \"gov-modal\",\n\tstyleUrl: \"gov-modal.scss\",\n})\nexport class GovModal {\n\tprivate h: GovHost\n\tprivate readonly labelId: string\n\tprivate readonly contentId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.labelId = createID(\"GovModalLabel\")\n\t\tthis.contentId = createID(\"GovModalContent\")\n\t}\n\n\t@Element() host: HTMLGovModalElement\n\n\t/**\n\t * Attribute for modal window display\n\t */\n\t@Prop({mutable: true}) open = false\n\t/**\n\t * Title of modal window\n\t */\n\t@Prop() label: string\n\t/**\n\t * Role of modal\n\t */\n\t@Prop({ attribute: \"role\" }) role = \"dialog\"\n\t/**\n\t * Used to change the HTML tag in the modal label for correct semantic structure\n\t */\n\t@Prop({ attribute: \"label-tag\" }) readonly labelTag: string = \"h2\"\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: \"wcag-labelled-by\" }) wcagLabelledBy: string\n\t/**\n\t * Indicates the id of a component that describes the modal.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) wcagDescribedBy: string\n\t/**\n\t * Adds accessible label for the modal close button that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: \"wcag-close-label\" }) wcagCloseLabel: string\n\t/**\n\t * A string of identifiers that indicate alternative label elements for closing the modal window\n\t */\n\t@Prop({ attribute: \"wcag-close-labelled-by\" }) wcagCloseLabelledBy: string\n\t/**\n\t * Emitted when modal window closes.\n\t */\n\t@Event({ eventName: \"gov-close\" }) govClose: EventEmitter<PointerEvent>\n\n\t@Watch(\"labelTag\")\n\tvalidateLabelTag(newValue: string): void {\n\t\tconst validTags = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n\t\tif (newValue) {\n\t\t\tif (!validTags.includes(newValue)) {\n\t\t\t\tgovErrorLog(`[${ModalClass.root}]: Tag ${newValue} is not allowed.`)\n\t\t\t}\n\t\t}\n\t}\n\n\t@Watch(\"open\")\n\twatchOpen(newValue: boolean): void {\n\t\tthis.open = newValue\n\t}\n\n\tprivate showModal() {\n\t\tthis.open = true\n\t\tdocument.body.classList.add(ModalClass.bodyFix)\n\t}\n\n\tprivate hideModal() {\n\t\tthis.open = false\n\t\tdocument.body.classList.remove(ModalClass.bodyFix)\n\t}\n\n\tasync componentWillRender() {\n\t\tif (this.open) {\n\t\t\tthis.showModal()\n\t\t} else {\n\t\t\tthis.hideModal()\n\t\t}\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst LabelTag = this.labelTag\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ModalClass.root)} open={this.open}>\n\t\t\t\t<dialog\n\t\t\t\t\tclass={ModalClass.dialog}\n\t\t\t\t\thidden={!this.open}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\topen={this.open}\n\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\taria-hidden={toBoolAttr(!this.open)}\n\t\t\t\t\taria-labelledby={this.wcagLabelledBy || this.labelId}\n\t\t\t\t\taria-describedby={this.wcagDescribedBy || this.contentId}\n\t\t\t\t\trole={this.role}\n\t\t\t\t>\n\t\t\t\t\t<div class={ModalClass.inner}>\n\t\t\t\t\t\t<div class={ModalClass.header}>\n\t\t\t\t\t\t\t{this.h.hasSlot(\"icon\") && (\n\t\t\t\t\t\t\t\t<div class={ModalClass.icon}>\n\t\t\t\t\t\t\t\t\t<slot name=\"icon\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.label && (\n\t\t\t\t\t\t\t\t<LabelTag class={ModalClass.title} id={this.labelId}>\n\t\t\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t\t\t</LabelTag>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<gov-button\n\t\t\t\t\t\t\t\tclass={ModalClass.close}\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\twcagLabel={this.wcagCloseLabel}\n\t\t\t\t\t\t\t\twcagLabelledBy={this.wcagCloseLabelledBy}\n\t\t\t\t\t\t\t\ttype=\"base\"\n\t\t\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<gov-icon name=\"x-lg\" />\n\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class={ModalClass.content} id={this.contentId}>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</dialog>\n\n\t\t\t\t{this.open ? (\n\t\t\t\t\t<gov-backdrop\n\t\t\t\t\t\twcag-label={this.wcagCloseLabel}\n\t\t\t\t\t\twcag-labelled-by={this.wcagCloseLabelledBy}\n\t\t\t\t\t\ton-gov-click={this.onCloseHandler.bind(this)}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onCloseHandler(e: PointerEvent) {\n\t\te.stopPropagation()\n\t\tthis.hideModal()\n\t\tthis.govClose.emit(e)\n\t}\n\n\t/**\n\t * Showing the modal\n\t */\n\t@Method()\n\tasync show(): Promise<void> {\n\t\tthis.showModal()\n\t}\n\n\t/**\n\t * Hiding the modal\n\t */\n\t@Method()\n\tasync hide(): Promise<void> {\n\t\tthis.hideModal()\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", ModalClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", ModalClass.root)\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,33 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { a as govErrorLog } from './gov.log-af905420.js';
+import { a as NavItemClass } from './constants-d71c09e0.js';
+
+const govNavItemCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-nav-item{display:block}.gov-nav-item__link{position:relative;display:block;padding:0.9375rem 3rem 0.9375rem 2.25rem;color:var(--gov-nav-color, var(--gov-color-neutral-white));text-decoration:none}.gov-nav-item__link:focus{outline:none}.gov-nav-item__link: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-nav-item__link:focus{outline-color:var(--gov-nav-color, var(--gov-color-neutral-white))}@media not all and (pointer: coarse){.gov-nav-item__link:hover{color:var(--gov-nav-color, var(--gov-color-neutral-white));text-decoration:underline}}@media (min-width: 48em){.gov-nav-item__link{display:inline-flex;justify-content:center;align-items:center;height:100%;padding:1.375rem 1.25rem 1.3125rem}.gov-nav-item__link::before{content:\"\";position:absolute;display:block;top:0;left:50%;width:0;height:0.125rem;background:var(--gov-nav-color, var(--gov-color-neutral-white));transform:translate(-50%);transition:width 150ms}@media not all and (pointer: coarse){.gov-nav-item__link:hover{text-decoration:none}.gov-nav-item__link:hover::before{width:100%}}}";
+
+const GovNavItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isExpandedState = undefined;
+    this.href = undefined;
+  }
+  validateHref(newValue) {
+    if (!newValue) {
+      govErrorLog(`[${NavItemClass.root}]: Parameter href is required.`);
+    }
+  }
+  componentWillLoad() {
+    this.validateHref(this.href);
+  }
+  render() {
+    return (h(Host, { class: NavItemClass.root, role: "listitem" }, h("a", { href: this.href, class: NavItemClass.link }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "href": ["validateHref"]
+  }; }
+};
+GovNavItem.style = govNavItemCss;
+
+export { GovNavItem as gov_nav_item };
+
+//# sourceMappingURL=gov-nav-item.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-nav-item.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,0+CAA0+C;;MCQn/C,UAAU;;;;;;EAWtB,YAAY,CAAC,QAAgB;IAC5B,IAAI,CAAC,QAAQ,EAAE;MACd,WAAW,CAAC,IAAI,YAAY,CAAC,IAAI,gCAAgC,CAAC,CAAA;KAClE;GACD;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC5B;EAED,MAAM;IACL,QACC,EAAC,IAAI,IAAC,KAAK,EAAE,YAAY,CAAC,IAAI,EAAE,IAAI,EAAC,UAAU,IAC9C,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,IAC3C,eAAQ,CACL,CACE,EACP;GACD;;;;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-nav/gov-nav-item.scss?tag=gov-nav-item","../../../packages/core/src/components/gov-nav/gov-nav-item.tsx"],"sourcesContent":["/*\n *   Nav - Item\n */\n\n$class: \".gov-nav-item\";\n\n#{$class} {\n\tdisplay: block;\n\t&__link {\n\t\t@include focus-outline();\n\t\tposition: relative;\n\t\tdisplay: block;\n\t\tpadding: rem-calc(15 48 15 36);\n\t\tcolor: $nav-color;\n\t\ttext-decoration: none;\n\t\t&:focus {\n\t\t\toutline-color: $nav-color;\n\t\t}\n\t\t@include hover() {\n\t\t\tcolor: $nav-color;\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\n\t// MQ\n\t@include mq($from: md) {\n\t\t&__link {\n\t\t\tdisplay: inline-flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\theight: 100%;\n\t\t\tpadding: rem-calc(22 20 21);\n\t\t\t&::before {\n\t\t\t\t@include pseudo();\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 50%;\n\t\t\t\twidth: 0;\n\t\t\t\theight: rem-calc(2);\n\t\t\t\tbackground: $nav-color;\n\t\t\t\ttransform: translate(-50%);\n\t\t\t\ttransition: width $t;\n\t\t\t}\n\t\t\t@include hover() {\n\t\t\t\ttext-decoration: none;\n\t\t\t\t&::before {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Prop, State, Host, Watch } from '@stencil/core'\nimport { govErrorLog } from '../../helpers/Log/gov.log'\nimport { NavItemClass } from './constants'\n\n@Component({\n\ttag: 'gov-nav-item',\n\tstyleUrl: 'gov-nav-item.scss',\n})\nexport class GovNavItem {\n\t@Element() readonly host: HTMLGovNavItemElement\n\t@State() isExpandedState: boolean\n\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\n\t@Watch('href')\n\tvalidateHref(newValue: string): void {\n\t\tif (!newValue) {\n\t\t\tgovErrorLog(`[${NavItemClass.root}]: Parameter href is required.`)\n\t\t}\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateHref(this.href)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={NavItemClass.root} role=\"listitem\">\n\t\t\t\t<a href={this.href} class={NavItemClass.link}>\n\t\t\t\t\t<slot />\n\t\t\t\t</a>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,38 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { N as NavClass } from './constants-d71c09e0.js';
+import { v as validateWcagLabel } from './wcag-d588d144.js';
+import { c as canValidateWcagOnRender } from './win-9c8460bb.js';
+import { d as delay } from './utils-c057a3fa.js';
+import './gov.log-af905420.js';
+import './string.utils-f268fc6b.js';
+
+const govNavCss = ".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-nav{position:relative;display:block;width:100%;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);background:var(--gov-nav-bg, var(--gov-color-primary));font-weight:bold;letter-spacing:0.0125em;text-transform:uppercase}@media (min-width: 48em){.gov-nav{text-align:center}.gov-nav__nav{display:flex;justify-content:space-between}}";
+
+const GovNav = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wcagLabel = undefined;
+    this.wcagLabelledBy = undefined;
+  }
+  async componentDidRender() {
+    if (canValidateWcagOnRender()) {
+      await delay(500);
+      await this.validateWcag();
+    }
+  }
+  render() {
+    return (h(Host, { class: NavClass.root }, h("nav", { class: NavClass.nav, 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, NavClass.root);
+  }
+  get host() { return getElement(this); }
+};
+GovNav.style = govNavCss;
+
+export { GovNav as gov_nav };
+
+//# sourceMappingURL=gov-nav.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"gov-nav.entry.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,6xBAA6xB;;MCUlyB,MAAM;;;;;;EAYlB,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,QAAQ,CAAC,IAAI,IACzB,WAAK,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,iBAAe,IAAI,CAAC,SAAS,sBAAoB,IAAI,CAAC,cAAc,IACzG,eAAQ,CACH,CACA,EACP;GACD;;;;EAMD,MAAM,YAAY;IACjB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAA;GACrE;;;;;;;","names":[],"sources":["../../../packages/core/src/components/gov-nav/gov-nav.scss?tag=gov-nav","../../../packages/core/src/components/gov-nav/gov-nav.tsx"],"sourcesContent":["/*\n *   Nav\n */\n\n$class: \".gov-nav\";\n\n#{$class} {\n\t@include base();\n\t@include typography($font-size-s);\n\tbackground: $nav-bg;\n\tfont-weight: bold;\n\tletter-spacing: 0.0125em;\n\ttext-transform: uppercase;\n\n\t// MQ\n\t@include mq($from: md) {\n\t\ttext-align: center;\n\t\t&__nav {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: space-between;\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Method, Prop } from '@stencil/core'\nimport { NavClass } from './constants'\nimport { validateWcagLabel } from '../../helpers/Validate/wcag'\nimport { canValidateWcagOnRender } from '../../helpers/Dom/win'\nimport { delay } from '../../utils/utils'\n\n@Component({\n\ttag: 'gov-nav',\n\tstyleUrl: 'gov-nav.scss',\n})\nexport class GovNav {\n\t@Element() readonly host: HTMLGovNavElement\n\n\t/**\n\t * Adds accessible label for the accordion that is only shown for screen readers.\n\t */\n\t@Prop({ attribute: 'wcag-label' }) readonly wcagLabel: string\n\t/**\n\t * String of id's that indicate alternative labels elements\n\t */\n\t@Prop({ attribute: 'wcag-labelled-by' }) readonly wcagLabelledBy: string\n\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={NavClass.root}>\n\t\t\t\t<nav class={NavClass.nav} role={'list'} arial-label={this.wcagLabel} arial-labelledby={this.wcagLabelledBy}>\n\t\t\t\t\t<slot />\n\t\t\t\t</nav>\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, NavClass.root)\n\t}\n}\n"],"version":3}

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

@@ -0,0 +1,213 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b010bfb4.js';
+import { F as Fragment } from './Fragment-8d8d54fb.js';
+import { v as validateProp } from './props-789f7529.js';
+import { S as Sizes } from './sizes-6c5943b4.js';
+import { V as Variants } from './variants-2b936d58.js';
+import { p as pick, d as delay } from './utils-c057a3fa.js';
+import { g as govHost, p as prepareClasses, t as toBoolAttrIfDefined } from './template-10332292.js';
+import { a as validateWcagProp, v as validateWcagLabel } from './wcag-d588d144.js';
+import { c as canValidateWcagOnRender } from './win-9c8460bb.js';
+import { c as createID } from './string.utils-f268fc6b.js';
+import './gov.log-af905420.js';
+
+const PaginationSizes = pick(Sizes, ['_S', '_M']);
+const PaginationVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
+var PaginationTypes;
+(function (PaginationTypes) {
+  PaginationTypes["BUTTON"] = "button";
+  PaginationTypes["SELECT"] = "select";
+})(PaginationTypes || (PaginationTypes = {}));
+const PaginationClass = {
+  root: 'gov-pagination',
+  list: 'gov-pagination__list',
+  item: 'gov-pagination__item',
+  itemArrow: 'gov-pagination__item--arrow',
+  itemMore: 'gov-pagination__item--more',
+  itemSelect: 'gov-pagination__item--select',
+  inner: 'gov-pagination__inner',
+  arrow: 'gov-pagination__arrow',
+};
+
+function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 10) {
+  // calculate total pages
+  const totalPages = Math.ceil(totalItems / pageSize);
+  // ensure current page isn't out of range
+  if (currentPage < 1) {
+    currentPage = 1;
+  }
+  else if (currentPage > totalPages) {
+    currentPage = totalPages;
+  }
+  let startPage, endPage;
+  if (totalPages <= maxPages) {
+    // total pages less than max so show all pages
+    startPage = 1;
+    endPage = totalPages;
+  }
+  else {
+    // total pages more than max so calculate start and end pages
+    const maxPagesBeforeCurrentPage = Math.floor(maxPages / 2);
+    const maxPagesAfterCurrentPage = Math.ceil(maxPages / 2) - 1;
+    if (currentPage <= maxPagesBeforeCurrentPage) {
+      // current page near the start
+      startPage = 1;
+      endPage = maxPages;
+    }
+    else if (currentPage + maxPagesAfterCurrentPage >= totalPages) {
+      // current page near the end
+      startPage = totalPages - maxPages + 1;
+      endPage = totalPages;
+    }
+    else {
+      // current page somewhere in the middle
+      startPage = currentPage - maxPagesBeforeCurrentPage;
+      endPage = currentPage + maxPagesAfterCurrentPage;
+    }
+  }
+  // calculate start and end item indexes
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
+  // create an array of pages to ng-repeat in the pager control
+  const pages = Array.from(Array(endPage + 1 - startPage).keys()).map(i => startPage + i);
+  // return object with all pager properties required by the view
+  return {
+    totalItems: totalItems,
+    currentPage: currentPage,
+    pageSize: pageSize,
+    totalPages: totalPages,
+    startPage: startPage,
+    endPage: endPage,
+    startIndex: startIndex,
+    endIndex: endIndex,
+    pages: pages,
+  };
+}
+
+const createArrayRange = (from, to) => {
+  if (Number.isInteger(from) && Number.isInteger(to)) {
+    return [...Array(to + 1).keys()].slice(from);
+  }
+  return [];
+};
+
+const govPaginationCss = ".gov-pagination__list{margin:0;padding:0}.gov-pagination__list .gov-pagination__item{margin:0;padding:0;background:none}.gov-pagination__list .gov-pagination__item::before{display:none}.gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}.gov-pagination{position:relative;display:block;width:100%}.gov-pagination__list{display:flex;align-items:center;flex-wrap:wrap;font-weight:bold;text-align:center}.gov-pagination__list .gov-pagination__item{display:flex;justify-content:center;align-items:center;margin:0;padding:0.125rem;border-radius:var(--gov-border-radius, 0.1875rem);overflow:hidden}.gov-pagination__list .gov-pagination__item--arrow{display:flex}.gov-pagination__list .gov-pagination__item--select{z-index:1;display:flex;overflow:visible;padding:0rem 1rem}.gov-pagination__arrow{margin:0}.gov-pagination__item--more .gov-form-select select{border:none;padding-right:0.75rem !important}.gov-pagination__item--more .gov-form-select .gov-icon{display:none}.gov-pagination__inner{display:flex;justify-content:center;align-items:center;align-self:stretch;width:100%;text-decoration:none}.gov-pagination__inner[wcag-current=true][type=solid][variant=primary] .element{background-color:var(--gov-button-primary-solid-hover-bg, var(--gov-color-primary-700));color:var(--gov-button-primary-solid-hover-color, var(--gov-color-neutral-white))}.gov-pagination__inner[wcag-current=true][type=outlined][variant=primary] .element{background-color:var(--gov-button-primary-outlined-hover-bg, var(--gov-color-primary-100));color:var(--gov-button-primary-outlined-hover-color, var(--gov-color-primary))}.gov-pagination__inner[wcag-current=true][type=base][variant=primary] .element{background-color:var(--gov-button-primary-base-hover-bg, var(--gov-color-primary-100));color:var(--gov-button-primary-base-hover-color, var(--gov-color-primary))}.gov-pagination__inner[wcag-current=true][type=link][variant=primary] .element{background-color:var(--gov-button-primary-link-hover-bg, transparent);color:var(--gov-button-primary-link-hover-color, var(--gov-color-primary))}.gov-pagination__inner[wcag-current=true][type=solid][variant=secondary] .element{background-color:var(--gov-button-secondary-solid-hover-bg, var(--gov-color-secondary-900));color:var(--gov-button-secondary-solid-hover-color, var(--gov-color-neutral-white))}.gov-pagination__inner[wcag-current=true][type=outlined][variant=secondary] .element{background-color:var(--gov-button-secondary-outlined-hover-bg, var(--gov-color-secondary-300));color:var(--gov-button-secondary-outlined-hover-color, var(--gov-color-secondary))}.gov-pagination__inner[wcag-current=true][type=base][variant=secondary] .element{background-color:var(--gov-button-secondary-base-hover-bg, var(--gov-color-secondary-300));color:var(--gov-button-secondary-base-hover-color, var(--gov-color-secondary))}.gov-pagination__inner[wcag-current=true][type=link][variant=secondary] .element{background-color:var(--gov-button-secondary-link-hover-bg, transparent);color:var(--gov-button-secondary-link-hover-color, var(--gov-color-secondary))}.gov-pagination__inner[wcag-current=true][type=solid][variant=error] .element{background-color:var(--gov-button-error-solid-hover-bg, var(--gov-color-error-500));color:var(--gov-button-error-solid-hover-color, var(--gov-color-neutral-white))}.gov-pagination__inner[wcag-current=true][type=outlined][variant=error] .element{background-color:var(--gov-button-error-outlined-hover-bg, var(--gov-color-error-100));color:var(--gov-button-error-outlined-hover-color, var(--gov-color-error))}.gov-pagination__inner[wcag-current=true][type=base][variant=error] .element{background-color:var(--gov-button-error-base-hover-bg, var(--gov-color-error-100));color:var(--gov-button-error-base-hover-color, var(--gov-color-error))}.gov-pagination__inner[wcag-current=true][type=link][variant=error] .element{background-color:var(--gov-button-error-link-hover-bg, transparent);color:var(--gov-button-error-link-hover-color, var(--gov-color-error))}.gov-pagination__inner[wcag-current=true][type=solid][variant=success] .element{background-color:var(--gov-button-success-solid-hover-bg, var(--gov-color-success-600));color:var(--gov-button-success-solid-hover-color, var(--gov-color-neutral-white))}.gov-pagination__inner[wcag-current=true][type=outlined][variant=success] .element{background-color:var(--gov-button-success-outlined-hover-bg, var(--gov-color-success-100));color:var(--gov-button-success-outlined-hover-color, var(--gov-color-success-500))}.gov-pagination__inner[wcag-current=true][type=base][variant=success] .element{background-color:var(--gov-button-success-base-hover-bg, var(--gov-color-success-100));color:var(--gov-button-success-base-hover-color, var(--gov-color-success-500))}.gov-pagination__inner[wcag-current=true][type=link][variant=success] .element{background-color:var(--gov-button-success-link-hover-bg, transparent);color:var(--gov-button-success-link-hover-color, var(--gov-color-success-500))}.gov-pagination__inner[wcag-current=true][type=solid][variant=warning] .element{background-color:var(--gov-button-warning-solid-hover-bg, var(--gov-color-warning-600));color:var(--gov-button-warning-solid-hover-color, var(--gov-color-neutral-white))}.gov-pagination__inner[wcag-current=true][type=outlined][variant=warning] .element{background-color:var(--gov-button-warning-outlined-hover-bg, var(--gov-color-warning-200));color:var(--gov-button-warning-outlined-hover-color, var(--gov-color-warning-500))}.gov-pagination__inner[wcag-current=true][type=base][variant=warning] .element{background-color:var(--gov-button-warning-base-hover-bg, var(--gov-color-warning-200));color:var(--gov-button-warning-base-hover-color, var(--gov-color-warning-500))}.gov-pagination__inner[wcag-current=true][type=link][variant=warning] .element{background-color:var(--gov-button-warning-link-hover-bg, transparent);color:var(--gov-button-warning-link-hover-color, var(--gov-color-warning-500))}.gov-pagination[size=s] .gov-pagination__inner{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);font-weight:inherit}.gov-pagination[size=s] .gov-pagination__inner .element{min-width:var(--gov-pagination-s-button-size, 2rem)}.gov-pagination[size=m] .gov-pagination__inner{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);font-weight:inherit}.gov-pagination[size=m] .gov-pagination__inner .element{min-width:var(--gov-pagination-m-button-size, 2.5rem)}";
+
+const GovPagination = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.govPage = createEvent(this, "gov-page", 7);
+    this.type = "button";
+    this.current = 1;
+    this.total = undefined;
+    this.inverse = undefined;
+    this.size = "m";
+    this.variant = "primary";
+    this.pageSize = 10;
+    this.maxPages = 5;
+    this.link = undefined;
+    this.wcagLabel = undefined;
+    this.wcagLabelledBy = undefined;
+    this.wcagSelectLabel = "Vybrat stranu";
+    this.wcagPageLabel = "Strana";
+    this.pagination = undefined;
+    this.h = govHost(this.host);
+    this.pageSelectId = createID("GovPageSelect");
+  }
+  validateType(newValue) {
+    validateProp(PaginationTypes, newValue, PaginationClass.root);
+  }
+  validateSize(newValue) {
+    validateProp(PaginationSizes, newValue, PaginationClass.root);
+  }
+  validateVariant(newValue) {
+    validateProp(PaginationVariants, newValue, PaginationClass.root);
+  }
+  componentWillLoad() {
+    this.recalculatePagination(this.current);
+    this.validateSize(this.size);
+    this.validateVariant(this.variant);
+  }
+  async componentDidRender() {
+    if (canValidateWcagOnRender()) {
+      await delay(500);
+      await this.validateWcag();
+    }
+  }
+  recalculatePagination(currentPage) {
+    this.pagination = paginate(this.total, currentPage, this.pageSize, this.maxPages);
+  }
+  isActivePageClass(originalClass, page) {
+    if (this.pagination.currentPage === page) {
+      return originalClass + " is-active";
+    }
+    else {
+      return originalClass;
+    }
+  }
+  prepareLinkUrl(page) {
+    if (this.link) {
+      return String(this.link).replace("{PAGE}", String(page));
+    }
+    return undefined;
+  }
+  resetSelectValue() {
+    if (this.spreadSelectRef) {
+      this.spreadSelectRef.getRef()
+        .then((el) => {
+        el.value = '...';
+      });
+    }
+  }
+  render() {
+    const pageResolver = (page, content) => {
+      const isDisabled = page === -1;
+      const ariaCurrent = toBoolAttrIfDefined(this.pagination.currentPage === page ? true : undefined);
+      return (h("gov-button", { href: this.prepareLinkUrl(page), variant: this.variant, size: this.size, type: "base", disabled: isDisabled, "on-gov-click": (e) => this.onClickHandler(e, page), "wcag-label": page > -1 ? this.wcagPageLabel + " " + page : undefined, "wcag-current": ariaCurrent, class: PaginationClass.inner }, content));
+    };
+    return (h(Host, { class: this.h.classes(PaginationClass.root), type: this.type, variant: this.variant, size: this.size }, h("nav", { "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy }, h("ul", { class: PaginationClass.list }, h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.currentPage > 1 ? 1 : -1, h("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-left" }))), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1, h("gov-icon", { class: PaginationClass.arrow, name: "chevron-left" }))), this.type == "select" ? (h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemSelect]) }, h("span", { class: PaginationClass.inner }, h("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), h("gov-form-select", { size: "m", variant: this.variant, "wcag-labelled-by": this.pageSelectId, "on-gov-change": this.onSelectHandler.bind(this) }, createArrayRange(1, this.pagination.totalPages).map(page => (h("option", { value: page, selected: this.pagination.currentPage === page }, page))))))) : (h(Fragment, null, this.pagination.pages.map(page => (h("li", { class: this.isActivePageClass(PaginationClass.item, page) }, pageResolver(page, page)))), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemMore]) }, h("span", { class: PaginationClass.inner }, h("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), h("gov-form-select", { size: "m", variant: this.variant, "wcag-labelled-by": this.pageSelectId, ref: el => (this.spreadSelectRef = el), "on-gov-change": this.onSelectHandler.bind(this) }, h("option", { selected: true, hidden: true }, "..."), createArrayRange(1, this.pagination.totalPages).map(page => (h("option", { value: page, selected: false }, page)))))))), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.currentPage + 1 : -1, h("gov-icon", { class: PaginationClass.arrow, name: "chevron-right" }))), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.totalPages : -1, h("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-right" })))))));
+  }
+  onClickHandler(e, page) {
+    e.stopPropagation();
+    this.recalculatePagination(page);
+    this.govPage.emit({
+      component: PaginationClass.root,
+      pagination: this.pagination
+    });
+  }
+  onSelectHandler(e) {
+    e.stopPropagation();
+    const value = e.detail.value;
+    const page = parseInt(value);
+    this.resetSelectValue();
+    if (isNaN(page) === false) {
+      this.recalculatePagination(page);
+      if (this.link) {
+        window.location.href = this.prepareLinkUrl(page);
+      }
+      else {
+        this.govPage.emit({
+          component: PaginationClass.root,
+          pagination: this.pagination
+        });
+      }
+    }
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    validateWcagProp(this.wcagPageLabel, "wcag-page-label", PaginationClass.root);
+    validateWcagLabel(this.wcagLabel, this.wcagLabelledBy, PaginationClass.root);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "type": ["validateType"],
+    "size": ["validateSize"],
+    "variant": ["validateVariant"]
+  }; }
+};
+GovPagination.style = govPaginationCss;
+
+export { GovPagination as gov_pagination };
+
+//# sourceMappingURL=gov-pagination.entry.js.map

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/utils/array.utils.ts","../../../packages/core/src/components/gov-pagination/gov-pagination.scss?tag=gov-pagination","../../../packages/core/src/components/gov-pagination/gov-pagination.tsx"],"sourcesContent":["import { Sizes } from '../../core/constants/sizes'\nimport { Variants } from '../../core/constants/variants'\nimport { pick } from '../../utils/utils'\nimport { ValueOf } from '../../types/interfaces'\n\nexport const PaginationSizes = pick(Sizes, ['_S', '_M'])\nexport type PaginationSizeType = `${ValueOf<typeof PaginationSizes>}`\n\nexport const PaginationVariants = pick(Variants, ['PRIMARY', 'SECONDARY'])\nexport type PaginationVariantType = `${ValueOf<typeof PaginationVariants>}`\n\nexport enum PaginationTypes {\n\tBUTTON = 'button',\n\tSELECT = 'select',\n}\nexport type PaginationType = `${ValueOf<typeof PaginationTypes>}`\n\nexport const PaginationClass = {\n\troot: 'gov-pagination',\n\tlist: 'gov-pagination__list',\n\titem: 'gov-pagination__item',\n\titemArrow: 'gov-pagination__item--arrow',\n\titemMore: 'gov-pagination__item--more',\n\titemSelect: 'gov-pagination__item--select',\n\tinner: 'gov-pagination__inner',\n\tarrow: 'gov-pagination__arrow',\n}\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(totalItems: number, currentPage = 1, pageSize = 10, maxPages = 10): Pagination {\n\t// calculate total pages\n\tconst 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\tconst maxPagesBeforeCurrentPage = Math.floor(maxPages / 2)\n\t\tconst 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\tconst startIndex = (currentPage - 1) * pageSize\n\tconst endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1)\n\n\t// create an array of pages to ng-repeat in the pager control\n\tconst 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","export const createArrayRange = (from: number, to: number): number[] => {\n\tif (Number.isInteger(from) && Number.isInteger(to)) {\n\t\treturn [...Array(to + 1).keys()].slice(from)\n\t}\n\treturn []\n}\n","/*\n *   Pagination\n */\n\n$class: \".gov-pagination\";\n\n#{$class} {\n\t@include base();\n\t&__list {\n\t\t@extend %reset-ul;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: wrap;\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: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tmargin: 0;\n\t\tpadding: rem-calc(2);\n\t\tborder-radius: $border-radius;\n\t\toverflow: hidden;\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\tpadding: rem-calc(0 16);\n\t\t}\n\t}\n\t&__arrow {\n\t\tmargin: 0;\n\t}\n\t&__item--more {\n\t\t.gov-form-select {\n\t\t\tselect {\n\t\t\t\tborder: none;\n\t\t\t\tpadding-right: rem-calc(12) !important;\n\t\t\t}\n\t\t\t.gov-icon {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n\t&__inner {\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\ttext-decoration: none;\n\t\t// Use hover styles from gov-button to active page button\n\t\t&[wcag-current=\"true\"] {\n\t\t\t@each $variant, $types in $button-variants {\n\t\t\t\t@each $type, $definitions in $types {\n\t\t\t\t\t&[type=\"#{$type}\"][variant=\"#{$variant}\"] {\n\t\t\t\t\t\t.element {\n\t\t\t\t\t\t\tbackground-color: deep-map-get($button-variants, $variant, $type, \"hover-bg\");\n\t\t\t\t\t\t\tcolor: deep-map-get($button-variants, $variant, $type, \"hover-color\");\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t// VARIANTS\n\t@each $size, $definitions in $pagination-sizes {\n\t\t&[size=\"#{$size}\"] {\n\t\t\t#{$class} {\n\t\t\t\t&__inner {\n\t\t\t\t\t@include typography(get(\"font\", $definitions));\n\t\t\t\t\tfont-weight: inherit;\n\t\t\t\t\t.element {\n\t\t\t\t\t\tmin-width: get(\"button-size\", $definitions);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import Fragment from \"../../helpers/Fragment\"\nimport { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport {\n\tPaginationClass,\n\tPaginationSizeType,\n\tPaginationSizes,\n\tPaginationVariantType,\n\tPaginationType,\n\tPaginationTypes,\n\tPaginationVariants,\n} from \"./constants\"\nimport { govHost, prepareClasses } from \"../../helpers/Dom/template\"\nimport { paginate, Pagination } from \"./pagination\"\nimport { toBoolAttrIfDefined } 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\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport {createArrayRange } from \"../../utils/array.utils\"\nimport { FormSelectEvent } from \"../gov-form/select/gov-form-select.types\"\nimport { PaginationEvent } from \"./gov-pagination.types\"\n\n@Component({\n\ttag: \"gov-pagination\",\n\tstyleUrl: \"gov-pagination.scss\",\n})\nexport class GovPagination {\n\tprivate h: GovHost\n\tprivate readonly pageSelectId: string\n\n\tprivate spreadSelectRef?: HTMLGovFormSelectElement\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.pageSelectId = createID(\"GovPageSelect\")\n\t}\n\n\t@Element() readonly host: HTMLGovPaginationElement\n\t/**\n\t * Pagination type\n\t */\n\t@Prop() readonly type: PaginationType = \"button\"\n\t/**\n\t * Currently displayed page\n\t */\n\t@Prop() readonly current: number = 1\n\t/**\n\t * Total count of entries\n\t */\n\t@Prop() readonly total: number\n\t/**\n\t * Set on active page\n\t */\n\t@Prop() readonly inverse: boolean\n\t/**\n\t * Pagination's size\n\t */\n\t@Prop() readonly size?: PaginationSizeType = \"m\"\n\t/**\n\t * Style variation of the pagination.\n\t */\n\t@Prop() readonly variant?: PaginationVariantType = \"primary\"\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-labelled-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<PaginationEvent>\n\n\t@State() pagination: Pagination\n\n\t@Watch(\"type\")\n\tvalidateType(newValue: string): void {\n\t\tvalidateProp(PaginationTypes, newValue, PaginationClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(PaginationSizes, newValue, PaginationClass.root)\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(PaginationVariants, newValue, PaginationClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.recalculatePagination(this.current)\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\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\tprivate prepareLinkUrl(page: number) {\n\t\tif (this.link) {\n\t\t\treturn String(this.link).replace(\"{PAGE}\", String(page))\n\t\t}\n\t\treturn undefined\n\t}\n\n\tprivate resetSelectValue() {\n\t\tif (this.spreadSelectRef) {\n\t\t\tthis.spreadSelectRef.getRef()\n\t\t\t\t.then((el: HTMLSelectElement) => {\n\t\t\t\t\tel.value = '...'\n\t\t\t\t})\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\treturn (\n\t\t\t\t<gov-button\n\t\t\t\t\thref={this.prepareLinkUrl(page)}\n\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\ttype=\"base\"\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\ton-gov-click={(e) => this.onClickHandler(e, page)}\n\t\t\t\t\twcag-label={page > -1 ? this.wcagPageLabel + \" \" + page : undefined}\n\t\t\t\t\twcag-current={ariaCurrent}\n\t\t\t\t\tclass={PaginationClass.inner}>\n\t\t\t\t\t{content}\n\t\t\t\t</gov-button>\n\t\t\t)\n\t\t}\n\t\treturn (\n\t\t\t<Host class={this.h.classes(PaginationClass.root)} type={this.type} variant={this.variant} size={this.size}>\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(\n\t\t\t\t\t\t\t\tthis.pagination.currentPage > 1 ? 1 : -1,\n\t\t\t\t\t\t\t\t<gov-icon class={PaginationClass.arrow} name=\"chevron-double-left\"></gov-icon>,\n\t\t\t\t\t\t\t)}\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(\n\t\t\t\t\t\t\t\tthis.pagination.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1,\n\t\t\t\t\t\t\t\t<gov-icon class={PaginationClass.arrow} name=\"chevron-left\"></gov-icon>,\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</li>\n\n\t\t\t\t\t\t{this.type == \"select\" ? (\n\t\t\t\t\t\t\t<li class={prepareClasses([PaginationClass.item, PaginationClass.itemSelect])}>\n\t\t\t\t\t\t\t\t<span class={PaginationClass.inner}>\n\t\t\t\t\t\t\t\t\t<span id={this.pageSelectId} hidden>\n\t\t\t\t\t\t\t\t\t\t{this.wcagSelectLabel}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<gov-form-select\n\t\t\t\t\t\t\t\t\t\tsize=\"m\"\n\t\t\t\t\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\t\t\t\t\twcag-labelled-by={this.pageSelectId}\n\t\t\t\t\t\t\t\t\t\ton-gov-change={this.onSelectHandler.bind(this)}>\n\t\t\t\t\t\t\t\t\t\t{createArrayRange(1, this.pagination.totalPages).map(page => (\n\t\t\t\t\t\t\t\t\t\t\t<option value={page} selected={this.pagination.currentPage === page}>\n\t\t\t\t\t\t\t\t\t\t\t\t{page}\n\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</gov-form-select>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t{this.pagination.pages.map(page => (\n\t\t\t\t\t\t\t\t\t<li class={this.isActivePageClass(PaginationClass.item, page)}>{pageResolver(page, page)}</li>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t<li class={prepareClasses([PaginationClass.item, PaginationClass.itemMore])}>\n\t\t\t\t\t\t\t\t\t<span class={PaginationClass.inner}>\n\t\t\t\t\t\t\t\t\t\t<span id={this.pageSelectId} hidden>\n\t\t\t\t\t\t\t\t\t\t\t{this.wcagSelectLabel}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<gov-form-select\n\t\t\t\t\t\t\t\t\t\t\tsize=\"m\"\n\t\t\t\t\t\t\t\t\t\t\tvariant={this.variant}\n\t\t\t\t\t\t\t\t\t\t\twcag-labelled-by={this.pageSelectId}\n\t\t\t\t\t\t\t\t\t\t\tref={el => (this.spreadSelectRef = el as HTMLGovFormSelectElement)}\n\t\t\t\t\t\t\t\t\t\t\ton-gov-change={this.onSelectHandler.bind(this)}>\n\t\t\t\t\t\t\t\t\t\t\t<option selected hidden>...</option>\n\t\t\t\t\t\t\t\t\t\t\t{createArrayRange(1, this.pagination.totalPages).map(page => (\n\t\t\t\t\t\t\t\t\t\t\t\t<option value={page} selected={false}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{page}\n\t\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</gov-form-select>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<li class={prepareClasses([PaginationClass.item, PaginationClass.itemArrow])}>\n\t\t\t\t\t\t\t{pageResolver(\n\t\t\t\t\t\t\t\tthis.pagination.totalPages > this.pagination.currentPage ? this.pagination.currentPage + 1 : -1,\n\t\t\t\t\t\t\t\t<gov-icon class={PaginationClass.arrow} name=\"chevron-right\"></gov-icon>,\n\t\t\t\t\t\t\t)}\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(\n\t\t\t\t\t\t\t\tthis.pagination.totalPages > this.pagination.currentPage ? this.pagination.totalPages : -1,\n\t\t\t\t\t\t\t\t<gov-icon class={PaginationClass.arrow} name=\"chevron-double-right\"></gov-icon>,\n\t\t\t\t\t\t\t)}\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(e: CustomEvent, page: number): void {\n\t\te.stopPropagation()\n\t\tthis.recalculatePagination(page)\n\t\tthis.govPage.emit({\n\t\t\tcomponent: PaginationClass.root,\n\t\t\tpagination: this.pagination\n\t\t})\n\t}\n\n\tprivate onSelectHandler(e: CustomEvent<FormSelectEvent>): void {\n\t\te.stopPropagation()\n\t\tconst value = e.detail.value\n\t\tconst page = parseInt(value)\n\t\tthis.resetSelectValue()\n\t\tif (isNaN(page) === false) {\n\t\t\tthis.recalculatePagination(page)\n\t\t\tif (this.link) {\n\t\t\t\twindow.location.href = this.prepareLinkUrl(page)\n\t\t\t} else {\n\t\t\t\tthis.govPage.emit({\n\t\t\t\t\tcomponent: PaginationClass.root,\n\t\t\t\t\tpagination: this.pagination\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagProp(this.wcagPageLabel, \"wcag-page-label\", PaginationClass.root)\n\t\tvalidateWcagLabel(this.wcagLabel, this.wcagLabelledBy, PaginationClass.root)\n\t}\n}\n"],"version":3}