@ebrains/components 1.1.0 → 1.2.0

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

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$7 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$6 } from './eds-input2.js';
 import { d as defineCustomElement$5 } from './eds-input-footer2.js';
@@ -15,39 +15,29 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.edsinput = createEvent(this, "edsinput", 7);
+        this.edschange = createEvent(this, "edschange", 7);
         this.handleNativeInput = (ev) => {
             var _a;
-            // 1) Call any passed-in handler
             (_a = this.onInput) === null || _a === void 0 ? void 0 : _a.call(this, ev);
             if (this.shouldEmitValue()) {
-                // 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: false,
-                    composed: true
-                }));
+                this.edsinput.emit({ value: newValue });
             }
         };
         this.handleNativeChange = (ev) => {
             var _a;
-            (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, ev);
+            (_a = this.onChangeNative) === null || _a === void 0 ? void 0 : _a.call(this, ev);
             if (this.shouldEmitValue()) {
                 const target = ev.target;
-                this.hostEl.dispatchEvent(new CustomEvent('onchange', {
-                    detail: { value: target.value },
-                    bubbles: false,
-                    composed: true
-                }));
+                const value = target.value;
+                this.edschange.emit({ value });
             }
         };
         this.name = undefined;
         this.inputId = undefined;
         this.placeholder = undefined;
         this.disabled = false;
-        this.onChange = undefined;
-        this.onInput = undefined;
-        this.type = 'text';
         this.required = false;
         this.label = undefined;
         this.hint = undefined;
@@ -60,22 +50,22 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
         this.value = undefined;
         this.maxLength = undefined;
         this.options = undefined;
+        this.type = 'text';
+        this.onChangeNative = undefined;
+        this.onInput = undefined;
         this.exposeValueEvents = true;
     }
     shouldEmitValue() {
-        // Never emit for password fields, and respect the exposeValueEvents prop
         return this.exposeValueEvents && this.type !== 'password';
     }
     get parsedOptions() {
-        if (Array.isArray(this.options)) {
+        if (Array.isArray(this.options))
             return this.options;
-        }
-        else if (typeof this.options === 'string') {
+        if (typeof this.options === 'string') {
             try {
                 return JSON.parse(this.options);
             }
             catch (_a) {
-                // eslint-disable-next-line
                 console.warn('Invalid options format');
                 return [];
             }
@@ -97,7 +87,8 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
             icon: this.icon,
             checked: this.checked
         };
-        return (h("div", { key: 'e46f1b26212ee915c2fde3fa0c58a152005d2b50', 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' ? ((() => {
+        return (h("div", { key: '2ff82dedd17922c5cb72fc30b7f616c7fafa7b07', 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.onChangeNative, 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,
@@ -110,7 +101,7 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
             const opt = this.parsedOptions;
             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: 'ecf3ee5c0400749f1d89b53edfdee6fe62ca2a32', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
+        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: '4b8513dcd713d56953934b158ba1b9182e1497a8', 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; }
@@ -119,9 +110,6 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
         "inputId": [1, "input-id"],
         "placeholder": [1],
         "disabled": [4],
-        "onChange": [16],
-        "onInput": [16],
-        "type": [1],
         "required": [4],
         "label": [1],
         "hint": [1],
@@ -134,6 +122,9 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
         "value": [8],
         "maxLength": [2, "max-length"],
         "options": [1],
+        "type": [1],
+        "onChangeNative": [16],
+        "onInput": [16],
         "exposeValueEvents": [4, "expose-value-events"]
     }]);
 function defineCustomElement() {