@haiilo/catalyst 4.1.2 → 5.0.0

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
 /**
  * A navigation component to switch between different pages of paged chunks of
@@ -9,57 +9,21 @@ import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
  */
 export class CatPagination {
   constructor() {
-    /**
-     * The current page.
-     */
     this.page = 0;
-    /**
-     * The total number of pages.
-     */
     this.pageCount = 1;
-    /**
-     * The number of pages to be shown around the current page.
-     */
     this.activePadding = 1;
-    /**
-     * The number of pages to be shown at the edges.
-     */
     this.sidePadding = 1;
-    /**
-     * The size of the buttons.
-     */
     this.size = 'm';
-    /**
-     * The rendering style of the buttons.
-     */
     this.variant = 'text';
-    /**
-     * Use round button edges.
-     */
     this.round = false;
-    /**
-     * Use compact pagination mode.
-     */
     this.compact = false;
-    /**
-     * The icon of the "previous" button.
-     */
     this.iconPrev = 'chevron-left-outlined';
-    /**
-     * The icon of the "next" button.
-     */
     this.iconNext = 'chevron-right-outlined';
   }
   render() {
-    return (h("nav", { role: "navigation" },
-      h("ol", { class: {
-          [`cat-pagination-${this.size}`]: Boolean(this.size)
-        } },
-        h("li", null,
-          h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: i18n.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => (this.page = this.page - 1) })),
-        this.content,
-        h("li", null,
-          h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: i18n.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => (this.page = this.page + 1) })))));
+    return (h("nav", { role: "navigation" }, h("ol", { class: {
+        [`cat-pagination-${this.size}`]: Boolean(this.size)
+      } }, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: i18n.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => (this.page = this.page - 1) })), this.content, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: i18n.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => (this.page = this.page + 1) })))));
   }
   get isFirst() {
     return this.page === 0;
@@ -97,206 +61,208 @@ export class CatPagination {
   }
   get content() {
     if (this.compact) {
-      return (h("li", { class: "text" },
-        this.page + 1,
-        "/",
-        this.pageCount));
+      return (h("li", { class: "text" }, this.page + 1, "/", this.pageCount));
     }
     return this.pages.map((page, i) => [
       i > 0 && this.pages[i - 1] !== page - 1 ? h("li", { class: "dots" }, "\u2026") : null,
-      h("li", null,
-        h("cat-button", { variant: this.variant, size: this.size, round: this.round, color: this.page === page ? 'primary' : undefined, active: this.page === page, a11yLabel: i18n.t('pagination.page', { page: page + 1 }), a11yCurrent: this.page === page ? 'step' : undefined, onClick: () => (this.page = page) }, page + 1))
+      h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, color: this.page === page ? 'primary' : undefined, active: this.page === page, a11yLabel: i18n.t('pagination.page', { page: page + 1 }), a11yCurrent: this.page === page ? 'step' : undefined, onClick: () => (this.page = page) }, page + 1))
     ]);
   }
   static get is() { return "cat-pagination"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-pagination.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-pagination.css"]
-  }; }
-  static get properties() { return {
-    "page": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The current page."
-      },
-      "attribute": "page",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "pageCount": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The total number of pages."
-      },
-      "attribute": "page-count",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "activePadding": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The number of pages to be shown around the current page."
-      },
-      "attribute": "active-padding",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "sidePadding": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The number of pages to be shown at the edges."
-      },
-      "attribute": "side-padding",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
-        "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The size of the buttons."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'m'"
-    },
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'filled' | 'outlined' | 'text'",
-        "resolved": "\"filled\" | \"outlined\" | \"text\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The rendering style of the buttons."
+  static get originalStyleUrls() {
+    return {
+      "$": ["cat-pagination.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cat-pagination.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "page": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The current page."
+        },
+        "attribute": "page",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "'text'"
-    },
-    "round": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "pageCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The total number of pages."
+        },
+        "attribute": "page-count",
+        "reflect": false,
+        "defaultValue": "1"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use round button edges."
+      "activePadding": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The number of pages to be shown around the current page."
+        },
+        "attribute": "active-padding",
+        "reflect": false,
+        "defaultValue": "1"
       },
