@ebrains/components 0.8.0-alpha.0 → 0.9.1-beta

package/dist/components/eds-icon-private.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as privat } from './private.js';
+
+const EdsIconPrivate$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconPrivate extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.class = '';
+    }
+    render() {
+        return h("span", { key: 'd57700e721a421e4c970a1e643d92548fcf2b18c', class: this.class, innerHTML: privat });
+    }
+}, [0, "eds-icon-private", {
+        "class": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-icon-private"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-icon-private":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsIconPrivate$1);
+            }
+            break;
+    } });
+}
+
+const EdsIconPrivate = EdsIconPrivate$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsIconPrivate, defineCustomElement };

package/dist/components/eds-icon-public.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsIconPublic extends Components.EdsIconPublic, HTMLElement {}
+export const EdsIconPublic: {
+    prototype: EdsIconPublic;
+    new (): EdsIconPublic;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-icon-public.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as pub } from './public.js';
+
+const EdsIconPublic$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconPublic extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.class = '';
+    }
+    render() {
+        return h("span", { key: 'b3a338684e00d2d612a49734cbb3cfd8e44b4eee', class: this.class, innerHTML: pub });
+    }
+}, [0, "eds-icon-public", {
+        "class": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-icon-public"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-icon-public":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsIconPublic$1);
+            }
+            break;
+    } });
+}
+
+const EdsIconPublic = EdsIconPublic$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsIconPublic, defineCustomElement };

package/dist/components/eds-icon-search.js

@@ -8,7 +8,7 @@ const EdsIconSearch$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconSearch ext
         this.class = '';
     }
     render() {
-        return h("span", { key: '994194ec98bb519584b4ba72fa630c3ded51d26e', class: this.class, innerHTML: search });
+        return h("span", { key: '6795d973d3a1fff27c2fd6181235d0284abaf3b7', class: this.class, innerHTML: search });
     }
 }, [0, "eds-icon-search", {
         "class": [1]

package/dist/components/eds-icon-star.js

@@ -8,7 +8,7 @@ const EdsIconStar$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconStar extends
         this.class = '';
     }
     render() {
-        return h("span", { key: 'f9dcfa2e4c9cc938f3fd994ca3637c80f0495028', class: this.class, innerHTML: star });
+        return h("span", { key: 'dd9df55fa03c1b27f2f931c7d07ccc69ee940ff4', class: this.class, innerHTML: star });
     }
 }, [0, "eds-icon-star", {
         "class": [1]

package/dist/components/eds-icon-success.js

@@ -8,7 +8,7 @@ const EdsIconSuccess$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconSuccess e
         this.class = '';
     }
     render() {
-        return h("span", { key: '77c30814dc10c8de54368bd9d1282da4d81df555', class: this.class, innerHTML: success });
+        return h("span", { key: 'e0e594e8a715e0cbaf87280f2b4c55b017dc07ba', class: this.class, innerHTML: success });
     }
 }, [0, "eds-icon-success", {
         "class": [1]

package/dist/components/eds-icon-thumbs-down.js

@@ -8,7 +8,7 @@ const EdsIconThumbsDown$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconThumbs
         this.class = '';
     }
     render() {
-        return h("span", { key: 'c46717d76f06b3d3a52d5072b85f5886aa75d321', class: this.class, innerHTML: thumbsDown });
+        return h("span", { key: '94d79a5d32574820ab3459708e3d8c4a3f28f79f', class: this.class, innerHTML: thumbsDown });
     }
 }, [0, "eds-icon-thumbs-down", {
         "class": [1]

package/dist/components/eds-icon-thumbs-up.js

@@ -8,7 +8,7 @@ const EdsIconThumbsUp$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconThumbsUp
         this.class = '';
     }
     render() {
-        return h("span", { key: 'ddfcfc0690d869c16402c265219faa73e1f324b2', class: this.class, innerHTML: thumbsUp });
+        return h("span", { key: 'd7f5361ec8f863891c79de15966d546bae782c0a', class: this.class, innerHTML: thumbsUp });
     }
 }, [0, "eds-icon-thumbs-up", {
         "class": [1]

package/dist/components/eds-icon-tutorial.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsIconTutorial extends Components.EdsIconTutorial, HTMLElement {}
+export const EdsIconTutorial: {
+    prototype: EdsIconTutorial;
+    new (): EdsIconTutorial;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-icon-tutorial.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { t as tutorial } from './tutotial.js';
+
+const EdsIconTutorial$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconTutorial extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.class = '';
+    }
+    render() {
+        return h("span", { key: '9db1730236b54d01a4264e92465f9a953325f7ca', class: this.class, innerHTML: tutorial });
+    }
+}, [0, "eds-icon-tutorial", {
+        "class": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-icon-tutorial"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-icon-tutorial":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsIconTutorial$1);
+            }
+            break;
+    } });
+}
+
+const EdsIconTutorial = EdsIconTutorial$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsIconTutorial, defineCustomElement };

