@haiilo/catalyst 6.0.3 → 6.1.1

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":"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;AACH,MAKa,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,IAAI,CAAC,oBAAoB,EAAE,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;KAChD;SAAM;MACL,IAAI,CAAC,oBAAoB,EAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;KACnD;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnKuB,sBAAQ,GAAG,EAAE,AAAL,CAAM;SAD3B,aAAa","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"]}

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

@@ -0,0 +1,25 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { CatScrollable } from "./cat-scrollable";
+describe('cat-scrollable', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [CatScrollable],
+      html: `<cat-scrollable></cat-scrollable>`
+    });
+    expect(page.root).toEqualHtml(`
+      <cat-scrollable>
+       <mock:shadow-root>
+         <div class="scrollable-wrapper">
+           <div class="shadow-top"></div>
+           <div class="shadow-left"></div>
+           <div class="shadow-right"></div>
+           <div class="shadow-bottom"></div>
+         </div>
+         <div class="scrollable-content scroll-x scroll-y">
+           <slot></slot>
+        </div>
+      </cat-scrollable>
+    `);
+  });
+});
+//# sourceMappingURL=cat-scrollable.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cat-scrollable.spec.js","sourceRoot":"","sources":["../../../src/components/cat-scrollable/cat-scrollable.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,aAAa,CAAC;MAC3B,IAAI,EAAE,mCAAmC;KAC1C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CatScrollable } from './cat-scrollable';\n\ndescribe('cat-scrollable', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatScrollable],\n      html: `<cat-scrollable></cat-scrollable>`\n    });\n    expect(page.root).toEqualHtml(`\n      <cat-scrollable>\n       <mock:shadow-root>\n         <div class=\"scrollable-wrapper\">\n           <div class=\"shadow-top\"></div>\n           <div class=\"shadow-left\"></div>\n           <div class=\"shadow-right\"></div>\n           <div class=\"shadow-bottom\"></div>\n         </div>\n         <div class=\"scrollable-content scroll-x scroll-y\">\n           <slot></slot>\n        </div>\n      </cat-scrollable>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,14 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('cat-select', () => {
+  beforeAll(() => {
+    console.error = jest.fn();
+    console.warn = jest.fn();
+  });
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<cat-select label="Label"></cat-select>');
+    const element = await page.find('cat-select');
+    expect(element).toHaveClass('hydrated');
+  });
+});
+//# sourceMappingURL=cat-select.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cat-select.e2e.js","sourceRoot":"","sources":["../../../src/components/cat-select/cat-select.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,SAAS,CAAC,GAAG,EAAE;IACb,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAC1B,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EAC3B,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yCAAyC,CAAC,CAAC;IAEjE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,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-select', () => {\n  beforeAll(() => {\n    console.error = jest.fn();\n    console.warn = jest.fn();\n  });\n\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cat-select label=\"Label\"></cat-select>');\n\n    const element = await page.find('cat-select');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

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

