@haiilo/catalyst 0.5.12 → 0.6.0

package/dist/esm/{cat-alert_15.entry.js → cat-alert_16.entry.js}

@@ -1,5 +1,7 @@
 import { r as registerInstance, h, H as Host, c as createEvent } from './index-fd12be19.js';
-import { l as loglevel, C as CatIconRegistry, a as CatI18nRegistry } from './cat-icon-registry-a7acd6f7.js';
+import { l as loglevel } from './loglevel-39a9e3f9.js';
+import { C as CatIconRegistry, a as CatI18nRegistry } from './cat-icon-registry-3ea75755.js';
+import { N as NotificationsService } from './cat-notification-cd98c266.js';
 
 const catAlertCss = ":host{display:block;margin-bottom:1rem}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host([hidden]){display:none}.alert{font:inherit;color:rgb(var(--text));background-color:rgba(var(--bg), 0.1);box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);border-radius:0.25rem;padding:0.75rem 1rem}::slotted(:last-child){margin-bottom:0 !important}.alert-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.alert-secondary{--bg:105, 118, 135;--text:0, 0, 0;--border:105, 118, 135}.alert-success{--bg:0, 132, 88;--text:0, 132, 88;--border:0, 132, 88}.alert-warning{--bg:255, 206, 128;--text:159, 97, 0;--border:159, 97, 0}.alert-danger{--bg:217, 52, 13;--text:217, 52, 13;--border:217, 52, 13}";
 
@@ -29,7 +31,92 @@ const CatAlert = class {
 };
 CatAlert.style = catAlertCss;
 
-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)}}";
+/**
+ * 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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * 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"]
+  }; }
+};
+CatAvatar.style = catAvatarCss;
+
+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 = class {
   constructor(hostRef) {
@@ -224,9 +311,9 @@ const CatButton = class {
      */
     this.submit = false;
     /**
-     * Ellipse overflowing button content.
+     * Disables ellipse overflowing button content.
      */
-    this.ellipsed = true;
+    this.noEllipsis = false;
     /**
      * Use round button edges.
      */
@@ -291,7 +378,7 @@ const CatButton = class {
           '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)
@@ -305,7 +392,7 @@ const CatButton = class {
           '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)
@@ -374,14 +461,14 @@ CatCard.style = catCardCss;
 
 const catCheckboxCss = ":host{display:flex;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}input{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
 
-let nextUniqueId$6 = 0;
+let nextUniqueId$5 = 0;
 const CatCheckbox = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-checkbox-${nextUniqueId$6++}`;
+    this.id = `cat-checkbox-${nextUniqueId$5++}`;
     /**
      * Checked state of the checkbox
      */
@@ -467,7 +554,7 @@ CatIcon.style = catIconCss;
 
 const catInputCss = ":host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid #d7dbe0;padding-right:0.75rem}.text-suffix{border-left:1px solid #d7dbe0;padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.input-hint{font-size:0.875rem;line-height:1rem;margin:0}";
 
-let nextUniqueId$5 = 0;
+let nextUniqueId$4 = 0;
 const CatInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -475,7 +562,7 @@ const CatInput = class {
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
     this.i18n = CatI18nRegistry.getInstance();
-    this.id = `cat-input-${nextUniqueId$5++}`;
+    this.id = `cat-input-${nextUniqueId$4++}`;
     this.inputValue = '';
     /**
      * Whether the input should show a clear button.
@@ -2804,13 +2891,13 @@ const firstTabbable = (container) => {
 
 const catMenuCss = ":host{display:contents}:host([hidden]){display:none}.content{padding-top:0.5rem;padding-bottom:0.5rem;position:absolute;background:white;display:none;overflow:auto;-webkit-overflow-scrolling:touch;min-width:8rem;max-width:16rem;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem;z-index:100}";
 
-let nextUniqueId$4 = 0;
+let nextUniqueId$3 = 0;
 const CatMenu = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catOpen = createEvent(this, "catOpen", 7);
     this.catClose = createEvent(this, "catClose", 7);
-    this.id = nextUniqueId$4++;
+    this.id = nextUniqueId$3++;
     /**
      * The placement of the menu.
      */
@@ -2907,14 +2994,14 @@ CatMenu.style = catMenuCss;
 
 const catRadioCss = ":host{display:flex;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;cursor:pointer}.radio{display:flex;position:relative}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
 
-let nextUniqueId$3 = 0;
+let nextUniqueId$2 = 0;
 const CatRadio = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-radio-${++nextUniqueId$3}`;
+    this.id = `cat-radio-${++nextUniqueId$2}`;
     /**
      * Whether this radio is checked.
      */
@@ -4196,20 +4283,20 @@ const CatScrollable = class {
     this.scrolledBottom = createEvent(this, "scrolledBottom", 7);
     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.
      */
@@ -4238,7 +4325,7 @@ const CatScrollable = class {
     });
   }
   componentDidLoad() {
-    if (this.scrolledInit) {
+    if (!this.noScrolledInit) {
       this.init.next();
     }
   }
@@ -4249,12 +4336,12 @@ const CatScrollable = class {
   }
   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" })),
+      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.overflowX,
-          'scroll-y': this.overflowY,
-          'no-overscroll': !this.overscroll
+          'scroll-x': !this.noOverflowX,
+          'scroll-y': !this.noOverflowY,
+          'no-overscroll': this.noOverscroll
         } }, h("slot", null))
     ];
   }
