@ebrains/components 0.9.3-beta → 1.0.0

package/dist/components/eds-header.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$3 } from './eds-link2.js';
 import { d as defineCustomElement$2 } from './eds-logo2.js';
 
-const edsHeaderCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-10{z-index:10}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hidden{display:none}.gap-x-2{-moz-column-gap:0.125rem;column-gap:0.125rem}.after\\:effect-opacity::after{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.whitespace-nowrap{white-space:nowrap}.\\!text-current{color:currentColor !important}.overflow-hidden{overflow:hidden}.after\\:\\!border-transparent::after{border-color:var(--transparent) !important}.hover\\:after\\:\\!border-transparent:hover::after{border-color:var(--transparent) !important}.after\\:opacity-0::after{opacity:0}.hover\\:after\\:opacity-100:hover::after{opacity:1}.px-16{padding-left:1rem;padding-right:1rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}}";
+const edsHeaderCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-10{z-index:10}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hidden{display:none}.gap-x-2{-moz-column-gap:0.125rem;column-gap:0.125rem}.after\\:effect-opacity::after{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.whitespace-nowrap{white-space:nowrap}.\\!text-current{color:currentColor !important}.overflow-hidden{overflow:hidden}.after\\:\\!border-transparent::after{border-color:var(--transparent) !important}.hover\\:after\\:\\!border-transparent:hover::after{border-color:var(--transparent) !important}.after\\:opacity-0::after{opacity:0}.hover\\:after\\:opacity-100:hover::after{opacity:1}.px-16{padding-left:1rem;padding-right:1rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}}";
 const EdsHeaderStyle0 = edsHeaderCss;
 
 const EdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class EdsHeader extends HTMLElement {
@@ -16,7 +16,7 @@ const EdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class EdsHeader extends HTM
         this.toggleheadermenu = createEvent(this, "toggleheadermenu", 7);
         this.homeUrl = '/';
         this.links = undefined;
-        this.inverseHeader = false;
+        this.headerVariant = 'default';
         this.menuEnabled = false;
         this.isMenuOpen = false;
         this.isUserMenuOpen = false;
@@ -26,62 +26,43 @@ const EdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class EdsHeader extends HTM
         var _a;
         this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
     }
-    /**
-     * Lifecycle method that runs when the component has fully loaded.
-     * It emits a custom event for each `eds-link` element contained within the breadcrumb.
-     */
     componentDidLoad() {
-        // Emit context for each eds-link element after the component is fully loaded
         const links = this.hostEl.querySelectorAll('eds-link');
-        links.forEach((link) => {
-            this.emitContext(link);
-        });
+        links.forEach((link) => this.emitContext(link));
     }
-    /**
-     * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
-     *
-     * @param linkElement - The link element to which the event will be dispatched.
-     */
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.hostEl.tagName.toLowerCase(),
-                identifier: null
-            }
+            detail: { componentName: this.hostEl.tagName.toLowerCase(), identifier: null }
         });
         linkElement.dispatchEvent(event);
     }
-    /** Emits an event to open or close the menu */
     handleToggleMenu() {
         this.toggleheadermenu.emit(!this.isMenuOpen);
     }
-    /**
-     * Toggles the visibility of the user menu.
-     * Opens the user menu if closed, and closes it if open.
-     */
     toggleUserMenu() {
         this.isUserMenuOpen = !this.isUserMenuOpen;
     }
