@ebrains/components 2.4.0 → 3.0.0

package/dist/components/{eds-icon-close.d.ts → eds-input-file.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface EdsIconClose extends Components.EdsIconClose, HTMLElement {}
-export const EdsIconClose: {
-    prototype: EdsIconClose;
-    new (): EdsIconClose;
+interface EdsInputFile extends Components.EdsInputFile, HTMLElement {}
+export const EdsInputFile: {
+    prototype: EdsInputFile;
+    new (): EdsInputFile;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -0,0 +1,6 @@
+import { E as EdsInputFile$1, d as defineCustomElement$1 } from './eds-input-file2.js';
+
+const EdsInputFile = EdsInputFile$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsInputFile, defineCustomElement };

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

@@ -0,0 +1,100 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const edsInputFileCss = ".eds-input-file-container{display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem}.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}.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}.eds-input-file-chips{display:flex;flex-wrap:wrap;gap:0.5rem}.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}@media (max-width: 640px){.eds-input-file-chip-name{max-width:120px}}";
+const EdsInputFileStyle0 = edsInputFileCss;
+
+const EdsInputFile = /*@__PURE__*/ proxyCustomElement(class EdsInputFile extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.edsfile = createEvent(this, "edsfile", 7);
+        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: 'c4c8f06b7d911cc7b9aa44a54bc1ec1144fc7901', class: "eds-input-file-container" }, h("input", { key: 'bf4d4f3b3a49a2b386780fd6d65056e2bfee327d', 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: 'cb4447bab24a31ba0ab7ab852041a9117a4c8d16', type: "button", class: "eds-input-file-btn", onClick: this.handleButtonClick, disabled: this.disabled }, h("svg", { key: 'b5a98574c8b044b63bf4d6b5384f691d78179b25', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '9dcd73b3ea6b947052417dedbdedfbe9c1683d11', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: '17442a8caa70a37f77839b4a313a36aa8324d54a', points: "17 8 12 3 7 8" }), h("line", { key: 'de51aa410bd793d708280bc398766859afa59ff5', x1: "12", y1: "3", x2: "12", y2: "15" })), effectiveLabel), this.selectedFiles.length > 0 && (h("div", { key: '179a1541b71508f3bf78760079d04b2d98a8c7ec', 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" }))))))))));
+    }
+    get hostEl() { return this; }
+    static get style() { return EdsInputFileStyle0; }
+}, [1, "eds-input-file", {
+        "name": [1],
+        "inputId": [1, "input-id"],
+        "disabled": [4],
+        "required": [4],
+        "multiple": [4],
+        "accept": [1],
+        "maxFileSize": [2, "max-file-size"],
+        "buttonLabel": [1, "button-label"],
+        "selectedFiles": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-input-file"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-input-file":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsInputFile);
+            }
+            break;
+    } });
+}
+
+export { EdsInputFile as E, defineCustomElement as d };

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$1 } from './eds-link2.js';
 