@@ -4364,86 +4451,48 @@ const CatSpinner = class {
 };
 CatSpinner.style = catSpinnerCss;
 
-var e,t,n="function"==typeof Map?new Map:(e=[],t=[],{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){-1===e.indexOf(n)&&(e.push(n),t.push(o));},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1));}}),o=function(e){return new Event(e,{bubbles:!0})};try{new Event("test");}catch(e){o=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t};}function r(e){var t=n.get(e);t&&t.destroy();}function i(e){var t=n.get(e);t&&t.update();}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return function(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!n.has(e)){var t,r=null,i=null,l=null,d=function(){e.clientWidth!==i&&c();},a=function(t){window.removeEventListener("resize",d,!1),e.removeEventListener("input",c,!1),e.removeEventListener("keyup",c,!1),e.removeEventListener("autosize:destroy",a,!1),e.removeEventListener("autosize:update",c,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n];}),n.delete(e);}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",a,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",c,!1),window.addEventListener("resize",d,!1),e.addEventListener("input",c,!1),e.addEventListener("autosize:update",c,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",n.set(e,{destroy:a,update:c}),"vertical"===(t=window.getComputedStyle(e,null)).resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),r="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(r)&&(r=0),c();}function u(t){var n=e.style.width;e.style.width="0px",e.style.width=n,e.style.overflowY=t;}function s(){if(0!==e.scrollHeight){var t=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}(e),n=document.documentElement&&document.documentElement.scrollTop;e.style.height="",e.style.height=e.scrollHeight+r+"px",i=e.clientWidth,t.forEach(function(e){e.node.scrollTop=e.scrollTop;}),n&&(document.documentElement.scrollTop=n);}}function c(){s();var t=Math.round(parseFloat(e.style.height)),n=window.getComputedStyle(e,null),r="content-box"===n.boxSizing?Math.round(parseFloat(n.height)):e.offsetHeight;if(r<t?"hidden"===n.overflowY&&(u("scroll"),s(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight):"hidden"!==n.overflowY&&(u("hidden"),s(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight),l!==r){l=r;var i=o("autosize:resized");try{e.dispatchEvent(i);}catch(e){}}}}(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e});var d=l;
+const catToastDemoCss = ":host{display:block}";
 
