@public-ui/hydrate 3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.0 → 3.0.2-rc.0

package/README.md

@@ -19,9 +19,9 @@ Provide an adapter for Server Side Rendering of KoliBri components.
 You can install the adapter with `npm`, `pnpm` or `yarn`:
 
 ```bash
-npm i -g @public-ui/hydrate
-pnpm i -g @public-ui/hydrate
-yarn add -g @public-ui/hydrate
+npm i @public-ui/hydrate
+pnpm i @public-ui/hydrate
+yarn add @public-ui/hydrate
 ```
 
 ## Usage
@@ -35,3 +35,5 @@ import { renderToString } from '@public-ui/hydrate';
 const inputHtml = `<kol-button _label="Hello World"_></kol-button>`;
 const { html } = await renderToString(inputHtml);
 ```
+
+Refer to the [default theme README](../../themes/default/README.md) for information on customizing the output.

package/dist/index.js

@@ -3832,6 +3832,10 @@ const validateAdjustHeight = (component, value) => {
     watchBoolean(component, '_adjustHeight', value);
 };
 
+const validateAlt = (component, value, options = {}) => {
+    watchString(component, '_alt', value, options);
+};
+
 const validateAlignment = (component, propName, value) => {
     watchValidator(component, propName, (value) => typeof value === 'string' && alignPropTypeOptions.includes(value), new Set(alignPropTypeOptions), value, {
         defaultValue: 'top',
@@ -4198,6 +4202,14 @@ const validateImageSource = (component, value, options) => {
     watchString(component, '_src', value, options);
 };
 
+const validateImageSizes = (component, value, options = {}) => {
+    watchString(component, '_sizes', value, options);
+};
+
+const validateImageSrcset = (component, value, options = {}) => {
+    watchString(component, '_srcset', value, options);
+};
+
 const validateIndeterminate = (component, value) => {
     watchBoolean(component, '_indeterminate', value);
 };
@@ -5134,13 +5146,28 @@ const AlertIcon = ({ type, label }) => {
     }
 };
 
+const vibrateOnError = () => {
+    if (typeof navigator === 'undefined' || typeof navigator.vibrate !== 'function') {
+        return;
+    }
+    const ua = navigator.userActivation;
+    const hasGesture = (ua === null || ua === void 0 ? void 0 : ua.isActive) || (ua === null || ua === void 0 ? void 0 : ua.hasBeenActive);
+    if (!hasGesture) {
+        return;
+    }
+    if (!matchMedia('(any-pointer: coarse)').matches) {
+        return;
+    }
+    try {
+        navigator.vibrate([100, 75, 100, 75, 100]);
+    }
+    catch (_a) {
+    }
+};
 const KolAlertFc = (props, children) => {
-    var _a, _b;
     const { class: classNames = {}, alert = false, hasCloser = false, label, level = 0, type = 'default', variant = 'msg', onAlertTimeout, onCloserClick } = props, other = __rest(props, ["class", "alert", "hasCloser", "label", "level", "type", "variant", "onAlertTimeout", "onCloserClick"]);
     if (alert) {
-        if ((_a = navigator.userActivation) === null || _a === void 0 ? void 0 : _a.hasBeenActive) {
-            (_b = navigator === null || navigator === void 0 ? void 0 : navigator.vibrate) === null || _b === void 0 ? void 0 : _b.call(navigator, [100, 75, 100, 75, 100]);
-        }
+        vibrateOnError();
         setTimeout(() => {
             onAlertTimeout === null || onAlertTimeout === void 0 ? void 0 : onAlertTimeout();
         }, 10000);
@@ -5205,7 +5232,7 @@ class KolAlertWc {
             onCloserClick: this.close,
             onAlertTimeout: this.handleAlertTimeout,
         };
-        return (hAsync(KolAlertFc, Object.assign({ key: '9038051f21b86a9c83c8ac5619e723dff5ebcbeb' }, props), hAsync("slot", { key: 'cfd116176ab783db5232d9d5520f8ae890ca44db' })));
+        return (hAsync(KolAlertFc, Object.assign({ key: '2b0d74465270eef8d8d6f3da8c04377f862e8630' }, props), hAsync("slot", { key: '55e8ad62be763c26af16813e5ebfac2ce1f63b54' })));
     }
     validateAlert(value) {
         watchBoolean(this, '_alert', value);
@@ -18330,15 +18357,13 @@ class KolImage {
         };
     }
     validateAlt(value) {
-        watchString(this, '_alt', value, {
-            required: true,
-        });
+        validateAlt(this, value, { required: true });
     }
     validateLoading(value) {
         validateLoading(this, value);
     }
     validateSizes(value) {
-        watchString(this, '_sizes', value);
+        validateImageSizes(this, value);
     }
     validateSrc(value) {
         validateImageSource(this, value, {
@@ -18346,7 +18371,7 @@ class KolImage {
         });
     }
     validateSrcset(value) {
-        watchString(this, '_srcset', value);
+        validateImageSrcset(this, value);
     }
     componentWillLoad() {
         this.validateAlt(this._alt);
@@ -18356,7 +18381,7 @@ class KolImage {
         this.validateSrcset(this._srcset);
     }
     render() {
-        return (hAsync("img", { key: '23837493ec11632608a497a0319b945b91cadb6d', class: "kol-image", alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset }));
+        return (hAsync("img", { key: 'cca1e1b65e9aab11b4c15bea394d6c54ead1a123', class: "kol-image", alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset }));
     }
     static get watchers() { return {
         "_alt": ["validateAlt"],

package/dist/index.mjs

@@ -3828,6 +3828,10 @@ const validateAdjustHeight = (component, value) => {
     watchBoolean(component, '_adjustHeight', value);
 };
 
+const validateAlt = (component, value, options = {}) => {
+    watchString(component, '_alt', value, options);
+};
+
 const validateAlignment = (component, propName, value) => {
     watchValidator(component, propName, (value) => typeof value === 'string' && alignPropTypeOptions.includes(value), new Set(alignPropTypeOptions), value, {
         defaultValue: 'top',
@@ -4194,6 +4198,14 @@ const validateImageSource = (component, value, options) => {
     watchString(component, '_src', value, options);
 };
 
+const validateImageSizes = (component, value, options = {}) => {
+    watchString(component, '_sizes', value, options);
+};
+
+const validateImageSrcset = (component, value, options = {}) => {
+    watchString(component, '_srcset', value, options);
+};
+
 const validateIndeterminate = (component, value) => {
     watchBoolean(component, '_indeterminate', value);
 };
@@ -5130,13 +5142,28 @@ const AlertIcon = ({ type, label }) => {
     }
 };
 
+const vibrateOnError = () => {
+    if (typeof navigator === 'undefined' || typeof navigator.vibrate !== 'function') {
+        return;
+    }
+    const ua = navigator.userActivation;
+    const hasGesture = (ua === null || ua === void 0 ? void 0 : ua.isActive) || (ua === null || ua === void 0 ? void 0 : ua.hasBeenActive);
+    if (!hasGesture) {
+        return;
+    }
+    if (!matchMedia('(any-pointer: coarse)').matches) {
+        return;
+    }
+    try {
+        navigator.vibrate([100, 75, 100, 75, 100]);
+    }
+    catch (_a) {
+    }
+};
 const KolAlertFc = (props, children) => {
-    var _a, _b;
     const { class: classNames = {}, alert = false, hasCloser = false, label, level = 0, type = 'default', variant = 'msg', onAlertTimeout, onCloserClick } = props, other = __rest(props, ["class", "alert", "hasCloser", "label", "level", "type", "variant", "onAlertTimeout", "onCloserClick"]);
     if (alert) {
-        if ((_a = navigator.userActivation) === null || _a === void 0 ? void 0 : _a.hasBeenActive) {
-            (_b = navigator === null || navigator === void 0 ? void 0 : navigator.vibrate) === null || _b === void 0 ? void 0 : _b.call(navigator, [100, 75, 100, 75, 100]);
-        }
+        vibrateOnError();
         setTimeout(() => {
             onAlertTimeout === null || onAlertTimeout === void 0 ? void 0 : onAlertTimeout();
         }, 10000);
@@ -5201,7 +5228,7 @@ class KolAlertWc {
             onCloserClick: this.close,
             onAlertTimeout: this.handleAlertTimeout,
         };
-        return (hAsync(KolAlertFc, Object.assign({ key: '9038051f21b86a9c83c8ac5619e723dff5ebcbeb' }, props), hAsync("slot", { key: 'cfd116176ab783db5232d9d5520f8ae890ca44db' })));
+        return (hAsync(KolAlertFc, Object.assign({ key: '2b0d74465270eef8d8d6f3da8c04377f862e8630' }, props), hAsync("slot", { key: '55e8ad62be763c26af16813e5ebfac2ce1f63b54' })));
     }
     validateAlert(value) {
         watchBoolean(this, '_alert', value);
@@ -18326,15 +18353,13 @@ class KolImage {
         };
     }
     validateAlt(value) {
-        watchString(this, '_alt', value, {
-            required: true,
-        });
+        validateAlt(this, value, { required: true });
     }
     validateLoading(value) {
         validateLoading(this, value);
     }
     validateSizes(value) {
-        watchString(this, '_sizes', value);
+        validateImageSizes(this, value);
     }
     validateSrc(value) {
         validateImageSource(this, value, {
@@ -18342,7 +18367,7 @@ class KolImage {
         });
     }
     validateSrcset(value) {
-        watchString(this, '_srcset', value);
+        validateImageSrcset(this, value);
     }
     componentWillLoad() {
         this.validateAlt(this._alt);
@@ -18352,7 +18377,7 @@ class KolImage {
         this.validateSrcset(this._srcset);
     }
     render() {
-        return (hAsync("img", { key: '23837493ec11632608a497a0319b945b91cadb6d', class: "kol-image", alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset }));
+        return (hAsync("img", { key: 'cca1e1b65e9aab11b4c15bea394d6c54ead1a123', class: "kol-image", alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset }));
     }
     static get watchers() { return {
         "_alt": ["validateAlt"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.0",
+  "version": "3.0.2-rc.0",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -46,10 +46,10 @@
   ],
   "devDependencies": {
     "rimraf": "6.0.1",
-    "@public-ui/components": "3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.0"
+    "@public-ui/components": "3.0.2-rc.0"
   },
   "peerDependencies": {
-    "@public-ui/components": "3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.0"
+    "@public-ui/components": "3.0.2-rc.0"
   },
   "sideEffects": false,
   "type": "commonjs",