@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

package/dist/collection/components/eds-input-elements/eds-input-range/eds-input-range.js

@@ -11,6 +11,11 @@ export class EdsInputRange {
             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;
@@ -18,7 +23,18 @@ export class EdsInputRange {
         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
@@ -29,9 +45,7 @@ export class EdsInputRange {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '22cff1442ba41eaad3f59f549c20d1070a827157', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: 'aa34e6a24b758e71f7bd1d314e6f77c02fc4e646', 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={describedBy}
-            onInput: this.onInput }), h("p", { key: '0f7317f564f63ec2ffcaa65c9f90847e21bbf62e', 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)));
     }
     static get is() { return "eds-input-range"; }
     static get properties() {
@@ -48,7 +62,7 @@ export class EdsInputRange {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The name attribute for the input element."
                 },
                 "attribute": "name",
                 "reflect": false
@@ -65,7 +79,7 @@ export class EdsInputRange {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Optional id for the input; defaults to 'range'."
                 },
                 "attribute": "input-id",
                 "reflect": false,
@@ -83,7 +97,7 @@ export class EdsInputRange {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, the slider will be disabled."
                 },
                 "attribute": "disabled",
                 "reflect": false,
@@ -101,7 +115,7 @@ export class EdsInputRange {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, the slider is marked as required."
                 },
                 "attribute": "required",
                 "reflect": false,
@@ -119,7 +133,7 @@ export class EdsInputRange {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Minimum value for the slider."
                 },
                 "attribute": "min",
                 "reflect": false,
@@ -137,7 +151,7 @@ export class EdsInputRange {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Maximum value for the slider."
                 },
                 "attribute": "max",
                 "reflect": false,
@@ -155,11 +169,28 @@ export class EdsInputRange {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Step for the slider."
                 },
                 "attribute": "step",
                 "reflect": false,
                 "defaultValue": "1"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The externally provided preset value from init-data."
+                },
+                "attribute": "value",
+                "reflect": false
             }
         };
     }
@@ -168,6 +199,24 @@ export class EdsInputRange {
             "sliderVal": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "edsrange",
+                "name": "edsrange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
     static get methods() {
         return {
             "getInputElement": {
@@ -194,4 +243,10 @@ export class EdsInputRange {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
 }

package/dist/collection/components/eds-input-elements/eds-input-search/eds-input-search.js

@@ -9,6 +9,22 @@ import { sendAnalytics } from "../../../utils/analytics";
  */
 export class EdsInputSearch {
     constructor() {
+        /**
+         * Keydown event listener to detect Command+K (Mac) or Ctrl+K (Windows/Linux)
+         * and focus the input element when triggered.
+         *
+         * @param e - The keyboard event.
+         */
+        this.keydownListener = (e) => {
+            // Check for Command+K (Mac) or Ctrl+K (Windows/Linux)
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+                e.preventDefault();
+                // Focus the input if it's available and not disabled
+                if (this.inputElement && !this.disabled) {
+                    this.inputElement.focus();
+                }
+            }
+        };
         /*onInput = (e: any) => {
           // eslint-disable-next-line
           console.log('on input:', e);
@@ -34,18 +50,23 @@ export class EdsInputSearch {
         this.disabled = false;
         this.required = false;
         this.decorate = undefined;
+        this.label = 'Search';
     }
     componentDidLoad() {
         // Assign the native input element after the component loads
         this.inputElement = this.el.querySelector('input');
+        document.addEventListener('keydown', this.keydownListener);
+    }
+    disconnectedCallback() {
+        // Clean up the event listener when the component is removed
+        document.removeEventListener('keydown', this.keydownListener);
     }
     async getInputElement() {
         // Return the native input element
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '79e968e751010d897e1daa1de3793e39b4ccb46b', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: 'fee0e9f6fa852774b6628f4b1a3dc7ee968cf11c', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest" }), h("input", { key: 'd7e5ad3adc769f5152339a253a413c184c0df9d2', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", 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}`,
-            //aria-describedby={describedBy}
+        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 })));
     }
@@ -64,7 +85,7 @@ export class EdsInputSearch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The name attribute for the input element."
                 },
                 "attribute": "name",
                 "reflect": false
@@ -81,7 +102,7 @@ export class EdsInputSearch {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The id attribute for the input element.\nDefaults to 'search-main' if not provided."
                 },
                 "attribute": "input-id",
                 "reflect": false,
@@ -99,7 +120,7 @@ export class EdsInputSearch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder text for the search input."
                 },
                 "attribute": "placeholder",
                 "reflect": false,
@@ -117,7 +138,7 @@ export class EdsInputSearch {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The value of the search input."
                 },
                 "attribute": "value",
                 "reflect": false
@@ -134,7 +155,7 @@ export class EdsInputSearch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, the search input will be disabled."
                 },
                 "attribute": "disabled",
                 "reflect": false,
@@ -152,7 +173,7 @@ export class EdsInputSearch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, the search input is marked as required."
                 },
                 "attribute": "required",
                 "reflect": false,
@@ -170,10 +191,28 @@ export class EdsInputSearch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Additional CSS classes for styling the input."
                 },
                 "attribute": "decorate",
                 "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the search input.\nThis is used for screen readers."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Search'"
             }
         };
     }
@@ -186,7 +225,7 @@ export class EdsInputSearch {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Event emitted when the search input changes.\nContains the event type ('change') and the current input value."
                 },
                 "complexType": {
                     "original": "{\n    event: 'input' | 'change';\n    value: any;\n  }",

package/dist/collection/components/eds-input-elements/eds-input-select/eds-input-select.js

@@ -102,7 +102,10 @@ export class EdsInputSelect {
         return path.split('.').reduce((acc, part) => acc && acc[part], obj);
     }
     render() {
-        return (h("div", { key: '450ff9166ab5912ab3e214941a0ab2536c5e470a', class: "relative" }, h("select", { key: 'afc462bfef01f8b47a52e2e6fa5fde9027029821', 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: '52a6848516672ceaf0094ddeea6943529bf26b1d', 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: '8a3759be564dc46b82fb16a3ed6b321d2b7f857c', 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: '0eb96b11cc1a79f218d3684f7b36b487b87e14e6', 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 is() { return "eds-input-select"; }
     static get properties() {