@haiilo/catalyst 8.1.0 → 8.2.0

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

@@ -1,10 +1,10 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe('cat-scrollable', () => {
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<cat-scrollable></cat-scrollable>');
-    const element = await page.find('cat-scrollable');
-    expect(element).toHaveClass('hydrated');
-  });
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<cat-scrollable></cat-scrollable>');
+        const element = await page.find('cat-scrollable');
+        expect(element).toHaveClass('hydrated');
+    });
 });
 //# sourceMappingURL=cat-scrollable.e2e.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cat-scrollable.e2e.js","sourceRoot":"","sources":["../../../src/components/cat-scrollable/cat-scrollable.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,mCAAmC,CAAC,CAAC;IAE3D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cat-scrollable', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cat-scrollable></cat-scrollable>');\n\n    const element = await page.find('cat-scrollable');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}
+{"version":3,"file":"cat-scrollable.e2e.js","sourceRoot":"","sources":["../../../src/components/cat-scrollable/cat-scrollable.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,mCAAmC,CAAC,CAAC;QAE3D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAClD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cat-scrollable', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cat-scrollable></cat-scrollable>');\n\n    const element = await page.find('cat-scrollable');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

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

@@ -5,302 +5,302 @@ import { auditTime, distinctUntilChanged, filter, map, takeUntil } from "rxjs/op
  * An element to display scrollable content.
  */
 export class CatScrollable {
-  constructor() {
-    this.init = new Subject();
-    this.destroyed = new Subject();
-    this.resizedEntries = new Subject();
-    this.resizedObserver = new ResizeObserver(entries => this.resizedEntries.next(entries));
-    this.noShadowX = false;
-    this.noShadowY = false;
-    this.noOverflowX = false;
-    this.noOverflowY = false;
-    this.noOverscroll = false;
-    this.noScrolledInit = false;
-    this.scrolledBuffer = 0;
-  }
-  componentDidRender() {
-    if (this.scrollElement) {
-      this.scrolled = fromEvent(this.scrollElement, 'scroll').pipe(takeUntil(this.destroyed));
-      this.resizedObserver.observe(this.scrollElement);
+    constructor() {
+        this.init = new Subject();
+        this.destroyed = new Subject();
+        this.resizedEntries = new Subject();
+        this.resizedObserver = new ResizeObserver(entries => this.resizedEntries.next(entries));
+        this.noShadowX = false;
+        this.noShadowY = false;
+        this.noOverflowX = false;
+        this.noOverflowY = false;
+        this.noOverscroll = false;
+        this.noScrolledInit = false;
+        this.scrolledBuffer = 0;
     }
-    if (this.scrollWrapperElement) {
-      this.resizedObserver.observe(this.scrollWrapperElement);
+    componentDidRender() {
+        if (this.scrollElement) {
+            this.scrolled = fromEvent(this.scrollElement, 'scroll').pipe(takeUntil(this.destroyed));
+            this.resizedObserver.observe(this.scrollElement);
+        }
+        if (this.scrollWrapperElement) {
+            this.resizedObserver.observe(this.scrollWrapperElement);
+        }
+        this.attachEmitter('left', this.scrolledLeft);
+        this.attachEmitter('right', this.scrolledRight);
+        this.attachEmitter('bottom', this.scrolledBottom);
+        this.attachEmitter('top', this.scrolledTop);
+        merge(this.init, this.scrolled, this.resizedEntries)
+            .pipe(auditTime(CatScrollable.THROTTLE), map(() => ({
+            top: this.getScrollOffset('top') > 0,
+            left: this.getScrollOffset('left') > 0,
+            right: this.getScrollOffset('right') > 0,
+            bottom: this.getScrollOffset('bottom') > 0
+        })), distinctUntilChanged(), takeUntil(this.destroyed))
+            .subscribe(({ top, left, right, bottom }) => {
+            this.toggleClass('cat-scrollable-top', top);
+            this.toggleClass('cat-scrollable-left', left);
+            this.toggleClass('cat-scrollable-right', right);
+            this.toggleClass('cat-scrollable-bottom', bottom);
+        });
     }
-    this.attachEmitter('left', this.scrolledLeft);
-    this.attachEmitter('right', this.scrolledRight);
-    this.attachEmitter('bottom', this.scrolledBottom);
-    this.attachEmitter('top', this.scrolledTop);
-    merge(this.init, this.scrolled, this.resizedEntries)
-      .pipe(auditTime(CatScrollable.THROTTLE), map(() => ({
-      top: this.getScrollOffset('top') > 0,
-      left: this.getScrollOffset('left') > 0,
-      right: this.getScrollOffset('right') > 0,
-      bottom: this.getScrollOffset('bottom') > 0
-    })), distinctUntilChanged(), takeUntil(this.destroyed))
-      .subscribe(({ top, left, right, bottom }) => {
-      this.toggleClass('cat-scrollable-top', top);
-      this.toggleClass('cat-scrollable-left', left);
-      this.toggleClass('cat-scrollable-right', right);
-      this.toggleClass('cat-scrollable-bottom', bottom);
-    });
-  }
-  componentDidLoad() {
-    if (!this.noScrolledInit) {
-      this.init.next();
+    componentDidLoad() {
+        if (!this.noScrolledInit) {
+            this.init.next();
+        }
     }
-  }
-  disconnectedCallback() {
-    this.init.complete();
-    this.destroyed.next();
-    this.destroyed.complete();
-    this.resizedObserver.disconnect();
-  }
-  render() {
-    return [
-      h("div", { class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { class: "shadow-top" }), !this.noShadowX && h("div", { class: "shadow-left" }), !this.noShadowX && h("div", { class: "shadow-right" }), !this.noShadowY && h("div", { class: "shadow-bottom" })),
-      h("div", { ref: el => (this.scrollElement = el), class: {
-          'scrollable-content': true,
-          'scroll-x': !this.noOverflowX,
-          'scroll-y': !this.noOverflowY,
-          'no-overscroll': this.noOverscroll
-        } }, h("slot", null))
-    ];
-  }
-  attachEmitter(from, emitter) {
-    merge(this.init, this.scrolled, this.resizedEntries)
-      .pipe(auditTime(CatScrollable.THROTTLE), map(() => this.getScrollOffset(from)), map(offset => offset <= this.scrolledBuffer), distinctUntilChanged(), filter(isLower => isLower), takeUntil(this.destroyed))
-      .subscribe(() => emitter.emit());
-  }
-  getScrollOffset(from) {
-    if (this.scrollElement) {
-      switch (from) {
-        case 'top':
-          return this.scrollElement.scrollTop;
-        case 'left':
-          return this.scrollElement.scrollLeft;
-        case 'right':
-          return this.scrollElement.scrollWidth - this.scrollElement.clientWidth - this.scrollElement.scrollLeft;
-        case 'bottom':
-          return this.scrollElement.scrollHeight - this.scrollElement.clientHeight - this.scrollElement.scrollTop;
-        default:
-          return 0;
-      }
+    disconnectedCallback() {
+        this.init.complete();
+        this.destroyed.next();
+        this.destroyed.complete();
+        this.resizedObserver.disconnect();
     }
-    return 0;
-  }
-  toggleClass(name, value) {
-    if (value) {
-      this.scrollWrapperElement?.classList.add(name);
+    render() {
+        return [
+            h("div", { class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { class: "shadow-top" }), !this.noShadowX && h("div", { class: "shadow-left" }), !this.noShadowX && h("div", { class: "shadow-right" }), !this.noShadowY && h("div", { class: "shadow-bottom" })),
+            h("div", { ref: el => (this.scrollElement = el), class: {
+                    'scrollable-content': true,
+                    'scroll-x': !this.noOverflowX,
+                    'scroll-y': !this.noOverflowY,
+                    'no-overscroll': this.noOverscroll
+                } }, h("slot", null))
+        ];
     }
-    else {
-      this.scrollWrapperElement?.classList.remove(name);
+    attachEmitter(from, emitter) {
+        merge(this.init, this.scrolled, this.resizedEntries)
+            .pipe(auditTime(CatScrollable.THROTTLE), map(() => this.getScrollOffset(from)), map(offset => offset <= this.scrolledBuffer), distinctUntilChanged(), filter(isLower => isLower), takeUntil(this.destroyed))
+            .subscribe(() => emitter.emit());
     }
-  }
-  static get is() { return "cat-scrollable"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cat-scrollable.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cat-scrollable.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "noShadowX": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Flags to disable/enable scroll shadowX."
-        },
-        "attribute": "no-shadow-x",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "noShadowY": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Flags to disable/enable scroll shadowY."
-        },
-        "attribute": "no-shadow-y",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "noOverflowX": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Flags to disable/enable overflowX."
-        },
-        "attribute": "no-overflow-x",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "noOverflowY": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Flags to disable/enable overflowY."
-        },
-        "attribute": "no-overflow-y",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "noOverscroll": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Flag to disable/enable overscroll behavior."
-        },
-        "attribute": "no-overscroll",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "noScrolledInit": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Flag to not fire an initial event after content initialization."
-        },
-        "attribute": "no-scrolled-init",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "scrolledBuffer": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Buffer to be used to calculate the scroll distance."
-        },
-        "attribute": "scrolled-buffer",
-        "reflect": false,
-        "defaultValue": "0"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "scrolledTop",
-        "name": "scrolledTop",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the content is fully scrolled to the top."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+    getScrollOffset(from) {
+        if (this.scrollElement) {
+            switch (from) {
+                case 'top':
+                    return this.scrollElement.scrollTop;
+                case 'left':
+                    return this.scrollElement.scrollLeft;
+                case 'right':
+                    return this.scrollElement.scrollWidth - this.scrollElement.clientWidth - this.scrollElement.scrollLeft;
+                case 'bottom':
+                    return this.scrollElement.scrollHeight - this.scrollElement.clientHeight - this.scrollElement.scrollTop;
+                default:
+                    return 0;
+            }
         }
-      }, {
-        "method": "scrolledLeft",
-        "name": "scrolledLeft",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the content is fully scrolled to the left."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }, {
-        "method": "scrolledRight",
-        "name": "scrolledRight",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the content is fully scrolled to the right."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+        return 0;
+    }
+    toggleClass(name, value) {
+        if (value) {
+            this.scrollWrapperElement?.classList.add(name);
         }
-      }, {
-        "method": "scrolledBottom",
-        "name": "scrolledBottom",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the content is fully scrolled to the bottom."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+        else {
+            this.scrollWrapperElement?.classList.remove(name);
         }
-      }];
-  }
+    }
+    static get is() { return "cat-scrollable"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cat-scrollable.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cat-scrollable.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "noShadowX": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flags to disable/enable scroll shadowX."
+                },
+                "attribute": "no-shadow-x",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noShadowY": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flags to disable/enable scroll shadowY."
+                },
+                "attribute": "no-shadow-y",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noOverflowX": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flags to disable/enable overflowX."
+                },
+                "attribute": "no-overflow-x",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noOverflowY": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flags to disable/enable overflowY."
+                },
+                "attribute": "no-overflow-y",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noOverscroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag to disable/enable overscroll behavior."
+                },
+                "attribute": "no-overscroll",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noScrolledInit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag to not fire an initial event after content initialization."
+                },
+                "attribute": "no-scrolled-init",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "scrolledBuffer": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Buffer to be used to calculate the scroll distance."
+                },
+                "attribute": "scrolled-buffer",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "scrolledTop",
+                "name": "scrolledTop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the content is fully scrolled to the top."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "scrolledLeft",
+                "name": "scrolledLeft",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the content is fully scrolled to the left."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "scrolledRight",
+                "name": "scrolledRight",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the content is fully scrolled to the right."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "scrolledBottom",
+                "name": "scrolledBottom",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the content is fully scrolled to the bottom."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
 }
 CatScrollable.THROTTLE = 50;
 //# sourceMappingURL=cat-scrollable.js.map

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":"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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"]}
+{"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"]}