-const catTextareaCss = ":host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}textarea{margin:0;padding:0.625rem 0.75rem;min-height:2.5rem;font:inherit;background:white;border-radius:0.25rem;border:none;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear}textarea:disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));resize:none}textarea:hover:not(:disabled){box-shadow:0 0 0 2px #d7dbe0}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-hint{font-size:0.875rem;line-height:1rem;margin:0}";
-
-let nextUniqueId$2 = 0;
-const CatTextarea = class {
+const CatToastDemo = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.catChange = createEvent(this, "catChange", 7);
-    this.catFocus = createEvent(this, "catFocus", 7);
-    this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-textarea-${nextUniqueId$2++}`;
-    /**
-     * Whether the textarea is disabled.
-     */
-    this.disabled = false;
-    /**
-     * The label for the textarea.
-     */
-    this.label = '';
-    /**
-     * Visually hide the label, but still show it to assistive technologies like screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * The name of the form control. Submitted with the form as part of a name/value pair.
-     */
-    this.name = '';
-    /**
-     * The value is not editable.
-     */
-    this.readonly = false;
-    /**
-     * A value is required or must be check for the form to be submittable.
-     */
-    this.required = false;
-    /**
-     * Specifies the initial number of lines in the textarea.
-     */
-    this.rows = 3;
-  }
-  componentWillRender() {
-    if (!this.label) {
-      loglevel.error('[A11y] Missing ARIA label on textarea', this);
-    }
-  }
-  componentDidLoad() {
-    d(this.textarea);
   }
-  /**
-   * Sets focus on the textarea. Use this method instead of `textarea.focus()`.
-   *
-   * @param options An optional object providing options to control aspects of
-   * the focusing process.
-   */
-  async setFocus(options) {
-    this.textarea.focus(options);
-  }
-  // /**
-  //  * Clear the input.
-  //  */
-  // @Method()
-  // async clear(): Promise<void> {
-  //   this.inputValue = '';
-  // }
   render() {
-    return (h(Host, null, this.label && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(Optional)"))))), h("textarea", { ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.hint && h("p", { class: "input-hint" }, this.hint)));
+    return h("cat-button", { onClick: this.onClick.bind(this) }, "Show Notifications");
   }
-  onInput(event) {
-    // this.inputValue = πthis.input.value;
-    this.catChange.emit(event);
-  }
-  onFocus(event) {
-    this.catFocus.emit(event);
-  }
-  onBlur(event) {
-    this.catBlur.emit(event);
+  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);
   }
 };
-CatTextarea.style = catTextareaCss;
+CatToastDemo.style = catToastDemoCss;
 
 const catToggleCss = ":host{display:flex;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}input{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:1.25rem;border-radius:10rem;background-color:#d7dbe0;transition:background-color 0.13s ease}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 32, 127, 138))}:focus-visible+.toggle{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.toggle::after{content:\"\";position:absolute;width:1rem;height:1rem;background:#fff;border-radius:10rem;transform:translateX(calc(2px - 0.5rem));transition:transform 0.13s linear;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
 
@@ -4628,6 +4677,6 @@ const CatTooltip = class {
 CatTooltip.OFFSET = 4;
 CatTooltip.style = catTooltipCss;
 
-export { CatAlert as cat_alert, CatBadge as cat_badge, CatButton as cat_button, CatCard as cat_card, CatCheckbox as cat_checkbox, CatIcon as cat_icon, CatInput as cat_input, CatMenu as cat_menu, CatRadio as cat_radio, CatScrollable as cat_scrollable, CatSkeleton as cat_skeleton, CatSpinner as cat_spinner, CatTextarea as cat_textarea, CatToggle as cat_toggle, CatTooltip as cat_tooltip };
+export { CatAlert as cat_alert, CatAvatar as cat_avatar, CatBadge as cat_badge, CatButton as cat_button, CatCard as cat_card, CatCheckbox as cat_checkbox, CatIcon as cat_icon, CatInput as cat_input, CatMenu as cat_menu, CatRadio as cat_radio, CatScrollable as cat_scrollable, CatSkeleton as cat_skeleton, CatSpinner as cat_spinner, CatToastDemo as cat_toast_demo, CatToggle as cat_toggle, CatTooltip as cat_tooltip };
 
-//# sourceMappingURL=cat-alert_15.entry.js.map
+//# sourceMappingURL=cat-alert_16.entry.js.map