@ebrains/components 0.7.0-alpha.1 → 0.8.0-alpha.0

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

@@ -12,7 +12,7 @@ const EdsInputFooter = /*@__PURE__*/ proxyCustomElement(class EdsInputFooter ext
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: 'a1b8f8eec2a2d41559ae2d560a1311eaee7bd028', class: "space-y-4" }, this.error && this.errorMessage && (h("div", { key: 'ac41ed481f7718079476cb46ac7a10b58854ccce', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '1c20946efeac10c5b8afa4c83d25b5eb505b8589', icon: "warning" }), h("p", { key: 'fc1c52f7cf5f619cef9951587dfe513772125cdf', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: 'de5357f9a1365f93365bcea27cb45b4320386401', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: '3639cd34dbfe3a5d2df3096a92399dd7d0deab27', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (h("div", { key: 'f98f6fadefbdaa1afa056f254011558ef8130643', class: "space-y-4" }, this.error && this.errorMessage && (h("div", { key: 'cdffa47311a398c47e353d78747d9949f1896a49', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '99e43a988e4d4f44f1c6fcbcf1c1ec28f6eb7d59', icon: "warning" }), h("p", { key: '6b2a6b182b250000b43e16cdb45a47bc4a022bcf', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: 'f6a20bdfac67c2775891e8d2b7bc510e3e0c6ea2', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: 'e76dc8d8c6cd00661b7cea2c2a7a0123bc5452f6', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
     }
 }, [0, "eds-input-footer", {
         "name": [1],

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

@@ -10,7 +10,7 @@ const EdsInputLabel = /*@__PURE__*/ proxyCustomElement(class EdsInputLabel exten
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: '8dec4a891bafa61129673f2ce6eb6f738c938d1b', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '49f05c988b072c30d9f98f258e134e6f67424208' }, h("span", { key: '75b458aa32b7b6f8e1d386624911eb7fd519d3bb', "aria-hidden": "true" }, "*"), h("span", { key: 'e83b09c594b966022332fa44fb73548445ef9ed4', class: "sr-only" }, "required")))));
+        return (h("label", { key: 'cbbf9b07e719c2307ca90fdf4fb9ba1cf82098d3', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '328b0d8759007afd19323a2bd80e002b4e38b4d8' }, h("span", { key: 'bfc323e8ee81238f194fd081dbe4bb3bb801412e', "aria-hidden": "true" }, "*"), h("span", { key: 'c1231c12beecd218dad357c5c622cbd7c5acd692', class: "sr-only" }, "required")))));
     }
 }, [0, "eds-input-label", {
         "label": [1],

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

@@ -26,9 +26,7 @@ const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange exten
         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: '4303ce0031e42249382a049f2214ac9a310f4c1d', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: '25c349147fd3b5673bf9ea42f9c9a8477d178bd2', 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 }), h("p", { key: 'e21351977aed715d157bb7577a59cec095f221e9', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
     }
     get el() { return this; }
 }, [0, "eds-input-range", {

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

@@ -7,6 +7,22 @@ const EdsInputSearch = /*@__PURE__*/ proxyCustomElement(class EdsInputSearch ext
         super();
         this.__registerHost();
         this.search = createEvent(this, "search", 7);
+        /**
+         * 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);
@@ -32,18 +48,23 @@ const EdsInputSearch = /*@__PURE__*/ proxyCustomElement(class EdsInputSearch ext
         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: 'cd0d0f878ddfdd9de78844a9fe7f54c1afc01f00', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '51580657eebca704fda0c40acfbac435bbd843ae', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: 'db878dfcad30f8a4a718d4f8b0184c27366038e8', 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: `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}`,
             //onInput={this.onInput}
             onChange: this.onChange })));
     }
@@ -56,6 +77,7 @@ const EdsInputSearch = /*@__PURE__*/ proxyCustomElement(class EdsInputSearch ext
         "disabled": [4],
         "required": [4],
         "decorate": [1],
+        "label": [1],
         "getInputElement": [64]
     }]);
 function defineCustomElement() {

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

@@ -86,7 +86,7 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
         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: 'cf167d50401aec809a3c399886feecb854f8a038', class: "relative", "aria-busy": this.loading ? 'true' : 'false' }, h("select", { key: '74d9a2404616824c98f9625ff1fdd1d82fbc22d9', 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: '237f4e20cd20d4fe9e35afe21eaa5537d12c583a', 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: '481eddf49aa0f78fa6534f65484fbff953ca2c59', 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: '5b73e8c045df38fa1260a4f5c940c0148a41b4c8', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get watchers() { return {
         "options": ["loadOptions"]

package/dist/components/eds-input2.js

@@ -50,12 +50,12 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: '86b74d87c87c5abdc7eeb1bb720e218a57fc1fad', class: "relative flex items-center" }, this.type === 'textarea' ? (h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("input", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined, class: `
+        return (h("div", { key: 'daa9fd99935c0fcbd3a1570837eed5893ae3fafa', class: "relative flex items-center" }, this.type === 'textarea' ? (h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("input", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined, class: `
               ${this.extraClass || ''} 
               input ${this.type === 'radio' ? 'input-radio' : this.type === 'checkbox' ? 'input-checkbox' : ''}
               ${withIcon && this.type !== 'radio' && this.type !== 'checkbox' ? 'input-icon pl-36' : ''} 
               ${this.error ? 'input-error' : ''}
-              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })), this.maxLength && this.type === 'textarea' && (h("span", { key: 'a8905b63699167cb5ccbea4c47e7d2ac6301e357', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: 'dd19dbdda2f5114cf1ea0614169a54d8ae108833', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
+              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })), this.maxLength && this.type === 'textarea' && (h("span", { key: '6f5ab123a7dbaad765bff2823e38c135a0065bf5', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: 'ca512030ce17fd6387a280d79c1e3d3074e7fe80', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
     }
     get el() { return this; }
     static get watchers() { return {