@ebrains/components 0.9.2-beta → 1.0.0

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

@@ -0,0 +1,478 @@
+import { h } from "@stencil/core";
+/**
+ * `EdsInputField` is a versatile form input component that supports various input types and customization options.
+ *
+ * Key Features:
+ * - Supports multiple input types (text, checkbox, radio, select, file) with corresponding behaviors and styling.
+ * - Provides options for validation, including required fields and max length.
+ * - Allows custom messages and error handling with `message` and `errorMessage` props.
+ * - Offers additional features like icons, labels, links, and hints to enhance user experience.
+ *
+ * This component provides a structured and configurable form input with additional features to suit various input requirements.
+ */
+export class EdsInputField {
+    constructor() {
+        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.handleNativeChange = (ev) => {
+            var _a;
+            (_a = this.onChange) === 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
+                }));
+            }
+        };
+        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;
+        this.icon = undefined;
+        this.link = undefined;
+        this.message = undefined;
+        this.error = false;
+        this.checked = undefined;
+        this.errorMessage = undefined;
+        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)) {
+            return this.options;
+        }
+        else if (typeof this.options === 'string') {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch (_a) {
+                // eslint-disable-next-line
+                console.warn('Invalid options format');
+                return [];
+            }
+        }
+        return [];
+    }
+    render() {
+        const inputOpts = {
+            name: this.name,
+            id: this.inputId,
+            placeholder: this.placeholder,
+            disabled: this.disabled,
+            onInput: this.handleNativeInput,
+            onChange: this.handleNativeChange,
+            type: this.type,
+            required: this.required,
+            value: this.value,
+            error: this.error,
+            icon: this.icon,
+            checked: this.checked
+        };
+        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,
+                inputId: inputOpts.id || inputOpts.name,
+                disabled: inputOpts.disabled,
+                required: inputOpts.required,
+                onInput: inputOpts.onInput,
+                onChange: inputOpts.onChange
+            };
+            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: '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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-input-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-input-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The `name` attribute for the input element. Required for form submissions."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The unique `id` for the input element. Defaults to the `name` attribute if not provided."
+                },
+                "attribute": "input-id",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder text for the input element."
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, disables the input field."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "onChange": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: Event) => void",
+                    "resolved": "(event: Event) => void",
+                    "references": {
+                        "Event": {
+                            "location": "global",
+                            "id": "global::Event"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `onChange` event handler for the input element."
+                }
+            },
+            "onInput": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: InputEvent) => void",
+                    "resolved": "(event: InputEvent) => void",
+                    "references": {
+                        "InputEvent": {
+                            "location": "global",
+                            "id": "global::InputEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `onInput` event handler for the input element."
+                }
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the input element. Defaults to `text`.\nSupported types: `text`, `checkbox`, `radio`, `select`, `file`, `search`, etc."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the input field is required."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text for the input field."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A short hint displayed alongside the input field."
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon name to be displayed within the input field."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "link": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ url: string; label: string }",
+                    "resolved": "{ url: string; label: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A link object containing the URL and label to display alongside the input field."
+                }
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An additional message displayed below the input field."
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, marks the input field as having an error."
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the input field is checked (for `checkbox` or `radio` types)."
+                },
+                "attribute": "checked",
+                "reflect": false
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message displayed when validation fails."
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the input field."
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum length of the input value (for `text` types)."
+                },
+                "attribute": "max-length",
+                "reflect": false
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | { value: string | number; label: string }[]",
+                    "resolved": "string | { value: string | number; label: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Options for `checkbox`, `radio`, or `select` inputs. Can be a JSON string or an array of objects."
+                },
+                "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"
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}

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

