@public-ui/hydrate 1.7.2 → 1.7.4

package/dist/index.js

@@ -7810,7 +7810,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 1.7.2
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 1.7.4
 		`, {
       forceLog: true,
     });
@@ -33524,15 +33524,23 @@ class KolTextarea {
   }; }
 }
 
-const toastStatusOptions = ['adding', 'settled', 'removing'];
-
-const defaultStyleCss$2 = "";
+const defaultStyleCss$2 = "/*!@:host*/.sc-kol-toast-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-toast-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-toast-default,button.sc-kol-toast-default:not([role='link']),kol-input.sc-kol-toast-default .input.sc-kol-toast-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-toast-default,button.sc-kol-toast-default,h1.sc-kol-toast-default,h2.sc-kol-toast-default,h3.sc-kol-toast-default,h4.sc-kol-toast-default,h5.sc-kol-toast-default,h6.sc-kol-toast-default,input.sc-kol-toast-default,option.sc-kol-toast-default,select.sc-kol-toast-default,textarea.sc-kol-toast-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-toast-default:is(a,button).sc-kol-toast-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-toast-default-h{max-width:100%}/*!@**/*.sc-kol-toast-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-toast-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-toast-default>span.sc-kol-toast-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-toast-default,button.sc-kol-toast-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-toast-default,input.sc-kol-toast-default,option.sc-kol-toast-default,select.sc-kol-toast-default,textarea.sc-kol-toast-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-toast-default>kol-span-wc.sc-kol-toast-default>span.sc-kol-toast-default>span.sc-kol-toast-default{display:none}/*!@:host*/.sc-kol-toast-default-h{display:block}/*!@:host > div*/.sc-kol-toast-default-h>div.sc-kol-toast-default{background-color:#fff;height:0;left:0;position:fixed;top:0;width:100%;z-index:200}/*!@:host > div > kol-alert*/.sc-kol-toast-default-h>div.sc-kol-toast-default>kol-alert.sc-kol-toast-default{display:block;margin:auto;max-width:750px}/*!@:host > div > kol-button-wc*/.sc-kol-toast-default-h>div.sc-kol-toast-default>kol-button-wc.sc-kol-toast-default{display:block;margin:auto;position:relative;top:0;width:1em}";
 
 class KolToast {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.handleShowAndDuration = () => {
+      if (this.state._show === true && typeof this.state._showDuration === 'number' && this.state._showDuration >= 0) {
+        clearTimeout(this.durationTimeout);
+        this.durationTimeout = setTimeout(() => {
+          this.close();
+        }, this.state._showDuration);
+      }
+    };
     this.close = () => {
       var _a;
+      this._show = false;
+      this.state = Object.assign(Object.assign({}, this.state), { _show: false });
       if (((_a = this._on) === null || _a === void 0 ? void 0 : _a.onClose) !== undefined) {
         this._on.onClose(new Event('Close'));
       }
@@ -33540,42 +33548,76 @@ class KolToast {
     this.on = {
       onClose: this.close,
     };
+    this._alert = true;
+    this._hasCloser = false;
+    this._heading = '';
     this._label = undefined;
+    this._level = 1;
     this._on = undefined;
-    this._status = undefined;
+    this._show = true;
+    this._showDuration = 10000;
     this._type = 'default';
     this.state = {
-      _label: '...',
-      _status: 'adding',
+      _alert: true,
+      _level: 1,
+      _show: true,
     };
   }
+  validateAlert(value) {
+    watchBoolean(this, '_alert', value);
+  }
+  validateHasCloser(value) {
+    validateHasCloser(this, value);
+  }
+  validateHeading(value) {
+    this.validateLabel(value);
+  }
   validateLabel(value) {
     validateLabel(this, value);
   }
+  validateLevel(value) {
+    watchHeadingLevel(this, value);
+  }
   validateOn(value) {
     if (typeof value === 'object' && (typeof (value === null || value === void 0 ? void 0 : value.onClose) === 'function' || value.onClose === true)) {
       setState(this, '_on', { onClose: value.onClose });
     }
   }
-  validateStatus(status) {
-    watchValidator(this, '_status', (status) => typeof status === 'string' && toastStatusOptions.includes(status), new Set('String {adding, settled, removing}'), status);
+  validateShow(value) {
+    validateShow(this, value, { hooks: { afterPatch: this.handleShowAndDuration } });
+  }
+  validateShowDuration(value) {
+    watchNumber(this, '_showDuration', value, {
+      hooks: {
+        afterPatch: this.handleShowAndDuration,
+      },
+    });
   }
   validateType(value) {
     watchValidator(this, '_type', (value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'), new Set('String {success, info, warning, error}'), value);
   }
   componentWillLoad() {
-    this.validateLabel(this._label);
+    this.validateAlert(this._alert);
+    this.validateHasCloser(this._hasCloser);
+    this.validateLabel(this._label || this._heading);
+    this.validateLevel(this._level);
     this.validateOn(this._on);
-    this.validateStatus(this._status);
+    this.validateShow(this._show);
+    this.validateShowDuration(this._showDuration);
     this.validateType(this._type);
   }
   render() {
-    return (hAsync("div", { class: `toast ${this.state._status}` }, hAsync("kol-alert", { class: "alert", _alert: true, _label: this.state._label, _level: 0, _hasCloser: true, _type: this.state._type, _variant: "card", _on: this.on }, hAsync("slot", null))));
+    return (hAsync(Host, null, this.state._show && (hAsync("div", null, hAsync("kol-alert", { _alert: this.state._alert, _label: this.state._label, _level: this.state._level, _hasCloser: this.state._hasCloser, _type: this.state._type, _variant: "card", _on: this.on }, hAsync("slot", null))))));
   }
   static get watchers() { return {
+    "_alert": ["validateAlert"],
+    "_hasCloser": ["validateHasCloser"],
+    "_heading": ["validateHeading"],
     "_label": ["validateLabel"],
+    "_level": ["validateLevel"],
     "_on": ["validateOn"],
-    "_status": ["validateStatus"],
+    "_show": ["validateShow"],
+    "_showDuration": ["validateShowDuration"],
     "_type": ["validateType"]
   }; }
   static get style() { return {
@@ -33585,19 +33627,35 @@ class KolToast {
     "$flags$": 41,
     "$tagName$": "kol-toast",
     "$members$": {
+      "_alert": [4],
+      "_hasCloser": [4, "_has-closer"],
+      "_heading": [1],
       "_label": [1],
+      "_level": [2],
       "_on": [16],
-      "_status": [1],
+      "_show": [1540],
+      "_showDuration": [2, "_show-duration"],
       "_type": [1],
       "state": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
+    "$attrsToReflect$": [["_show", "_show"]]
   }; }
 }
 
-const defaultStyleCss$1 = "/*!@:host*/.sc-kol-toast-container-default-h{display:flex;flex-direction:column;position:fixed;z-index:200}/*!@.close-all*/.close-all.sc-kol-toast-container-default{align-self:flex-end}";
+const InternalToast = ({ toastState, onClose, key }) => {
+  const handleRef = (element) => {
+    if (typeof toastState.toast.render === 'function' && element) {
+      toastState.toast.render(element, { close: () => onClose() });
+    }
+  };
+  return (hAsync("div", { class: `toast ${toastState.status}`, key: key },
+    hAsync("kol-alert", { class: "alert", _alert: true, _label: toastState.toast.label, _level: 0, _hasCloser: true, _type: toastState.toast.type, _variant: "card", _on: { onClose } },
+      hAsync("div", { ref: handleRef }, typeof toastState.toast.description === 'string' ? toastState.toast.description : null))));
+};
+
+const defaultStyleCss$1 = "@layer kol-component {\n\t.sc-kol-toast-container-default-h {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: fixed;\n\t\tz-index: 200;\n\t}\n\n\t.close-all {\n\t\talign-self: flex-end;\n\t}\n}";
 
 const TRANSITION_TIMEOUT = 300;
 class KolToastContainer {
@@ -33637,7 +33695,7 @@ class KolToastContainer {
     }, TRANSITION_TIMEOUT);
   }
   render() {
-    return (hAsync(Fragment, null, this.state._toastStates.length > 1 && (hAsync("kol-button", { _label: translate('kol-toast-close-all'), class: "close-all", _on: { onClick: this.handleCloseAllClick.bind(this) } })), this.state._toastStates.map((toastState) => (hAsync("kol-toast", { _label: toastState.toast.label, _status: toastState.status, _type: toastState.toast.type, _on: { onClose: () => this.handleClose(toastState) }, key: toastState.id }, toastState.toast.description)))));
+    return (hAsync(Fragment, null, this.state._toastStates.length > 1 && (hAsync("kol-button", { _label: translate('kol-toast-close-all'), class: "close-all", _on: { onClick: this.handleCloseAllClick.bind(this) } })), this.state._toastStates.map((toastState) => (hAsync(InternalToast, { toastState: toastState, onClose: () => this.handleClose(toastState), key: toastState.id })))));
   }
   static get style() { return {
     default: defaultStyleCss$1
@@ -34090,8 +34148,28 @@ var index = /*#__PURE__*/Object.freeze({
 class ToasterService {
   constructor(document) {
     this.document = document;
-    this.toastContainerElement = this.document.createElement('kol-toast-container');
-    this.document.body.prepend(this.toastContainerElement);
+    this.queue = new Set();
+    this.isOpen = false;
+    this.toastElement = this.document.createElement('kol-toast');
+    this.toastElement.setAttribute('_level', '0');
+    this.toastElement.setAttribute('_show', 'false');
+    this.toastElement.setAttribute('_show-duration', '-1');
+    this.toastElement.setAttribute('_has-closer', 'true');
+    this.toastElement._on = {
+      onClose: () => {
+        const next = this.queue.values().next();
+        if (next.value) {
+          this.queue.delete(next.value);
+          setTimeout(() => {
+            this.showToast(next.value);
+          }, 200);
+        }
+        else {
+          this.isOpen = false;
+        }
+      },
+    };
+    this.document.body.insertBefore(this.toastElement, this.document.body.firstChild);
   }
   static getInstance(document) {
     let instance = this.instances.get(document);
@@ -34102,18 +34180,42 @@ class ToasterService {
     return instance;
   }
   dispose() {
-    const element = this.toastContainerElement;
+    const element = this.toastElement;
     if (element) {
-      this.toastContainerElement = undefined;
+      this.toastElement = undefined;
+      this.queue.clear();
       element.remove();
+      const on = element._on;
+      if (on && on.onClose) {
+        on.onClose(new Event('dispose'));
+      }
     }
     else {
       console.warn('Toaster service is already disposed.');
     }
   }
-  async enqueue(toast) {
-    var _a;
-    await ((_a = this.toastContainerElement) === null || _a === void 0 ? void 0 : _a.enqueue(toast));
+  enqueue(data) {
+    if (this.isOpen) {
+      this.queue.add(data);
+    }
+    else {
+      this.showToast(data);
+    }
+  }
+  showToast(data) {
+    const label = data.label || data.heading;
+    if (typeof label === 'undefined') {
+      throw new Error('Toast requires a label.');
+    }
+    if (!this.toastElement) {
+      console.warn('Tried to show a new toast at a disposed toaster service!');
+      return;
+    }
+    this.toastElement.setAttribute('_label', label);
+    this.toastElement.setAttribute('_show', 'true');
+    this.toastElement.setAttribute('_type', data.type);
+    this.toastElement.innerText = data.description;
+    this.isOpen = true;
   }
 }
 ToasterService.instances = new Map();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": "https://github.com/public-ui/kolibri",
@@ -42,11 +42,11 @@
     "hydrate"
   ],
   "devDependencies": {
-    "@public-ui/components": "1.7.2",
+    "@public-ui/components": "1.7.4",
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "@public-ui/components": "1.7.2"
+    "@public-ui/components": "1.7.4"
   },
   "sideEffects": false,
   "type": "commonjs",