@ebrains/components 2.4.1 → 3.1.0

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

@@ -1,52 +1,68 @@
+import { ICONS } from "../../utils/icons";
+// Derived from the single source of truth so the list never drifts.
+// '' = no icon (the template treats it as falsy).
+const ICON_OPTIONS = ['', ...Object.keys(ICONS).sort()];
 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' },
+        // ── Core ──
         type: {
             control: 'select',
-            options: ['text', 'checkbox', 'radio', 'select', 'password', 'file', 'number', 'range'],
-            description: 'Type of the input field'
+            options: ['text', 'checkbox', 'radio', 'select', 'password', 'file', 'dropzone', 'number', 'range'],
+            description: 'Type of the input field',
+            table: { category: 'Core' }
         },
-        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'
-        },
-        min: {
-            control: 'number',
-            description: 'Minimum value for number or range inputs'
-        },
-        max: {
-            control: 'number',
-            description: 'Maximum value for number or range inputs'
-        },
-        step: {
-            control: 'number',
-            description: 'Step value for number or range inputs'
-        },
-        message: { control: 'text', description: 'Message displayed below the input field' },
-        error: { control: 'boolean', description: 'Whether the input field is in an error state' },
+        name: { control: 'text', description: 'Name attribute of the input field', table: { category: 'Core' } },
+        label: { control: 'text', description: 'Label for the input field', table: { category: 'Core' } },
+        placeholder: { control: 'text', description: 'Placeholder text', table: { category: 'Core' } },
+        // ── State & validation ──
+        required: { control: 'boolean', description: 'Whether the input is required', table: { category: 'State & validation' } },
+        disabled: { control: 'boolean', description: 'Whether the input is disabled', table: { category: 'State & validation' } },
+        error: { control: 'boolean', description: 'Render the input in an error state', table: { category: 'State & validation' } },
+        errorMessage: { control: 'text', description: 'Error message shown when invalid', table: { category: 'State & validation' } },
         checked: {
             control: 'boolean',
-            description: 'Whether the input field is checked (for checkbox/radio)'
+            description: 'Checked state (checkbox/radio only)',
+            table: { category: 'State & validation' },
+            if: { arg: 'type', eq: 'checkbox' }
         },
