@gov-design-system-ce/components 0.0.1

package/dist/collection/components/gov-modal/gov-modal.stories.js

@@ -0,0 +1,55 @@
+import readme from "./readme.md";
+import { bindProps } from "../../../.storybook/helpers";
+import { icons, createIcon } from "../../../.storybook/icons";
+import { getCopy } from "../../../.storybook/copy";
+const StoryConfiguration = {
+  title: "Design system/Modal",
+  args: {
+    label: 'Design systém gov.cz',
+    'wcag-close-label': 'Zavřít dialogové okno s bližšími informacemi',
+    icon: undefined
+  },
+  argTypes: {
+    icon: {
+      control: "select",
+      options: [undefined, ...icons],
+    },
+    label: {
+      control: "text",
+    },
+    'wcag-close-label': {
+      control: "text",
+    }
+  },
+  parameters: {
+    notes: readme,
+  },
+};
+const PROPS_MODAL = ["label", "wcag-close-label"];
+const Template = (args) => {
+  const container = document.createElement('div');
+  const trigger = document.createElement('gov-button');
+  const modal = document.createElement("gov-modal");
+  trigger.setAttribute('variant', 'primary');
+  trigger.setAttribute('type', 'solid');
+  trigger.setAttribute('wcag-label', 'Otevřít dialogové okno pro bližší informace');
+  trigger.innerHTML = 'Otevřít dialogové okno';
+  modal.innerHTML = getCopy() + getCopy() + getCopy() + getCopy() + getCopy();
+  trigger.addEventListener('gov-click', function () {
+    modal.setAttribute('open', 'true');
+  });
+  if (args.icon) {
+    const icon = createIcon(args.icon, 'icon');
+    if (icon) {
+      modal.appendChild(icon);
+    }
+  }
+  container.appendChild(trigger);
+  container.appendChild(modal);
+  bindProps(modal, PROPS_MODAL, args);
+  return container;
+};
+export const Playground = Template.bind({});
+Playground.args = {};
+export default StoryConfiguration;
+//# sourceMappingURL=gov-modal.stories.js.map

package/dist/collection/components/gov-modal/gov-modal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-modal.stories.js","sourceRoot":"","sources":["../../../../../../src/components/gov-modal/gov-modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAA;AACvD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAElD,MAAM,kBAAkB,GAAG;EAC1B,KAAK,EAAE,qBAAqB;EAC5B,IAAI,EAAE;IACL,KAAK,EAAE,sBAAsB;IAC7B,kBAAkB,EAAE,8CAA8C;IAClE,IAAI,EAAE,SAAS;GACf;EACD,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,OAAO,EAAE,QAAQ;MACjB,OAAO,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC;KAC9B;IACD,KAAK,EAAE;MACN,OAAO,EAAE,MAAM;KACf;IACD,kBAAkB,EAAE;MACnB,OAAO,EAAE,MAAM;KACf;GACD;EACD,UAAU,EAAE;IACX,KAAK,EAAE,MAAM;GACb;CACD,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAA;AAEjD,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACzB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;EAC/C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAA;EACpD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;EAEjD,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;EAC1C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;EACrC,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,6CAA6C,CAAC,CAAA;EACjF,OAAO,CAAC,SAAS,GAAG,wBAAwB,CAAA;EAE5C,KAAK,CAAC,SAAS,GAAG,OAAO,EAAE,GAAG,OAAO,EAAE,GAAG,OAAO,EAAE,GAAG,OAAO,EAAE,GAAG,OAAO,EAAE,CAAA;EAE3E,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE;IACrC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;EACnC,CAAC,CAAC,CAAA;EAEF,IAAI,IAAI,CAAC,IAAI,EAAE;IACd,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;IAC1C,IAAG,IAAI,EAAE;MACR,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;KACvB;GACD;EAED,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;EAC9B,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;EAE5B,SAAS,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,CAAA;EACnC,OAAO,SAAS,CAAA;AACjB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC3C,UAAU,CAAC,IAAI,GAAG,EAAE,CAAA;AAEpB,eAAe,kBAAkB,CAAA","sourcesContent":["import readme from \"./readme.md\"\nimport { bindProps } from \"../../../.storybook/helpers\"\nimport { icons, createIcon } from \"../../../.storybook/icons\"\nimport { getCopy } from \"../../../.storybook/copy\"\n\nconst StoryConfiguration = {\n\ttitle: \"Design system/Modal\",\n\targs: {\n\t\tlabel: 'Design systém gov.cz',\n\t\t'wcag-close-label': 'Zavřít dialogové okno s bližšími informacemi',\n\t\ticon: undefined\n\t},\n\targTypes: {\n\t\ticon: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [undefined, ...icons],\n\t\t},\n\t\tlabel: {\n\t\t\tcontrol: \"text\",\n\t\t},\n\t\t'wcag-close-label': {\n\t\t\tcontrol: \"text\",\n\t\t}\n\t},\n\tparameters: {\n\t\tnotes: readme,\n\t},\n}\n\nconst PROPS_MODAL = [\"label\", \"wcag-close-label\"]\n\nconst Template = (args) => {\n\tconst container = document.createElement('div')\n\tconst trigger = document.createElement('gov-button')\n\tconst modal = document.createElement(\"gov-modal\")\n\n\ttrigger.setAttribute('variant', 'primary')\n\ttrigger.setAttribute('type', 'solid')\n\ttrigger.setAttribute('wcag-label', 'Otevřít dialogové okno pro bližší informace')\n\ttrigger.innerHTML = 'Otevřít dialogové okno'\n\n\tmodal.innerHTML = getCopy() + getCopy() + getCopy() + getCopy() + getCopy()\n\n\ttrigger.addEventListener('gov-click', function() {\n\t\tmodal.setAttribute('open', 'true')\n\t})\n\n\tif (args.icon) {\n\t\tconst icon = createIcon(args.icon, 'icon')\n\t\tif(icon) {\n\t\t\tmodal.appendChild(icon)\n\t\t}\n\t}\n\n\tcontainer.appendChild(trigger)\n\tcontainer.appendChild(modal)\n\n\tbindProps(modal, PROPS_MODAL, args)\n\treturn container\n}\n\nexport const Playground = Template.bind({})\nPlayground.args = {}\n\nexport default StoryConfiguration\n"]}