-    /**
-     * Parses the `links` prop into an array of link objects.
-     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
-     *
-     * @returns {any[]} Array of parsed link objects
-     */
     get parsedLinks() {
         return parseData(this.links);
     }
     render() {
-        return (h("header", { key: 'a0679671c9ed9659fb8393f69dcf1b902ab9f25f', class: `flex items-center justify-between relative z-10
-       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '115780a93b21d638cb7abf32ed365966bf4c0a6e', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'e0dfbb999e87178c1992c692edd791fbe239886b', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '283bab0cfd25a47ffc7007bf24a98dbc3c138d2d', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: 'fb2fa5863a04869a9922218ac13d287e7120afd8', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "large", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: 'c5d15841fc49af502fea717dbc36d81721d7688d' }), this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
+        // Define classes based on headerVariant
+        const variantClasses = {
+            default: 'text-default bg-dark',
+            inverse: 'text-default bg-inverse',
+            strong: 'text-inverse bg-strongest'
+        };
+        const classes = variantClasses[this.headerVariant] || variantClasses.default;
+        // Logo color variant: default and inverse use 'color', strong uses 'color-white'
+        const logoType = this.headerVariant === 'strong' ? 'color-white' : 'color';
+        return (h("header", { key: '3c6ae4789993e140ee8a00e7f32c8ff3a2793b87', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: 'a406f073ae110622ad8930c61438b46d16553362', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '19c91de446b76f76e97f160c0af538db2637ffdc', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '921c87b668b25abc8117014880c9669a96c04122', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: 'b0de4a0eaafb7409eeedc77104b39fed8a55441b', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "large", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: '2b3d292703b8b7083a7ae1dcfbefbd091d5a744b' }), this.menuEnabled && (h("div", { key: '10d16f0f0ecdc450acf900dd8d7d7b439deb8dcd', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '2e62e0a57bf008d0e566988011beab9a09f7774d', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
     }
     get hostEl() { return this; }
     static get style() { return EdsHeaderStyle0; }
 }, [1, "eds-header", {
         "homeUrl": [513, "home-url"],
         "links": [1],
-        "inverseHeader": [4, "inverse-header"],
+        "headerVariant": [513, "header-variant"],
         "menuEnabled": [4, "menu-enabled"],
         "isMenuOpen": [32],
         "isUserMenuOpen": [32],

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

@@ -19,23 +19,27 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
             var _a;
             // 1) Call any passed-in handler
             (_a = this.onInput) === null || _a === void 0 ? void 0 : _a.call(this, ev);
-            // 2) Re-emit on host so Vue/others can catch it
-            const newValue = ev.target.value;
-            this.hostEl.dispatchEvent(new CustomEvent('oninput', {
-                detail: { value: newValue },
-                bubbles: true,
-                composed: true
-            }));
+            if (this.shouldEmitValue()) {
+                // 2) Re-emit on host so Vue/others can catch it
+                const newValue = ev.target.value;
+                this.hostEl.dispatchEvent(new CustomEvent('oninput', {
+                    detail: { value: newValue },
+                    bubbles: false,
+                    composed: true
+                }));
+            }
         };
         this.handleNativeChange = (ev) => {
             var _a;
             (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, ev);
-            const target = ev.target;
-            this.hostEl.dispatchEvent(new CustomEvent('onchange', {
-                detail: { value: target.value },
-                bubbles: true,
-                composed: true
-            }));
+            if (this.shouldEmitValue()) {
+                const target = ev.target;
+                this.hostEl.dispatchEvent(new CustomEvent('onchange', {
+                    detail: { value: target.value },
+                    bubbles: false,
+                    composed: true
+                }));
+            }
         };
         this.name = undefined;
         this.inputId = undefined;
@@ -56,6 +60,11 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
         this.value = undefined;
         this.maxLength = undefined;
         this.options = undefined;
+        this.exposeValueEvents = true;
+    }
+    shouldEmitValue() {
+        // Never emit for password fields, and respect the exposeValueEvents prop
+        return this.exposeValueEvents && this.type !== 'password';
     }
     get parsedOptions() {
         if (Array.isArray(this.options)) {
@@ -88,7 +97,7 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
             icon: this.icon,
             checked: this.checked
         };
-        return (h("div", { key: 'e99cf5640a713e6289549f61ec20755513ddbcc2', class: "space-y-8" }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-2", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: (typeof this.value === 'string' ? this.value.split(',') : []).includes(String(option.value)) })), h("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' })), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
+        return (h("div", { key: '5243586c0bf3acc86d42684dbcd0288b3360b00c', class: "space-y-8" }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-2", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: (typeof this.value === 'string' ? this.value.split(',') : []).includes(String(option.value)) })), h("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' })), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
             var _a, _b, _c;
             const rangeProps = {
                 name: inputOpts.name,
@@ -101,7 +110,7 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
             const opt = this.parsedOptions;
             const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value || 0;
             return (h("eds-input-range", Object.assign({}, rangeProps, { min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value, max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value, step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value, value: numberValue })));
-        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: 'b9a8995ad04d0c5edfd3c0896c55c56704fecb38', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
+        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: 'e4e1f28766471d5451f342aa4d60d58fca2ddd01', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
     }
     get hostEl() { return this; }
     static get style() { return EdsInputFieldStyle0; }
@@ -124,7 +133,8 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
         "errorMessage": [1, "error-message"],
         "value": [8],
         "maxLength": [2, "max-length"],
-        "options": [1]
+        "options": [1],
+        "exposeValueEvents": [4, "expose-value-events"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

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

@@ -1,21 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { t as toast } from './toastManager.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
 const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.changeEvent = createEvent(this, "changeEvent", 7);
-        /**
-         * Event handler for the select input's change event.
-         * Emits the selected value.
-         *
-         * @param event The change event from the select input.
-         */
+        this.edsselect = createEvent(this, "edsselect", 7);
         this.handleChange = (event) => {
             const target = event.target;
-            this.changeEvent.emit(target.value);
+            this.edsselect.emit(target.value);
         };
         this.inputId = undefined;
         this.name = undefined;
@@ -25,75 +18,19 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
         this.error = false;
         this.required = false;
         this.options = [];
-        this.labelKey = 'label';
-        this.valueKey = 'value';
         this.value = undefined;
-        this.dynamicOptions = [];
-        this.loading = false;
-        this.dynamicValueKey = 'value';
-        this.dynamicLabelKey = 'label';
-        this.hasFetched = false;
-    }
-    componentWillLoad() {
-        this.loadOptions();
-    }
-    /**
-     * Watches for changes in the `options` prop and loads the options accordingly.
-     *
-     * If the first object in the options array contains an "endpoint" key,
-     * the component will fetch options from the specified endpoint using the configured keys.
-     * Otherwise, it will treat the options as static.
-     *
-     * @async
-     */
-    async loadOptions() {
-        // If the first option contains an "endpoint" key, assume dynamic fetch mode.
-        if (this.options && this.options.length > 0 && this.options[0].endpoint) {
-            if (this.hasFetched) {
-                return;
-            }
-            const config = this.options[0];
-            const endpoint = config.endpoint;
-            this.dynamicValueKey = config.value || 'value';
-            this.dynamicLabelKey = config.label || 'label';
-            this.loading = true;
-            try {
-                const response = await fetch(endpoint);
-                if (!response.ok) {
-                    toast.show(`<eds-input-select> HTTP error! Status: ${response.status}`, 'error');
-                }
-                const data = await response.json();
-                // Assume the API returns an array of objects.
-                this.dynamicOptions = data;
-                this.hasFetched = true;
-            }
-            catch (error) {
-                //console.error('Error fetching dynamic options:', error);
-                toast.show(`<eds-input-select> Error fetching dynamic options ${error}`, 'error');
-            }
-            finally {
-                this.loading = false;
-            }
-        }
-        else {
-            // No dynamic configuration found, assume static options.
-            this.dynamicOptions = this.options;
-            this.dynamicValueKey = this.valueKey;
-            this.dynamicLabelKey = this.labelKey;
-        }
-    }
-    getValueByPath(obj, path) {
-        return path.split('.').reduce((acc, part) => acc && acc[part], obj);
     }
     render() {
-        return (h("div", { key: '1fa3ad5de7ad829f49c9a12b0ac3f42e91aef37e', class: "relative", "aria-busy": this.loading ? 'true' : 'false' }, h("select", { key: '988d82773e794b131c4b1283949db0767e9d38a8', 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: '62377a7228da11569a3e0d2af1e72e61fb90ef50', 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: 'f16a73e1fd3be27c221456b359088e8daf3f2e9b', 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: '5654f534af4c9ae58e7e4157535a932c3d062a9c', class: "w-20 h-20", icon: "chevron-right" }))));
+        const selectId = this.inputId || this.name;
+        const placeholderText = this.placeholder || `Please select ${this.name}`;
+        const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
+        return (h("div", { key: '0e1bf5f1ebf30d675e0b4927e7812a305f58d2b9', class: "relative" }, h("select", { key: 'b92542caca12d77e3160baa84760b37bbbe172c7', 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: 'fa911a07fd0053f6c7e5044aac3e6d0846344899', 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: 'afa3c7ad3c583dec2ffc2fd5087d7695509a2a25', 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: '1bb2a24fc9798a7359b9b45019b1432ff2e50e70', class: "w-20 h-20", icon: "chevron-right" }))));
     }
-    static get watchers() { return {
-        "options": ["loadOptions"]
-    }; }
 }, [0, "eds-input-select", {
         "inputId": [1, "input-id"],
         "name": [1],
@@ -103,16 +40,7 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
         "error": [4],
         "required": [4],
         "options": [16],
-        "labelKey": [1, "label-key"],
-        "valueKey": [1, "value-key"],
-        "value": [8],
-        "dynamicOptions": [32],
-        "loading": [32],
-        "dynamicValueKey": [32],
-        "dynamicLabelKey": [32],
-        "hasFetched": [32]
-    }, undefined, {
-        "options": ["loadOptions"]
+        "value": [8]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {