@public-ui/hydrate 1.7.3 → 1.7.5

package/dist/index.js

@@ -7810,7 +7810,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 1.7.3
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 1.7.5
 		`, {
       forceLog: true,
     });
@@ -10151,6 +10151,9 @@ class KolAccordion {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.nonce = nonce();
+    this.catchRef = (ref) => {
+      propagateFocus(this.host, ref);
+    };
     this.onClick = (event) => {
       this._open = !this._open;
       setTimeout(() => {
@@ -10174,7 +10177,7 @@ class KolAccordion {
     return (hAsync(Host, null, hAsync("div", { class: {
         accordion: true,
         open: this.state._open === true,
-      } }, hAsync("kol-heading-wc", { _label: "", _level: this.state._level }, hAsync("kol-button-wc", { _ariaControls: this.nonce, _ariaExpanded: this.state._open, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { class: "header" }, hAsync("slot", { name: "header" })), hAsync("div", { class: "wrapper" }, hAsync("div", { class: "animation-wrapper" }, hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { name: "content" }), " ", hAsync("slot", null)))))));
+      } }, hAsync("kol-heading-wc", { _label: "", _level: this.state._level }, hAsync("kol-button-wc", { ref: this.catchRef, slot: "expert", _ariaControls: this.nonce, _ariaExpanded: this.state._open, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { class: "header" }, hAsync("slot", { name: "header" })), hAsync("div", { class: "wrapper" }, hAsync("div", { class: "animation-wrapper" }, hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { name: "content" }), " ", hAsync("slot", null)))))));
   }
   validateHeading(value) {
     this.validateLabel(value);
@@ -10199,6 +10202,7 @@ class KolAccordion {
     this.validateOn(this._on);
     this.validateOpen(this._open);
   }
+  get host() { return getElement(this); }
   static get watchers() { return {
     "_heading": ["validateHeading"],
     "_label": ["validateLabel"],
@@ -11298,8 +11302,7 @@ class KolButton {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this._accessKey = undefined;
     this._ariaControls = undefined;
@@ -11420,8 +11423,7 @@ class KolButtonLink {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this._accessKey = undefined;
     this._ariaControls = undefined;
@@ -12318,6 +12320,10 @@ const defaultStyleCss$z = "/*!@:host*/.sc-kol-details-default-h{--a11y-min-size:
 class KolDetails {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.catchRef = (ref) => {
+      this.summaryElement = ref;
+      propagateFocus(this.host, this.summaryElement);
+    };
     this.handleToggle = (event) => {
       clearTimeout(this.toggleTimeout);
       this.toggleTimeout = setTimeout(() => {
@@ -12344,7 +12350,7 @@ class KolDetails {
   render() {
     return (hAsync(Host, null, hAsync("details", { ref: (el) => {
         this.detailsElement = el;
-      }, onToggle: this.handleToggle }, hAsync("summary", { ref: (element) => (this.summaryElement = element) }, this.state._open ? hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-down" }) : hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right" }), hAsync("span", null, this.state._label)), hAsync("div", { class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", null, hAsync("slot", null))))));
+      }, onToggle: this.handleToggle }, hAsync("summary", { ref: this.catchRef }, this.state._open ? hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-down" }) : hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right" }), hAsync("span", null, this.state._label)), hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", null, hAsync("slot", null))))));
   }
   validateLabel(value) {
     validateLabel(this, value);
@@ -12695,7 +12701,7 @@ function validateLoading(component, value) {
   watchValidator(component, '_loading', (value) => value === 'eager' || value === 'lazy', AVAILABLE_LOADING_VALUES, value);
 }
 
-const defaultStyleCss$w = "/*!@img*/img.sc-kol-image-default{max-height:100%;max-width:100%}";
+const defaultStyleCss$w = "/*!@:host*/.sc-kol-image-default-h{display:inline-block}/*!@img*/img.sc-kol-image-default{max-height:100%;max-width:100%}";
 
 class KolImage {
   constructor(hostRef) {
@@ -13304,13 +13310,12 @@ class KolInputCheckbox {
         [this.state._variant]: true,
         'hide-label': !!this.state._hideLabel,
         checked: this.state._checked,
-      }, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, tabIndex: this.state._variant === 'button' ? 0 : undefined, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("kol-icon", { class: "icon", onClick: this.handleIconClick.bind(this), _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined }))))));
+      }, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, tabIndex: this.state._variant === 'button' && !this.state._disabled ? 0 : undefined, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("kol-icon", { class: "icon", onClick: this.handleIconClick.bind(this), _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this.onChange = (event) => {
       var _a;
@@ -15369,8 +15374,7 @@ class KolInputRadio {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this.onChange = (event) => {
       var _a;
@@ -16236,8 +16240,7 @@ class KolLink {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this._ariaControls = undefined;
     this._ariaCurrent = undefined;
@@ -16312,8 +16315,7 @@ class KolLinkButton {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.catchRef = (ref) => {
-      this.ref = ref;
-      propagateFocus(this.host, this.ref);
+      propagateFocus(this.host, ref);
     };
     this._ariaControls = undefined;
     this._ariaCurrent = undefined;
@@ -33524,15 +33526,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 +33550,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 +33629,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 +33697,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 +34150,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 +34182,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.3",
+  "version": "1.7.5",
   "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.3",
+    "@public-ui/components": "1.7.5",
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "@public-ui/components": "1.7.3"
+    "@public-ui/components": "1.7.5"
   },
   "sideEffects": false,
   "type": "commonjs",