@haiilo/catalyst 0.5.12 → 0.5.13

package/dist/esm/cat-alert_15.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}";
 
@@ -374,14 +376,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 +469,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 +477,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 +2806,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 +2909,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.
      */
@@ -4364,86 +4366,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 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}";
+const catToastDemoCss = ":host{display:block}";
 
-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)));
-  }
-  onInput(event) {
-    // this.inputValue = πthis.input.value;
-    this.catChange.emit(event);
-  }
-  onFocus(event) {
-    this.catFocus.emit(event);
+    return h("cat-button", { onClick: this.onClick.bind(this) }, "Show Notifications");
   }
-  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 +4592,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, 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