-const edsInputFooterCss = "p{margin:0}.text-error{color:var(--red-700)}.flex{display:flex}.items-center{align-items:center}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.ml-4{margin-left:0.25rem}.mb-4{margin-bottom:0.25rem}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.text-lighter{color:var(--grey-600)}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:text-lighter:hover{color:var(--grey-600)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}";
+const edsInputFooterCss = "p{margin:0}.text-error{color:var(--red-700)}.flex{display:flex}.items-center{align-items:center}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.ml-4{margin-left:0.25rem}.pt-4{padding-top:0.25rem}.mb-4{margin-bottom:0.25rem}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.text-lighter{color:var(--grey-600)}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:text-lighter:hover{color:var(--grey-600)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}";
 const EdsInputFooterStyle0 = edsInputFooterCss;
 
 const EdsInputFooter = /*@__PURE__*/ proxyCustomElement(class EdsInputFooter extends HTMLElement {
@@ -17,7 +17,7 @@ const EdsInputFooter = /*@__PURE__*/ proxyCustomElement(class EdsInputFooter ext
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: '6c045ff40d674a27cf4fe4c1a125251edd7455ab' }, this.error && this.errorMessage && (h("div", { key: 'd6edd41359f7efb8f0a3bce487b852c1b26c035a', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: 'cd24f34b58c81f00046cc1d90a5b993928e72be8', icon: "warning" }), h("p", { key: 'bf718bcf0e04c5af1924381f567d5921bd43edec', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '4ea38b231e7b7fba679a05c12773a486aa3201bc', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("eds-link", { key: 'e2e1255c198b707abb2b2194100b83f7b00de9e7', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
+        return (h("div", { key: 'b6e571eae554f1292e897d99443ea03b6dfa4fe3' }, this.error && this.errorMessage && (h("div", { key: '9240b3db2aee19b5cbc1c54aa7a90994c23580d0', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '68b17235d0396119275c9b2a883bb47ee365c266', name: "warning", size: 20 }), h("p", { key: 'bfb1721ddcc7ad63583e56911b8c4a31f1147c51', class: "f-ui-04 ml-4 mb-4 pt-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '390c9ea7b3b2754a1a090c9f3f3ec6996a8f0945', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("eds-link", { key: '0777fb8b099d5cc7fa2902bf1b741f28592515a1', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
     }
     static get style() { return EdsInputFooterStyle0; }
 }, [1, "eds-input-footer", {

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

@@ -14,7 +14,7 @@ const EdsInputLabel = /*@__PURE__*/ proxyCustomElement(class EdsInputLabel exten
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: '5e97f430a0ef1cdc4d0b28618d78402991fda8fe', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'fedf93c4b037f387c4aad3ffab354de94de564d3' }, h("span", { key: '72ae856c25308b676d84d7ee0bf214362218a203', "aria-hidden": "true" }, "*"), h("span", { key: '39fcf9a2b39a0207eb0b6f62c16183885c98f145', class: "sr-only" }, "required")))));
+        return (h("label", { key: '7790bae024ee253c12b47ee43dd7697329ff5602', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '1f8e72cee3848171c0f70ce7564524c9f2646eeb' }, h("span", { key: '5ac8ccbe9b984c54ae3a556ea0dc09d6fa625f24', "aria-hidden": "true" }, "*"), h("span", { key: 'a562b41bce8a4e671596266c7705a98f5b2252d0', class: "sr-only" }, "required")))));
     }
     static get style() { return EdsInputLabelStyle0; }
 }, [1, "eds-input-label", {

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

@@ -25,8 +25,8 @@ const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange exten
         this.sliderVal = undefined;
     }
     componentWillLoad() {
-        this.sliderVal =
-            this.value !== undefined ? this.value : this.max % 2 === 0 ? this.max / 2 : Math.ceil(this.max / 2);
+        var _a;
+        this.sliderVal = (_a = this.value) !== null && _a !== void 0 ? _a : Math.round(this.min + (this.max - this.min) / 2);
     }
     // Keep the internal state in sync when the passed value changes.
     onValueChange(newVal) {
@@ -43,7 +43,9 @@ const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange exten
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: 'c8106420cb482123e72c8e5b00079d9921749290', class: "relative flex flex-col items-start" }, h("input", { key: '752dfbeb9fb73c8a4b5ad874461b63e73477ca99', 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", tabindex: "0", role: "slider", "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: 'de123d07b20996d3f0c7c5baff788ab42fa0a386', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
+        var _a;
+        const currentValue = (_a = this.sliderVal) !== null && _a !== void 0 ? _a : Math.round(this.min + (this.max - this.min) / 2);
+        return (h("div", { key: '9be1a9d4241844c03d7e2b851ebc5ce181bfadf6', class: "relative flex flex-col items-start" }, h("input", { key: '746c10f7a466a6b498f57812dcb6d9b9ff1e685d', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: currentValue, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": currentValue, onInput: this.onInput, onChange: this.onChange }), h("p", { key: '97b516ab9c20d9b5c7a783b369081b29eb3a83f0', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-light" }, "Current value: ", currentValue)));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -64,7 +64,7 @@ const EdsInputSearch = /*@__PURE__*/ proxyCustomElement(class EdsInputSearch ext
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: 'f8484e4e4a971db07a75ca91b66d4b3cddd5cee9', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '68782ac168c062564d6378bc1bc62e58efeb3555', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: 'c59e9b91f214fc94fc4fb4c991c3e667ea3c24ae', 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}`,
+        return (h("div", { key: '849afaf3483b07fd2579d1138fbc1c1eee3930be', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '1b9a30ee46d4575116b585efe8a2d0c6d6b83b39', name: "search", class: "absolute top-1/2 left-[14px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '174fc93f10851aec47cb440895105c34600de601', 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 })));
     }

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

@@ -24,12 +24,12 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
         const selectId = this.inputId || this.name;
         const placeholderText = this.placeholder || `Pick from the list`;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
-        return (h("div", { key: '7f6a81c0f3d1f998c2bd671722cd06992b382540', class: "relative" }, h("select", { key: '3e62519e3973cf1136cda70a3af1cc2a2e093451', id: selectId, name: this.name, class: {
+        return (h("div", { key: 'c2f809a88f8b9eab6a36b86bb49daaa39ac1a832', class: "relative" }, h("select", { key: '0847d6526bd118db744627279d96a979dafd19d1', id: selectId, name: this.name, class: {
                 input: true,
                 'input-error': this.error,
                 'px-4': true,
                 'py-2': true
-            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '4292bd21e8c912f3bb0bc727ed2657051a3e03b8', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: 'a03c59be80950fd17a89b0adc693654e99496018', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: '0183976264d130c3c12b30c829fae36512607ac4', class: "w-20 h-20", icon: "chevron-right" }))));
+            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '1d66602cc92028fddfd047bb2fc79c8f3602ba8e', value: "", disabled: true, selected: !this.value || this.value === '' }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '40f750ff55b0ac5707c4010868835c6d82537d17', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: 'ef8c068e287819be7228940bfbe0b8b923e22087', class: "w-20 h-20", name: "chevron-right" }))));
     }
 }, [0, "eds-input-select", {
         "inputId": [1, "input-id"],

package/dist/components/eds-input2.js

@@ -51,7 +51,7 @@ 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: '1800587d54da282566893c538d47aadf9f9bb390', 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", Object.assign({ 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 }, (this.type === 'number'
+        return (h("div", { key: '5e5aabb89e931e0129ad606f9ed6070e336f9d98', 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", Object.assign({ 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 }, (this.type === 'number'
             ? {
                 min: this.min,
                 max: this.max,
@@ -62,7 +62,7 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
               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: 'cc6cc50cdebea1d4eaecb78bc6ab2b4b92503893', 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: 'ff4b36e873438f7208eb660c77381f87f0805109', 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: 'b3f75c5b363dc5320d4552ca9d9544975fdd89e0', 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: 'e3d18b7c5089e635ee3c4341f039482fdf37f5f1', class: `absolute top-1/2 left-[12px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, name: this.icon }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-kg-web-services-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsKgWebServicesSelect extends Components.EdsKgWebServicesSelect, HTMLElement {}
+export const EdsKgWebServicesSelect: {
+    prototype: EdsKgWebServicesSelect;
+    new (): EdsKgWebServicesSelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-kg-web-services-select.js

@@ -0,0 +1,6 @@
+import { E as EdsKgWebServicesSelect$1, d as defineCustomElement$1 } from './eds-kg-web-services-select2.js';
+
+const EdsKgWebServicesSelect = EdsKgWebServicesSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsKgWebServicesSelect, defineCustomElement };

package/dist/components/eds-kg-web-services-select2.js

@@ -0,0 +1,192 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$b } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$a } from './eds-input2.js';
+import { d as defineCustomElement$9 } from './eds-input-dropzone2.js';
+import { d as defineCustomElement$8 } from './eds-input-field2.js';
+import { d as defineCustomElement$7 } from './eds-input-file2.js';
+import { d as defineCustomElement$6 } from './eds-input-footer2.js';
+import { d as defineCustomElement$5 } from './eds-input-label2.js';
+import { d as defineCustomElement$4 } from './eds-input-range2.js';
+import { d as defineCustomElement$3 } from './eds-input-search2.js';
+import { d as defineCustomElement$2 } from './eds-input-select2.js';
+import { d as defineCustomElement$1 } from './eds-link2.js';
+
+const edsKgWebServicesSelectCss = ".kg-web-services-select-container{width:100%}.loading-container,.error-container{width:100%}";
+const EdsKgWebServicesSelectStyle0 = edsKgWebServicesSelectCss;
+
+const webServicesCache = new Map();
+const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
+const EdsKgWebServicesSelect = /*@__PURE__*/ proxyCustomElement(class EdsKgWebServicesSelect extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.edsinput = createEvent(this, "edsinput", 7);
+        this.edschange = createEvent(this, "edschange", 7);
+        this.apiEndpoint = '/api/v1/kg/web-services/cached';
+        this.label = 'Select Web Service';
+        this.name = 'web-service';
+        this.placeholder = 'Choose a web service...';
+        this.required = false;
+        this.disabled = false;
+        this.size = 100;
+        this.searchTerm = '';
+        this.value = undefined;
+        this.hint = undefined;
+        this.message = undefined;
+        this.error = false;
+        this.errorMessage = undefined;
+        this.loading = false;
+        this.webServices = [];
+        this.fetchError = '';
+        this.selectOptions = [];
+    }
+    componentWillLoad() {
+        this.fetchWebServices();
+    }
+    async fetchWebServices() {
+        this.loading = true;
+        this.fetchError = '';
+        try {
+            const params = new URLSearchParams(Object.assign({ size: this.size.toString() }, (this.searchTerm && { search: this.searchTerm })));
+            const cacheKey = `${this.apiEndpoint}?${params.toString()}`;
+            // Check cache first
+            const cachedEntry = webServicesCache.get(cacheKey);
+            const now = Date.now();
+            if (cachedEntry && (now - cachedEntry.timestamp) < CACHE_DURATION) {
+                // Use cached data
+                this.webServices = cachedEntry.data;
+            }
+            else {
+                // Fetch fresh data
+                const response = await fetch(`${this.apiEndpoint}?${params}`);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch web services: ${response.statusText}`);
+                }
+                const data = await response.json();
+                this.webServices = data.data || [];
+                // Store in cache
+                webServicesCache.set(cacheKey, {
+                    data: this.webServices,
+                    timestamp: now
+                });
+            }
+            // Format options for eds-input-field: "Localizoom (ebrains-localizoom)"
+            this.selectOptions = this.webServices.map(service => ({
+                label: `${service.name} (${service.short_name})`,
+                value: service.short_name
+            }));
+        }
+        catch (error) {
+            console.error('[eds-kg-web-services-select] Error fetching web services:', error);
+            this.fetchError = error instanceof Error ? error.message : 'Failed to load web services';
+            this.selectOptions = [];
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    render() {
+        if (this.loading) {
+            return (h("div", { class: "loading-container" }, h("eds-input-field", { name: this.name, label: this.label, type: "select", disabled: true, placeholder: "Loading web services...", hint: this.hint, message: this.message, required: this.required })));
+        }
+        if (this.fetchError) {
+            return (h("div", { class: "error-container" }, h("eds-input-field", { name: this.name, label: this.label, type: "select", disabled: true, error: true, "error-message": this.fetchError, hint: this.hint, message: this.message, required: this.required })));
+        }
+        return (h("div", { class: "kg-web-services-select-container" }, h("eds-input-field", { name: this.name, label: this.label, type: "select", placeholder: this.placeholder, disabled: this.disabled, required: this.required, options: this.selectOptions, value: this.value, hint: this.hint, message: this.message, error: this.error, "error-message": this.errorMessage, onEdsinput: (e) => {
+                this.value = e.detail.value;
+                this.edsinput.emit(e.detail);
+            }, onEdschange: (e) => {
+                this.value = e.detail.value;
+                this.edschange.emit(e.detail);
+            } })));
+    }
+    static get style() { return EdsKgWebServicesSelectStyle0; }
+}, [0, "eds-kg-web-services-select", {
+        "apiEndpoint": [1, "api-endpoint"],
+        "label": [1],
+        "name": [1],
+        "placeholder": [1],
+        "required": [4],
+        "disabled": [4],
+        "size": [2],
+        "searchTerm": [1, "search-term"],
+        "value": [1025],
+        "hint": [1],
+        "message": [1],
+        "error": [4],
+        "errorMessage": [1, "error-message"],
+        "loading": [32],
+        "webServices": [32],
+        "fetchError": [32],
+        "selectOptions": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-kg-web-services-select", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-kg-web-services-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsKgWebServicesSelect);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "eds-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "eds-input-dropzone":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "eds-input-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "eds-input-file":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "eds-input-footer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "eds-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "eds-input-range":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-input-search":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-input-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsKgWebServicesSelect as E, defineCustomElement as d };