@haiilo/catalyst 0.5.10 → 0.5.13

package/dist/cjs/cat-alert_15.cjs.entry.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5d72f0e4.js');
-const catIconRegistry = require('./cat-icon-registry-b3a95a6b.js');
+const loglevel = require('./loglevel-c9b2d01f.js');
+const catIconRegistry = require('./cat-icon-registry-49b11b51.js');
+const catNotification = require('./cat-notification-156f4cf5.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}";
 
@@ -183,7 +185,7 @@ function createEmptyStyleRule(query) {
     }
   }
   catch (e) {
-    catIconRegistry.loglevel.error(e);
+    loglevel.loglevel.error(e);
   }
 }
 
@@ -268,7 +270,7 @@ const CatButton = class {
   }
   componentWillRender() {
     if (this.isIconButton && !this.a11yLabel) {
-      catIconRegistry.loglevel.warn('[A11y] Missing ARIA label on icon button', this);
+      loglevel.loglevel.warn('[A11y] Missing ARIA label on icon button', this);
     }
   }
   haltDisabledEvents(event) {
@@ -378,14 +380,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) {
     index.registerInstance(this, hostRef);
     this.catChange = index.createEvent(this, "catChange", 7);
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
-    this.id = `cat-checkbox-${nextUniqueId$6++}`;
+    this.id = `cat-checkbox-${nextUniqueId$5++}`;
     /**
      * Checked state of the checkbox
      */
@@ -418,7 +420,7 @@ const CatCheckbox = class {
   }
   componentWillRender() {
     if (!this.label) {
-      catIconRegistry.loglevel.error('[A11y] Missing ARIA label on checkbox', this);
+      loglevel.loglevel.error('[A11y] Missing ARIA label on checkbox', this);
     }
   }
   /**
@@ -471,7 +473,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) {
     index.registerInstance(this, hostRef);
@@ -479,7 +481,7 @@ const CatInput = class {
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
     this.i18n = catIconRegistry.CatI18nRegistry.getInstance();
-    this.id = `cat-input-${nextUniqueId$5++}`;
+    this.id = `cat-input-${nextUniqueId$4++}`;
     this.inputValue = '';
     /**
      * Whether the input should show a clear button.
@@ -530,7 +532,7 @@ const CatInput = class {
   }
   componentWillRender() {
     if (!this.label) {
-      catIconRegistry.loglevel.error('[A11y] Missing ARIA label on input', this);
+      loglevel.loglevel.error('[A11y] Missing ARIA label on input', this);
     }
   }
   /**
@@ -2808,13 +2810,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) {
     index.registerInstance(this, hostRef);
     this.catOpen = index.createEvent(this, "catOpen", 7);
     this.catClose = index.createEvent(this, "catClose", 7);
-    this.id = nextUniqueId$4++;
+    this.id = nextUniqueId$3++;
     /**
      * The placement of the menu.
      */
@@ -2911,14 +2913,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) {
     index.registerInstance(this, hostRef);
     this.catChange = index.createEvent(this, "catChange", 7);
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
-    this.id = `cat-radio-${++nextUniqueId$3}`;
+    this.id = `cat-radio-${++nextUniqueId$2}`;
     /**
      * Whether this radio is checked.
      */
@@ -2942,7 +2944,7 @@ const CatRadio = class {
   }
   componentWillRender() {
     if (!this.label) {
-      catIconRegistry.loglevel.error('[A11y] Missing ARIA label on radio', this);
+      loglevel.loglevel.error('[A11y] Missing ARIA label on radio', this);
     }
   }
   /**
@@ -4368,86 +4370,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) {
     index.registerInstance(this, hostRef);
-    this.catChange = index.createEvent(this, "catChange", 7);
-    this.catFocus = index.createEvent(this, "catFocus", 7);
-    this.catBlur = index.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) {
-      catIconRegistry.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 (index.h(index.Host, null, this.label && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, this.label, !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(Optional)"))))), index.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 && index.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 index.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
+    };
+    catNotification.NotificationsService.error('Default Click');
+    catNotification.NotificationsService.error('Long default title, long default title, long default title, long default title');
+    catNotification.NotificationsService.info('Info Click', 'Info message', infoOptions);
+    catNotification.NotificationsService.success('', ' ', successOptions4);
+    catNotification.NotificationsService.error('Error Title', ' ', errorOptions);
+    catNotification.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);
+    catNotification.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))}";
 
@@ -4482,7 +4446,7 @@ const CatToggle = class {
   }
   componentWillRender() {
     if (!this.label) {
-      catIconRegistry.loglevel.error('[A11y] Missing ARIA label on toggle', this);
+      loglevel.loglevel.error('[A11y] Missing ARIA label on toggle', this);
     }
   }
   /**
@@ -4644,7 +4608,7 @@ exports.cat_radio = CatRadio;
 exports.cat_scrollable = CatScrollable;
 exports.cat_skeleton = CatSkeleton;
 exports.cat_spinner = CatSpinner;
-exports.cat_textarea = CatTextarea;
+exports.cat_toast_demo = CatToastDemo;
 exports.cat_toggle = CatToggle;
 exports.cat_tooltip = CatTooltip;