@haiilo/catalyst 0.5.12 → 0.6.0

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

@@ -8,20 +8,20 @@ export class CatScrollable {
   constructor() {
     this.init = new Subject();
     this.destroyed = new Subject();
-    /** Flags to enable/disable scroll shadowX. */
-    this.shadowX = true;
-    /** Flags to enable/disable scroll shadowY. */
-    this.shadowY = true;
-    /** Flags to enable/disable overflowX. */
-    this.overflowX = true;
-    /** Flags to enable/disable overflowY. */
-    this.overflowY = true;
-    /** Flag to enable/disable overscroll behavior. */
-    this.overscroll = true;
+    /** Flags to disable/enable scroll shadowX. */
+    this.noShadowX = false;
+    /** Flags to disable/enable scroll shadowY. */
+    this.noShadowY = false;
+    /** Flags to disable/enable overflowX. */
+    this.noOverflowX = false;
+    /** Flags to disable/enable overflowY. */
+    this.noOverflowY = false;
+    /** Flag to disable/enable overscroll behavior. */
+    this.noOverscroll = false;
     /**
-     * Flag to fire an initial event after content initialization.
+     * Flag to not fire an initial event after content initialization.
      */
-    this.scrolledInit = true;
+    this.noScrolledInit = false;
     /**
      * Buffer to be used to calculate the scroll distance.
      */
@@ -50,7 +50,7 @@ export class CatScrollable {
     });
   }
   componentDidLoad() {
-    if (this.scrolledInit) {
+    if (!this.noScrolledInit) {
       this.init.next();
     }
   }
@@ -62,15 +62,15 @@ export class CatScrollable {
   render() {
     return [
       h("div", { class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) },
-        this.shadowY && h("div", { class: "shadow-top" }),
-        this.shadowX && h("div", { class: "shadow-left" }),
-        this.shadowX && h("div", { class: "shadow-right" }),
-        this.shadowY && h("div", { class: "shadow-bottom" })),
+        !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.overflowX,
-          'scroll-y': this.overflowY,
-          'no-overscroll': !this.overscroll
+          'scroll-x': !this.noOverflowX,
+          'scroll-y': !this.noOverflowY,
+          'no-overscroll': this.noOverscroll
         } },
         h("slot", null))
     ];
