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

package/dist/cjs/mds-input-select.cjs.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],"setValue":[64]},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],"language":[32],"updateLang":[64],"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

@@ -1,12 +1,15 @@
+import { Locale } from "../../common/locale";
 import miBaselineKeyboardArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
 import { Host, h } from "@stencil/core";
 /**
  * @part select - The select HTML element
+ * @part tip-top - Selects the verbose status of input on top of element
  */
 export class MdsInputSelect {
     constructor() {
         // @State() selected: boolean
         this.hasFocus = false;
+        this.t = new Locale();
         /**
          * If true, the element is displayed as disabled
          */
@@ -88,6 +91,10 @@ export class MdsInputSelect {
             }
         };
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+        this.t.update();
+    }
     /**
      * Sets the value of the component
      */
@@ -142,6 +149,7 @@ export class MdsInputSelect {
         this.internals.setFormValue('');
     }
     componentWillLoad() {
+        this.language = this.t.lang(this.host);
         // needed for react component, this prop should be used as default-value html attributo instead of defaultValue prop
         if (this.defaultValue) {
             this.value = this.defaultValue;
@@ -153,8 +161,8 @@ export class MdsInputSelect {
         }
     }
     render() {
-        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' }))));
+        return (h(Host, { key: '73f137487077d2ed0e6fef517a4c91b4a371c911' }, h("select", { key: 'e285056928bdae8ce707c63c72068313109d5226', 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: 'e30d53f050176c0a2bba4f5f65229c1f6182e337', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), h("div", { key: '3f304e1308c720a6d46a79ebf928e28dd2a046d2', class: "icon-container" }, h("i", { key: '692f675de31a78b46a515a7b0fe988e1c07c76dd', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: '240cd09bb8fcdf3bb416a1f440c18aa6cedd20cf', class: "option-container" }, h("slot", { key: 'b56a351816a66db40741ce651d4ab9450b430649', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'abc5a09146616ac8c86744c7c613ca636627f0e5', position: "top", lang: this.language, active: this.hasFocus, part: "tip-top" }, this.disabled && h("mds-input-tip-item", { key: 'b062f1fb7edee9dc5750d19483c337713051220e', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: 'd34ccd1497afcdc7ab67ebc54b874b7a64d7eb19', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get is() { return "mds-input-select"; }
     static get encapsulation() { return "shadow"; }
@@ -395,7 +403,8 @@ export class MdsInputSelect {
     }
     static get states() {
         return {
-            "hasFocus": {}
+            "hasFocus": {},
+            "language": {}
         };
     }
     static get events() {
@@ -424,6 +433,23 @@ export class MdsInputSelect {
     }
     static get methods() {
         return {
+            "updateLang": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "setValue": {
                 "complexType": {
                     "signature": "(value: string | number | null) => Promise<void>",