-        errorMessage: {
-            control: 'text',
-            description: 'Error message displayed when the input is invalid'
+        // ── Helper text & decoration ──
+        hint: { control: 'text', description: 'Hint text next to the label', table: { category: 'Helper & decoration' } },
+        message: { control: 'text', description: 'Message displayed below the input', table: { category: 'Helper & decoration' } },
+        icon: {
+            control: { type: 'select' },
+            options: ICON_OPTIONS,
+            description: 'Icon name to display inside the input (from the EDS icon set)',
+            table: { category: 'Helper & decoration' }
         },
-        value: { control: 'text', description: 'Value of the input field' },
-        maxLength: { control: 'number', description: 'Maximum length for the input value' },
+        link: { control: 'object', description: 'Help/docs link `{ url, label }`', table: { category: 'Helper & decoration' } },
+        maxLength: { control: 'number', description: 'Maximum length for text input', table: { category: 'Helper & decoration' } },
+        // ── Number & range (min/max/step apply to type="number" and type="range") ──
+        min: { control: 'number', description: 'Minimum value (number & range)', table: { category: 'Number & range' } },
+        max: { control: 'number', description: 'Maximum value (number & range)', table: { category: 'Number & range' } },
+        step: { control: 'number', description: 'Step value (number & range)', table: { category: 'Number & range' } },
+        // ── Choices ──
         options: {
             control: 'object',
-            description: 'Options for select, checkbox, or radio input types'
+            description: 'Choices for select/checkbox/radio. For type="range", min/max/step props are preferred; options[0..2].value is a legacy fallback.',
+            table: { category: 'Choices' }
         }
+    },
+    // Default args so the Controls panel opens populated. The single-attribute
+    // variations (error, message, hint, value, maxLength, icon, link, disabled,
+    // password, custom icon, single checkbox/radio) are all reachable by toggling
+    // these controls — that's why they no longer need their own stories.
+    args: {
+        name: 'username',
+        placeholder: 'Enter your username',
+        type: 'text',
+        required: true,
+        label: 'Username',
+        hint: 'Choose a unique handle',
+        message: 'Your username should be unique.',
+        icon: 'user',
+        link: { url: 'https://docs.ebrains.eu', label: 'Help' }
     }
 };
 const Template = (args) => {
@@ -62,7 +78,6 @@ const Template = (args) => {
       ${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}"` : ''}
       ${args.min !== undefined ? `min="${args.min}"` : ''}
       ${args.max !== undefined ? `max="${args.max}"` : ''}
@@ -78,36 +93,11 @@ const Template = (args) => {
     ></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'
-};
+// Control-driven text field. Everything the removed single-attribute stories
+// showed — error/errorMessage, message, hint, value, maxLength, icon, link,
+// disabled, password, custom icon — is reachable straight from the Controls
+// panel on this story.
+export const Default = Template.bind({});
 export const CheckboxGroup = Template.bind({});
 CheckboxGroup.args = {
     name: 'preferences',
@@ -149,76 +139,38 @@ FileUpload.args = {
     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 = {
+// The dropzone is just another field `type` — same label/hint/error wrapper as
+// every other input, with the drag-and-drop control swapped in.
+export const Dropzone = Template.bind({});
+Dropzone.args = {
+    name: 'attachments',
+    type: 'dropzone',
+    label: 'Attachments',
+    hint: 'Drag and drop files, or click to browse'
+};
+// Number input — kept separate because the min/max/step props apply ONLY to
+// type="number" (they are ignored for every other type).
+export const NumberInput = Template.bind({});
+NumberInput.args = {
     name: 'age',
     placeholder: 'Enter your age',
     type: 'number',
     label: 'Age',
     min: 5,
-    max: 10,
+    max: 100,
     step: 1,
     required: true
 };
-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'
+// Range slider — uses the same min/max/step props as type="number".
+// (Legacy fields may still pass these via options[0..2].value, which the
+// component honors as a fallback.)
+export const RangeSlider = Template.bind({});
+RangeSlider.args = {
+    name: 'volume',
+    type: 'range',
+    label: 'Volume',
+    value: '40',
+    min: 0,
+    max: 100,
+    step: 5
 };

package/dist/collection/components/eds-input-file/eds-input-file.css

@@ -0,0 +1,140 @@
+/* Container */
+.eds-input-file-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+/* Hidden native input */
+.eds-input-file-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Upload Button */
+.eds-input-file-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.25rem;
+  border: 1.5px solid var(--color-border-soft, #d0d0d0);
+  border-radius: 100px;
+  background-color: var(--color-bg-inverse, #ffffff);
+  font-family: var(--font-family, 'IBM Plex Sans', sans-serif);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-default, #07140D);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.eds-input-file-btn:hover:not(:disabled) {
+  border-color: var(--color-border-strong, #07140D);
+  background-color: var(--color-bg-softer, #ECECEC);
+}
+
+.eds-input-file-btn:active:not(:disabled) {
+  background-color: var(--color-bg-soft, #F5F5F5);
+}
+
+.eds-input-file-btn:focus-visible {
+  outline: 2px solid var(--color-accent, #00FF9D);
+  outline-offset: 2px;
+}
+
+.eds-input-file-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.eds-input-file-btn svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* File Chips Container */
+.eds-input-file-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+/* Individual File Chip */
+.eds-input-file-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.75rem;
+  background-color: var(--color-bg-softer, #ECECEC);
+  border-radius: 100px;
+  font-size: 0.75rem;
+  color: var(--color-text-default, #07140D);
+}
+
+.eds-input-file-chip-icon {
+  width: 14px;
+  height: 14px;
+  color: var(--color-text-light, #7A7B7A);
+  flex-shrink: 0;
+}
+
+.eds-input-file-chip-name {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 400;
+}
+
+.eds-input-file-chip-size {
+  font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+  font-size: 0.625rem;
+  color: var(--color-text-light, #7A7B7A);
+  flex-shrink: 0;
+}
+
+.eds-input-file-chip-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text-light, #7A7B7A);
+  cursor: pointer;
+  transition: color 0.2s ease;
+  flex-shrink: 0;
+}
+
+.eds-input-file-chip-remove:hover:not(:disabled) {
+  color: var(--color-error, #e53935);
+}
+
+.eds-input-file-chip-remove:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.eds-input-file-chip-remove svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .eds-input-file-chip-name {
+    max-width: 120px;
+  }
+}

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

@@ -0,0 +1,249 @@
+import { h } from "@stencil/core";
+export class EdsInputFile {
+    constructor() {
+        this.handleButtonClick = () => {
+            var _a;
+            (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        this.handleFileSelect = (event) => {
+            const input = event.target;
+            if (!input.files)
+                return;
+            const newFiles = Array.from(input.files).map((file) => ({
+                file,
+                id: `${file.name}-${Date.now()}-${Math.random()}`
+            }));
+            if (this.multiple) {
+                this.selectedFiles = [...this.selectedFiles, ...newFiles];
+            }
+            else {
+                this.selectedFiles = newFiles.slice(0, 1);
+            }
+            this.emitFileChange();
+        };
+        this.handleRemoveFile = (id) => {
+            this.selectedFiles = this.selectedFiles.filter((item) => item.id !== id);
+            this.emitFileChange();
+        };
+        this.name = undefined;
+        this.inputId = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.multiple = false;
+        this.accept = undefined;
+        this.maxFileSize = undefined;
+        this.buttonLabel = undefined;
+        this.selectedFiles = [];
+    }
+    emitFileChange() {
+        const files = this.selectedFiles.map((item) => item.file);
+        this.edsfile.emit({ files });
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+    }
+    getFileIcon(filename) {
+        var _a;
+        const ext = (_a = filename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        const imageExts = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'];
+        if (imageExts.includes(ext || '')) {
+            // Image icon
+            return (h("svg", { class: "file-chip-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })));
+        }
+        // Document icon (default)
+        return (h("svg", { class: "file-chip-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" })));
+    }
+    render() {
+        const effectiveLabel = this.buttonLabel || (this.multiple ? 'Choose Files' : 'Choose File');
+        return (h("div", { key: 'e02d98fbc01dbe7a89eeb3010f966ed4a373ede6', class: "eds-input-file-container" }, h("input", { key: '2013826fda9453aade4528c9f051aac98780662f', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-file-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), h("button", { key: 'f5e5cf91376ccb69b39ef3c9b11095aca8bfb728', type: "button", class: "eds-input-file-btn", onClick: this.handleButtonClick, disabled: this.disabled }, h("svg", { key: '563066375b42d0a8c14f14ac9fdfb587539f4e76', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'ebe5549fffa0c2453ab98891da75a464c09e9fa2', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: '69036b82e15103e481770d0ef2c500b0dcad0399', points: "17 8 12 3 7 8" }), h("line", { key: 'e0531be95796ec6dc7f9fe359e4736a15a0e3640', x1: "12", y1: "3", x2: "12", y2: "15" })), effectiveLabel), this.selectedFiles.length > 0 && (h("div", { key: '62590fb46cee89d2524f1ede71c7af341c3e426a', class: "eds-input-file-chips" }, this.selectedFiles.map((item) => (h("div", { key: item.id, class: "eds-input-file-chip" }, this.getFileIcon(item.file.name), h("span", { class: "eds-input-file-chip-name" }, item.file.name), h("span", { class: "eds-input-file-chip-size" }, this.formatFileSize(item.file.size)), h("button", { type: "button", class: "eds-input-file-chip-remove", onClick: () => this.handleRemoveFile(item.id), disabled: this.disabled, "aria-label": `Remove ${item.file.name}` }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
+    }
+    static get is() { return "eds-input-file"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-input-file.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-input-file.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 of the input element. Required for form submission."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `id` attribute of the internal input element. Defaults to `name` if not set."
+                },
+                "attribute": "input-id",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the input is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the input is required."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, allows multiple file selection."
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accepted file types (e.g., \".pdf,.png,.jpg\" or \"image/*\")."
+                },
+                "attribute": "accept",
+                "reflect": false
+            },
+            "maxFileSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum file size in bytes. If not set, no size limit is enforced client-side."
+                },
+                "attribute": "max-file-size",
+                "reflect": false
+            },
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button label text. Defaults to \"Choose Files\" (or \"Choose File\" if not multiple)."
+                },
+                "attribute": "button-label",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedFiles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "edsfile",
+                "name": "edsfile",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when files are selected or removed.\nUse `event.detail.files` to access the FileList."
+                },
+                "complexType": {
+                    "original": "{ files: File[] }",
+                    "resolved": "{ files: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+}