-      "attribute": "round",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "compact": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "sidePadding": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The number of pages to be shown at the edges."
+        },
+        "attribute": "side-padding",
+        "reflect": false,
+        "defaultValue": "1"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use compact pagination mode."
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
+          "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the buttons."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'m'"
       },
-      "attribute": "compact",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "iconPrev": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'filled' | 'outlined' | 'text'",
+          "resolved": "\"filled\" | \"outlined\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The rendering style of the buttons."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'text'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The icon of the \"previous\" button."
+      "round": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use round button edges."
+        },
+        "attribute": "round",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "icon-prev",
-      "reflect": false,
-      "defaultValue": "'chevron-left-outlined'"
-    },
-    "iconNext": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "compact": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use compact pagination mode."
+        },
+        "attribute": "compact",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The icon of the \"next\" button."
+      "iconPrev": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The icon of the \"previous\" button."
+        },
+        "attribute": "icon-prev",
+        "reflect": false,
+        "defaultValue": "'chevron-left-outlined'"
       },
-      "attribute": "icon-next",
-      "reflect": false,
-      "defaultValue": "'chevron-right-outlined'"
-    }
-  }; }
+      "iconNext": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The icon of the \"next\" button."
+        },
+        "attribute": "icon-next",
+        "reflect": false,
+        "defaultValue": "'chevron-right-outlined'"
+      }
+    };
+  }
 }
-//# sourceMappingURL=cat-pagination.js.map
+//# sourceMappingURL=cat-pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cat-pagination.js","sourceRoot":"","sources":["../../../src/components/cat-pagination/cat-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n */\n@Component({\n  tag: 'cat-pagination',\n  styleUrl: 'cat-pagination.scss',\n  shadow: true\n})\nexport class CatPagination {\n  /**\n   * The current page.\n   */\n  @Prop({ mutable: true }) page = 0;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() pageCount = 1;\n\n  /**\n   * The number of pages to be shown around the current page.\n   */\n  @Prop() activePadding = 1;\n\n  /**\n   * The number of pages to be shown at the edges.\n   */\n  @Prop() sidePadding = 1;\n\n  /**\n   * The size of the buttons.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The rendering style of the buttons.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'text';\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Use compact pagination mode.\n   */\n  @Prop() compact = false;\n\n  /**\n   * The icon of the \"previous\" button.\n   */\n  @Prop() iconPrev = 'chevron-left-outlined';\n\n  /**\n   * The icon of the \"next\" button.\n   */\n  @Prop() iconNext = 'chevron-right-outlined';\n\n  render() {\n    return (\n      <nav role=\"navigation\">\n        <ol\n          class={{\n            [`cat-pagination-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isFirst}\n              a11yLabel={i18n.t('pagination.prev')}\n              icon={this.iconPrev}\n              iconOnly\n              onClick={() => (this.page = this.page - 1)}\n            ></cat-button>\n          </li>\n          {this.content}\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isLast}\n              a11yLabel={i18n.t('pagination.next')}\n              icon={this.iconNext}\n              iconOnly\n              onClick={() => (this.page = this.page + 1)}\n            ></cat-button>\n          </li>\n        </ol>\n      </nav>\n    );\n  }\n\n  get isFirst() {\n    return this.page === 0;\n  }\n\n  get isLast() {\n    return this.page === this.pageCount - 1;\n  }\n\n  get pages() {\n    if (!this.sidePadding && !this.activePadding) {\n      return [this.page];\n    }\n\n    const result = new Set<number>();\n    const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n    const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;\n    const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n    const maxActivepage = maxPage\n      ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n      : this.pageCount - this.sidePadding;\n\n    this.addSeq(result, 0, minActivepage);\n    if (!minPage && !maxPage) {\n      this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n    }\n    this.addSeq(result, maxActivepage, this.pageCount);\n\n    return [...result];\n  }\n\n  private addSeq(set: Set<number>, start: number, end: number) {\n    const _start = this.clamp(start, 0, this.pageCount);\n    const _end = this.clamp(end, 0, this.pageCount);\n    Array(_end - _start)\n      .fill(0)\n      .forEach((_, i) => set.add(_start + i));\n  }\n\n  private clamp(num: number, min: number, max: number) {\n    return Math.min(Math.max(num, min), max);\n  }\n\n  private get content() {\n    if (this.compact) {\n      return (\n        <li class=\"text\">\n          {this.page + 1}/{this.pageCount}\n        </li>\n      );\n    }\n\n    return this.pages.map((page, i) => [\n      i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n      <li>\n        <cat-button\n          variant={this.variant}\n          size={this.size}\n          round={this.round}\n          color={this.page === page ? 'primary' : undefined}\n          active={this.page === page}\n          a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n          a11yCurrent={this.page === page ? 'step' : undefined}\n          onClick={() => (this.page = page)}\n        >\n          {page + 1}\n        </cat-button>\n      </li>\n    ]);\n  }\n}\n"]}
+{"version":3,"file":"cat-pagination.js","sourceRoot":"","sources":["../../../src/components/cat-pagination/cat-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n */\n@Component({\n  tag: 'cat-pagination',\n  styleUrl: 'cat-pagination.scss',\n  shadow: true\n})\nexport class CatPagination {\n  /**\n   * The current page.\n   */\n  @Prop({ mutable: true }) page = 0;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() pageCount = 1;\n\n  /**\n   * The number of pages to be shown around the current page.\n   */\n  @Prop() activePadding = 1;\n\n  /**\n   * The number of pages to be shown at the edges.\n   */\n  @Prop() sidePadding = 1;\n\n  /**\n   * The size of the buttons.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The rendering style of the buttons.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'text';\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Use compact pagination mode.\n   */\n  @Prop() compact = false;\n\n  /**\n   * The icon of the \"previous\" button.\n   */\n  @Prop() iconPrev = 'chevron-left-outlined';\n\n  /**\n   * The icon of the \"next\" button.\n   */\n  @Prop() iconNext = 'chevron-right-outlined';\n\n  render() {\n    return (\n      <nav role=\"navigation\">\n        <ol\n          class={{\n            [`cat-pagination-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isFirst}\n              a11yLabel={i18n.t('pagination.prev')}\n              icon={this.iconPrev}\n              iconOnly\n              onClick={() => (this.page = this.page - 1)}\n            ></cat-button>\n          </li>\n          {this.content}\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isLast}\n              a11yLabel={i18n.t('pagination.next')}\n              icon={this.iconNext}\n              iconOnly\n              onClick={() => (this.page = this.page + 1)}\n            ></cat-button>\n          </li>\n        </ol>\n      </nav>\n    );\n  }\n\n  get isFirst() {\n    return this.page === 0;\n  }\n\n  get isLast() {\n    return this.page === this.pageCount - 1;\n  }\n\n  get pages() {\n    if (!this.sidePadding && !this.activePadding) {\n      return [this.page];\n    }\n\n    const result = new Set<number>();\n    const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n    const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;\n    const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n    const maxActivepage = maxPage\n      ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n      : this.pageCount - this.sidePadding;\n\n    this.addSeq(result, 0, minActivepage);\n    if (!minPage && !maxPage) {\n      this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n    }\n    this.addSeq(result, maxActivepage, this.pageCount);\n\n    return [...result];\n  }\n\n  private addSeq(set: Set<number>, start: number, end: number) {\n    const _start = this.clamp(start, 0, this.pageCount);\n    const _end = this.clamp(end, 0, this.pageCount);\n    Array(_end - _start)\n      .fill(0)\n      .forEach((_, i) => set.add(_start + i));\n  }\n\n  private clamp(num: number, min: number, max: number) {\n    return Math.min(Math.max(num, min), max);\n  }\n\n  private get content() {\n    if (this.compact) {\n      return (\n        <li class=\"text\">\n          {this.page + 1}/{this.pageCount}\n        </li>\n      );\n    }\n\n    return this.pages.map((page, i) => [\n      i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n      <li>\n        <cat-button\n          variant={this.variant}\n          size={this.size}\n          round={this.round}\n          color={this.page === page ? 'primary' : undefined}\n          active={this.page === page}\n          a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n          a11yCurrent={this.page === page ? 'step' : undefined}\n          onClick={() => (this.page = page)}\n        >\n          {page + 1}\n        </cat-button>\n      </li>\n    ]);\n  }\n}\n"]}