@@ -119,7 +119,7 @@ export class CatScrollable {
     "$": ["cat-scrollable.css"]
   }; }
   static get properties() { return {
-    "shadowX": {
+    "noShadowX": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -131,13 +131,13 @@ export class CatScrollable {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Flags to enable/disable scroll shadowX."
+        "text": "Flags to disable/enable scroll shadowX."
       },
-      "attribute": "shadow-x",
+      "attribute": "no-shadow-x",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
-    "shadowY": {
+    "noShadowY": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -149,13 +149,13 @@ export class CatScrollable {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Flags to enable/disable scroll shadowY."
+        "text": "Flags to disable/enable scroll shadowY."
       },
-      "attribute": "shadow-y",
+      "attribute": "no-shadow-y",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
-    "overflowX": {
+    "noOverflowX": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -167,13 +167,13 @@ export class CatScrollable {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Flags to enable/disable overflowX."
+        "text": "Flags to disable/enable overflowX."
       },
-      "attribute": "overflow-x",
+      "attribute": "no-overflow-x",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
-    "overflowY": {
+    "noOverflowY": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -185,13 +185,13 @@ export class CatScrollable {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Flags to enable/disable overflowY."
+        "text": "Flags to disable/enable overflowY."
       },
-      "attribute": "overflow-y",
+      "attribute": "no-overflow-y",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
-    "overscroll": {
+    "noOverscroll": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -203,13 +203,13 @@ export class CatScrollable {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Flag to enable/disable overscroll behavior."
+        "text": "Flag to disable/enable overscroll behavior."
       },
-      "attribute": "overscroll",
+      "attribute": "no-overscroll",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
-    "scrolledInit": {
+    "noScrolledInit": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -221,11 +221,11 @@ export class CatScrollable {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Flag to fire an initial event after content initialization."
+        "text": "Flag to not fire an initial event after content initialization."
       },
-      "attribute": "scrolled-init",
+      "attribute": "no-scrolled-init",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "scrolledBuffer": {
       "type": "number",

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 { 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  scrollElement?: HTMLElement;\n  scrollWrapperElement?: HTMLElement;\n  private readonly init = new Subject<void>();\n  private readonly destroyed = new Subject<void>();\n  private scrolled!: Observable<Event>;\n\n  /** Flags to enable/disable scroll shadowX. */\n  @Prop()\n  shadowX = true;\n\n  /** Flags to enable/disable scroll shadowY. */\n  @Prop()\n  shadowY = true;\n\n  /** Flags to enable/disable overflowX. */\n  @Prop()\n  overflowX = true;\n\n  /** Flags to enable/disable overflowY. */\n  @Prop()\n  overflowY = true;\n\n  /** Flag to enable/disable overscroll behavior. */\n  @Prop()\n  overscroll = true;\n\n  /**\n   * Flag to fire an initial event after content initialization.\n   */\n  @Prop() scrolledInit = true;\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    }\n    this.attachEmitter('left', this.scrolledLeft, this.scrolledBuffer);\n    this.attachEmitter('right', this.scrolledRight, this.scrolledBuffer);\n    this.attachEmitter('bottom', this.scrolledBottom, this.scrolledBuffer);\n    this.attachEmitter('top', this.scrolledTop, this.scrolledBuffer);\n    merge(this.init, this.scrolled)\n      .pipe(\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.scrolledInit) {\n      this.init.next();\n    }\n  }\n\n  disconnectedCallback() {\n    this.init.complete();\n    this.destroyed.next();\n    this.destroyed.complete();\n  }\n\n  render() {\n    return [\n      <div class=\"scrollable-wrapper\" ref={el => (this.scrollWrapperElement = el)}>\n        {this.shadowY && <div class=\"shadow-top\"></div>}\n        {this.shadowX && <div class=\"shadow-left\"></div>}\n        {this.shadowX && <div class=\"shadow-right\"></div>}\n        {this.shadowY && <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.overflowX,\n          'scroll-y': this.overflowY,\n          'no-overscroll': !this.overscroll\n        }}\n      >\n        <slot></slot>\n      </div>\n    ];\n  }\n\n  private attachEmitter(from: 'top' | 'left' | 'right' | 'bottom', emitter: EventEmitter<void>, buffer: number) {\n    merge(this.init, this.scrolled)\n      .pipe(map(() => this.getScrollOffset(from)))\n      .pipe(map(offset => offset <= buffer))\n      .pipe(distinctUntilChanged())\n      .pipe(filter(isLower => isLower))\n      .pipe(takeUntil(this.destroyed))\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 { 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  scrollElement?: HTMLElement;\n  scrollWrapperElement?: HTMLElement;\n  private readonly init = new Subject<void>();\n  private readonly destroyed = new Subject<void>();\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    }\n    this.attachEmitter('left', this.scrolledLeft, this.scrolledBuffer);\n    this.attachEmitter('right', this.scrolledRight, this.scrolledBuffer);\n    this.attachEmitter('bottom', this.scrolledBottom, this.scrolledBuffer);\n    this.attachEmitter('top', this.scrolledTop, this.scrolledBuffer);\n    merge(this.init, this.scrolled)\n      .pipe(\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  }\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>, buffer: number) {\n    merge(this.init, this.scrolled)\n      .pipe(map(() => this.getScrollOffset(from)))\n      .pipe(map(offset => offset <= buffer))\n      .pipe(distinctUntilChanged())\n      .pipe(filter(isLower => isLower))\n      .pipe(takeUntil(this.destroyed))\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-toast-demo/cat-toast-demo.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/cat-toast-demo/cat-toast-demo.js

@@ -0,0 +1,51 @@
+import { Component, h } from '@stencil/core';
+import { NotificationsService } from '../cat-notification/cat-notification';
+/**
+ * Toast Component Demo
+ *
+ * @part toast - The content of the toast.
+ */
+export class CatToastDemo {
+  render() {
+    return h("cat-button", { onClick: this.onClick.bind(this) }, "Show Notifications");
+  }
+  onClick() {
+    const infoOptions = {
+      position: 'top-left'
+    };
+    const errorOptions = {
+      position: 'top-center',
+      type: 'error'
+    };
+    const errorOptions2 = {
+      position: 'bottom-left',
+      type: 'error'
+    };
+    const successOptions3 = {
+      position: 'bottom-right',
+      type: 'success'
+    };
+    const template = document.createElement('template');
+    template.innerHTML = `<div style="padding: 7px 30px 7px 10px">Custom HTML Node Content</div>`;
+    const successOptions4 = {
+      position: 'bottom-right',
+      type: 'success',
+      content: template.content.firstChild
+    };
+    NotificationsService.error('Default Click');
+    NotificationsService.error('Long default title, long default title, long default title, long default title');
+    NotificationsService.info('Info Click', 'Info message', infoOptions);
+    NotificationsService.success('', ' ', successOptions4);
+    NotificationsService.error('Error Title', ' ', errorOptions);
+    NotificationsService.error('Error 2 Title', 'Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message,Very long message, Very long message, Very long message, Very long message, Very long message, ', errorOptions2);
+    NotificationsService.success('Success Title - very long title without message', ' ', successOptions3);
+  }
+  static get is() { return "cat-toast-demo"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-toast-demo.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-toast-demo.css"]
+  }; }
+}
+//# sourceMappingURL=cat-toast-demo.js.map

package/dist/collection/components/cat-toast-demo/cat-toast-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cat-toast-demo.js","sourceRoot":"","sources":["../../../src/components/cat-toast-demo/cat-toast-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAgB,MAAM,sCAAsC,CAAC;AAE1F;;;;GAIG;AAKH,MAAM,OAAO,YAAY;EACvB,MAAM;IACJ,OAAO,kBAAY,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAiC,CAAC;EACvF,CAAC;EAEO,OAAO;IACb,MAAM,WAAW,GAA0B;MACzC,QAAQ,EAAE,UAAU;KACrB,CAAC;IACF,MAAM,YAAY,GAA0B;MAC1C,QAAQ,EAAE,YAAY;MACtB,IAAI,EAAE,OAAO;KACd,CAAC;IACF,MAAM,aAAa,GAA0B;MAC3C,QAAQ,EAAE,aAAa;MACvB,IAAI,EAAE,OAAO;KACd,CAAC;IACF,MAAM,eAAe,GAA0B;MAC7C,QAAQ,EAAE,cAAc;MACxB,IAAI,EAAE,SAAS;KAChB,CAAC;IACF,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,SAAS,GAAG,wEAAwE,CAAC;IAC9F,MAAM,eAAe,GAA0B;MAC7C,QAAQ,EAAE,cAAc;MACxB,IAAI,EAAE,SAAS;MACf,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,UAAyB;KACpD,CAAC;IAEF,oBAAoB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAC5C,oBAAoB,CAAC,KAAK,CAAC,gFAAgF,CAAC,CAAC;IAC7G,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC;IACrE,oBAAoB,CAAC,OAAO,CAAC,EAAE,EAAE,GAAG,EAAE,eAAe,CAAC,CAAC;IACvD,oBAAoB,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,YAAY,CAAC,CAAC;IAC7D,oBAAoB,CAAC,KAAK,CACxB,eAAe,EACf,8RAA8R,EAC9R,aAAa,CACd,CAAC;IACF,oBAAoB,CAAC,OAAO,CAAC,iDAAiD,EAAE,GAAG,EAAE,eAAe,CAAC,CAAC;EACxG,CAAC;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\nimport { NotificationsService, ToastOptions } from '../cat-notification/cat-notification';\n\n/**\n * Toast Component Demo\n *\n * @part toast - The content of the toast.\n */\n@Component({\n  tag: 'cat-toast-demo',\n  styleUrl: 'cat-toast-demo.scss'\n})\nexport class CatToastDemo {\n  render() {\n    return <cat-button onClick={this.onClick.bind(this)}>Show Notifications</cat-button>;\n  }\n\n  private onClick() {\n    const infoOptions: Partial<ToastOptions> = {\n      position: 'top-left'\n    };\n    const errorOptions: Partial<ToastOptions> = {\n      position: 'top-center',\n      type: 'error'\n    };\n    const errorOptions2: Partial<ToastOptions> = {\n      position: 'bottom-left',\n      type: 'error'\n    };\n    const successOptions3: Partial<ToastOptions> = {\n      position: 'bottom-right',\n      type: 'success'\n    };\n    const template = document.createElement('template');\n    template.innerHTML = `<div style=\"padding: 7px 30px 7px 10px\">Custom HTML Node Content</div>`;\n    const successOptions4: Partial<ToastOptions> = {\n      position: 'bottom-right',\n      type: 'success',\n      content: template.content.firstChild as HTMLElement\n    };\n\n    NotificationsService.error('Default Click');\n    NotificationsService.error('Long default title, long default title, long default title, long default title');\n    NotificationsService.info('Info Click', 'Info message', infoOptions);\n    NotificationsService.success('', ' ', successOptions4);\n    NotificationsService.error('Error Title', ' ', errorOptions);\n    NotificationsService.error(\n      'Error 2 Title',\n      'Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message,Very long message, Very long message, Very long message, Very long message, Very long message, ',\n      errorOptions2\n    );\n    NotificationsService.success('Success Title - very long title without message', ' ', successOptions3);\n  }\n}\n"]}

package/dist/collection/index.js

@@ -1,3 +1,4 @@
 export { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';
 export { CatIconRegistry } from './components/cat-icon/cat-icon-registry';
+export { NotificationsService } from './components/cat-notification/cat-notification';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC","sourcesContent":["export { Components, JSX } from './components';\nexport { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';\nexport { CatIconRegistry } from './components/cat-icon/cat-icon-registry';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAC","sourcesContent":["export { Components, JSX } from './components';\nexport { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';\nexport { CatIconRegistry } from './components/cat-icon/cat-icon-registry';\nexport { NotificationsService } from './components/cat-notification/cat-notification';\n"]}

package/dist/collection/utils/load-img.js

@@ -0,0 +1,16 @@
+/**
+ * Loads an image and wraps the result in a promise.
+ *
+ * @param src the image URL
+ * @returns a promise
+ */
+const loadImg = (src) => {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', resolve);
+    image.addEventListener('error', reject);
+    image.src = src;
+  });
+};
+export default loadImg;
+//# sourceMappingURL=load-img.js.map

package/dist/collection/utils/load-img.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"load-img.js","sourceRoot":"","sources":["../../src/utils/load-img.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,OAAO,GAAG,CAAC,GAAW,EAAkB,EAAE;EAC9C,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;IACrC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;IAC1B,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACxC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;EAClB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["/**\n * Loads an image and wraps the result in a promise.\n *\n * @param src the image URL\n * @returns a promise\n */\nconst loadImg = (src: string): Promise<Event> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener('load', resolve);\n    image.addEventListener('error', reject);\n    image.src = src;\n  });\n};\n\nexport default loadImg;\n"]}

package/dist/components/cat-avatar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CatAvatar extends Components.CatAvatar, HTMLElement {}
+export const CatAvatar: {
+  prototype: CatAvatar;
+  new (): CatAvatar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cat-avatar.js

@@ -0,0 +1,125 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { l as loglevel } from './loglevel.js';
+import { d as defineCustomElement$2 } from './cat-icon2.js';
+
+/**
+ * Loads an image and wraps the result in a promise.
+ *
+ * @param src the image URL
+ * @returns a promise
+ */
+const loadImg = (src) => {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', resolve);
+    image.addEventListener('error', reject);
+    image.src = src;
+  });
+};
+
+const catAvatarCss = ":host{display:inline-block;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.avatar{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;text-decoration:inherit;color:var(--cat-avatar-fill, white);background-color:var(--cat-avatar-bg, #697687);background-size:cover;background-position:center;white-space:nowrap;overflow:hidden}.avatar:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.avatar-round{border-radius:50%}.avatar-xs{width:var(--cat-avatar-size, 1.5rem);height:var(--cat-avatar-size, 1.5rem);line-height:var(--cat-avatar-size, 1.5rem);font-size:var(--cat-avatar-font-size, 0.75rem)}.avatar-s{width:var(--cat-avatar-size, 2rem);height:var(--cat-avatar-size, 2rem);line-height:var(--cat-avatar-size, 2rem);font-size:var(--cat-avatar-font-size, 0.875rem)}.avatar-m{width:var(--cat-avatar-size, 2.5rem);height:var(--cat-avatar-size, 2.5rem);line-height:var(--cat-avatar-size, 2.5rem);font-size:var(--cat-avatar-font-size, 0.9375rem)}.avatar-l{width:var(--cat-avatar-size, 3rem);height:var(--cat-avatar-size, 3rem);line-height:var(--cat-avatar-size, 3rem);font-size:var(--cat-avatar-font-size, 1.125rem)}.avatar-xl{width:var(--cat-avatar-size, 3.5rem);height:var(--cat-avatar-size, 3.5rem);line-height:var(--cat-avatar-size, 3.5rem);font-size:var(--cat-avatar-font-size, 1.25rem)}";
+
+const CatAvatar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The size of the avatar.
+     */
+    this.size = 'm';
+    /**
+     * Use round avatar edges.
+     */
+    this.round = false;
+    /**
+     * The label of the avatar.
+     */
+    this.label = '';
+  }
+  onSrcChanged(value) {
+    if (value) {
+      loadImg(value).then(() => (this.backgroundImage = `url(${value})`), () => (this.backgroundImage = undefined));
+    }
+    else {
+      this.backgroundImage = undefined;
+    }
+  }
+  componentWillLoad() {
+    this.onSrcChanged(this.src);
+  }
+  componentWillRender() {
+    if (!this.label) {
+      loglevel.warn('[A11y] Missing ARIA label on avatar', this);
+    }
+  }
+  render() {
+    if (this.url) {
+      return (h("a", { href: this.url, target: this.urlTarget, style: this.cssStyle, class: this.cssClass, "aria-label": this.label }, this.content));
+    }
+    else {
+      return (h("span", { style: this.cssStyle, class: this.cssClass, "aria-label": this.label }, this.content));
+    }
+  }
+  get content() {
+    return !this.backgroundImage
+      ? [this.icon ? h("cat-icon", { icon: this.icon, size: this.size }) : this.getInitials()]
+      : [];
+  }
+  get cssStyle() {
+    return { 'background-image': this.backgroundImage };
+  }
+  get cssClass() {
+    return {
+      avatar: true,
+      'avatar-round': this.round,
+      [`avatar-${this.size}`]: Boolean(this.size)
+    };
+  }
+  getInitials() {
+    var _a;
+    return ((_a = this.initials) !== null && _a !== void 0 ? _a : this.label
+      .split(' ')
+      .map(n => n[0])
+      .join(''));
+  }
+  static get watchers() { return {
+    "src": ["onSrcChanged"]
+  }; }
+  static get style() { return catAvatarCss; }
+}, [1, "cat-avatar", {
+    "size": [1],
+    "round": [4],
+    "label": [1],
+    "initials": [1],
+    "src": [1],
+    "icon": [1],
+    "url": [1],
+    "urlTarget": [1, "url-target"],
+    "backgroundImage": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cat-avatar", "cat-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cat-avatar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CatAvatar$1);
+      }
+      break;
+    case "cat-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const CatAvatar = CatAvatar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CatAvatar, defineCustomElement };
+
+//# sourceMappingURL=cat-avatar.js.map

package/dist/components/cat-avatar.js.map

@@ -0,0 +1 @@
+{"file":"cat-avatar.js","mappings":";;;;AAAA;;;;;;AAMA,MAAM,OAAO,GAAG,CAAC,GAAW;EAC1B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM;IACjC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;IAC1B,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACxC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;GACjB,CAAC,CAAC;AACL,CAAC;;ACbD,MAAM,YAAY,GAAG,o5CAAo5C;;MCY55CA,WAAS;EALtB;;;;;;;IAWU,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,EAAE,CAAC;GA4FpB;EAhEC,YAAY,CAAC,KAAc;IACzB,IAAI,KAAK,EAAE;MACT,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CACjB,OAAO,IAAI,CAAC,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,EAC9C,OAAO,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC,CACzC,CAAC;KACH;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;KAClC;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC7B;EAED,mBAAmB;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACfC,QAAG,CAAC,IAAI,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACvD;GACF;EAED,MAAM;IACJ,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,QACE,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IAC1G,IAAI,CAAC,OAAO,CACX,EACJ;KACH;SAAM;MACL,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IACrE,IAAI,CAAC,OAAO,CACR,EACP;KACH;GACF;EAED,IAAY,OAAO;IACjB,OAAO,CAAC,IAAI,CAAC,eAAe;QACxB,CAAC,IAAI,CAAC,IAAI,GAAG,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC1F,EAAE,CAAC;GACR;EAED,IAAY,QAAQ;IAClB,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;GACrD;EAED,IAAY,QAAQ;IAClB,OAAO;MACL,MAAM,EAAE,IAAI;MACZ,cAAc,EAAE,IAAI,CAAC,KAAK;MAC1B,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KAC5C,CAAC;GACH;EAEO,WAAW;;IACjB,QACE,MAAA,IAAI,CAAC,QAAQ,mCACb,IAAI,CAAC,KAAK;OACP,KAAK,CAAC,GAAG,CAAC;OACV,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;OACd,IAAI,CAAC,EAAE,CAAC,EACX;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAvatar","log"],"sources":["./src/utils/load-img.ts","./src/components/cat-avatar/cat-avatar.scss?tag=cat-avatar&encapsulation=shadow","./src/components/cat-avatar/cat-avatar.tsx"],"sourcesContent":["/**\n * Loads an image and wraps the result in a promise.\n *\n * @param src the image URL\n * @returns a promise\n */\nconst loadImg = (src: string): Promise<Event> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener('load', resolve);\n    image.addEventListener('error', reject);\n    image.src = src;\n  });\n};\n\nexport default loadImg;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  /**\n   * @prop --cat-avatar-bg: The background color of the avatar.\n   * @prop --cat-avatar-fill: The text color of the avatar.\n   * @prop --cat-avatar-size: The size of the avatar.\n   * @prop --cat-avatar-font-size: The font size of the avatar.\n   */\n  display: inline-block;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('m');\n  text-decoration: inherit;\n  color: var(--cat-avatar-fill, cat-token('color.ui.font.avatar'));\n  background-color: var(--cat-avatar-bg, cat-token('color.ui.background.avatar'));\n  background-size: cover;\n  background-position: center;\n  white-space: nowrap;\n  overflow: hidden;\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.avatar-round {\n  border-radius: 50%;\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .avatar-#{$size} {\n    width: var(--cat-avatar-size, cat-size($size));\n    height: var(--cat-avatar-size, cat-size($size));\n    line-height: var(--cat-avatar-size, cat-size($size));\n    font-size: var(--cat-avatar-font-size, cat-body-font-size($fontSize));\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 's');\n@include size('m', 'm');\n@include size('l', 'l');\n@include size('xl', 'xl');\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport loadImg from '../../utils/load-img';\n\n/**\n * Avatars are used to represent a person or object.\n */\n@Component({\n  tag: 'cat-avatar',\n  styleUrl: 'cat-avatar.scss',\n  shadow: true\n})\nexport class CatAvatar {\n  @State() backgroundImage?: string;\n\n  /**\n   * The size of the avatar.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round avatar edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The label of the avatar.\n   */\n  @Prop() label = '';\n\n  /**\n   * Custom initials for the avatar.\n   */\n  @Prop() initials?: string;\n\n  /**\n   * An optional avatar image.\n   */\n  @Prop() src?: string;\n\n  /**\n   * An icon to be used instead of the initials.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  @Watch('src')\n  onSrcChanged(value?: string): void {\n    if (value) {\n      loadImg(value).then(\n        () => (this.backgroundImage = `url(${value})`),\n        () => (this.backgroundImage = undefined)\n      );\n    } else {\n      this.backgroundImage = undefined;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.onSrcChanged(this.src);\n  }\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.warn('[A11y] Missing ARIA label on avatar', this);\n    }\n  }\n\n  render() {\n    if (this.url) {\n      return (\n        <a href={this.url} target={this.urlTarget} style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <span style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </span>\n      );\n    }\n  }\n\n  private get content() {\n    return !this.backgroundImage\n      ? [this.icon ? <cat-icon icon={this.icon} size={this.size}></cat-icon> : this.getInitials()]\n      : [];\n  }\n\n  private get cssStyle() {\n    return { 'background-image': this.backgroundImage };\n  }\n\n  private get cssClass() {\n    return {\n      avatar: true,\n      'avatar-round': this.round,\n      [`avatar-${this.size}`]: Boolean(this.size)\n    };\n  }\n\n  private getInitials(): string {\n    return (\n      this.initials ??\n      this.label\n        .split(' ')\n        .map(n => n[0])\n        .join('')\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-badge.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const catBadgeCss = ":host{display:inline-flex;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.badge{font:inherit;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;width:100%;box-sizing:border-box;line-height:1;white-space:nowrap}.badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.badge-round{border-radius:10rem}.badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.badge-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.badge-xs{height:0.75rem;min-width:0.75rem;font-size:0.75rem;padding:0 0.1875rem}.badge-s{height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem}.badge-m{height:1.25rem;min-width:1.25rem;font-size:0.75rem;padding:0 0.3125rem}.badge-l{height:1.5rem;min-width:1.5rem;font-size:0.875rem;padding:0 0.375rem}.badge-xl{height:1.75rem;min-width:1.75rem;font-size:0.9375rem;padding:0 0.4375rem}.badge-pulse.badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.badge-pulse.badge-outlined{animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
+const catBadgeCss = ":host{display:inline-flex;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.badge{font:inherit;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;width:100%;box-sizing:border-box;line-height:1;white-space:nowrap}.badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.badge-round{border-radius:10rem}.badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.badge-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.badge-xs{height:0.75rem;min-width:0.75rem;font-size:0.75rem;padding:0rem 0.25rem}.badge-s{height:1rem;min-width:1rem;font-size:0.75rem;padding:0.25rem 0.5rem}.badge-m{height:1.25rem;min-width:1.25rem;font-size:0.75rem;padding:0.5rem 0.75rem}.badge-l{height:1.5rem;min-width:1.5rem;font-size:0.875rem;padding:0.75rem 1rem}.badge-xl{height:1.75rem;min-width:1.75rem;font-size:0.9375rem;padding:1rem 1.25rem}.badge-pulse.badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.badge-pulse.badge-outlined{animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
 
 const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/cat-badge.js.map

@@ -1 +1 @@
-{"file":"cat-badge.js","mappings":";;AAAA,MAAM,WAAW,GAAG,+qEAA+qE;;MCatrEA,UAAQ;EALrB;;;;;;;IASU,YAAO,GAA0B,QAAQ,CAAC;;;;IAK1C,UAAK,GAA+D,SAAS,CAAC;;;;IAK9E,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,KAAK,CAAC;GAmBvB;EAjBC,MAAM;IACJ,QACE,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QAChD,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5C,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC3C,IAED,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatBadge"],"sources":["./src/components/cat-badge/cat-badge.scss?tag=cat-badge&encapsulation=shadow","./src/components/cat-badge/cat-badge.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: baseline;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.badge {\n  font: inherit;\n  flex: 1 1 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('s');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  line-height: 1;\n  white-space: nowrap;\n\n  slot {\n    display: inline-block;\n    @include cat-ellipsis;\n  }\n}\n\n// ----- round\n\n.badge-round {\n  border-radius: 10rem;\n}\n\n// ----- theme\n\n.badge-filled {\n  background-color: cat-token-wrap(var(--bg));\n  color: cat-token-wrap(var(--fill));\n  font-weight: 600;\n  @include cat-font-smooth;\n}\n\n$-outline: inset 0 0 0 1px cat-token-wrap(var(--border), $alpha: 0.2);\n\n.badge-outlined {\n  background-color: cat-token('color.ui.background.body');\n  box-shadow: $-outline;\n  color: cat-token-wrap(var(--text));\n}\n\n@mixin theme($theme) {\n  .badge-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    @if $theme == 'secondary' {\n      --border: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --border: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .badge-#{$size} {\n    height: cat-size($size) * 0.5;\n    min-width: cat-size($size) * 0.5;\n    font-size: cat-body-font-size($fontSize);\n    padding: 0 cat-size($size) * 0.125;\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 'xs');\n@include size('m', 'xs');\n@include size('l', 's');\n@include size('xl', 'm');\n\n// ----- pulse\n\n$-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg));\n$-pulse-70: transparent 0 0 0 0.5rem;\n$-pulse-100: transparent 0 0 0 0;\n\n.badge-pulse {\n  &.badge-filled {\n    animation: 1.5s ease 0s infinite normal none running pulse;\n  }\n\n  &.badge-outlined {\n    animation: 1.5s ease 0s infinite normal none running pulse-outlined;\n  }\n}\n\n@keyframes pulse {\n  0% {\n    box-shadow: $-pulse-0;\n  }\n\n  70% {\n    box-shadow: $-pulse-70;\n  }\n\n  100% {\n    box-shadow: $-pulse-100;\n  }\n}\n\n@keyframes pulse-outlined {\n  0% {\n    box-shadow: $-pulse-0, $-outline;\n  }\n\n  70% {\n    box-shadow: $-pulse-70, $-outline;\n  }\n\n  100% {\n    box-shadow: $-pulse-100, $-outline;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Badges are used to inform users of the status of an object or of an action\n * that’s been taken.\n *\n * @part badge - The badge element.\n */\n@Component({\n  tag: 'cat-badge',\n  styleUrl: 'cat-badge.scss',\n  shadow: true\n})\nexport class CatBadge {\n  /**\n   * The rendering style of the badge.\n   */\n  @Prop() variant: 'filled' | 'outlined' = 'filled';\n\n  /**\n   * The color palette of the badge.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The size of the badge.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round badge edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Draw attention to the badge with a subtle animation.\n   */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        part=\"badge\"\n        class={{\n          badge: true,\n          'badge-round': this.round,\n          'badge-pulse': this.pulse,\n          [`badge-${this.variant}`]: Boolean(this.variant),\n          [`badge-${this.color}`]: Boolean(this.color),\n          [`badge-${this.size}`]: Boolean(this.size)\n        }}\n      >\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-badge.js","mappings":";;AAAA,MAAM,WAAW,GAAG,2rEAA2rE;;MCalsEA,UAAQ;EALrB;;;;;;;IASU,YAAO,GAA0B,QAAQ,CAAC;;;;IAK1C,UAAK,GAA+D,SAAS,CAAC;;;;IAK9E,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,KAAK,CAAC;GAmBvB;EAjBC,MAAM;IACJ,QACE,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QAChD,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5C,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC3C,IAED,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatBadge"],"sources":["./src/components/cat-badge/cat-badge.scss?tag=cat-badge&encapsulation=shadow","./src/components/cat-badge/cat-badge.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: baseline;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.badge {\n  font: inherit;\n  flex: 1 1 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('s');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  line-height: 1;\n  white-space: nowrap;\n\n  slot {\n    display: inline-block;\n    @include cat-ellipsis;\n  }\n}\n\n// ----- round\n\n.badge-round {\n  border-radius: 10rem;\n}\n\n// ----- theme\n\n.badge-filled {\n  background-color: cat-token-wrap(var(--bg));\n  color: cat-token-wrap(var(--fill));\n  font-weight: 600;\n  @include cat-font-smooth;\n}\n\n$-outline: inset 0 0 0 1px cat-token-wrap(var(--border), $alpha: 0.2);\n\n.badge-outlined {\n  background-color: cat-token('color.ui.background.body');\n  box-shadow: $-outline;\n  color: cat-token-wrap(var(--text));\n}\n\n@mixin theme($theme) {\n  .badge-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    @if $theme == 'secondary' {\n      --border: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --border: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .badge-#{$size} {\n    height: cat-size($size) * 0.5;\n    min-width: cat-size($size) * 0.5;\n    font-size: cat-body-font-size($fontSize);\n    padding: 0.5 * (cat-size($size) - 1.5) (cat-size($size) - 1) * 0.5;\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 'xs');\n@include size('m', 'xs');\n@include size('l', 's');\n@include size('xl', 'm');\n\n// ----- pulse\n\n$-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg));\n$-pulse-70: transparent 0 0 0 0.5rem;\n$-pulse-100: transparent 0 0 0 0;\n\n.badge-pulse {\n  &.badge-filled {\n    animation: 1.5s ease 0s infinite normal none running pulse;\n  }\n\n  &.badge-outlined {\n    animation: 1.5s ease 0s infinite normal none running pulse-outlined;\n  }\n}\n\n@keyframes pulse {\n  0% {\n    box-shadow: $-pulse-0;\n  }\n\n  70% {\n    box-shadow: $-pulse-70;\n  }\n\n  100% {\n    box-shadow: $-pulse-100;\n  }\n}\n\n@keyframes pulse-outlined {\n  0% {\n    box-shadow: $-pulse-0, $-outline;\n  }\n\n  70% {\n    box-shadow: $-pulse-70, $-outline;\n  }\n\n  100% {\n    box-shadow: $-pulse-100, $-outline;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Badges are used to inform users of the status of an object or of an action\n * that’s been taken.\n *\n * @part badge - The badge element.\n */\n@Component({\n  tag: 'cat-badge',\n  styleUrl: 'cat-badge.scss',\n  shadow: true\n})\nexport class CatBadge {\n  /**\n   * The rendering style of the badge.\n   */\n  @Prop() variant: 'filled' | 'outlined' = 'filled';\n\n  /**\n   * The color palette of the badge.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The size of the badge.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round badge edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Draw attention to the badge with a subtle animation.\n   */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        part=\"badge\"\n        class={{\n          badge: true,\n          'badge-round': this.round,\n          'badge-pulse': this.pulse,\n          [`badge-${this.variant}`]: Boolean(this.variant),\n          [`badge-${this.color}`]: Boolean(this.color),\n          [`badge-${this.size}`]: Boolean(this.size)\n        }}\n      >\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-button2.js

@@ -161,9 +161,9 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     this.submit = false;
     /**
-     * Ellipse overflowing button content.
+     * Disables ellipse overflowing button content.
      */
-    this.ellipsed = true;
+    this.noEllipsis = false;
     /**
      * Use round button edges.
      */
@@ -228,7 +228,7 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           'cat-button-round': this.round,
           'cat-button-loading': this.loading,
           'cat-button-disabled': this.disabled,
-          'cat-button-ellipsed': this.ellipsed && !this.isIconButton,
+          'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
           [`cat-button-${this.variant}`]: Boolean(this.variant),
           [`cat-button-${this.color}`]: Boolean(this.color),
           [`cat-button-${this.size}`]: Boolean(this.size)
@@ -242,7 +242,7 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           'cat-button-round': (_a = this.round) !== null && _a !== void 0 ? _a : this.isIconButton,
           'cat-button-loading': this.loading,
           'cat-button-disabled': this.disabled,
-          'cat-button-ellipsed': this.ellipsed && !this.isIconButton,
+          'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
           [`cat-button-${this.variant}`]: Boolean(this.variant),
           [`cat-button-${this.color}`]: Boolean(this.color),
           [`cat-button-${this.size}`]: Boolean(this.size)
@@ -305,7 +305,7 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "disabled": [4],
     "loading": [4],
     "submit": [4],
-    "ellipsed": [4],
+    "noEllipsis": [4, "no-ellipsis"],
     "round": [4],
     "url": [1],
     "urlTarget": [1, "url-target"],