@@ -0,0 +1,206 @@
+export default {
+    title: 'Components/Input Field',
+    component: 'eds-input-field',
+    argTypes: {
+        name: { control: 'text', description: 'Name attribute of the input field' },
+        inputId: { control: 'text', description: 'ID attribute of the input field' },
+        placeholder: { control: 'text', description: 'Placeholder text for the input field' },
+        disabled: { control: 'boolean', description: 'Whether the input field is disabled' },
+        type: {
+            control: 'select',
+            options: ['text', 'checkbox', 'radio', 'select', 'password', 'file', 'number', 'range'],
+            description: 'Type of the input field'
+        },
+        required: { control: 'boolean', description: 'Whether the input field is required' },
+        label: { control: 'text', description: 'Label for the input field' },
+        hint: { control: 'text', description: 'Hint text to provide additional guidance' },
+        icon: { control: 'text', description: 'Icon name to display in the input field' },
+        link: {
+            control: 'object',
+            description: 'An object containing the link URL and label'
+        },
+        message: { control: 'text', description: 'Message displayed below the input field' },
+        error: { control: 'boolean', description: 'Whether the input field is in an error state' },
+        checked: {
+            control: 'boolean',
+            description: 'Whether the input field is checked (for checkbox/radio)'
+        },
+        errorMessage: {
+            control: 'text',
+            description: 'Error message displayed when the input is invalid'
+        },
+        value: { control: 'text', description: 'Value of the input field' },
+        maxLength: { control: 'number', description: 'Maximum length for the input value' },
+        options: {
+            control: 'object',
+            description: 'Options for select, checkbox, or radio input types'
+        }
+    }
+};
+const Template = (args) => {
+    const linkJson = args.link ? JSON.stringify(args.link) : null;
+    const optionsJson = args.options ? JSON.stringify(args.options) : null;
+    return `
+    <eds-input-field
+      name="${args.name}"
+      ${args.inputId ? `input-id="${args.inputId}"` : ''}
+      ${args.placeholder ? `placeholder="${args.placeholder}"` : ''}
+      ${args.disabled ? `disabled="${args.disabled}"` : ''}
+      type="${args.type}"
+      ${args.required ? `required="${args.required}"` : ''}
+      ${args.label ? `label="${args.label}"` : ''}
+      ${args.hint ? `hint="${args.hint}"` : ''}
+      ${args.link ? `link="${args.link}"` : ''}
+      ${args.icon ? `icon="${args.icon}"` : ''}
+      ${linkJson ? `link='${linkJson}'` : ''}
+      ${args.message ? `message="${args.message}"` : ''}
+      ${args.error ? `error="${args.error}"` : ''}
+      ${args.checked ? `checked="${args.checked}"` : ''}
+      ${args.errorMessage ? `error-message="${args.errorMessage}"` : ''}
+      ${args.value ? `value="${args.value}"` : ''}
+      ${args.maxLength ? `max-length="${args.maxLength}"` : ''}
+      ${optionsJson ? `options='${optionsJson}'` : ''}
+    ></eds-input-field>
+  `;
+};
+export const BasicTextInput = Template.bind({});
+BasicTextInput.args = {
+    name: 'username',
+    inputId: 'username-input',
+    placeholder: 'Enter your username',
+    type: 'text',
+    required: true,
+    label: 'Username'
+};
+export const PasswordInputWithHint = Template.bind({});
+PasswordInputWithHint.args = {
+    name: 'password',
+    inputId: 'password-input',
+    placeholder: 'Enter your password',
+    type: 'password',
+    required: true,
+    label: 'Password',
+    hint: 'Must be at least 8 characters'
+};
+export const TextInputWithError = Template.bind({});
+TextInputWithError.args = {
+    name: 'email',
+    inputId: 'email-input',
+    placeholder: 'Enter your email',
+    type: 'text',
+    required: true,
+    label: 'Email Address',
+    error: true,
+    errorMessage: 'Invalid email address'
+};
+export const CheckboxGroup = Template.bind({});
+CheckboxGroup.args = {
+    name: 'preferences',
+    type: 'checkbox',
+    label: 'Preferences',
+    options: [
+        { label: 'Subscribe to newsletter', value: 'newsletter' },
+        { label: 'Receive updates', value: 'updates' }
+    ]
+};
+export const RadioButtonGroup = Template.bind({});
+RadioButtonGroup.args = {
+    name: 'gender',
+    type: 'radio',
+    label: 'Gender',
+    required: true,
+    options: [
+        { label: 'Male', value: 'male' },
+        { label: 'Female', value: 'female' },
+        { label: 'Other', value: 'other' }
+    ]
+};
+export const SelectDropdown = Template.bind({});
+SelectDropdown.args = {
+    name: 'country',
+    type: 'select',
+    label: 'Country',
+    required: true,
+    options: [
+        { label: 'United States', value: 'us' },
+        { label: 'Canada', value: 'ca' },
+        { label: 'United Kingdom', value: 'uk' }
+    ]
+};
+export const FileUpload = Template.bind({});
+FileUpload.args = {
+    name: 'resume',
+    type: 'file',
+    label: 'Upload Resume',
+    hint: 'PDF or Word Document'
+};
+export const InputWithIconAndLink = Template.bind({});
+InputWithIconAndLink.args = {
+    name: 'website',
+    placeholder: 'Enter your website URL',
+    type: 'text',
+    label: 'Website',
+    icon: 'success',
+    link: { url: 'https://help.example.com', label: 'Help' }
+};
+export const NumberInputWithMaxLength = Template.bind({});
+NumberInputWithMaxLength.args = {
+    name: 'age',
+    placeholder: 'Enter your age',
+    type: 'number',
+    label: 'Age',
+    maxLength: 3
+};
+export const DisabledInput = Template.bind({});
+DisabledInput.args = {
+    name: 'disabledInput',
+    placeholder: 'This field is disabled',
+    type: 'text',
+    label: 'Disabled Field',
+    disabled: true
+};
+export const InputWithMessage = Template.bind({});
+InputWithMessage.args = {
+    name: 'username',
+    placeholder: 'Enter your username',
+    type: 'text',
+    label: 'Username',
+    message: 'Your username should be unique.'
+};
+export const InputWithMaxLength = Template.bind({});
+InputWithMaxLength.args = {
+    name: 'shortBio',
+    placeholder: 'Enter a short bio',
+    type: 'text',
+    label: 'Short Bio',
+    maxLength: 100
+};
+export const InputWithValue = Template.bind({});
+InputWithValue.args = {
+    name: 'city',
+    placeholder: 'Enter your city',
+    type: 'text',
+    label: 'City',
+    value: 'San Francisco'
+};
+export const CheckboxSingle = Template.bind({});
+CheckboxSingle.args = {
+    name: 'agreeTerms',
+    type: 'checkbox',
+    label: 'I agree to the terms and conditions',
+    required: true
+};
+export const RadioButtonSingle = Template.bind({});
+RadioButtonSingle.args = {
+    name: 'subscribe',
+    type: 'radio',
+    label: 'Subscribe to newsletter'
+};
+export const InputWithCustomIcon = Template.bind({});
+InputWithCustomIcon.args = {
+    name: 'search',
+    placeholder: 'Search...',
+    type: 'text',
+    label: 'Search',
+    icon: 'search'
+};