package/dist/components/eds-icon-twitter.js

@@ -8,7 +8,7 @@ const EdsIconTwitter$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconTwitter e
         this.class = '';
     }
     render() {
-        return h("span", { key: 'e0e594e8a715e0cbaf87280f2b4c55b017dc07ba', class: this.class, innerHTML: twitter });
+        return h("span", { key: 'cd91bfb2003e955cfb02b5efc28e13b54cc3b7e6', class: this.class, innerHTML: twitter });
     }
 }, [0, "eds-icon-twitter", {
         "class": [1]

package/dist/components/eds-icon-unknown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsIconUnknown extends Components.EdsIconUnknown, HTMLElement {}
+export const EdsIconUnknown: {
+    prototype: EdsIconUnknown;
+    new (): EdsIconUnknown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-icon-unknown.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { u as unknown } from './unknown.js';
+
+const EdsIconUnknown$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconUnknown extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.class = '';
+    }
+    render() {
+        return h("span", { key: '259a1fae59093dd4e1fd6d26e07aae0e8c3de2fd', class: this.class, innerHTML: unknown });
+    }
+}, [0, "eds-icon-unknown", {
+        "class": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-icon-unknown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-icon-unknown":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsIconUnknown$1);
+            }
+            break;
+    } });
+}
+
+const EdsIconUnknown = EdsIconUnknown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsIconUnknown, defineCustomElement };

package/dist/components/eds-icon-updown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsIconUpdown extends Components.EdsIconUpdown, HTMLElement {}
+export const EdsIconUpdown: {
+    prototype: EdsIconUpdown;
+    new (): EdsIconUpdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-icon-updown.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { u as upDonw } from './up-and-down.js';
+
+const EdsIconUpdown$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconUpdown extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.class = '';
+    }
+    render() {
+        return h("span", { key: '9383784da3e52d22395288f8eba5b6f4ee826aa5', class: this.class, innerHTML: upDonw });
+    }
+}, [0, "eds-icon-updown", {
+        "class": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-icon-updown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-icon-updown":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsIconUpdown$1);
+            }
+            break;
+    } });
+}
+
+const EdsIconUpdown = EdsIconUpdown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsIconUpdown, defineCustomElement };

package/dist/components/eds-icon-user.js

@@ -8,7 +8,7 @@ const EdsIconUser$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconUser extends
         this.class = '';
     }
     render() {
-        return h("span", { key: 'ff014a9761d8380a9fd8c97d3dd483b8d6fc786c', class: this.class, innerHTML: user });
+        return h("span", { key: '15fa7c4b7d2dea5740d0926bb1ff6490b23667f8', class: this.class, innerHTML: user });
     }
 }, [0, "eds-icon-user", {
         "class": [1]

package/dist/components/eds-icon-youtube.js

@@ -8,7 +8,7 @@ const EdsIconYoutube$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconYoutube e
         this.class = '';
     }
     render() {
-        return h("span", { key: '8b5d4cfeedf6d7e9bea48d7ba892527d484c858d', class: this.class, innerHTML: youtube });
+        return h("span", { key: '1a7ad8d7cbef70822ebda2f152d8b537df1eaf27', class: this.class, innerHTML: youtube });
     }
 }, [0, "eds-icon-youtube", {
         "class": [1]

package/dist/components/eds-img2.js

@@ -45,10 +45,10 @@ const EdsImg = /*@__PURE__*/ proxyCustomElement(class EdsImg extends HTMLElement
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (h("div", { key: '22c4af46eafea9510618a12ba1b59e3872cec015', class: {
+        return (h("div", { key: '41ae7d59a508fd792b536729e538b6b0ecd1b0ad', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: '4a2134fe040e9daa2f0ce3b982e9704f5c998665' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '30e00f4237f32a79acac99df63b2a328a62b90b0', ref: (el) => (this.img = el), class: {
+            } }, h("picture", { key: 'eb242c3fa4f202ffd0cdc503bbb1d21736ea6190' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '3145595f53cf765234588e8c6efa038f21b29873', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded

package/dist/components/eds-input-field2.js

@@ -15,6 +15,28 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.handleNativeInput = (ev) => {
+            var _a;
+            // 1) Call any passed-in handler
+            (_a = this.onInput) === null || _a === void 0 ? void 0 : _a.call(this, ev);
+            // 2) Re-emit on host so Vue/others can catch it
+            const newValue = ev.target.value;
+            this.hostEl.dispatchEvent(new CustomEvent('oninput', {
+                detail: { value: newValue },
+                bubbles: true,
+                composed: true
+            }));
+        };
+        this.handleNativeChange = (ev) => {
+            var _a;
+            (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, ev);
+            const target = ev.target;
+            this.hostEl.dispatchEvent(new CustomEvent('onchange', {
+                detail: { value: target.value },
+                bubbles: true,
+                composed: true
+            }));
+        };
         this.name = undefined;
         this.inputId = undefined;
         this.placeholder = undefined;
@@ -57,8 +79,8 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
             id: this.inputId,
             placeholder: this.placeholder,
             disabled: this.disabled,
-            onChange: this.onChange,
-            onInput: this.onInput,
+            onInput: this.handleNativeInput,
+            onChange: this.handleNativeChange,
             type: this.type,
             required: this.required,
             value: this.value,
@@ -66,12 +88,22 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
             icon: this.icon,
             checked: this.checked
         };
-        return (h("div", { key: 'ef0defab1a025c7764c3e0c085968924c0d77dda', class: "space-y-8" }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-2", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value })), h("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts)), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
+        return (h("div", { key: 'd8d68bdff663749f22dcd25986a22b0459346f0d', class: "space-y-8" }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-2", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: (typeof this.value === 'string' ? this.value.split(',') : []).includes(String(option.value)) })), h("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' })), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
             var _a, _b, _c;
+            const rangeProps = {
+                name: inputOpts.name,
+                inputId: inputOpts.id || inputOpts.name,
+                disabled: inputOpts.disabled,
+                required: inputOpts.required,
+                onInput: inputOpts.onInput,
+                onChange: inputOpts.onChange
+            };
             const opt = this.parsedOptions;
-            return (h("eds-input-range", { min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value, max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value, step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value, name: "range-slider" }));
-        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: '1bbe8ffc01260083f33ce7747c55836d7507ffc0', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
+            const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value || 0;
+            return (h("eds-input-range", Object.assign({}, rangeProps, { min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value, max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value, step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value, value: numberValue })));
+        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: 'ecf472d91e754c93899d3bbece01f03babfbe985', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
     }
+    get hostEl() { return this; }
     static get style() { return EdsInputFieldStyle0; }
 }, [1, "eds-input-field", {
         "name": [1],

package/dist/components/eds-input-footer2.js

@@ -12,7 +12,7 @@ const EdsInputFooter = /*@__PURE__*/ proxyCustomElement(class EdsInputFooter ext
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: 'f98f6fadefbdaa1afa056f254011558ef8130643', class: "space-y-4" }, this.error && this.errorMessage && (h("div", { key: 'cdffa47311a398c47e353d78747d9949f1896a49', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '99e43a988e4d4f44f1c6fcbcf1c1ec28f6eb7d59', icon: "warning" }), h("p", { key: '6b2a6b182b250000b43e16cdb45a47bc4a022bcf', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: 'f6a20bdfac67c2775891e8d2b7bc510e3e0c6ea2', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: 'e76dc8d8c6cd00661b7cea2c2a7a0123bc5452f6', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (h("div", { key: '595e4c2c12d9379764b777d7b1edaea47c1e52ae', class: "space-y-4 mt-4" }, this.error && this.errorMessage && (h("div", { key: '9597904f712fc30d183a8ac39b65cdd99fec737c', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '39b20e643899e760691c1d752733c2acaf0fb4cc', icon: "warning" }), h("p", { key: 'cd5b357cdac58f93f03d688c8fab0a942785ff39', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '06c34d4567cdeaebdb167c9c44b7111b6cfd38d3', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: 'c6eacf01f49da84f14ec95995fbeddabf83d23fc', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
     }
 }, [0, "eds-input-footer", {
         "name": [1],

package/dist/components/eds-input-label2.js

@@ -10,7 +10,7 @@ const EdsInputLabel = /*@__PURE__*/ proxyCustomElement(class EdsInputLabel exten
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: 'cbbf9b07e719c2307ca90fdf4fb9ba1cf82098d3', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '328b0d8759007afd19323a2bd80e002b4e38b4d8' }, h("span", { key: 'bfc323e8ee81238f194fd081dbe4bb3bb801412e', "aria-hidden": "true" }, "*"), h("span", { key: 'c1231c12beecd218dad357c5c622cbd7c5acd692', class: "sr-only" }, "required")))));
+        return (h("label", { key: '632b2634e219c2a1d8fdc5710c95c80601b0b2ee', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'd1cb546dca2dcd44dedb7f00d7f432a47c9dc517' }, h("span", { key: '08346b3153d32b3fd4ea63f9e27278ec51b2e5b3', "aria-hidden": "true" }, "*"), h("span", { key: 'e364bfb64126e1f704c903528e9a3118d8828227', class: "sr-only" }, "required")))));
     }
 }, [0, "eds-input-label", {
         "label": [1],

package/dist/components/eds-input-range2.js

@@ -1,13 +1,19 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
 const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.edsrange = createEvent(this, "edsrange", 7);
         this.onInput = (e) => {
             const target = e.target;
             this.sliderVal = parseInt(target.value, 10); // Update the slider value dynamically
         };
+        this.onChange = (e) => {
+            const target = e.target;
+            this.sliderVal = parseInt(target.value, 10); // Update the slider value dynamically
+            this.edsrange.emit(this.sliderVal);
+        };
         this.name = undefined;
         this.inputId = 'range';
         this.disabled = false;
@@ -15,7 +21,18 @@ const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange exten
         this.min = 0;
         this.max = 100;
         this.step = 1;
-        this.sliderVal = this.max % 2 === 0 ? this.max / 2 : Math.ceil(this.max / 2);
+        this.value = undefined;
+        this.sliderVal = undefined;
+    }
+    componentWillLoad() {
+        this.sliderVal =
+            this.value !== undefined ? this.value : this.max % 2 === 0 ? this.max / 2 : Math.ceil(this.max / 2);
+    }
+    // Keep the internal state in sync when the passed value changes.
+    onValueChange(newVal) {
+        if (newVal !== undefined) {
+            this.sliderVal = newVal;
+        }
     }
     componentDidLoad() {
         // Assign the native input element after the component loads
@@ -26,9 +43,12 @@ const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange exten
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '4303ce0031e42249382a049f2214ac9a310f4c1d', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: '25c349147fd3b5673bf9ea42f9c9a8477d178bd2', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput }), h("p", { key: 'e21351977aed715d157bb7577a59cec095f221e9', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
+        return (h("div", { key: '6d0d2daa8e4a727765259ac14709837c5ed23955', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: 'd2e2ca171ff99f106130a0ba6cbcdd413de0b371', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), h("p", { key: '078def92e74b4056555d968fbc767693af15b100', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "value": ["onValueChange"]
+    }; }
 }, [0, "eds-input-range", {
         "name": [1],
         "inputId": [1, "input-id"],
@@ -37,8 +57,11 @@ const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange exten
         "min": [2],
         "max": [2],
         "step": [2],
+        "value": [2],
         "sliderVal": [32],
         "getInputElement": [64]
+    }, undefined, {
+        "value": ["onValueChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/eds-input-search2.js

@@ -64,7 +64,7 @@ const EdsInputSearch = /*@__PURE__*/ proxyCustomElement(class EdsInputSearch ext
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: 'cd0d0f878ddfdd9de78844a9fe7f54c1afc01f00', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '51580657eebca704fda0c40acfbac435bbd843ae', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: 'db878dfcad30f8a4a718d4f8b0184c27366038e8', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `search-input w-full rounded-sm f-body-01 pl-36 px-6 py-6 gap-x-12 block appearance-none border-0 effect-color effect-focus ${this.decorate}`,
+        return (h("div", { key: '6258597f79cddca1995825142e26eafc560a553a', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: 'e7379f4b8fe1f749153da3eaaeef4a8ac690b21f', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '2c37c1e6a0b7c60507fdb62de441109be6ea0888', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
             //onInput={this.onInput}
             onChange: this.onChange })));
     }

package/dist/components/eds-input-select2.js

@@ -86,7 +86,10 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
         return path.split('.').reduce((acc, part) => acc && acc[part], obj);
     }
     render() {
-        return (h("div", { key: 'cf167d50401aec809a3c399886feecb854f8a038', class: "relative", "aria-busy": this.loading ? 'true' : 'false' }, h("select", { key: '74d9a2404616824c98f9625ff1fdd1d82fbc22d9', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, h("option", { key: '237f4e20cd20d4fe9e35afe21eaa5537d12c583a', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => (h("option", { key: index, value: this.getValueByPath(option, this.dynamicValueKey) }, this.getValueByPath(option, this.dynamicLabelKey))))), h("span", { key: '481eddf49aa0f78fa6534f65484fbff953ca2c59', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: '5b73e8c045df38fa1260a4f5c940c0148a41b4c8', class: "w-20 h-20", icon: "chevron-right" }))));
+        return (h("div", { key: 'cc940456a2e0ce84f3b1c05d83a8b37db076c38d', class: "relative", "aria-busy": this.loading ? 'true' : 'false' }, h("select", { key: '105ee19d398aee3df6a6bdde282d4930f4391bc1', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, h("option", { key: '057fd3d0305d390dff0b5b8e0bf40d803cab7b02', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => {
+            const optionValue = this.getValueByPath(option, this.dynamicValueKey);
+            return (h("option", { key: index, value: optionValue, selected: optionValue === this.value }, this.getValueByPath(option, this.dynamicLabelKey)));
+        })), h("span", { key: '39a047ac87650db1402db082379b4f4169d5116e', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: 'bee0a8b2a54d855452fb547347c5888cae9f4024', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get watchers() { return {
         "options": ["loadOptions"]

package/dist/components/eds-input2.js

@@ -1,18 +1,16 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
 const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.changeEvent = createEvent(this, "changeEvent", 7);
         this.handleInput = (e) => {
             const target = e.target;
             this.innerVal = target.value;
             if (this.maxLength && this.type === 'textarea') {
                 this.maxLengthReached = target.value.length >= this.maxLength;
             }
-            this.changeEvent.emit(e);
         };
         this.name = undefined;
         this.inputId = undefined;
@@ -50,12 +48,12 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: 'daa9fd99935c0fcbd3a1570837eed5893ae3fafa', class: "relative flex items-center" }, this.type === 'textarea' ? (h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("input", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined, class: `
+        return (h("div", { key: 'c097f72ac45c1c15347a975fc72e07a6d6324c10', class: "relative flex items-center" }, this.type === 'textarea' ? (h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("input", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined, class: `
               ${this.extraClass || ''} 
               input ${this.type === 'radio' ? 'input-radio' : this.type === 'checkbox' ? 'input-checkbox' : ''}
               ${withIcon && this.type !== 'radio' && this.type !== 'checkbox' ? 'input-icon pl-36' : ''} 
               ${this.error ? 'input-error' : ''}
-              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })), this.maxLength && this.type === 'textarea' && (h("span", { key: '6f5ab123a7dbaad765bff2823e38c135a0065bf5', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: 'ca512030ce17fd6387a280d79c1e3d3074e7fe80', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
+              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })), this.maxLength && this.type === 'textarea' && (h("span", { key: 'dce957c8bad999f72e896710d465075c063e5a42', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: 'b3037e2d393a2f0758049c2e9eec63879e0f71df', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
     }
     get el() { return this; }
     static get watchers() { return {