@@ -1,11 +1,11 @@
-import { autoUpdate, computePosition, offset } from '@floating-ui/dom';
-import { h, Host } from '@stencil/core';
-import autosizeInput from 'autosize-input';
-import log from 'loglevel';
-import { catchError, debounce, distinctUntilChanged, filter, first, of, scan, startWith, Subject, switchMap, takeWhile, tap, timer } from 'rxjs';
-import { coerceBoolean, coerceNumber } from '../../utils/coerce';
-import { CatFormHint } from '../cat-form-hint/cat-form-hint';
-import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
+import { autoUpdate, computePosition, offset } from "@floating-ui/dom";
+import { h, Host } from "@stencil/core";
+import autosizeInput from "autosize-input";
+import log from "loglevel";
+import { catchError, debounce, distinctUntilChanged, filter, first, of, scan, startWith, Subject, switchMap, takeWhile, tap, timer } from "rxjs";
+import { coerceBoolean, coerceNumber } from "../../utils/coerce";
+import { CatFormHint } from "../cat-form-hint/cat-form-hint";
+import { catI18nRegistry as i18n } from "../cat-i18n/cat-i18n-registry";
 const INIT_STATE = {
   term: '',
   isOpen: false,
@@ -18,6 +18,7 @@ const INIT_STATE = {
   activeSelectionIndex: -1
 };
 let nextUniqueId = 0;
+let nextTagUniqueId = 0;
 /**
  * Select lets user choose one option from an options' menu. Consider using
  * select when you have 6 or more options. Select component supports any content
@@ -27,7 +28,7 @@ let nextUniqueId = 0;
  * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.
  * @part label - The label content.
  */
-export class CatSelect {
+class CatSelect {
   constructor() {
     this._id = `cat-input-${nextUniqueId++}`;
     this.term$ = new Subject();
@@ -153,7 +154,8 @@ export class CatSelect {
       }
     }
     this.hide();
-    if (!this.multiple && this.state.tempSelection?.length) {
+    // Conditionally remove selection if the option was not manually selected through click or enter key press
+    if (!this.multiple && (!this.tags || !this.state.selection?.length) && this.state.tempSelection?.length) {
       this.patchState({
         activeSelectionIndex: -1,
         selection: this.state.tempSelection,
@@ -556,7 +558,7 @@ export class CatSelect {
     if (term.trim().length && !this.isTagSelected(term)) {
       const value = this.value;
       const tags = value?.tags;
-      const tag = { id: `select-${this.id}-tag-${tags ? tags.length : 0}`, name: term };
+      const tag = { id: `select-${this.id}-tag-${tags?.length ? tags?.length + nextTagUniqueId++ : 0}`, name: term };
       this.select({ item: tag, render: { label: tag.name } });
     }
     this.setTransparentCaret();
@@ -727,7 +729,8 @@ export class CatSelect {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@floating-ui/dom"
+              "path": "@floating-ui/dom",
+              "id": "../node_modules/@floating-ui/dom/index.d.ts::Placement"
             }
           }
         },
@@ -750,11 +753,13 @@ export class CatSelect {
           "references": {
             "CatSelectTaggingValue": {
               "location": "local",
-              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx"
+              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx",
+              "id": "src/components/cat-select/cat-select.tsx::CatSelectTaggingValue"
             },
             "CatSelectMultipleTaggingValue": {
               "location": "local",
-              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx"
+              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx",
+              "id": "src/components/cat-select/cat-select.tsx::CatSelectMultipleTaggingValue"
             }
           }
         },
@@ -986,7 +991,8 @@ export class CatSelect {
           "references": {
             "ErrorMap": {
               "location": "import",
-              "path": "../cat-form-hint/cat-form-hint"
+              "path": "../cat-form-hint/cat-form-hint",
+              "id": "src/components/cat-form-hint/cat-form-hint.tsx::ErrorMap"
             }
           }
         },
@@ -1059,7 +1065,8 @@ export class CatSelect {
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -1078,7 +1085,8 @@ export class CatSelect {
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -1097,7 +1105,8 @@ export class CatSelect {
           "resolved": "InputEvent",
           "references": {
             "InputEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::InputEvent"
             }
           }
         }
@@ -1116,7 +1125,8 @@ export class CatSelect {
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -1136,19 +1146,23 @@ export class CatSelect {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "CatSelectConnector": {
               "location": "local",
-              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx"
+              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx",
+              "id": "src/components/cat-select/cat-select.tsx::CatSelectConnector"
             },
             "Observable": {
               "location": "import",
-              "path": "rxjs"
+              "path": "rxjs",
+              "id": "../node_modules/rxjs/dist/types/index.d.ts::Observable"
             },
             "Item": {
               "location": "local",
-              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx"
+              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx",
+              "id": "src/components/cat-select/cat-select.tsx::Item"
             }
           },
           "return": "Promise<void>"
@@ -1200,7 +1214,9 @@ export class CatSelect {
         "passive": false
       }];
   }
+  static get stencilHasStaticMembersWithInit() { return true; }
 }
 CatSelect.SKELETON_COUNT = 4;
 CatSelect.DROPDOWN_OFFSET = 4;
+export { CatSelect };
 //# sourceMappingURL=cat-select.js.map