@haiilo/catalyst 5.4.0 → 6.0.0

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

@@ -20,29 +20,28 @@ export class CatNotificationService {
     return () => toast.hideToast();
   }
   getNode(content, ref, options) {
-    var _a, _b;
     const template = document.createElement('template');
     template.innerHTML = `<div class="cat-toastify-wrapper">
-      ${(options === null || options === void 0 ? void 0 : options.icon) ? `<cat-icon class="cat-toastify-icon" icon="${options.icon}" size="l"></cat-icon>` : ''}
+      ${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"></div>
-        ${(options === null || options === void 0 ? void 0 : options.action)
+        ${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
+      ${options?.autoClose === false
       ? `<cat-button class="cat-toastify-close cat-button-pull" size="s" icon="$cat:notification-close" 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); });
+    node.querySelector('.cat-toastify-close')?.addEventListener('click', () => ref.toast?.hideToast());
+    node.querySelector('.cat-toastify-action')?.addEventListener('click', () => options?.onAction?.(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) {
+      else if (options?.escapeMarkup === false) {
         inner.innerHTML = content;
       }
       else {
@@ -52,19 +51,18 @@ export class CatNotificationService {
     return node;
   }
   getOptions(node, ref, options) {
-    var _a, _b, _c;
-    const [gravity, position] = ((_b = (_a = options === null || options === void 0 ? void 0 : options.placement) === 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);
+    const [gravity, position] = (options?.placement?.split('-') ?? ['bottom', 'left']);
+    const duration = options?.duration ?? (options?.autoClose === false ? -1 : CatNotificationService.duration);
     return {
       gravity,
       position,
       node,
       duration,
       close: false,
-      className: (options === null || options === void 0 ? void 0 : options.mode) === 'light' ? 'cat-toastify' : 'cat-toastify cat-toastify-dark',
+      className: 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); },
+      onClick: () => options?.onClick?.(ref),
+      callback: () => options?.onDismiss?.(ref),
       offset: {
         x: '1rem',
         y: '1rem'

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';\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  /** The appearance mode of the notification. (Default: `dark`) */\n  mode: 'dark' | 'light';\n  /** An optional icon to appear in the notification. */\n  icon: string;\n  /** The placement of the notification on screen. (Default: `bottom-left`) */\n  placement: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n  /** Enables auto-closing of the notification. (Default: `true`) */\n  autoClose: boolean;\n  /** The duration in ms for the notification to be visible on screen. (Default: `3000`) */\n  duration: number;\n  /** An optional label for an action button. */\n  action: string;\n  /** Enable markup escape and sanitise HTML input. (Default: true) */\n  escapeMarkup: boolean;\n  /** Callback executed when the action button is clicked. Receives a reference to the notification as first argument. */\n  onAction: (toast: ToastRef) => void;\n  /** Callback executed when the notification is clicked. Receives a reference to the notification as first argument. */\n  onClick: (toast: ToastRef) => void;\n  /** Callback executed when the notification is dismissed. Receives a reference to the notification as first argument. */\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\"></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=\"$cat:notification-close\" 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?.placement?.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"]}
+{"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  /** The appearance mode of the notification. (Default: `dark`) */\n  mode: 'dark' | 'light';\n  /** An optional icon to appear in the notification. */\n  icon: string;\n  /** The placement of the notification on screen. (Default: `bottom-left`) */\n  placement: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n  /** Enables auto-closing of the notification. (Default: `true`) */\n  autoClose: boolean;\n  /** The duration in ms for the notification to be visible on screen. (Default: `3000`) */\n  duration: number;\n  /** An optional label for an action button. */\n  action: string;\n  /** Enable markup escape and sanitise HTML input. (Default: true) */\n  escapeMarkup: boolean;\n  /** Callback executed when the action button is clicked. Receives a reference to the notification as first argument. */\n  onAction: (toast: ToastRef) => void;\n  /** Callback executed when the notification is clicked. Receives a reference to the notification as first argument. */\n  onClick: (toast: ToastRef) => void;\n  /** Callback executed when the notification is dismissed. Receives a reference to the notification as first argument. */\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\"></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=\"$cat:notification-close\" 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?.placement?.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.js

@@ -280,8 +280,8 @@ export class CatPagination {
           "text": "Emitted when the page of the pagination has changed."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         }
       }];

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, Event, EventEmitter, 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 = '$cat:pagination-left';\n\n  /**\n   * The icon of the \"next\" button.\n   */\n  @Prop() iconNext = '$cat:pagination-right';\n\n  /**\n   * Emitted when the page of the pagination has changed.\n   */\n  @Event() catChange!: EventEmitter;\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.setPage(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.setPage(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  private setPage(value: number) {\n    this.page = value;\n    this.catChange.emit(this.page);\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.setPage(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, Event, EventEmitter, 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 = '$cat:pagination-left';\n\n  /**\n   * The icon of the \"next\" button.\n   */\n  @Prop() iconNext = '$cat:pagination-right';\n\n  /**\n   * Emitted when the page of the pagination has changed.\n   */\n  @Event() catChange!: EventEmitter<number>;\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.setPage(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.setPage(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  private setPage(value: number) {\n    this.page = value;\n    this.catChange.emit(this.page);\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.setPage(page)}\n        >\n          {page + 1}\n        </cat-button>\n      </li>\n    ]);\n  }\n}\n"]}

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

@@ -22,7 +22,7 @@ export class CatRadio {
     this.labelHidden = false;
     this.name = undefined;
     this.required = false;
-    this.value = undefined;
+    this.value = '';
     this.hint = undefined;
     this.labelLeft = false;
     this.nativeAttributes = undefined;
@@ -54,18 +54,12 @@ export class CatRadio {
   async doBlur() {
     this.input.blur();
   }
-  /**
-   * Programmatically simulate a click on the radio button.
-   */
-  async doClick() {
-    this.input.click();
-  }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "circle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", { ...this.nativeAttributes, ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "circle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
   }
-  onChange(event) {
+  onInput() {
     this.checked = true;
-    this.catChange.emit(event);
+    this.catChange.emit(this.value);
   }
   onFocus(event) {
     this.catFocus.emit(event);
@@ -216,17 +210,18 @@ export class CatRadio {
         "mutable": false,
         "complexType": {
           "original": "string",
-          "resolved": "string | undefined",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "The value of the radio component."
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "''"
       },
       "hint": {
         "type": "string",
@@ -298,13 +293,9 @@ export class CatRadio {
           "text": "Emitted when the radio is changed."
         },
         "complexType": {
-          "original": "InputEvent",
-          "resolved": "InputEvent",
-          "references": {
-            "InputEvent": {
-              "location": "global"
-            }
-          }
+          "original": "boolean | string",
+          "resolved": "boolean | string",
+          "references": {}
         }
       }, {
         "method": "catFocus",
@@ -391,22 +382,6 @@ export class CatRadio {
           "text": "Programmatically remove focus from the radio button. Use this method\ninstead of `input.blur()`.",
           "tags": []
         }
-      },
-      "doClick": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Programmatically simulate a click on the radio button.",
-          "tags": []
-        }
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n *\n * @slot hint - Optional hint element to be displayed with the radio.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-radio',\n  styleUrl: 'cat-radio.scss',\n  shadow: true\n})\nexport class CatRadio {\n  private readonly _id = `cat-radio-${++nextUniqueId}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Whether this radio is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Whether this radio is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the radio that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the radio component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the radio is required.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio component.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the radio.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the radio component.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the radio is changed.\n   */\n  @Event() catChange!: EventEmitter<InputEvent>;\n\n  /**\n   * Emitted when the radio received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the radio loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on radio', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the radio button. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the radio button. Use this method\n   * instead of `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  /**\n   * Programmatically simulate a click on the radio button.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.input.click();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n          role=\"radio\"\n          aria-checked={this.checked ? 'true' : 'false'}\n        >\n          <span class=\"radio\">\n            <input\n              {...this.nativeAttributes}\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.identifier || this.id}\n              type=\"radio\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              required={this.required}\n              disabled={this.disabled}\n              onInput={this.onChange.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            />\n            <span class=\"circle\"></span>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {(this.hint || this.hasSlottedHint) && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"circle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private onChange(event: InputEvent) {\n    this.checked = true;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"]}
+{"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n *\n * @slot hint - Optional hint element to be displayed with the radio.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-radio',\n  styleUrl: 'cat-radio.scss',\n  shadow: true\n})\nexport class CatRadio {\n  private readonly _id = `cat-radio-${++nextUniqueId}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Whether this radio is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Whether this radio is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the radio that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the radio component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the radio is required.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio component.\n   */\n  @Prop() value = '';\n\n  /**\n   * Optional hint text(s) to be displayed with the radio.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the radio component.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the radio is changed.\n   */\n  @Event() catChange!: EventEmitter<boolean | string>;\n\n  /**\n   * Emitted when the radio received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the radio loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on radio', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the radio button. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the radio button. Use this method\n   * instead of `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n          role=\"radio\"\n          aria-checked={this.checked ? 'true' : 'false'}\n        >\n          <span class=\"radio\">\n            <input\n              {...this.nativeAttributes}\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.identifier || this.id}\n              type=\"radio\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              required={this.required}\n              disabled={this.disabled}\n              onInput={this.onInput.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            />\n            <span class=\"circle\"></span>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {(this.hint || this.hasSlottedHint) && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"circle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private onInput() {\n    this.checked = true;\n    this.catChange.emit(this.value);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"]}

package/dist/collection/components/cat-radio-group/cat-radio-group.js

@@ -36,7 +36,6 @@ export class CatRadioGroup {
     this.onLabelLeftChanged(this.labelLeft);
   }
   onKeydown(event) {
-    var _a, _b;
     if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {
       const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);
       const activeElement = document.activeElement;
@@ -44,15 +43,20 @@ export class CatRadioGroup {
       const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
       const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
       targetElements[targetIdx].doFocus();
-      (_b = (_a = targetElements[targetIdx].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.click();
+      targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();
       this.updateTabIndex();
       event.preventDefault();
     }
   }
   onInput(event) {
-    const catRadioElement = this.catRadioGroup.find(value => value === event.target);
-    this.value = catRadioElement === null || catRadioElement === void 0 ? void 0 : catRadioElement.value;
-    this.catChange.emit();
+    const radio = this.catRadioGroup.find(radio => radio === event.target);
+    this.value = radio?.checked ? radio?.value : undefined;
+    this.catChange.emit(this.value);
+  }
+  onFocus(event) {
+    if (!event.relatedTarget) {
+      this.catBlur.emit(event);
+    }
   }
   onBlur(event) {
     if (!event.relatedTarget) {
@@ -63,11 +67,12 @@ export class CatRadioGroup {
     return (h("div", { role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", null)));
   }
   updateTabIndex() {
-    var _a, _b;
     if (this.catRadioGroup.length) {
-      this.catRadioGroup.forEach(value => { var _a, _b; return (_b = (_a = value.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '-1'); });
+      this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));
       const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);
-      (_b = (_a = this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+      this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot
+        ?.querySelector('input')
+        ?.setAttribute('tabindex', '0');
     }
   }
   static get is() { return "cat-radio-group"; }
@@ -185,10 +190,25 @@ export class CatRadioGroup {
           "text": "Emitted when the value is changed."
         },
         "complexType": {
-          "original": "InputEvent",
-          "resolved": "InputEvent",
+          "original": "boolean | string",
+          "resolved": "boolean | string",
+          "references": {}
+        }
+      }, {
+        "method": "catFocus",
+        "name": "catFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the radio group received focus."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
           "references": {
-            "InputEvent": {
+            "FocusEvent": {
               "location": "global"
             }
           }
@@ -243,6 +263,12 @@ export class CatRadioGroup {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "focus",
+        "method": "onFocus",
+        "target": undefined,
+        "capture": true,
+        "passive": false
       }, {
         "name": "blur",
         "method": "onBlur",

package/dist/collection/components/cat-radio-group/cat-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * A group of radio buttons.\n */\n@Component({\n  tag: 'cat-radio-group',\n  styleUrl: 'cat-radio-group.scss',\n  shadow: true\n})\nexport class CatRadioGroup {\n  private catRadioGroup: HTMLCatRadioElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The name of the radio group component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Whether this radio group is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Adds an accessible label for the radio group that\n   * it is only shown in assistive technologies, like screen readers.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Whether the label of the radios should appear to the left of them.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<InputEvent>;\n\n  /**\n   * Emitted when the radio group loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  @Watch('name')\n  onNameChanged(newName?: string) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.name = newName));\n  }\n\n  @Watch('value')\n  onValueChanged(newValue?: string) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.checked = catRadio.value === newValue));\n    this.updateTabIndex();\n  }\n\n  @Watch('disabled')\n  onDisabledChanged(disabled: boolean) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));\n  }\n\n  @Watch('labelLeft')\n  onLabelLeftChanged(labelLeft: boolean) {\n    this.catRadioGroup.forEach(catRadio => {\n      if (labelLeft) {\n        catRadio.labelLeft = labelLeft;\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n    this.onNameChanged(this.name);\n    this.onValueChanged(this.value);\n    this.onDisabledChanged(this.disabled);\n    this.onLabelLeftChanged(this.labelLeft);\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n      const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n      const activeElement = document.activeElement as HTMLCatRadioElement;\n      const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n      targetElements[targetIdx].doFocus();\n      targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n      this.updateTabIndex();\n      event.preventDefault();\n    }\n  }\n\n  @Listen('input')\n  onInput(event: MouseEvent): void {\n    const catRadioElement = this.catRadioGroup.find(value => value === event.target);\n    this.value = catRadioElement?.value;\n    this.catChange.emit();\n  }\n\n  @Listen('blur', { capture: true })\n  onBlur(event: FocusEvent): void {\n    if (!event.relatedTarget) {\n      this.catBlur.emit(event);\n    }\n  }\n\n  render() {\n    return (\n      <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n        <slot></slot>\n      </div>\n    );\n  }\n\n  private updateTabIndex() {\n    if (this.catRadioGroup.length) {\n      this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n      const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n      this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n        ?.querySelector('input')\n        ?.setAttribute('tabindex', '0');\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * A group of radio buttons.\n */\n@Component({\n  tag: 'cat-radio-group',\n  styleUrl: 'cat-radio-group.scss',\n  shadow: true\n})\nexport class CatRadioGroup {\n  private catRadioGroup: HTMLCatRadioElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The name of the radio group component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Whether this radio group is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Adds an accessible label for the radio group that\n   * it is only shown in assistive technologies, like screen readers.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Whether the label of the radios should appear to the left of them.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<boolean | string>;\n\n  /**\n   * Emitted when the radio group received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the radio group loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  @Watch('name')\n  onNameChanged(newName?: string) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.name = newName));\n  }\n\n  @Watch('value')\n  onValueChanged(newValue?: string) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.checked = catRadio.value === newValue));\n    this.updateTabIndex();\n  }\n\n  @Watch('disabled')\n  onDisabledChanged(disabled: boolean) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));\n  }\n\n  @Watch('labelLeft')\n  onLabelLeftChanged(labelLeft: boolean) {\n    this.catRadioGroup.forEach(catRadio => {\n      if (labelLeft) {\n        catRadio.labelLeft = labelLeft;\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n    this.onNameChanged(this.name);\n    this.onValueChanged(this.value);\n    this.onDisabledChanged(this.disabled);\n    this.onLabelLeftChanged(this.labelLeft);\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n      const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n      const activeElement = document.activeElement as HTMLCatRadioElement;\n      const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n      targetElements[targetIdx].doFocus();\n      targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n      this.updateTabIndex();\n      event.preventDefault();\n    }\n  }\n\n  @Listen('input')\n  onInput(event: MouseEvent): void {\n    const radio = this.catRadioGroup.find(radio => radio === event.target);\n    this.value = radio?.checked ? radio?.value : undefined;\n    this.catChange.emit(this.value);\n  }\n\n  @Listen('focus', { capture: true })\n  onFocus(event: FocusEvent): void {\n    if (!event.relatedTarget) {\n      this.catBlur.emit(event);\n    }\n  }\n\n  @Listen('blur', { capture: true })\n  onBlur(event: FocusEvent): void {\n    if (!event.relatedTarget) {\n      this.catBlur.emit(event);\n    }\n  }\n\n  render() {\n    return (\n      <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n        <slot></slot>\n      </div>\n    );\n  }\n\n  private updateTabIndex() {\n    if (this.catRadioGroup.length) {\n      this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n      const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n      this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n        ?.querySelector('input')\n        ?.setAttribute('tabindex', '0');\n    }\n  }\n}\n"]}

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

@@ -89,12 +89,11 @@ export class CatScrollable {
     return 0;
   }
   toggleClass(name, value) {
-    var _a, _b;
     if (value) {
-      (_a = this.scrollWrapperElement) === null || _a === void 0 ? void 0 : _a.classList.add(name);
+      this.scrollWrapperElement?.classList.add(name);
     }
     else {
-      (_b = this.scrollWrapperElement) === null || _b === void 0 ? void 0 : _b.classList.remove(name);
+      this.scrollWrapperElement?.classList.remove(name);
     }
   }
   static get is() { return "cat-scrollable"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cat-scrollable.js","sourceRoot":"","sources":["../../../src/components/cat-scrollable/cat-scrollable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAc,OAAO,EAAE,MAAM,MAAM,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEzF;;GAEG;AAMH,MAAM,OAAO,aAAa;;IAIP,SAAI,GAAG,IAAI,OAAO,EAAQ,CAAC;IAC3B,cAAS,GAAG,IAAI,OAAO,EAAQ,CAAC;IAChC,mBAAc,GAAG,IAAI,OAAO,EAAyB,CAAC;IACtD,oBAAe,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;qBAKxF,KAAK;qBAIL,KAAK;uBAIH,KAAK;uBAIL,KAAK;wBAIJ,KAAK;0BAKK,KAAK;0BAKL,CAAC;;EAsB1B,kBAAkB;IAChB,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;MACxF,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KAClD;IACD,IAAI,IAAI,CAAC,oBAAoB,EAAE;MAC7B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;KACzD;IACD,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAChD,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5C,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC;OACjD,IAAI,CACH,SAAS,CAAC,aAAa,CAAC,QAAQ,CAAC,EACjC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;MACT,GAAG,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC;MACpC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,CAAC;MACtC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC;MACxC,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,GAAG,CAAC;KAC3C,CAAC,CAAC,EACH,oBAAoB,EAAE,EACtB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B;OACA,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;MAC1C,IAAI,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,CAAC,CAAC;MAC5C,IAAI,CAAC,WAAW,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;MAC9C,IAAI,CAAC,WAAW,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;MAChD,IAAI,CAAC,WAAW,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;EACP,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;KAClB;EACH,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACtB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;IAC1B,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;EACpC,CAAC;EAED,MAAM;IACJ,OAAO;MACL,WAAK,KAAK,EAAC,oBAAoB,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;QACxE,CAAC,IAAI,CAAC,SAAS,IAAI,WAAK,KAAK,EAAC,YAAY,GAAO;QACjD,CAAC,IAAI,CAAC,SAAS,IAAI,WAAK,KAAK,EAAC,aAAa,GAAO;QAClD,CAAC,IAAI,CAAC,SAAS,IAAI,WAAK,KAAK,EAAC,cAAc,GAAO;QACnD,CAAC,IAAI,CAAC,SAAS,IAAI,WAAK,KAAK,EAAC,eAAe,GAAO,CACjD;MACN,WACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EACpC,KAAK,EAAE;UACL,oBAAoB,EAAE,IAAI;UAC1B,UAAU,EAAE,CAAC,IAAI,CAAC,WAAW;UAC7B,UAAU,EAAE,CAAC,IAAI,CAAC,WAAW;UAC7B,eAAe,EAAE,IAAI,CAAC,YAAY;SACnC;QAED,eAAa,CACT;KACP,CAAC;EACJ,CAAC;EAEO,aAAa,CAAC,IAAyC,EAAE,OAA2B;IAC1F,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC;OACjD,IAAI,CACH,SAAS,CAAC,aAAa,CAAC,QAAQ,CAAC,EACjC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,EACrC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,CAAC,EAC5C,oBAAoB,EAAE,EACtB,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,EAC1B,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B;OACA,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;EACrC,CAAC;EAEO,eAAe,CAAC,IAAyC;IAC/D,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,QAAQ,IAAI,EAAE;QACZ,KAAK,KAAK;UACR,OAAO,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC;QACtC,KAAK,MAAM;UACT,OAAO,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC;QACvC,KAAK,OAAO;UACV,OAAO,IAAI,CAAC,aAAa,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC;QACzG,KAAK,QAAQ;UACX,OAAO,IAAI,CAAC,aAAa,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC;QAC1G;UACE,OAAO,CAAC,CAAC;OACZ;KACF;IACD,OAAO,CAAC,CAAC;EACX,CAAC;EAEO,WAAW,CAAC,IAAY,EAAE,KAAc;;IAC9C,IAAI,KAAK,EAAE;MACT,MAAA,IAAI,CAAC,oBAAoB,0CAAE,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;KAChD;SAAM;MACL,MAAA,IAAI,CAAC,oBAAoB,0CAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;KACnD;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnKuB,sBAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\nimport { auditTime, distinctUntilChanged, filter, map, takeUntil } from 'rxjs/operators';\n\n/**\n * An element to display scrollable content.\n */\n@Component({\n  tag: 'cat-scrollable',\n  styleUrl: 'cat-scrollable.scss',\n  shadow: true\n})\nexport class CatScrollable {\n  private static readonly THROTTLE = 50;\n  scrollElement?: HTMLElement;\n  scrollWrapperElement?: HTMLElement;\n  private readonly init = new Subject<void>();\n  private readonly destroyed = new Subject<void>();\n  private readonly resizedEntries = new Subject<ResizeObserverEntry[]>();\n  private readonly resizedObserver = new ResizeObserver(entries => this.resizedEntries.next(entries));\n  private scrolled!: Observable<Event>;\n\n  /** Flags to disable/enable scroll shadowX. */\n  @Prop()\n  noShadowX = false;\n\n  /** Flags to disable/enable scroll shadowY. */\n  @Prop()\n  noShadowY = false;\n\n  /** Flags to disable/enable overflowX. */\n  @Prop()\n  noOverflowX = false;\n\n  /** Flags to disable/enable overflowY. */\n  @Prop()\n  noOverflowY = false;\n\n  /** Flag to disable/enable overscroll behavior. */\n  @Prop()\n  noOverscroll = false;\n\n  /**\n   * Flag to not fire an initial event after content initialization.\n   */\n  @Prop() noScrolledInit = false;\n\n  /**\n   * Buffer to be used to calculate the scroll distance.\n   */\n  @Prop() scrolledBuffer = 0;\n\n  /**\n   * Emitted when the content is fully scrolled to the top.\n   */\n  @Event() scrolledTop!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the left.\n   */\n  @Event() scrolledLeft!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the right.\n   */\n  @Event() scrolledRight!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the bottom.\n   */\n  @Event() scrolledBottom!: EventEmitter<void>;\n\n  componentDidRender() {\n    if (this.scrollElement) {\n      this.scrolled = fromEvent(this.scrollElement, 'scroll').pipe(takeUntil(this.destroyed));\n      this.resizedObserver.observe(this.scrollElement);\n    }\n    if (this.scrollWrapperElement) {\n      this.resizedObserver.observe(this.scrollWrapperElement);\n    }\n    this.attachEmitter('left', this.scrolledLeft);\n    this.attachEmitter('right', this.scrolledRight);\n    this.attachEmitter('bottom', this.scrolledBottom);\n    this.attachEmitter('top', this.scrolledTop);\n    merge(this.init, this.scrolled, this.resizedEntries)\n      .pipe(\n        auditTime(CatScrollable.THROTTLE),\n        map(() => ({\n          top: this.getScrollOffset('top') > 0,\n          left: this.getScrollOffset('left') > 0,\n          right: this.getScrollOffset('right') > 0,\n          bottom: this.getScrollOffset('bottom') > 0\n        })),\n        distinctUntilChanged(),\n        takeUntil(this.destroyed)\n      )\n      .subscribe(({ top, left, right, bottom }) => {\n        this.toggleClass('cat-scrollable-top', top);\n        this.toggleClass('cat-scrollable-left', left);\n        this.toggleClass('cat-scrollable-right', right);\n        this.toggleClass('cat-scrollable-bottom', bottom);\n      });\n  }\n\n  componentDidLoad() {\n    if (!this.noScrolledInit) {\n      this.init.next();\n    }\n  }\n\n  disconnectedCallback() {\n    this.init.complete();\n    this.destroyed.next();\n    this.destroyed.complete();\n    this.resizedObserver.disconnect();\n  }\n\n  render() {\n    return [\n      <div class=\"scrollable-wrapper\" ref={el => (this.scrollWrapperElement = el)}>\n        {!this.noShadowY && <div class=\"shadow-top\"></div>}\n        {!this.noShadowX && <div class=\"shadow-left\"></div>}\n        {!this.noShadowX && <div class=\"shadow-right\"></div>}\n        {!this.noShadowY && <div class=\"shadow-bottom\"></div>}\n      </div>,\n      <div\n        ref={el => (this.scrollElement = el)}\n        class={{\n          'scrollable-content': true,\n          'scroll-x': !this.noOverflowX,\n          'scroll-y': !this.noOverflowY,\n          'no-overscroll': this.noOverscroll\n        }}\n      >\n        <slot></slot>\n      </div>\n    ];\n  }\n\n  private attachEmitter(from: 'top' | 'left' | 'right' | 'bottom', emitter: EventEmitter<void>) {\n    merge(this.init, this.scrolled, this.resizedEntries)\n      .pipe(\n        auditTime(CatScrollable.THROTTLE),\n        map(() => this.getScrollOffset(from)),\n        map(offset => offset <= this.scrolledBuffer),\n        distinctUntilChanged(),\n        filter(isLower => isLower),\n        takeUntil(this.destroyed)\n      )\n      .subscribe(() => emitter.emit());\n  }\n\n  private getScrollOffset(from: 'top' | 'left' | 'right' | 'bottom') {\n    if (this.scrollElement) {\n      switch (from) {\n        case 'top':\n          return this.scrollElement.scrollTop;\n        case 'left':\n          return this.scrollElement.scrollLeft;\n        case 'right':\n          return this.scrollElement.scrollWidth - this.scrollElement.clientWidth - this.scrollElement.scrollLeft;\n        case 'bottom':\n          return this.scrollElement.scrollHeight - this.scrollElement.clientHeight - this.scrollElement.scrollTop;\n        default:\n          return 0;\n      }\n    }\n    return 0;\n  }\n\n  private toggleClass(name: string, value: boolean) {\n    if (value) {\n      this.scrollWrapperElement?.classList.add(name);\n    } else {\n      this.scrollWrapperElement?.classList.remove(name);\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-scrollable.js","sourceRoot":"","sources":["../../../src/components/cat-scrollable/cat-scrollable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\nimport { auditTime, distinctUntilChanged, filter, map, takeUntil } from 'rxjs/operators';\n\n/**\n * An element to display scrollable content.\n */\n@Component({\n  tag: 'cat-scrollable',\n  styleUrl: 'cat-scrollable.scss',\n  shadow: true\n})\nexport class CatScrollable {\n  private static readonly THROTTLE = 50;\n  scrollElement?: HTMLElement;\n  scrollWrapperElement?: HTMLElement;\n  private readonly init = new Subject<void>();\n  private readonly destroyed = new Subject<void>();\n  private readonly resizedEntries = new Subject<ResizeObserverEntry[]>();\n  private readonly resizedObserver = new ResizeObserver(entries => this.resizedEntries.next(entries));\n  private scrolled!: Observable<Event>;\n\n  /** Flags to disable/enable scroll shadowX. */\n  @Prop()\n  noShadowX = false;\n\n  /** Flags to disable/enable scroll shadowY. */\n  @Prop()\n  noShadowY = false;\n\n  /** Flags to disable/enable overflowX. */\n  @Prop()\n  noOverflowX = false;\n\n  /** Flags to disable/enable overflowY. */\n  @Prop()\n  noOverflowY = false;\n\n  /** Flag to disable/enable overscroll behavior. */\n  @Prop()\n  noOverscroll = false;\n\n  /**\n   * Flag to not fire an initial event after content initialization.\n   */\n  @Prop() noScrolledInit = false;\n\n  /**\n   * Buffer to be used to calculate the scroll distance.\n   */\n  @Prop() scrolledBuffer = 0;\n\n  /**\n   * Emitted when the content is fully scrolled to the top.\n   */\n  @Event() scrolledTop!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the left.\n   */\n  @Event() scrolledLeft!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the right.\n   */\n  @Event() scrolledRight!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the bottom.\n   */\n  @Event() scrolledBottom!: EventEmitter<void>;\n\n  componentDidRender() {\n    if (this.scrollElement) {\n      this.scrolled = fromEvent(this.scrollElement, 'scroll').pipe(takeUntil(this.destroyed));\n      this.resizedObserver.observe(this.scrollElement);\n    }\n    if (this.scrollWrapperElement) {\n      this.resizedObserver.observe(this.scrollWrapperElement);\n    }\n    this.attachEmitter('left', this.scrolledLeft);\n    this.attachEmitter('right', this.scrolledRight);\n    this.attachEmitter('bottom', this.scrolledBottom);\n    this.attachEmitter('top', this.scrolledTop);\n    merge(this.init, this.scrolled, this.resizedEntries)\n      .pipe(\n        auditTime(CatScrollable.THROTTLE),\n        map(() => ({\n          top: this.getScrollOffset('top') > 0,\n          left: this.getScrollOffset('left') > 0,\n          right: this.getScrollOffset('right') > 0,\n          bottom: this.getScrollOffset('bottom') > 0\n        })),\n        distinctUntilChanged(),\n        takeUntil(this.destroyed)\n      )\n      .subscribe(({ top, left, right, bottom }) => {\n        this.toggleClass('cat-scrollable-top', top);\n        this.toggleClass('cat-scrollable-left', left);\n        this.toggleClass('cat-scrollable-right', right);\n        this.toggleClass('cat-scrollable-bottom', bottom);\n      });\n  }\n\n  componentDidLoad() {\n    if (!this.noScrolledInit) {\n      this.init.next();\n    }\n  }\n\n  disconnectedCallback() {\n    this.init.complete();\n    this.destroyed.next();\n    this.destroyed.complete();\n    this.resizedObserver.disconnect();\n  }\n\n  render() {\n    return [\n      <div class=\"scrollable-wrapper\" ref={el => (this.scrollWrapperElement = el)}>\n        {!this.noShadowY && <div class=\"shadow-top\"></div>}\n        {!this.noShadowX && <div class=\"shadow-left\"></div>}\n        {!this.noShadowX && <div class=\"shadow-right\"></div>}\n        {!this.noShadowY && <div class=\"shadow-bottom\"></div>}\n      </div>,\n      <div\n        ref={el => (this.scrollElement = el)}\n        class={{\n          'scrollable-content': true,\n          'scroll-x': !this.noOverflowX,\n          'scroll-y': !this.noOverflowY,\n          'no-overscroll': this.noOverscroll\n        }}\n      >\n        <slot></slot>\n      </div>\n    ];\n  }\n\n  private attachEmitter(from: 'top' | 'left' | 'right' | 'bottom', emitter: EventEmitter<void>) {\n    merge(this.init, this.scrolled, this.resizedEntries)\n      .pipe(\n        auditTime(CatScrollable.THROTTLE),\n        map(() => this.getScrollOffset(from)),\n        map(offset => offset <= this.scrolledBuffer),\n        distinctUntilChanged(),\n        filter(isLower => isLower),\n        takeUntil(this.destroyed)\n      )\n      .subscribe(() => emitter.emit());\n  }\n\n  private getScrollOffset(from: 'top' | 'left' | 'right' | 'bottom') {\n    if (this.scrollElement) {\n      switch (from) {\n        case 'top':\n          return this.scrollElement.scrollTop;\n        case 'left':\n          return this.scrollElement.scrollLeft;\n        case 'right':\n          return this.scrollElement.scrollWidth - this.scrollElement.clientWidth - this.scrollElement.scrollLeft;\n        case 'bottom':\n          return this.scrollElement.scrollHeight - this.scrollElement.clientHeight - this.scrollElement.scrollTop;\n        default:\n          return 0;\n      }\n    }\n    return 0;\n  }\n\n  private toggleClass(name: string, value: boolean) {\n    if (value) {\n      this.scrollWrapperElement?.classList.add(name);\n    } else {\n      this.scrollWrapperElement?.classList.remove(name);\n    }\n  }\n}\n"]}