package/dist/collection/components/gov-pagination/constants.js

@@ -0,0 +1,9 @@
+export const PaginationClass = {
+  root: "gov-pagination",
+  list: "gov-pagination__list",
+  item: "gov-pagination__item",
+  itemArrow: "gov-pagination__item--arrow",
+  itemSelect: "gov-pagination__item--select",
+  inner: "gov-pagination__inner",
+};
+//# sourceMappingURL=constants.js.map

package/dist/collection/components/gov-pagination/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-pagination/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;EAC9B,IAAI,EAAE,gBAAgB;EACtB,IAAI,EAAE,sBAAsB;EAC5B,IAAI,EAAE,sBAAsB;EAC5B,SAAS,EAAE,6BAA6B;EACxC,UAAU,EAAE,8BAA8B;EAC1C,KAAK,EAAE,uBAAuB;CAC9B,CAAA","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}"]}

package/dist/collection/components/gov-pagination/gov-pagination.css

@@ -0,0 +1,281 @@
+.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;
+}
+
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* [Core] - Buttons
+------------------------------------------------------------------ */
+/*
+ * Gets color from theme-colors or from palette-colors
+ */
+/*
+ * Converts hex value to rgb colors value
+ */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/*
+ * Generates list of utility classes for margin, padding
+ *
+ * Make sure $list of definitions is sorted so that last item is defined last
+ * So largest views are mentioned last.
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Layout
+ */
+/**
+* Utilities - Offset
+*/
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/**
+* Generates CSS3 var with default value
+*/
+/*
+ -  Variables - General
+ */
+/*
+ -  Variables - Typography
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Variants
+ */
+/*
+ -  Variables - Layout
+ */
+/*
+ -  Variables - Accordion
+ */
+/*
+ -  Variables - Attachments
+ */
+/*
+ -  Variables - Alert
+ */
+/*
+ -  Variables - Backdrop
+ */
+/*
+ -  Variables - Buttons (&& Badges)
+ */
+/*
+ -  Variables - Classes
+ */
+/*
+ -  Variables - Colors
+ */
+/*
+ -  Variables - Cookiebar
+ */
+/*
+ -  Variables - Card
+ */
+/*
+ -  Variables - Container
+ */
+/*
+ -  Variables - Message
+ */
+/*
+ -  Variables - Empty
+ */
+/*
+ -  Variables - Error code
+ */
+/*
+ -  Variables - Grid
+ */
+/*
+ -  Variables - Modal & Prompt
+ */
+/**
+* Utilities - Offset
+*/
+/*
+ -  Variables - shadows
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Statsbar
+ */
+/*
+ -  Variables - Tabs
+ */
+/*
+ -  Variables - Tooltip
+ */
+/*
+ -	Variables - Forms
+ */
+/*
+ -  Variables - Form Autocomplete
+ */
+/*
+ -  Variables - Form Message
+ */
+/*
+ -	Variables - Form label
+ */
+/*
+ -	Variables - Form switch
+ */
+/*
+ -	Variables - Form select
+ */
+/*
+ -	Variables - Form input
+ */
+/*
+ -	Variables - Form multiselect
+ */
+/*
+ -	Variables - Form checkbox & radio
+ */
+/*
+ -	Variables - Form file
+ */
+/*
+ -  Variables - Toast Message
+ */
+/*
+ -  Variables - Wizzard
+ */
+/*
+ -  Variables - Stepper
+ */
+/*
+ -  Variables - Grid & Tile
+ */
+/*
+ -  Variables - Pagination
+ */
+.gov-spin-animation,
+.gov-pseudo-spin-animation::before {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/*
+*   Pagination
+*/
+.gov-pagination {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+.gov-pagination__list {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  text-align: center;
+}
+.gov-pagination__list .gov-pagination__item {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  min-width: 2.5625rem;
+  min-height: 3rem;
+  margin: 0;
+  border-radius: var(--gov-border-radius, 0.1875rem);
+  overflow: hidden;
+}
+.gov-pagination__list .gov-pagination__item .gov-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  margin: 0;
+}
+.gov-pagination__list .gov-pagination__item--arrow {
+  display: flex;
+}
+.gov-pagination__list .gov-pagination__item--select {
+  z-index: 1;
+  display: flex;
+  overflow: visible;
+}
+.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);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  padding: 0.8125rem 1rem 0.875rem;
+  color: var(--gov-pagination-color, var(--gov-color-primary));
+  font-weight: inherit;
+  text-decoration: none;
+}
+.gov-pagination__item.is-active .gov-pagination__inner {
+  background-color: var(--gov-pagination-bg-active, var(--gov-color-primary-100));
+  color: var(--gov-pagination-color-active, var(--gov-color-secondary));
+}
+.gov-pagination button.gov-pagination__inner,
+.gov-pagination a.gov-pagination__inner {
+  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;
+  transition: background-color 150ms, color 150ms;
+}
+.gov-pagination button.gov-pagination__inner:focus,
+.gov-pagination a.gov-pagination__inner:focus {
+  outline: none;
+}
+@media not all and (pointer: coarse) {
+  .gov-pagination button.gov-pagination__inner:hover,
+.gov-pagination a.gov-pagination__inner:hover {
+    background-color: var(--gov-pagination-bg-active, var(--gov-color-primary-100));
+    color: var(--gov-pagination-color-active, var(--gov-color-secondary));
+  }
+}
+
+@media (min-width: 48em) {
+  .gov-pagination__list .gov-pagination__item {
+    display: flex;
+  }
+  .gov-pagination__list .gov-pagination__item--select {
+    display: none;
+  }
+}

