@maggioli-design-system/mds-input-select 3.5.1 → 3.6.1

package/dist/cjs/{index-18f29026.js → index-a7de269b.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'mds-input-select';
-const BUILD = /* mds-input-select */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* mds-input-select */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.27.2 | MIT Licensed | https://stenciljs.com
@@ -50,6 +50,9 @@ var registerHost = (hostElement, cmpMeta) => {
     $cmpMeta$: cmpMeta,
     $instanceValues$: /* @__PURE__ */ new Map()
   };
+  {
+    hostRef.$onInstancePromise$ = new Promise((r) => hostRef.$onInstanceResolve$ = r);
+  }
   {
     hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
     hostElement["s-p"] = [];
@@ -908,6 +911,9 @@ var postUpdateComponent = (hostRef) => {
     safeCall(instance, "componentDidUpdate", void 0, elm);
     endPostUpdate();
   }
+  {
+    hostRef.$onInstanceResolve$(elm);
+  }
   {
     if (hostRef.$onRenderResolve$) {
       hostRef.$onRenderResolve$();
@@ -1073,6 +1079,17 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
             }
           }
         });
+      } else if (flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
+        Object.defineProperty(prototype, memberName, {
+          value(...args) {
+            var _a2;
+            const ref = getHostRef(this);
+            return (_a2 = ref == null ? void 0 : ref.$onInstancePromise$) == null ? void 0 : _a2.then(() => {
+              var _a3;
+              return (_a3 = ref.$lazyInstance$) == null ? void 0 : _a3[memberName](...args);
+            });
+          }
+        });
       }
     });
     if ((flags & 1 /* isElementConstructor */)) {

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-18f29026.js');
+const index = require('./index-a7de269b.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-input-select.cjs",[[65,"mds-input-select",{"autocomplete":[513],"autoFocus":[516,"auto-focus"],"placeholder":[513],"name":[513],"disabled":[516],"required":[516],"multiple":[516],"size":[514],"value":[520],"defaultValue":[520,"default-value"],"variant":[513],"hasFocus":[32]},null,{"value":["valueChanged"],"disabled":["disabledChanged"],"placeholder":["placeholderChanged"]}]]]], options);
+  return index.bootstrapLazy([["mds-input-select.cjs",[[65,"mds-input-select",{"autocomplete":[513],"autoFocus":[516,"auto-focus"],"placeholder":[513],"name":[513],"disabled":[516],"required":[516],"multiple":[516],"size":[514],"value":[520],"defaultValue":[520,"default-value"],"variant":[513],"hasFocus":[32],"setValue":[64]},null,{"value":["valueChanged"],"disabled":["disabledChanged"],"placeholder":["placeholderChanged"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/mds-input-select.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-18f29026.js');
+const index = require('./index-a7de269b.js');
 
 const miBaselineKeyboardArrowDown = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>`;
 
@@ -71,7 +71,7 @@ const MdsInputSelect = class {
             });
         };
         this.onSlotChangeHandler = () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             const elements = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')[0]) === null || _b === void 0 ? void 0 : _b.assignedNodes();
             const options = (_c = this.selectEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option');
             if (!options) {
@@ -87,22 +87,36 @@ const MdsInputSelect = class {
                 var _a;
                 (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.appendChild(element.cloneNode(true));
             });
-            if (this.value && this.selectEl) {
+            this.setCurrentValue();
+        };
+        this.setCurrentValue = () => {
+            var _a;
+            if (!this.selectEl)
+                return;
+            if (this.value) {
                 this.selectEl.querySelectorAll('option').forEach((element) => {
                     element.selected = element.value === this.value;
                 });
             }
             else if (!this.placeholder) {
-                this.value = (_d = this.selectEl) === null || _d === void 0 ? void 0 : _d.querySelectorAll('option')[0].value;
+                this.value = (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('option')[0].value;
             }
         };
     }
+    /**
+     * Sets the value of the component
+     */
+    async setValue(value) {
+        this.value = value;
+        return Promise.resolve();
+    }
     /**
      * Emits the change event when the component value changes
      */
     valueChanged() {
         var _a, _b, _c;
         this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
+        this.setCurrentValue();
         this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
     }
     disabledChanged(newValue) {
@@ -131,8 +145,10 @@ const MdsInputSelect = class {
             this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
             defaultOption.value = '';
             defaultOption.text = newValue;
-            if (!this.defaultValue)
+            if (!this.defaultValue) {
                 defaultOption.selected = true;
+                this.value = undefined;
+            }
             if (this.required)
                 defaultOption.disabled = true;
         }
@@ -152,8 +168,8 @@ const MdsInputSelect = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '1e31a254cadf3141f66b003aeed3bbcb1912f748' }, index.h("select", { key: '0af51ed5c0daa0a5969d13edc7814e8f482eecea', class: 'input', onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: el => this.selectEl = el }, index.h("option", { key: '597095579dc1e50a927d14c111fb8ab82c7ac971', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), index.h("div", { key: '3daf36535e69bf3909b184ea9658b7b7b4850a7d', class: "icon-container" }, index.h("i", { key: 'b98d5e916a2e050af8ed94066dcf51152b90738d', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), index.h("div", { key: '964828e831559130e018cfc62e1fb076e0b2478b', class: "option-container" }, index.h("slot", { key: '394d87e522c0c6fceadcc829d39c9a277b014ae3', onSlotchange: this.onSlotChangeHandler })), index.h("mds-input-tip", { key: '019abf7e5d56dd4eb93864bd7fd0fa28446ba0b5', position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '8fc9b96596eea2eb99adc0c0e7b580fa9f92a355', expanded: true, variant: "disabled" }), this.required &&
-            index.h("mds-input-tip-item", { key: '0eec9f0ade26adfba03eb3f3f38af1c1e831af55', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (index.h(index.Host, { key: 'b217fb12291d7a274a658db14c93de159d6ef8f8' }, index.h("select", { key: 'ecfd2d64dafbc5fe6546122631927388976891f1', class: 'input', onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: el => this.selectEl = el }, index.h("option", { key: '7b6de14db97a31802fb96080bda90cc5396ec604', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), index.h("div", { key: 'c29136a8a74c71e1565cc31f92abdf016f9eac0d', class: "icon-container" }, index.h("i", { key: '64ba4ea00b6d497fb9075a8385844cf60e16051a', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), index.h("div", { key: '49118d50d1de9222ca611c65f22bb2e9a37abba8', class: "option-container" }, index.h("slot", { key: '5b437f219f6d3470c3b33d97b0d215669d9ec1b6', onSlotchange: this.onSlotChangeHandler })), index.h("mds-input-tip", { key: 'e2e5f0b16cf5e5b8a6d2c4c61b3745533247030b', position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '5d5fe9dee35f5fe0c048b66abf7bebd51846ebd5', expanded: true, variant: "disabled" }), this.required &&
+            index.h("mds-input-tip-item", { key: '158a591219c8c0bf2a94b4f4c7d5a4f2a32b00ce', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }

package/dist/cjs/mds-input-select.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-18f29026.js');
+const index = require('./index-a7de269b.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-input-select.cjs",[[65,"mds-input-select",{"autocomplete":[513],"autoFocus":[516,"auto-focus"],"placeholder":[513],"name":[513],"disabled":[516],"required":[516],"multiple":[516],"size":[514],"value":[520],"defaultValue":[520,"default-value"],"variant":[513],"hasFocus":[32]},null,{"value":["valueChanged"],"disabled":["disabledChanged"],"placeholder":["placeholderChanged"]}]]]], options);
+  return index.bootstrapLazy([["mds-input-select.cjs",[[65,"mds-input-select",{"autocomplete":[513],"autoFocus":[516,"auto-focus"],"placeholder":[513],"name":[513],"disabled":[516],"required":[516],"multiple":[516],"size":[514],"value":[520],"defaultValue":[520,"default-value"],"variant":[513],"hasFocus":[32],"setValue":[64]},null,{"value":["valueChanged"],"disabled":["disabledChanged"],"placeholder":["placeholderChanged"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/mds-input-select/mds-input-select.js

@@ -56,7 +56,7 @@ export class MdsInputSelect {
             });
         };
         this.onSlotChangeHandler = () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             const elements = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')[0]) === null || _b === void 0 ? void 0 : _b.assignedNodes();
             const options = (_c = this.selectEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option');
             if (!options) {
@@ -72,22 +72,36 @@ export class MdsInputSelect {
                 var _a;
                 (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.appendChild(element.cloneNode(true));
             });
-            if (this.value && this.selectEl) {
+            this.setCurrentValue();
+        };
+        this.setCurrentValue = () => {
+            var _a;
+            if (!this.selectEl)
+                return;
+            if (this.value) {
                 this.selectEl.querySelectorAll('option').forEach((element) => {
                     element.selected = element.value === this.value;
                 });
             }
             else if (!this.placeholder) {
-                this.value = (_d = this.selectEl) === null || _d === void 0 ? void 0 : _d.querySelectorAll('option')[0].value;
+                this.value = (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('option')[0].value;
             }
         };
     }
+    /**
+     * Sets the value of the component
+     */
+    async setValue(value) {
+        this.value = value;
+        return Promise.resolve();
+    }
     /**
      * Emits the change event when the component value changes
      */
     valueChanged() {
         var _a, _b, _c;
         this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
+        this.setCurrentValue();
         this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
     }
     disabledChanged(newValue) {
@@ -116,8 +130,10 @@ export class MdsInputSelect {
             this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
             defaultOption.value = '';
             defaultOption.text = newValue;
-            if (!this.defaultValue)
+            if (!this.defaultValue) {
                 defaultOption.selected = true;
+                this.value = undefined;
+            }
             if (this.required)
                 defaultOption.disabled = true;
         }
@@ -137,8 +153,8 @@ export class MdsInputSelect {
         }
     }
     render() {
-        return (h(Host, { key: '1e31a254cadf3141f66b003aeed3bbcb1912f748' }, h("select", { key: '0af51ed5c0daa0a5969d13edc7814e8f482eecea', class: 'input', onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: el => this.selectEl = el }, h("option", { key: '597095579dc1e50a927d14c111fb8ab82c7ac971', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), h("div", { key: '3daf36535e69bf3909b184ea9658b7b7b4850a7d', class: "icon-container" }, h("i", { key: 'b98d5e916a2e050af8ed94066dcf51152b90738d', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '964828e831559130e018cfc62e1fb076e0b2478b', class: "option-container" }, h("slot", { key: '394d87e522c0c6fceadcc829d39c9a277b014ae3', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '019abf7e5d56dd4eb93864bd7fd0fa28446ba0b5', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '8fc9b96596eea2eb99adc0c0e7b580fa9f92a355', expanded: true, variant: "disabled" }), this.required &&
-            h("mds-input-tip-item", { key: '0eec9f0ade26adfba03eb3f3f38af1c1e831af55', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (h(Host, { key: 'b217fb12291d7a274a658db14c93de159d6ef8f8' }, h("select", { key: 'ecfd2d64dafbc5fe6546122631927388976891f1', class: 'input', onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: el => this.selectEl = el }, h("option", { key: '7b6de14db97a31802fb96080bda90cc5396ec604', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), h("div", { key: 'c29136a8a74c71e1565cc31f92abdf016f9eac0d', class: "icon-container" }, h("i", { key: '64ba4ea00b6d497fb9075a8385844cf60e16051a', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '49118d50d1de9222ca611c65f22bb2e9a37abba8', class: "option-container" }, h("slot", { key: '5b437f219f6d3470c3b33d97b0d215669d9ec1b6', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'e2e5f0b16cf5e5b8a6d2c4c61b3745533247030b', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '5d5fe9dee35f5fe0c048b66abf7bebd51846ebd5', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: '158a591219c8c0bf2a94b4f4c7d5a4f2a32b00ce', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get is() { return "mds-input-select"; }
     static get encapsulation() { return "shadow"; }
@@ -406,6 +422,31 @@ export class MdsInputSelect {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: string | number | null) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string | number | null",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the value of the component",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{

package/dist/collection/components/mds-input-select/test/mds-input-select.stories.js

@@ -48,6 +48,10 @@ export default {
             control: { type: 'select' },
             description: 'Sets the variant of the component',
         },
+        setValue: {
+            type: { name: 'function' },
+            description: 'Sets the value of the component',
+        },
     },
 };
 const Template = args => (h("mds-input-select", Object.assign({}, args), h("option", { value: "1" }, "First contact"), h("option", { value: "2" }, "Second impact"), h("option", { value: "3" }, "The Third Man"), h("option", { value: "4" }, "The Fourth Emendament")));

package/dist/components/mds-input-select.js

@@ -63,7 +63,7 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
             });
         };
         this.onSlotChangeHandler = () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             const elements = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')[0]) === null || _b === void 0 ? void 0 : _b.assignedNodes();
             const options = (_c = this.selectEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option');
             if (!options) {
@@ -79,22 +79,36 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
                 var _a;
                 (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.appendChild(element.cloneNode(true));
             });
-            if (this.value && this.selectEl) {
+            this.setCurrentValue();
+        };
+        this.setCurrentValue = () => {
+            var _a;
+            if (!this.selectEl)
+                return;
+            if (this.value) {
                 this.selectEl.querySelectorAll('option').forEach((element) => {
                     element.selected = element.value === this.value;
                 });
             }
             else if (!this.placeholder) {
-                this.value = (_d = this.selectEl) === null || _d === void 0 ? void 0 : _d.querySelectorAll('option')[0].value;
+                this.value = (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('option')[0].value;
             }
         };
     }
+    /**
+     * Sets the value of the component
+     */
+    async setValue(value) {
+        this.value = value;
+        return Promise.resolve();
+    }
     /**
      * Emits the change event when the component value changes
      */
     valueChanged() {
         var _a, _b, _c;
         this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
+        this.setCurrentValue();
         this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
     }
     disabledChanged(newValue) {
@@ -123,8 +137,10 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
             this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
             defaultOption.value = '';
             defaultOption.text = newValue;
-            if (!this.defaultValue)
+            if (!this.defaultValue) {
                 defaultOption.selected = true;
+                this.value = undefined;
+            }
             if (this.required)
                 defaultOption.disabled = true;
         }
@@ -144,8 +160,8 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
         }
     }
     render() {
-        return (h(Host, { key: '1e31a254cadf3141f66b003aeed3bbcb1912f748' }, h("select", { key: '0af51ed5c0daa0a5969d13edc7814e8f482eecea', class: 'input', onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: el => this.selectEl = el }, h("option", { key: '597095579dc1e50a927d14c111fb8ab82c7ac971', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), h("div", { key: '3daf36535e69bf3909b184ea9658b7b7b4850a7d', class: "icon-container" }, h("i", { key: 'b98d5e916a2e050af8ed94066dcf51152b90738d', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '964828e831559130e018cfc62e1fb076e0b2478b', class: "option-container" }, h("slot", { key: '394d87e522c0c6fceadcc829d39c9a277b014ae3', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '019abf7e5d56dd4eb93864bd7fd0fa28446ba0b5', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '8fc9b96596eea2eb99adc0c0e7b580fa9f92a355', expanded: true, variant: "disabled" }), this.required &&
-            h("mds-input-tip-item", { key: '0eec9f0ade26adfba03eb3f3f38af1c1e831af55', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (h(Host, { key: 'b217fb12291d7a274a658db14c93de159d6ef8f8' }, h("select", { key: 'ecfd2d64dafbc5fe6546122631927388976891f1', class: 'input', onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: el => this.selectEl = el }, h("option", { key: '7b6de14db97a31802fb96080bda90cc5396ec604', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), h("div", { key: 'c29136a8a74c71e1565cc31f92abdf016f9eac0d', class: "icon-container" }, h("i", { key: '64ba4ea00b6d497fb9075a8385844cf60e16051a', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '49118d50d1de9222ca611c65f22bb2e9a37abba8', class: "option-container" }, h("slot", { key: '5b437f219f6d3470c3b33d97b0d215669d9ec1b6', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'e2e5f0b16cf5e5b8a6d2c4c61b3745533247030b', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '5d5fe9dee35f5fe0c048b66abf7bebd51846ebd5', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: '158a591219c8c0bf2a94b4f4c7d5a4f2a32b00ce', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
@@ -167,7 +183,8 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
         "value": [520],
         "defaultValue": [520, "default-value"],
         "variant": [513],
-        "hasFocus": [32]
+        "hasFocus": [32],
+        "setValue": [64]
     }, undefined, {
         "value": ["valueChanged"],
         "disabled": ["disabledChanged"],

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-01-16T15:21:25",
+  "timestamp": "2026-02-23T15:00:14",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",
@@ -343,7 +343,42 @@
           "setter": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "setValue",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "(value: string | number | null) => Promise<void>",
+            "parameters": [
+              {
+                "name": "value",
+                "type": "string | number | null",
+                "docs": ""
+              }
+            ],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "setValue(value: string | number | null) => Promise<void>",
+          "parameters": [
+            {
+              "name": "value",
+              "type": "string | number | null",
+              "docs": ""
+            }
+          ],
+          "docs": "Sets the value of the component",
+          "docsTags": []
+        }
+      ],
       "events": [
         {
           "event": "mdsInputSelectChange",

package/dist/esm/{index-60887c04.js → index-fb47df34.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'mds-input-select';
-const BUILD = /* mds-input-select */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* mds-input-select */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.27.2 | MIT Licensed | https://stenciljs.com
@@ -28,6 +28,9 @@ var registerHost = (hostElement, cmpMeta) => {
     $cmpMeta$: cmpMeta,
     $instanceValues$: /* @__PURE__ */ new Map()
   };
+  {
+    hostRef.$onInstancePromise$ = new Promise((r) => hostRef.$onInstanceResolve$ = r);
+  }
   {
     hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
     hostElement["s-p"] = [];
@@ -886,6 +889,9 @@ var postUpdateComponent = (hostRef) => {
     safeCall(instance, "componentDidUpdate", void 0, elm);
     endPostUpdate();
   }
+  {
+    hostRef.$onInstanceResolve$(elm);
+  }
   {
     if (hostRef.$onRenderResolve$) {
       hostRef.$onRenderResolve$();
@@ -1051,6 +1057,17 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
             }
           }
         });
+      } else if (flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
+        Object.defineProperty(prototype, memberName, {
+          value(...args) {
+            var _a2;
+            const ref = getHostRef(this);
+            return (_a2 = ref == null ? void 0 : ref.$onInstancePromise$) == null ? void 0 : _a2.then(() => {
+              var _a3;
+              return (_a3 = ref.$lazyInstance$) == null ? void 0 : _a3[memberName](...args);
+            });
+          }
+        });
       }
     });
     if ((flags & 1 /* isElementConstructor */)) {

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-60887c04.js';
-export { s as setNonce } from './index-60887c04.js';
+import { b as bootstrapLazy } from './index-fb47df34.js';
+export { s as setNonce } from './index-fb47df34.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["mds-input-select",[[65,"mds-input-select",{"autocomplete":[513],"autoFocus":[516,"auto-focus"],"placeholder":[513],"name":[513],"disabled":[516],"required":[516],"multiple":[516],"size":[514],"value":[520],"defaultValue":[520,"default-value"],"variant":[513],"hasFocus":[32]},null,{"value":["valueChanged"],"disabled":["disabledChanged"],"placeholder":["placeholderChanged"]}]]]], options);
+  return bootstrapLazy([["mds-input-select",[[65,"mds-input-select",{"autocomplete":[513],"autoFocus":[516,"auto-focus"],"placeholder":[513],"name":[513],"disabled":[516],"required":[516],"multiple":[516],"size":[514],"value":[520],"defaultValue":[520,"default-value"],"variant":[513],"hasFocus":[32],"setValue":[64]},null,{"value":["valueChanged"],"disabled":["disabledChanged"],"placeholder":["placeholderChanged"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/mds-input-select.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-60887c04.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fb47df34.js';
 
 const miBaselineKeyboardArrowDown = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>`;
 
@@ -67,7 +67,7 @@ const MdsInputSelect = class {
             });
         };
         this.onSlotChangeHandler = () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             const elements = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')[0]) === null || _b === void 0 ? void 0 : _b.assignedNodes();
             const options = (_c = this.selectEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option');
             if (!options) {
@@ -83,22 +83,36 @@ const MdsInputSelect = class {
                 var _a;
                 (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.appendChild(element.cloneNode(true));
             });
-            if (this.value && this.selectEl) {
+            this.setCurrentValue();
+        };
+        this.setCurrentValue = () => {
+            var _a;
+            if (!this.selectEl)
+                return;
+            if (this.value) {
                 this.selectEl.querySelectorAll('option').forEach((element) => {
                     element.selected = element.value === this.value;
                 });
             }
             else if (!this.placeholder) {
-                this.value = (_d = this.selectEl) === null || _d === void 0 ? void 0 : _d.querySelectorAll('option')[0].value;
+                this.value = (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('option')[0].value;
             }
         };
     }
+    /**
+     * Sets the value of the component
+     */
+    async setValue(value) {
+        this.value = value;
+        return Promise.resolve();
+    }
     /**
      * Emits the change event when the component value changes
      */
     valueChanged() {
         var _a, _b, _c;
         this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
+        this.setCurrentValue();
         this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
     }
     disabledChanged(newValue) {
@@ -127,8 +141,10 @@ const MdsInputSelect = class {
             this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
             defaultOption.value = '';
             defaultOption.text = newValue;
-            if (!this.defaultValue)
+            if (!this.defaultValue) {
                 defaultOption.selected = true;
+                this.value = undefined;
+            }
             if (this.required)
                 defaultOption.disabled = true;
         }
@@ -148,8 +164,8 @@ const MdsInputSelect = class {
         }
     }
     render() {
-        return (h(Host, { key: '1e31a254cadf3141f66b003aeed3bbcb1912f748' }, h("select", { key: '0af51ed5c0daa0a5969d13edc7814e8f482eecea', class: 'input', onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: el => this.selectEl = el }, h("option", { key: '597095579dc1e50a927d14c111fb8ab82c7ac971', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), h("div", { key: '3daf36535e69bf3909b184ea9658b7b7b4850a7d', class: "icon-container" }, h("i", { key: 'b98d5e916a2e050af8ed94066dcf51152b90738d', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '964828e831559130e018cfc62e1fb076e0b2478b', class: "option-container" }, h("slot", { key: '394d87e522c0c6fceadcc829d39c9a277b014ae3', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '019abf7e5d56dd4eb93864bd7fd0fa28446ba0b5', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '8fc9b96596eea2eb99adc0c0e7b580fa9f92a355', expanded: true, variant: "disabled" }), this.required &&
-            h("mds-input-tip-item", { key: '0eec9f0ade26adfba03eb3f3f38af1c1e831af55', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (h(Host, { key: 'b217fb12291d7a274a658db14c93de159d6ef8f8' }, h("select", { key: 'ecfd2d64dafbc5fe6546122631927388976891f1', class: 'input', onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: el => this.selectEl = el }, h("option", { key: '7b6de14db97a31802fb96080bda90cc5396ec604', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), h("div", { key: 'c29136a8a74c71e1565cc31f92abdf016f9eac0d', class: "icon-container" }, h("i", { key: '64ba4ea00b6d497fb9075a8385844cf60e16051a', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '49118d50d1de9222ca611c65f22bb2e9a37abba8', class: "option-container" }, h("slot", { key: '5b437f219f6d3470c3b33d97b0d215669d9ec1b6', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'e2e5f0b16cf5e5b8a6d2c4c61b3745533247030b', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '5d5fe9dee35f5fe0c048b66abf7bebd51846ebd5', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: '158a591219c8c0bf2a94b4f4c7d5a4f2a32b00ce', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }

package/dist/esm/mds-input-select.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-60887c04.js';
-export { s as setNonce } from './index-60887c04.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-fb47df34.js';
+export { s as setNonce } from './index-fb47df34.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["mds-input-select",[[65,"mds-input-select",{"autocomplete":[513],"autoFocus":[516,"auto-focus"],"placeholder":[513],"name":[513],"disabled":[516],"required":[516],"multiple":[516],"size":[514],"value":[520],"defaultValue":[520,"default-value"],"variant":[513],"hasFocus":[32]},null,{"value":["valueChanged"],"disabled":["disabledChanged"],"placeholder":["placeholderChanged"]}]]]], options);
+  return bootstrapLazy([["mds-input-select",[[65,"mds-input-select",{"autocomplete":[513],"autoFocus":[516,"auto-focus"],"placeholder":[513],"name":[513],"disabled":[516],"required":[516],"multiple":[516],"size":[514],"value":[520],"defaultValue":[520,"default-value"],"variant":[513],"hasFocus":[32],"setValue":[64]},null,{"value":["valueChanged"],"disabled":["disabledChanged"],"placeholder":["placeholderChanged"]}]]]], options);
 });