@ebrains/components 0.9.3-beta → 1.0.0

package/dist/collection/components/eds-input-field/eds-input-field.js

@@ -16,23 +16,27 @@ export class EdsInputField {
             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
-            }));
+            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.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
-            }));
+            if (this.shouldEmitValue()) {
+                const target = ev.target;
+                this.hostEl.dispatchEvent(new CustomEvent('onchange', {
+                    detail: { value: target.value },
+                    bubbles: false,
+                    composed: true
+                }));
+            }
         };
         this.name = undefined;
         this.inputId = undefined;
@@ -53,6 +57,11 @@ export class EdsInputField {
         this.value = undefined;
         this.maxLength = undefined;
         this.options = 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)) {
@@ -85,7 +94,7 @@ export class EdsInputField {
             icon: this.icon,
             checked: this.checked
         };
-        return (h("div", { key: 'e99cf5640a713e6289549f61ec20755513ddbcc2', 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: '5243586c0bf3acc86d42684dbcd0288b3360b00c', 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,
@@ -98,7 +107,7 @@ export class EdsInputField {
             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: 'b9a8995ad04d0c5edfd3c0896c55c56704fecb38', 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: 'e4e1f28766471d5451f342aa4d60d58fca2ddd01', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
     }
     static get is() { return "eds-input-field"; }
     static get encapsulation() { return "shadow"; }
@@ -444,6 +453,24 @@ export class EdsInputField {
                 },
                 "attribute": "options",
                 "reflect": false
+            },
+            "exposeValueEvents": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Control whether the component emits value events (`oninput` / `onchange`).\nDefaults to `true`. Password fields are always suppressed for security."
+                },
+                "attribute": "expose-value-events",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }