@haiilo/catalyst 1.3.1 → 2.0.0

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

@@ -1,105 +1,77 @@
 import Toastify from 'toastify-js';
-export var TypeIcons;
-(function (TypeIcons) {
-  TypeIcons["success"] = "check-circle-filled";
-  TypeIcons["error"] = "cross-circle-filled";
-  TypeIcons["info"] = "danger-filled";
-  TypeIcons["primary"] = "star-circle-filled";
-  TypeIcons["secondary"] = "info-circle-filled";
-})(TypeIcons || (TypeIcons = {}));
-export const ToastPositions = {
-  'top-left': {
-    gravity: 'top',
-    position: 'left'
-  },
-  'top-center': {
-    gravity: 'top',
-    position: 'center'
-  },
-  'top-right': {
-    gravity: 'top',
-    position: 'right'
-  },
-  'bottom-left': {
-    gravity: 'bottom',
-    position: 'left'
-  },
-  'bottom-center': {
-    gravity: 'bottom',
-    position: 'center'
-  },
-  'bottom-right': {
-    gravity: 'bottom',
-    position: 'right'
+import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
+export class CatNotificationService {
+  constructor() {
+    // hide constructor
   }
-};
-class CatNotificationService {
-  error(title, message = ' ', options) {
-    const toastOptions = this.extractOptions(title, message, options);
-    Toastify(toastOptions).showToast();
-  }
-  success(title, message = ' ', options) {
-    const toastOptions = this.extractOptions(title, message, options);
-    Toastify(toastOptions).showToast();
-  }
-  info(title, message = ' ', options) {
-    const toastOptions = this.extractOptions(title, message, options);
-    Toastify(toastOptions).showToast();
-  }
-  primary(title, message = ' ', options) {
-    const toastOptions = this.extractOptions(title, message, options);
-    Toastify(toastOptions).showToast();
+  static getInstance() {
+    if (!CatNotificationService.instance) {
+      CatNotificationService.instance = new CatNotificationService();
+    }
+    return CatNotificationService.instance;
   }
-  secondary(title, message = ' ', options) {
-    const toastOptions = this.extractOptions(title, message, options);
-    Toastify(toastOptions).showToast();
+  show(content, options) {
+    const ref = {};
+    const toastContent = this.getNode(content, ref, options);
+    const toastOptions = this.getOptions(toastContent, ref, options);
+    const toast = Toastify(toastOptions);
+    ref.toast = toast;
+    toast.showToast();
+    return () => toast.hideToast();
   }
-  toastHTMLTemplate(title, message = ' ', options) {
-    var _a;
+  getNode(content, ref, options) {
+    var _a, _b;
     const template = document.createElement('template');
-    const typeIcon = (options === null || options === void 0 ? void 0 : options.type) ? TypeIcons[options.type] : TypeIcons.secondary;
-    title = title.trim();
-    message = message.trim();
-    const hasMessage = message && message !== '';
-    const hasMessageClass = hasMessage ? 'has-message' : '';
     template.innerHTML = `<div class="cat-toastify-wrapper">
-        <div class="cat-toastify-icon-wrapper ${(_a = options === null || options === void 0 ? void 0 : options.type) !== null && _a !== void 0 ? _a : 'secondary'}">
-             <cat-icon icon="${typeIcon}"></cat-icon>
-        </div>
-        <div class="cat-toastify-title-wrapper ${hasMessageClass}">
-            <div class="cat-toastify-title">${title}</div></div>
-        ${hasMessage ? `<div class="cat-toastify-message">${message}</div>` : ''}
-      </div>`;
-    return template.content.firstChild;
-  }
-  getPosition(options) {
-    const position = {
-      gravity: 'bottom',
-      position: 'left'
-    };
-    if ((options === null || options === void 0 ? void 0 : options.position) && ToastPositions[options.position]) {
-      position.position = ToastPositions[options.position].position;
-      position.gravity = ToastPositions[options.position].gravity;
+      ${(options === null || options === void 0 ? void 0 : options.icon) ? `<cat-icon class="cat-toastify-icon" icon="${options.icon}" size="l"></cat-icon>` : ''}
+      <div class="cat-toastify-content">
+        <div class="cat-toastify-inner">${content}</div>
+        ${(options === null || options === void 0 ? void 0 : options.action)
+      ? `<cat-button class="cat-toastify-action cat-button-pull" size="s" variant="text" color="primary">${options.action}</cat-button>`
+      : ''}
+      </div>
+      ${(options === null || options === void 0 ? void 0 : options.autoClose) === false
+      ? `<cat-button class="cat-toastify-close cat-button-pull" size="s" icon="cross-outlined" variant="text" icon-only="true" class="close" a11y-label="${i18n.t('notification.dismiss')}"></cat-button>`
+      : ''}
+    </div>`;
+    const node = template.content.firstElementChild;
+    (_a = node.querySelector('.cat-toastify-close')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => { var _a; return (_a = ref.toast) === null || _a === void 0 ? void 0 : _a.hideToast(); });
+    (_b = node.querySelector('.cat-toastify-action')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => { var _a; return (_a = options === null || options === void 0 ? void 0 : options.onAction) === null || _a === void 0 ? void 0 : _a.call(options, ref); });
+    const inner = node.querySelector('.cat-toastify-inner');
+    if (inner) {
+      if (typeof content !== 'string') {
+        inner.replaceChildren(content);
+      }
+      else if ((options === null || options === void 0 ? void 0 : options.escapeMarkup) === false) {
+        inner.innerHTML = content;
+      }
+      else {
+        inner.innerText = content;
+      }
     }
-    return position;
+    return node;
   }
-  extractOptions(title, message = ' ', options) {
-    const position = this.getPosition(options);
+  getOptions(node, ref, options) {
+    var _a, _b, _c;
+    const [gravity, position] = ((_b = (_a = options === null || options === void 0 ? void 0 : options.position) === null || _a === void 0 ? void 0 : _a.split('-')) !== null && _b !== void 0 ? _b : ['bottom', 'left']);
+    const duration = (_c = options === null || options === void 0 ? void 0 : options.duration) !== null && _c !== void 0 ? _c : ((options === null || options === void 0 ? void 0 : options.autoClose) === false ? -1 : CatNotificationService.duration);
     return {
-      node: (options === null || options === void 0 ? void 0 : options.content) ? options.content : this.toastHTMLTemplate(title, message, options),
-      duration: CatNotificationService.DURATION,
-      close: true,
-      className: 'cat-toastify',
-      gravity: position.gravity,
-      position: position.position,
+      gravity,
+      position,
+      node,
+      duration,
+      close: false,
+      className: (options === null || options === void 0 ? void 0 : options.mode) === 'light' ? 'cat-toastify' : 'cat-toastify cat-toastify-dark',
       stopOnFocus: true,
+      onClick: () => { var _a; return (_a = options === null || options === void 0 ? void 0 : options.onClick) === null || _a === void 0 ? void 0 : _a.call(options, ref); },
+      callback: () => { var _a; return (_a = options === null || options === void 0 ? void 0 : options.onDismiss) === null || _a === void 0 ? void 0 : _a.call(options, ref); },
       offset: {
-        x: '1.5rem',
-        y: '1.5rem'
+        x: '1rem',
+        y: '1rem'
       }
     };
   }
 }
-CatNotificationService.DURATION = 80000;
-export const NotificationsService = new CatNotificationService();
+CatNotificationService.duration = 3000;
+export const catNotificationService = CatNotificationService.getInstance();
 //# sourceMappingURL=cat-notification.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cat-notification.js","sourceRoot":"","sources":["../../../src/components/cat-notification/cat-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import Toastify, { Options } from 'toastify-js';\n\nexport enum TypeIcons {\n  'success' = 'check-circle-filled',\n  'error' = 'cross-circle-filled',\n  'info' = 'danger-filled',\n  'primary' = 'star-circle-filled',\n  'secondary' = 'info-circle-filled'\n}\n\nexport const ToastPositions: { [key: string]: { gravity: 'top' | 'bottom'; position: 'left' | 'center' | 'right' } } = {\n  'top-left': {\n    gravity: 'top',\n    position: 'left'\n  },\n  'top-center': {\n    gravity: 'top',\n    position: 'center'\n  },\n  'top-right': {\n    gravity: 'top',\n    position: 'right'\n  },\n  'bottom-left': {\n    gravity: 'bottom',\n    position: 'left'\n  },\n  'bottom-center': {\n    gravity: 'bottom',\n    position: 'center'\n  },\n  'bottom-right': {\n    gravity: 'bottom',\n    position: 'right'\n  }\n};\n\nexport interface ToastPosition {\n  gravity: 'top' | 'bottom';\n  position: 'left' | 'center' | 'right';\n}\n\nexport interface ToastOptions {\n  /**\n   * HTML content of the toast\n   */\n  content: Node;\n  /**\n   * Show close button\n   */\n  close: boolean;\n  /**\n   * Toast position\n   */\n  position: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n  /**\n   *  Type of toast\n   */\n  type: 'success' | 'info' | 'error' | 'primary' | 'secondary';\n  /**\n   *  Invoked when the toast is clicked\n   */\n  onClick: () => void;\n  /**\n   * Toggle the default behavior of escaping HTML markup\n   */\n  escapeMarkup: boolean;\n}\n\nclass CatNotificationService {\n  private static DURATION = 80000;\n\n  error(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n    const toastOptions: Options = this.extractOptions(title, message, options);\n    Toastify(toastOptions).showToast();\n  }\n\n  success(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n    const toastOptions: Options = this.extractOptions(title, message, options);\n    Toastify(toastOptions).showToast();\n  }\n\n  info(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n    const toastOptions: Options = this.extractOptions(title, message, options);\n    Toastify(toastOptions).showToast();\n  }\n\n  primary(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n    const toastOptions: Options = this.extractOptions(title, message, options);\n    Toastify(toastOptions).showToast();\n  }\n\n  secondary(title: string, message = ' ', options?: Partial<ToastOptions>): void {\n    const toastOptions: Options = this.extractOptions(title, message, options);\n    Toastify(toastOptions).showToast();\n  }\n\n  private toastHTMLTemplate(title: string, message = ' ', options?: Partial<ToastOptions>): HTMLElement {\n    const template = document.createElement('template');\n    const typeIcon = options?.type ? TypeIcons[options.type] : TypeIcons.secondary;\n    title = title.trim();\n    message = message.trim();\n    const hasMessage = message && message !== '';\n    const hasMessageClass = hasMessage ? 'has-message' : '';\n    template.innerHTML = `<div class=\"cat-toastify-wrapper\">\n        <div class=\"cat-toastify-icon-wrapper ${options?.type ?? 'secondary'}\">\n             <cat-icon icon=\"${typeIcon}\"></cat-icon>\n        </div>\n        <div class=\"cat-toastify-title-wrapper ${hasMessageClass}\">\n            <div class=\"cat-toastify-title\">${title}</div></div>\n        ${hasMessage ? `<div class=\"cat-toastify-message\">${message}</div>` : ''}\n      </div>`;\n    return template.content.firstChild as HTMLElement;\n  }\n\n  private getPosition(options?: Partial<ToastOptions>): ToastPosition {\n    const position: ToastPosition = {\n      gravity: 'bottom',\n      position: 'left'\n    };\n    if (options?.position && ToastPositions[options.position]) {\n      position.position = ToastPositions[options.position].position;\n      position.gravity = ToastPositions[options.position].gravity;\n    }\n    return position;\n  }\n\n  private extractOptions(title: string, message = ' ', options?: Partial<ToastOptions>): Options {\n    const position: ToastPosition = this.getPosition(options);\n    return {\n      node: options?.content ? options.content : this.toastHTMLTemplate(title, message, options),\n      duration: CatNotificationService.DURATION,\n      close: true,\n      className: 'cat-toastify',\n      gravity: position.gravity,\n      position: position.position,\n      stopOnFocus: true,\n      offset: {\n        x: '1.5rem',\n        y: '1.5rem'\n      }\n    };\n  }\n}\n\nexport const NotificationsService = new CatNotificationService();\n"]}
+{"version":3,"file":"cat-notification.js","sourceRoot":"","sources":["../../../src/components/cat-notification/cat-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import Toastify, { Options } from 'toastify-js';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\ninterface ToastRef {\n  toast?: {\n    showToast: () => void;\n    hideToast: () => void;\n  };\n}\n\nexport interface ToastOptions {\n  mode: 'dark' | 'light';\n  icon: string;\n  position: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n  autoClose: boolean;\n  duration: number;\n  action: string;\n  escapeMarkup: boolean;\n  onAction: (toast: ToastRef) => void;\n  onClick: (toast: ToastRef) => void;\n  onDismiss: (toast: ToastRef) => void;\n}\n\nexport class CatNotificationService {\n  private static instance: CatNotificationService;\n  private static duration = 3000;\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatNotificationService {\n    if (!CatNotificationService.instance) {\n      CatNotificationService.instance = new CatNotificationService();\n    }\n    return CatNotificationService.instance;\n  }\n\n  show(content: string | Node, options?: Partial<ToastOptions>): () => void {\n    const ref: ToastRef = {};\n    const toastContent = this.getNode(content, ref, options);\n    const toastOptions = this.getOptions(toastContent, ref, options);\n    const toast = Toastify(toastOptions);\n    ref.toast = toast;\n    toast.showToast();\n    return () => toast.hideToast();\n  }\n\n  private getNode(content: string | Node, ref: ToastRef, options?: Partial<ToastOptions>): HTMLElement {\n    const template = document.createElement('template');\n    template.innerHTML = `<div class=\"cat-toastify-wrapper\">\n      ${options?.icon ? `<cat-icon class=\"cat-toastify-icon\" icon=\"${options.icon}\" size=\"l\"></cat-icon>` : ''}\n      <div class=\"cat-toastify-content\">\n        <div class=\"cat-toastify-inner\">${content}</div>\n        ${\n          options?.action\n            ? `<cat-button class=\"cat-toastify-action cat-button-pull\" size=\"s\" variant=\"text\" color=\"primary\">${options.action}</cat-button>`\n            : ''\n        }\n      </div>\n      ${\n        options?.autoClose === false\n          ? `<cat-button class=\"cat-toastify-close cat-button-pull\" size=\"s\" icon=\"cross-outlined\" variant=\"text\" icon-only=\"true\" class=\"close\" a11y-label=\"${i18n.t(\n              'notification.dismiss'\n            )}\"></cat-button>`\n          : ''\n      }\n    </div>`;\n\n    const node = template.content.firstElementChild as HTMLElement;\n    node.querySelector('.cat-toastify-close')?.addEventListener('click', () => ref.toast?.hideToast());\n    node.querySelector('.cat-toastify-action')?.addEventListener('click', () => options?.onAction?.(ref));\n    const inner = node.querySelector<HTMLDivElement>('.cat-toastify-inner');\n    if (inner) {\n      if (typeof content !== 'string') {\n        inner.replaceChildren(content);\n      } else if (options?.escapeMarkup === false) {\n        inner.innerHTML = content;\n      } else {\n        inner.innerText = content;\n      }\n    }\n\n    return node;\n  }\n\n  private getOptions(node: Node, ref: ToastRef, options?: Partial<ToastOptions>): Options {\n    const [gravity, position] = (options?.position?.split('-') ?? ['bottom', 'left']) as [\n      Options['gravity'],\n      Options['position']\n    ];\n    const duration = options?.duration ?? (options?.autoClose === false ? -1 : CatNotificationService.duration);\n    return {\n      gravity,\n      position,\n      node,\n      duration,\n      close: false,\n      className: options?.mode === 'light' ? 'cat-toastify' : 'cat-toastify cat-toastify-dark',\n      stopOnFocus: true,\n      onClick: () => options?.onClick?.(ref),\n      callback: () => options?.onDismiss?.(ref),\n      offset: {\n        x: '1rem',\n        y: '1rem'\n      }\n    };\n  }\n}\n\nexport const catNotificationService = CatNotificationService.getInstance();\n"]}

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

@@ -0,0 +1,106 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+ol {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  display: inline-flex;
+  justify-content: center;
+}
+li.dots {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* stylelint-enable property-no-vendor-prefix */
+}
+
+:host([variant=outlined]) ol {
+  gap: 0.75rem;
+}
+
+.cat-pagination-xs li.dots,
+.cat-pagination-xs li.text {
+  height: 1.5rem;
+  line-height: 1.5rem;
+  font-size: 0.875rem;
+}
+.cat-pagination-xs li.dots {
+  width: 1.5rem;
+}
+
+:host([variant=outlined]) .cat-pagination-xs {
+  gap: 0.375rem;
+}
+
+.cat-pagination-s li.dots,
+.cat-pagination-s li.text {
+  height: 2rem;
+  line-height: 2rem;
+  font-size: 0.9375rem;
+}
+.cat-pagination-s li.dots {
+  width: 2rem;
+}
+
+:host([variant=outlined]) .cat-pagination-s {
+  gap: 0.5rem;
+}
+
+.cat-pagination-m li.dots,
+.cat-pagination-m li.text {
+  height: 2.5rem;
+  line-height: 2.5rem;
+  font-size: 0.9375rem;
+}
+.cat-pagination-m li.dots {
+  width: 2.5rem;
+}
+
+:host([variant=outlined]) .cat-pagination-m {
+  gap: 0.625rem;
+}
+
+.cat-pagination-l li.dots,
+.cat-pagination-l li.text {
+  height: 3rem;
+  line-height: 3rem;
+  font-size: 0.9375rem;
+}
+.cat-pagination-l li.dots {
+  width: 3rem;
+}
+
+:host([variant=outlined]) .cat-pagination-l {
+  gap: 0.75rem;
+}
+
+.cat-pagination-xl li.dots,
+.cat-pagination-xl li.text {
+  height: 3.5rem;
+  line-height: 3.5rem;
+  font-size: 1.125rem;
+}
+.cat-pagination-xl li.dots {
+  width: 3.5rem;
+}
+
+:host([variant=outlined]) .cat-pagination-xl {
+  gap: 0.875rem;
+}

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

@@ -0,0 +1,302 @@
+import { Component, h, Prop } 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
+ * data such as a table. Pagination is built with list HTML elements and a
+ * wrapping `<nav>` element to identify it as a navigation section to screen
+ * readers and other assistive technologies. Furthermore, the current page is
+ * correctly highlighted using `aria-current`.
+ */
+export class CatPagination {
+  constructor() {
+    /**
+     * The current page.
+     */
+    this.page = 1;
+    /**
+     * 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) })))));
+  }
+  get isFirst() {
+    return this.page === 0;
+  }
+  get isLast() {
+    return this.page === this.pageCount - 1;
+  }
+  get pages() {
+    if (!this.sidePadding && !this.activePadding) {
+      return [this.page];
+    }
+    const result = new Set();
+    const minPage = this.page <= this.sidePadding + this.activePadding + 1;
+    const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;
+    const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;
+    const maxActivepage = maxPage
+      ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2
+      : this.pageCount - this.sidePadding;
+    this.addSeq(result, 0, minActivepage);
+    if (!minPage && !maxPage) {
+      this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);
+    }
+    this.addSeq(result, maxActivepage, this.pageCount);
+    return [...result];
+  }
+  addSeq(set, start, end) {
+    const _start = this.clamp(start, 0, this.pageCount);
+    const _end = this.clamp(end, 0, this.pageCount);
+    Array(_end - _start)
+      .fill(0)
+      .forEach((_, i) => set.add(_start + i));
+  }
+  clamp(num, min, max) {
+    return Math.min(Math.max(num, min), max);
+  }
+  get content() {
+    if (this.compact) {
+      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 || 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": "1"
+    },
+    "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."
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'text'"
+    },
+    "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"
+    },
+    "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"
+    },
+    "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'"
+    },
+    "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

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

@@ -0,0 +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 = 1;\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 || undefined}\n          onClick={() => (this.page = page)}\n        >\n          {page + 1}\n        </cat-button>\n      </li>\n    ]);\n  }\n}\n"]}