package/dist/collection/components/gov-pagination/gov-pagination.js

@@ -0,0 +1,292 @@
+import { h, Host } from "@stencil/core";
+import { PaginationClass } from "./constants";
+import { prepareClasses } from "../../helpers/Dom/template";
+import { paginate } from "./pagination";
+import { toBoolAttrIfDefined, toBoolAttr } from "../../helpers/Dom/template";
+import { validateWcagLabel, validateWcagProp } from "../../helpers/Validate/wcag";
+import { canValidateWcagOnRender } from "../../helpers/Dom/win";
+import { delay } from "../../utils/utils";
+import { createID } from "../../utils/string.utils";
+export class GovPagination {
+  constructor() {
+    this.current = 1;
+    this.total = undefined;
+    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.pageSelectId = createID("GovPageSelect");
+  }
+  componentWillLoad() {
+    this.recalculatePagination(this.current);
+    console.log(this.pagination);
+  }
+  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;
+    }
+  }
+  render() {
+    const pageResolver = (page, content) => {
+      const isDisabled = page === -1;
+      const ariaCurrent = toBoolAttrIfDefined(this.pagination.currentPage === page ? true : undefined);
+      if (this.link) {
+        const Tag = isDisabled ? "span" : "a";
+        return (h(Tag, { href: isDisabled ? undefined : String(this.link).replace('{PAGE}', String(page)), "aria-hidden": toBoolAttrIfDefined(isDisabled ? true : undefined), "aria-label": this.wcagPageLabel + " " + page, "aria-current": ariaCurrent, class: PaginationClass.inner }, content));
+      }
+      return (h("button", { disabled: isDisabled, onClick: () => this.onClickHandler(page), "aria-disabled": toBoolAttr(isDisabled), "aria-label": this.wcagPageLabel + " " + page, "aria-current": ariaCurrent, class: PaginationClass.inner }, content));
+    };
+    return (h(Host, { class: PaginationClass.root }, 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.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1, h("gov-icon", { name: "double-arrow-left" }))), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1, h("gov-icon", { name: "arrow-left" }))), 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: "l", "wcag-labelded-by": this.pageSelectId }, this.pagination.pages.map((page) => (h("option", { value: page, selected: this.pagination.currentPage === page }, page)))))), this.pagination.pages.map((page) => (h("li", { class: this.isActivePageClass(PaginationClass.item, page) }, pageResolver(page, page)))), h("li", { class: PaginationClass.item }, h("span", { class: PaginationClass.inner }, "\u2026")), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.currentPage + 1 : -1, h("gov-icon", { name: "arrow-right" }))), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.totalPages : -1, h("gov-icon", { name: "double-arrow-right" })))))));
+  }
+  onClickHandler(page) {
+    this.recalculatePagination(page);
+    this.govPage.emit(Object.assign({}, this.pagination));
+  }
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  async validateWcag() {
+    validateWcagProp(this.wcagPageLabel, "wcag-page-label", PaginationClass.root);
+    validateWcagProp(this.wcagSelectLabel, "wcag-select-label", PaginationClass.root);
+    validateWcagLabel(this.wcagLabel, this.wcagLabelledBy, PaginationClass.root);
+  }
+  static get is() { return "gov-pagination"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-pagination.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-pagination.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "current": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Currently displayed page"
+        },
+        "attribute": "current",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "total": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "total",
+        "reflect": false
+      },
+      "pageSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum number of entries per page"
+        },
+        "attribute": "page-size",
+        "reflect": false,
+        "defaultValue": "10"
+      },
+      "maxPages": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum pages displayed for selection"
+        },
+        "attribute": "max-pages",
+        "reflect": false,
+        "defaultValue": "5"
+      },
+      "link": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Setting a link to redirect to a given page.\nThe {PAGE} wildcard can be used in the link to replace the page number.\nNote 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."
+        },
+        "attribute": "link",
+        "reflect": false
+      },
+      "wcagLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the pagination that is only shown for screen readers."
+        },
+        "attribute": "wcag-label",
+        "reflect": false
+      },
+      "wcagLabelledBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component that labels the pagination."
+        },
+        "attribute": "wcag-labelded-by",
+        "reflect": false
+      },
+      "wcagSelectLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the page select"
+        },
+        "attribute": "wcag-select-label",
+        "reflect": false,
+        "defaultValue": "\"Vybrat stranu\""
+      },
+      "wcagPageLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the page item"
+        },
+        "attribute": "wcag-page-label",
+        "reflect": false,
+        "defaultValue": "\"Strana\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "pagination": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "govPage",
+        "name": "gov-page",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event called when changing the page with the current setting of the whole paging"
+        },
+        "complexType": {
+          "original": "Pagination",
+          "resolved": "Pagination",
+          "references": {
+            "Pagination": {
+              "location": "import",
+              "path": "./pagination"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "validateWcag": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Validate the WCAG attributes of the component",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=gov-pagination.js.map

package/dist/collection/components/gov-pagination/gov-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-pagination.js","sourceRoot":"","sources":["../../../../../../src/components/gov-pagination/gov-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}