@maggioli-design-system/mds-input-select 3.0.1 → 3.1.0

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ 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],"variant":[513],"selected":[32],"hasFocus":[32]},null,{"value":["valueChanged"]}]]]], 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],"variant":[513],"selected":[32],"hasFocus":[32]},null,{"value":["valueChanged"],"disabled":["disabledChanged"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -102,6 +102,19 @@ const MdsInputSelect = class {
         this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
         this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
     }
+    disabledChanged(newValue) {
+        /**
+         * This is related to ALL disabled attributes set on Magma input components
+         * if solved, please check mds-button, mds-input, mds-input-*
+         * https://github.com/ionic-team/stencil/issues/5461
+         */
+        if (newValue) {
+            this.internals.setFormValue(null);
+        }
+    }
+    formResetCallback() {
+        this.internals.setFormValue('');
+    }
     componentDidLoad() {
         if (this.value) {
             this.selected = true;
@@ -109,13 +122,14 @@ const MdsInputSelect = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '81ab7f5b366ae9e842612a276b8efe1d52d21dd0' }, index.h("select", { key: '130119ceb7447ee4f8b80b5a6f7b7ac712c9f347', class: clsx('input', this.selected && 'input--selected'), 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" }, this.placeholder && index.h("option", { key: 'f56c4a89209571e5f57c0fd9edc5a3fb34e62664', value: "", disabled: true, selected: true }, this.placeholder)), index.h("div", { key: '65564368c9fc116b98a0c9159cf3191e03d49193', class: "icon-container" }, index.h("i", { key: 'd35fb6bb42e9ed84f5d7d5a2b432c7da03164eab', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), index.h("div", { key: 'd8515da7da334fbd00ff6df9ee81f8d46cfb6c8c', class: "option-container" }, index.h("slot", { key: '2209933b74c5a1dfab7673eaaaac8e23b8e15a74', onSlotchange: this.onSlotChangeHandler })), index.h("mds-input-tip", { key: 'a794103ca26e4d2312059108448e5d0643edca5d', position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '1415ed93d80ad27f2e922ea5c5176f78cf0ffa65', expanded: true, variant: "disabled" }), this.required &&
-            index.h("mds-input-tip-item", { key: '36807554f81acc5c312835587493b5be0c632157', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (index.h(index.Host, { key: '4530b7a0bc9da6176b222477f7cf41aceaf380f3' }, index.h("select", { key: '6f190cc6924b5f0da6f9703c10eec1e0c55e3360', class: clsx('input', this.selected && 'input--selected'), 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" }, this.placeholder && index.h("option", { key: 'fca8a6450fb9c1ee9b66efc9b24f7a346673b3c6', value: "", disabled: true, selected: true }, this.placeholder)), index.h("div", { key: '557463d7c2cc90f451fd9d18a9df7745352c29dd', class: "icon-container" }, index.h("i", { key: '3b5cd0ddcd86d9ac2dd16717d3536f7daff4a48c', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), index.h("div", { key: 'c341322713f8b8e739cb3e5d6a9f1b0a163cfadd', class: "option-container" }, index.h("slot", { key: 'bffb6b7b0a0be6f2f006f2776e03021fd5f59964', onSlotchange: this.onSlotChangeHandler })), index.h("mds-input-tip", { key: 'b8af860a3f766e829fc811fd8b3aba9f5e33394b', position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: 'ec17d9e2e3b3baab7d6307fa31853fa01a7f78fb', expanded: true, variant: "disabled" }), this.required &&
+            index.h("mds-input-tip-item", { key: '459e3ba038297693d650405b7af577d4a44505a8', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "value": ["valueChanged"]
+        "value": ["valueChanged"],
+        "disabled": ["disabledChanged"]
     }; }
 };
 MdsInputSelect.style = MdsInputSelectStyle0;

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],"variant":[513],"selected":[32],"hasFocus":[32]},null,{"value":["valueChanged"]}]]]], 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],"variant":[513],"selected":[32],"hasFocus":[32]},null,{"value":["valueChanged"],"disabled":["disabledChanged"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/common/slot.js

@@ -0,0 +1,13 @@
+const hasSlottedElements = (el, name) => {
+    var _a;
+    let query = 'slot';
+    if (name) {
+        query = `slot[name=${name}]`;
+    }
+    const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
+    if (slot) {
+        return slot.assignedNodes().length > 0;
+    }
+    return false;
+};
+export { hasSlottedElements, };

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

@@ -86,6 +86,19 @@ export class MdsInputSelect {
         this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
         this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
     }
+    disabledChanged(newValue) {
+        /**
+         * This is related to ALL disabled attributes set on Magma input components
+         * if solved, please check mds-button, mds-input, mds-input-*
+         * https://github.com/ionic-team/stencil/issues/5461
+         */
+        if (newValue) {
+            this.internals.setFormValue(null);
+        }
+    }
+    formResetCallback() {
+        this.internals.setFormValue('');
+    }
     componentDidLoad() {
         if (this.value) {
             this.selected = true;
@@ -93,8 +106,8 @@ export class MdsInputSelect {
         }
     }
     render() {
-        return (h(Host, { key: '81ab7f5b366ae9e842612a276b8efe1d52d21dd0' }, h("select", { key: '130119ceb7447ee4f8b80b5a6f7b7ac712c9f347', class: clsx('input', this.selected && 'input--selected'), 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" }, this.placeholder && h("option", { key: 'f56c4a89209571e5f57c0fd9edc5a3fb34e62664', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: '65564368c9fc116b98a0c9159cf3191e03d49193', class: "icon-container" }, h("i", { key: 'd35fb6bb42e9ed84f5d7d5a2b432c7da03164eab', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'd8515da7da334fbd00ff6df9ee81f8d46cfb6c8c', class: "option-container" }, h("slot", { key: '2209933b74c5a1dfab7673eaaaac8e23b8e15a74', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'a794103ca26e4d2312059108448e5d0643edca5d', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '1415ed93d80ad27f2e922ea5c5176f78cf0ffa65', expanded: true, variant: "disabled" }), this.required &&
-            h("mds-input-tip-item", { key: '36807554f81acc5c312835587493b5be0c632157', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (h(Host, { key: '4530b7a0bc9da6176b222477f7cf41aceaf380f3' }, h("select", { key: '6f190cc6924b5f0da6f9703c10eec1e0c55e3360', class: clsx('input', this.selected && 'input--selected'), 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" }, this.placeholder && h("option", { key: 'fca8a6450fb9c1ee9b66efc9b24f7a346673b3c6', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: '557463d7c2cc90f451fd9d18a9df7745352c29dd', class: "icon-container" }, h("i", { key: '3b5cd0ddcd86d9ac2dd16717d3536f7daff4a48c', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'c341322713f8b8e739cb3e5d6a9f1b0a163cfadd', class: "option-container" }, h("slot", { key: 'bffb6b7b0a0be6f2f006f2776e03021fd5f59964', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'b8af860a3f766e829fc811fd8b3aba9f5e33394b', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'ec17d9e2e3b3baab7d6307fa31853fa01a7f78fb', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: '459e3ba038297693d650405b7af577d4a44505a8', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get is() { return "mds-input-select"; }
     static get encapsulation() { return "shadow"; }
@@ -329,6 +342,9 @@ export class MdsInputSelect {
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
             }];
     }
     static get attachInternalsMemberName() { return "internals"; }

package/dist/collection/dictionary/animation.js

@@ -0,0 +1,5 @@
+const horizontalActionsAnimationDictionary = [
+    'fade',
+    'slide',
+];
+export { horizontalActionsAnimationDictionary, };

package/dist/collection/dictionary/file-extensions.js

@@ -14,8 +14,8 @@ const fileExtensionsDictionary = {
     exe: { format: 'executable', description: 'fileEXE' },
     flac: { format: 'audio', description: 'uncompressedAudio' },
     gif: { format: 'image', description: 'compressedImage', preview: true },
-    htm: { format: 'markup', description: 'documentWeb' },
     heic: { format: 'image', description: 'imageHEFF' },
+    htm: { format: 'markup', description: 'documentWeb' },
     html: { format: 'markup', description: 'documentWeb' },
     jpe: { format: 'image', description: 'compressedImage', preview: true },
     jpeg: { format: 'image', description: 'compressedImage', preview: true },
@@ -32,9 +32,12 @@ const fileExtensionsDictionary = {
     mpg4: { format: 'video', description: 'videoSD' },
     mpg: { format: 'video', description: 'videoSD' },
     mpga: { format: 'audio', description: 'compressedAudio' },
+    odf: { format: 'document', description: 'openDocumentFormat' },
     odp: { format: 'slide', description: 'slideLO' },
     ods: { format: 'spreadsheet', description: 'spreadsheetLO' },
     odt: { format: 'text', description: 'documentLO' },
+    ole: { format: 'document', description: 'objectLinkingAndEmbedding' },
+    p7m: { format: 'certificate', description: 'documentDigitalSingnature' },
     pdf: { format: 'document', description: 'documentAdobe' },
     php: { format: 'code', description: 'filePHP' },
     png: { format: 'image', description: 'imagePNG', preview: true },
@@ -47,6 +50,7 @@ const fileExtensionsDictionary = {
     tar: { format: 'archive', description: 'uncompressedArchive' },
     tiff: { format: 'image', description: 'imageTIFF' },
     ts: { format: 'code', description: 'fileTS' },
+    tsd: { format: 'certificate', description: 'certificateTSD' },
     tsx: { format: 'code', description: 'fileTSX' },
     txt: { format: 'text', description: 'documentTXT' },
     wav: { format: 'audio', description: 'uncompressedAudio' },
@@ -54,66 +58,9 @@ const fileExtensionsDictionary = {
     xar: { format: 'archive', description: 'compressedArchive' },
     xls: { format: 'spreadsheet', description: 'spreadsheetMS' },
     xlsx: { format: 'spreadsheet', description: 'spreadsheetMS' },
+    xml: { format: 'markup', description: 'extensibleMarkupLanguage' },
     zip: { format: 'archive', description: 'compressedArchive' },
 };
-// const fileExtensionsDictionary: FileExtenstion = {
-//   '7z': { format: 'archive', description: 'Archivio compresso' },
-//   ace: { format: 'archive', description: 'Archivio compresso' },
-//   ai: { format: 'vector', description: 'Vettoriale Adobe Illustrator' },
-//   dart: { format: 'code', description: 'Dart' },
-//   db: { format: 'data', description: 'File di database' },
-//   default: { format: 'attachment', description: 'Formato sconosciuto' },
-//   dmg: { format: 'executable', description: 'Apple Disk Image' },
-//   doc: { format: 'text', description: 'Documento Microsoft Word' },
-//   docm: { format: 'text', description: 'Documento Microsoft Word' },
-//   docx: { format: 'text', description: 'Documento Microsoft Word Compresso' },
-//   eml: { format: 'email', description: 'E-mail di posta elettronica' },
-//   eps: { format: 'vector', description: 'Vettoriale Corel Draw' },
-//   exe: { format: 'executable', description: 'File eseguibile Windows' },
-//   flac: { format: 'audio', description: 'Audio non compresso' },
-//   gif: { format: 'image', description: 'Immagine compressa', preview: true },
-//   htm: { format: 'markup', description: 'Pagina web' },
-//   heic: { format: 'image', description: 'High Efficiency Image File Format' },
-//   html: { format: 'markup', description: 'Pagina web' },
-//   jpe: { format: 'image', description: 'Immagine compressa', preview: true },
-//   jpeg: { format: 'image', description: 'Immagine compressa', preview: true },
-//   jpg: { format: 'image', description: 'Immagine compressa', preview: true },
-//   js: { format: 'code', description: 'JavaScript' },
-//   json: { format: 'data', description: 'JavaScript Object Notation' },
-//   jsx: { format: 'code', description: 'JavaScript' },
-//   m2v: { format: 'video', description: 'Filmato SD' },
-//   mp2: { format: 'audio', description: 'Audio compresso' },
-//   mp3: { format: 'audio', description: 'Audio compresso' },
-//   mp4: { format: 'video', description: 'Filmato HD' },
-//   mp4v: { format: 'video', description: 'Filmato HD' },
-//   mpeg: { format: 'video', description: 'Filmato SD' },
-//   mpg4: { format: 'video', description: 'Filmato SD' },
-//   mpg: { format: 'video', description: 'Filmato SD' },
-//   mpga: { format: 'audio', description: 'Audio compresso' },
-//   odp: { format: 'slide', description: 'Slide di presentazione LibreOffice' },
-//   ods: { format: 'spreadsheet', description: 'Foglio di calcolo LibreOffice' },
-//   odt: { format: 'text', description: 'File di testo LibreOffice' },
-//   pdf: { format: 'document', description: 'Documento Adobe' },
-//   php: { format: 'code', description: 'Hypertext Preprocessor' },
-//   png: { format: 'image', description: 'Immagine Portable Network Graphics', preview: true },
-//   ppt: { format: 'slide', description: 'Slide di presentazione PowerPoint' },
-//   rar: { format: 'archive', description: 'Archivio compresso' },
-//   rtf: { format: 'text', description: 'Documento di testo Rich Text Format' },
-//   sass: { format: 'code', description: 'Syntactically Awesome StyleSheets' },
-//   shtml: { format: 'markup', description: 'Pagina web' },
-//   svg: { format: 'vector', description: 'Scalable Vector Graphics', preview: true },
-//   tar: { format: 'archive', description: 'Archivio non compresso' },
-//   tiff: { format: 'image', description: 'Tag Image File Format' },
-//   ts: { format: 'code', description: 'TypeScript' },
-//   tsx: { format: 'code', description: 'TypeScript Extended Syntax' },
-//   txt: { format: 'text', description: 'Documento di testo non formattato' },
-//   wav: { format: 'audio', description: 'Audio non compresso' },
-//   webp: { format: 'image', description: 'Immagine Web Picture', preview: true },
-//   xar: { format: 'archive', description: 'Archivio compresso' },
-//   xls: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
-//   xlsx: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
-//   zip: { format: 'archive', description: 'Archivio compresso' },
-// }
 const genericMimeToExt = new Map([
     ['image', ['.png', '.jpg', '.jpeg', '.tiff', '.webp', '.jpe', '.gif', '.heic']],
     ['audio', ['.mp2', '.mp3', '.mpga', '.wav', '.flac']],

package/dist/collection/fixtures/filenames.js

@@ -54,4 +54,65 @@ const filesList = [
     'wisconsin_bypassing_small.xar',
     'wooden.jsx',
 ];
-export { filesList, };
+const namedFilesList = {
+    '7z': 'frozen_haptic.7z',
+    'No extension file': 'this_is_an_extensionless_file',
+    'png with URL': 'https://i2.wp.com/clipart.info/images/ccovers/1495750818Apple-PNG-Clip-Art.png',
+    ace: 'sky_marketing.ace',
+    ai: 'foreground_overriding.ai',
+    db: 'matrix_black_hat.db',
+    default: 'copying.default',
+    dmg: 'protocol_designer.dmg',
+    doc: 'forges.doc',
+    docm: 'officer_somalia.docm',
+    docx: 'upgradable_gold.docx',
+    eml: 'brunei_logistical.eml',
+    eps: 'alarm_circuit_plastic.eps',
+    exe: 'rss_systematic_avon.exe',
+    flac: 'liaison_panel_central.flac',
+    gif: 'initiatives_group.gif',
+    htm: 'books_monetize_arizona.htm',
+    html: 'flexibility_auto_money.html',
+    jpe: 'intelligent_radical.jpe',
+    jpeg: 'iowa_installation.jpeg',
+    jpg: 'buckinghamshire_macao.jpg',
+    js: 'monitor.js',
+    json: 'calculating.json',
+    jsx: 'wooden.jsx',
+    m2v: 'interface_bedfordshire_solid.m2v',
+    mp2: 'explicit.mp2',
+    mp3: 'optimization_radical.mp3',
+    mp4: 'nebraska.mp4',
+    mp4v: 'reduced_regional_greenland.mp4v',
+    mpeg: 'impactful_alarm_handmade.mpeg',
+    mpg4: 'revolutionize.mpg4',
+    mpg: 'complexity_deposit.mpg',
+    mpga: 'ports_copy_granite.mpga',
+    odf: 'This is a file_to_read.odf',
+    odp: 'needs_based_solid.odp',
+    ods: 'compressing_black_colorado.ods',
+    odt: 'salad_compressing.odt',
+    ole: 'Document-RPF_Open-new.ole',
+    p7m: 'file with certificate from government.pdf.p7m',
+    pdf: 'connect_local_visualize.pdf',
+    php: 'fish.php',
+    png: 'awesome_orchestration.png',
+    ppt: 'gorgeous_manager_savings.ppt',
+    rar: 'unbranded.rar',
+    rtf: 'pound.rtf',
+    sass: 'open_source_gorgeous.sass',
+    shtml: 'brand.shtml',
+    svg: 'b2c_tan_sports.svg',
+    tar: 'graphic_frozen_bedfordshire.tar',
+    ts: 'forge_face.ts',
+    tsd: 'Marked file-7483274hy6Fg6R8.tsd',
+    txt: 'bedfordshire_iceland_identity.txt',
+    wav: 'synergistic.wav',
+    webp: 'open_source.webp',
+    xar: 'wisconsin_bypassing_small.xar',
+    xls: 'metrics_lempira_account.xls',
+    xlsx: 'hdd_navigate_panama.xlsx',
+    xml: 'Markup language.xml',
+    zip: 'tuna_table_fall.zip',
+};
+export { filesList, namedFilesList, };

package/dist/collection/type/animation.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/type/variant-file-format.js

@@ -3,6 +3,7 @@ import baselineAttachFile from "@icon/mi/baseline/attach-file.svg";
 import baselineAudiotrack from "@icon/mi/baseline/audiotrack.svg";
 import baselineTerminal from "@icon/mi/baseline/terminal.svg";
 import baselineInsertDriveFile from "@icon/mi/baseline/insert-drive-file.svg";
+import mdiLicense from "@icon/mdi/license.svg";
 import mdiHardDisk from "@icon/mdi/harddisk.svg";
 import baselineEmail from "@icon/mi/baseline/email.svg";
 import baselineWysiwyg from "@icon/mi/baseline/wysiwyg.svg";
@@ -26,6 +27,10 @@ const fileFormatsVariant = {
         icon: baselineAudiotrack,
         variant: 'violet',
     },
+    certificate: {
+        icon: mdiLicense,
+        variant: 'orange',
+    },
     code: {
         icon: baselineTerminal,
         variant: 'yellow',

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

@@ -94,6 +94,19 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
         this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
         this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
     }
+    disabledChanged(newValue) {
+        /**
+         * This is related to ALL disabled attributes set on Magma input components
+         * if solved, please check mds-button, mds-input, mds-input-*
+         * https://github.com/ionic-team/stencil/issues/5461
+         */
+        if (newValue) {
+            this.internals.setFormValue(null);
+        }
+    }
+    formResetCallback() {
+        this.internals.setFormValue('');
+    }
     componentDidLoad() {
         if (this.value) {
             this.selected = true;
@@ -101,13 +114,14 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
         }
     }
     render() {
-        return (h(Host, { key: '81ab7f5b366ae9e842612a276b8efe1d52d21dd0' }, h("select", { key: '130119ceb7447ee4f8b80b5a6f7b7ac712c9f347', class: clsx('input', this.selected && 'input--selected'), 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" }, this.placeholder && h("option", { key: 'f56c4a89209571e5f57c0fd9edc5a3fb34e62664', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: '65564368c9fc116b98a0c9159cf3191e03d49193', class: "icon-container" }, h("i", { key: 'd35fb6bb42e9ed84f5d7d5a2b432c7da03164eab', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'd8515da7da334fbd00ff6df9ee81f8d46cfb6c8c', class: "option-container" }, h("slot", { key: '2209933b74c5a1dfab7673eaaaac8e23b8e15a74', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'a794103ca26e4d2312059108448e5d0643edca5d', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '1415ed93d80ad27f2e922ea5c5176f78cf0ffa65', expanded: true, variant: "disabled" }), this.required &&
-            h("mds-input-tip-item", { key: '36807554f81acc5c312835587493b5be0c632157', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (h(Host, { key: '4530b7a0bc9da6176b222477f7cf41aceaf380f3' }, h("select", { key: '6f190cc6924b5f0da6f9703c10eec1e0c55e3360', class: clsx('input', this.selected && 'input--selected'), 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" }, this.placeholder && h("option", { key: 'fca8a6450fb9c1ee9b66efc9b24f7a346673b3c6', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: '557463d7c2cc90f451fd9d18a9df7745352c29dd', class: "icon-container" }, h("i", { key: '3b5cd0ddcd86d9ac2dd16717d3536f7daff4a48c', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'c341322713f8b8e739cb3e5d6a9f1b0a163cfadd', class: "option-container" }, h("slot", { key: 'bffb6b7b0a0be6f2f006f2776e03021fd5f59964', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'b8af860a3f766e829fc811fd8b3aba9f5e33394b', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'ec17d9e2e3b3baab7d6307fa31853fa01a7f78fb', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: '459e3ba038297693d650405b7af577d4a44505a8', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
     static get watchers() { return {
-        "value": ["valueChanged"]
+        "value": ["valueChanged"],
+        "disabled": ["disabledChanged"]
     }; }
     static get style() { return MdsInputSelectStyle0; }
 }, [65, "mds-input-select", {
@@ -124,7 +138,8 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
         "selected": [32],
         "hasFocus": [32]
     }, undefined, {
-        "value": ["valueChanged"]
+        "value": ["valueChanged"],
+        "disabled": ["disabledChanged"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-12-04T17:28:26",
+  "timestamp": "2024-12-19T15:44:16",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.22.2",

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ 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],"variant":[513],"selected":[32],"hasFocus":[32]},null,{"value":["valueChanged"]}]]]], 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],"variant":[513],"selected":[32],"hasFocus":[32]},null,{"value":["valueChanged"],"disabled":["disabledChanged"]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -98,6 +98,19 @@ const MdsInputSelect = class {
         this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
         this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
     }
+    disabledChanged(newValue) {
+        /**
+         * This is related to ALL disabled attributes set on Magma input components
+         * if solved, please check mds-button, mds-input, mds-input-*
+         * https://github.com/ionic-team/stencil/issues/5461
+         */
+        if (newValue) {
+            this.internals.setFormValue(null);
+        }
+    }
+    formResetCallback() {
+        this.internals.setFormValue('');
+    }
     componentDidLoad() {
         if (this.value) {
             this.selected = true;
@@ -105,13 +118,14 @@ const MdsInputSelect = class {
         }
     }
     render() {
-        return (h(Host, { key: '81ab7f5b366ae9e842612a276b8efe1d52d21dd0' }, h("select", { key: '130119ceb7447ee4f8b80b5a6f7b7ac712c9f347', class: clsx('input', this.selected && 'input--selected'), 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" }, this.placeholder && h("option", { key: 'f56c4a89209571e5f57c0fd9edc5a3fb34e62664', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: '65564368c9fc116b98a0c9159cf3191e03d49193', class: "icon-container" }, h("i", { key: 'd35fb6bb42e9ed84f5d7d5a2b432c7da03164eab', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'd8515da7da334fbd00ff6df9ee81f8d46cfb6c8c', class: "option-container" }, h("slot", { key: '2209933b74c5a1dfab7673eaaaac8e23b8e15a74', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'a794103ca26e4d2312059108448e5d0643edca5d', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '1415ed93d80ad27f2e922ea5c5176f78cf0ffa65', expanded: true, variant: "disabled" }), this.required &&
-            h("mds-input-tip-item", { key: '36807554f81acc5c312835587493b5be0c632157', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (h(Host, { key: '4530b7a0bc9da6176b222477f7cf41aceaf380f3' }, h("select", { key: '6f190cc6924b5f0da6f9703c10eec1e0c55e3360', class: clsx('input', this.selected && 'input--selected'), 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" }, this.placeholder && h("option", { key: 'fca8a6450fb9c1ee9b66efc9b24f7a346673b3c6', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: '557463d7c2cc90f451fd9d18a9df7745352c29dd', class: "icon-container" }, h("i", { key: '3b5cd0ddcd86d9ac2dd16717d3536f7daff4a48c', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'c341322713f8b8e739cb3e5d6a9f1b0a163cfadd', class: "option-container" }, h("slot", { key: 'bffb6b7b0a0be6f2f006f2776e03021fd5f59964', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'b8af860a3f766e829fc811fd8b3aba9f5e33394b', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'ec17d9e2e3b3baab7d6307fa31853fa01a7f78fb', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: '459e3ba038297693d650405b7af577d4a44505a8', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "value": ["valueChanged"]
+        "value": ["valueChanged"],
+        "disabled": ["disabledChanged"]
     }; }
 };
 MdsInputSelect.style = MdsInputSelectStyle0;

package/dist/esm/mds-input-select.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],"variant":[513],"selected":[32],"hasFocus":[32]},null,{"value":["valueChanged"]}]]]], 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],"variant":[513],"selected":[32],"hasFocus":[32]},null,{"value":["valueChanged"],"disabled":["disabledChanged"]}]]]], options);
 });

package/dist/esm-es5/loader.js

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function u(e){try{c(r.next(e))}catch(e){o(e)}}function a(e){try{c(r["throw"](e))}catch(e){o(e)}}function c(e){e.done?n(e.value):i(e.value).then(u,a)}c((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,u;return u={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function a(e){return function(t){return c([e,t])}}function c(a){if(r)throw new TypeError("Generator is already executing.");while(u&&(u=0,a[0]&&(n=0)),n)try{if(r=1,i&&(o=a[0]&2?i["return"]:a[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,a[1])).done)return o;if(i=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;i=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){n.label=a[1];break}if(a[0]===6&&n.label<o[1]){n.label=o[1];o=a;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(a);break}if(o[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(e){a=[6,e];i=0}finally{r=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{b as bootstrapLazy}from"./index-f99575c3.js";export{s as setNonce}from"./index-f99575c3.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var defineCustomElements=function(e,t){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(typeof window==="undefined")return[2,undefined];return[4,globalScripts()];case 1:e.sent();return[2,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],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"]}]]]],t)]}}))}))};export{defineCustomElements};
+var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function a(e){try{c(r.next(e))}catch(e){o(e)}}function u(e){try{c(r["throw"](e))}catch(e){o(e)}}function c(e){e.done?n(e.value):i(e.value).then(a,u)}c((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a;return a={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function u(e){return function(t){return c([e,t])}}function c(u){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,u[0]&&(n=0)),n)try{if(r=1,i&&(o=u[0]&2?i["return"]:u[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,u[1])).done)return o;if(i=0,o)u=[u[0]&2,o.value];switch(u[0]){case 0:case 1:o=u;break;case 4:n.label++;return{value:u[1],done:false};case 5:n.label++;i=u[1];u=[0];continue;case 7:u=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(u[0]===6||u[0]===2)){n=0;continue}if(u[0]===3&&(!o||u[1]>o[0]&&u[1]<o[3])){n.label=u[1];break}if(u[0]===6&&n.label<o[1]){n.label=o[1];o=u;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(u);break}if(o[2])n.ops.pop();n.trys.pop();continue}u=t.call(e,n)}catch(e){u=[6,e];i=0}finally{r=o=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};import{b as bootstrapLazy}from"./index-f99575c3.js";export{s as setNonce}from"./index-f99575c3.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var defineCustomElements=function(e,t){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(typeof window==="undefined")return[2,undefined];return[4,globalScripts()];case 1:e.sent();return[2,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],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"],disabled:["disabledChanged"]}]]]],t)]}}))}))};export{defineCustomElements};

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

@@ -1 +1 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-f99575c3.js";function r(n){var t,o,e="";if("string"==typeof n||"number"==typeof n)e+=n;else if("object"==typeof n)if(Array.isArray(n)){var i=n.length;for(t=0;t<i;t++)n[t]&&(o=r(n[t]))&&(e&&(e+=" "),e+=o)}else for(o in n)n[o]&&(e&&(e+=" "),e+=o);return e}function clsx(){for(var n,t,o=0,e="",i=arguments.length;o<i;o++)(n=arguments[o])&&(t=r(n))&&(e&&(e+=" "),e+=t);return e}var 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>';var mdsInputSelectCss='@tailwind components;\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host([required]:not([required="false"]):focus-within) .icon {\n  -webkit-transform: translate(0.375rem, 0.375rem);\n  transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n  --mds-input-select-variant-color: var(--variant-primary-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, fill;\n  transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon {\n  fill: rgb(var(--tone-neutral-06));\n  -webkit-transform: translate(0.625rem, 0.5rem);\n  transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n  -webkit-transition-property: background-color, fill;\n  transition-property: background-color, fill;\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--variant-primary-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--variant-primary-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host( [variant="info"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant="success"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant="warning"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant="error"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n';var MdsInputSelectStyle0=mdsInputSelectCss;var MdsInputSelect=function(){function n(n){var r=this;registerInstance(this,n);this.changeEvent=createEvent(this,"mdsInputSelectChange",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.onInput=function(n){var t=n.target;if(t){r.value=t.value}};this.onBlur=function(){r.hasFocus=false};this.onFocus=function(){r.hasFocus=true};this.emptyOptions=function(){var n;var t=(n=r.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("select");var o=t===null||t===void 0?void 0:t.querySelectorAll("option");if(!o){return}o.forEach((function(n,t){if(!r.placeholder){n.remove()}if(r.placeholder&&t>0){n.remove()}}))};this.onSlotChangeHandler=function(){var n,t,o;var e=(t=(n=r.host.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("slot")[0])===null||t===void 0?void 0:t.assignedNodes();var i=(o=r.host.shadowRoot)===null||o===void 0?void 0:o.querySelector("select");var s=i===null||i===void 0?void 0:i.querySelectorAll("option");if(!s){return}if(!r.placeholder&&s.length>0){r.emptyOptions()}if(r.placeholder&&s.length>1){r.emptyOptions()}e===null||e===void 0?void 0:e.forEach((function(n){i===null||i===void 0?void 0:i.appendChild(n.cloneNode(true))}));if(r.value){i===null||i===void 0?void 0:i.querySelectorAll("option").forEach((function(n){n.selected=n.value===r.value}))}else if(!r.placeholder){r.value=i===null||i===void 0?void 0:i.querySelectorAll("option")[0].value}};this.selected=undefined;this.hasFocus=false;this.autocomplete=undefined;this.autoFocus=undefined;this.placeholder=undefined;this.name=undefined;this.disabled=false;this.required=false;this.multiple=false;this.size=0;this.value="";this.variant=undefined}n.prototype.valueChanged=function(){var n,r,t;this.selected=this.value!=="";this.changeEvent.emit({value:(n=this.value)===null||n===void 0?void 0:n.toString()});this.internals.setFormValue((t=(r=this.value)===null||r===void 0?void 0:r.toString())!==null&&t!==void 0?t:null)};n.prototype.componentDidLoad=function(){if(this.value){this.selected=true;this.internals.setFormValue(this.value.toString())}};n.prototype.render=function(){return h(Host,{key:"81ab7f5b366ae9e842612a276b8efe1d52d21dd0"},h("select",{key:"130119ceb7447ee4f8b80b5a6f7b7ac712c9f347",class:clsx("input",this.selected&&"input--selected"),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"},this.placeholder&&h("option",{key:"f56c4a89209571e5f57c0fd9edc5a3fb34e62664",value:"",disabled:true,selected:true},this.placeholder)),h("div",{key:"65564368c9fc116b98a0c9159cf3191e03d49193",class:"icon-container"},h("i",{key:"d35fb6bb42e9ed84f5d7d5a2b432c7da03164eab",class:"icon",innerHTML:miBaselineKeyboardArrowDown})),h("div",{key:"d8515da7da334fbd00ff6df9ee81f8d46cfb6c8c",class:"option-container"},h("slot",{key:"2209933b74c5a1dfab7673eaaaac8e23b8e15a74",onSlotchange:this.onSlotChangeHandler})),h("mds-input-tip",{key:"a794103ca26e4d2312059108448e5d0643edca5d",position:"top",active:this.hasFocus},this.disabled&&h("mds-input-tip-item",{key:"1415ed93d80ad27f2e922ea5c5176f78cf0ffa65",expanded:true,variant:"disabled"}),this.required&&h("mds-input-tip-item",{key:"36807554f81acc5c312835587493b5be0c632157",expanded:this.hasFocus,variant:this.value===""?"required":"required-success"})))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return n}();MdsInputSelect.style=MdsInputSelectStyle0;export{MdsInputSelect as mds_input_select};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-f99575c3.js";function r(n){var t,o,e="";if("string"==typeof n||"number"==typeof n)e+=n;else if("object"==typeof n)if(Array.isArray(n)){var i=n.length;for(t=0;t<i;t++)n[t]&&(o=r(n[t]))&&(e&&(e+=" "),e+=o)}else for(o in n)n[o]&&(e&&(e+=" "),e+=o);return e}function clsx(){for(var n,t,o=0,e="",i=arguments.length;o<i;o++)(n=arguments[o])&&(t=r(n))&&(e&&(e+=" "),e+=t);return e}var 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>';var mdsInputSelectCss='@tailwind components;\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host([required]:not([required="false"]):focus-within) .icon {\n  -webkit-transform: translate(0.375rem, 0.375rem);\n  transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n  --mds-input-select-variant-color: var(--variant-primary-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, fill;\n  transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon {\n  fill: rgb(var(--tone-neutral-06));\n  -webkit-transform: translate(0.625rem, 0.5rem);\n  transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n  -webkit-transition-property: background-color, fill;\n  transition-property: background-color, fill;\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--variant-primary-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--variant-primary-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host( [variant="info"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant="success"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant="warning"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant="error"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n';var MdsInputSelectStyle0=mdsInputSelectCss;var MdsInputSelect=function(){function n(n){var r=this;registerInstance(this,n);this.changeEvent=createEvent(this,"mdsInputSelectChange",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.onInput=function(n){var t=n.target;if(t){r.value=t.value}};this.onBlur=function(){r.hasFocus=false};this.onFocus=function(){r.hasFocus=true};this.emptyOptions=function(){var n;var t=(n=r.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("select");var o=t===null||t===void 0?void 0:t.querySelectorAll("option");if(!o){return}o.forEach((function(n,t){if(!r.placeholder){n.remove()}if(r.placeholder&&t>0){n.remove()}}))};this.onSlotChangeHandler=function(){var n,t,o;var e=(t=(n=r.host.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("slot")[0])===null||t===void 0?void 0:t.assignedNodes();var i=(o=r.host.shadowRoot)===null||o===void 0?void 0:o.querySelector("select");var s=i===null||i===void 0?void 0:i.querySelectorAll("option");if(!s){return}if(!r.placeholder&&s.length>0){r.emptyOptions()}if(r.placeholder&&s.length>1){r.emptyOptions()}e===null||e===void 0?void 0:e.forEach((function(n){i===null||i===void 0?void 0:i.appendChild(n.cloneNode(true))}));if(r.value){i===null||i===void 0?void 0:i.querySelectorAll("option").forEach((function(n){n.selected=n.value===r.value}))}else if(!r.placeholder){r.value=i===null||i===void 0?void 0:i.querySelectorAll("option")[0].value}};this.selected=undefined;this.hasFocus=false;this.autocomplete=undefined;this.autoFocus=undefined;this.placeholder=undefined;this.name=undefined;this.disabled=false;this.required=false;this.multiple=false;this.size=0;this.value="";this.variant=undefined}n.prototype.valueChanged=function(){var n,r,t;this.selected=this.value!=="";this.changeEvent.emit({value:(n=this.value)===null||n===void 0?void 0:n.toString()});this.internals.setFormValue((t=(r=this.value)===null||r===void 0?void 0:r.toString())!==null&&t!==void 0?t:null)};n.prototype.disabledChanged=function(n){if(n){this.internals.setFormValue(null)}};n.prototype.formResetCallback=function(){this.internals.setFormValue("")};n.prototype.componentDidLoad=function(){if(this.value){this.selected=true;this.internals.setFormValue(this.value.toString())}};n.prototype.render=function(){return h(Host,{key:"4530b7a0bc9da6176b222477f7cf41aceaf380f3"},h("select",{key:"6f190cc6924b5f0da6f9703c10eec1e0c55e3360",class:clsx("input",this.selected&&"input--selected"),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"},this.placeholder&&h("option",{key:"fca8a6450fb9c1ee9b66efc9b24f7a346673b3c6",value:"",disabled:true,selected:true},this.placeholder)),h("div",{key:"557463d7c2cc90f451fd9d18a9df7745352c29dd",class:"icon-container"},h("i",{key:"3b5cd0ddcd86d9ac2dd16717d3536f7daff4a48c",class:"icon",innerHTML:miBaselineKeyboardArrowDown})),h("div",{key:"c341322713f8b8e739cb3e5d6a9f1b0a163cfadd",class:"option-container"},h("slot",{key:"bffb6b7b0a0be6f2f006f2776e03021fd5f59964",onSlotchange:this.onSlotChangeHandler})),h("mds-input-tip",{key:"b8af860a3f766e829fc811fd8b3aba9f5e33394b",position:"top",active:this.hasFocus},this.disabled&&h("mds-input-tip-item",{key:"ec17d9e2e3b3baab7d6307fa31853fa01a7f78fb",expanded:true,variant:"disabled"}),this.required&&h("mds-input-tip-item",{key:"459e3ba038297693d650405b7af577d4a44505a8",expanded:this.hasFocus,variant:this.value===""?"required":"required-success"})))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"],disabled:["disabledChanged"]}},enumerable:false,configurable:true});return n}();MdsInputSelect.style=MdsInputSelectStyle0;export{MdsInputSelect as mds_input_select};

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

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(e,t,r,n){function o(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,i){function a(e){try{c(n.next(e))}catch(e){i(e)}}function u(e){try{c(n["throw"](e))}catch(e){i(e)}}function c(e){e.done?r(e.value):o(e.value).then(a,u)}c((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var r={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},n,o,i,a;return a={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function u(e){return function(t){return c([e,t])}}function c(u){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,u[0]&&(r=0)),r)try{if(n=1,o&&(i=u[0]&2?o["return"]:u[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,u[1])).done)return i;if(o=0,i)u=[u[0]&2,i.value];switch(u[0]){case 0:case 1:i=u;break;case 4:r.label++;return{value:u[1],done:false};case 5:r.label++;o=u[1];u=[0];continue;case 7:u=r.ops.pop();r.trys.pop();continue;default:if(!(i=r.trys,i=i.length>0&&i[i.length-1])&&(u[0]===6||u[0]===2)){r=0;continue}if(u[0]===3&&(!i||u[1]>i[0]&&u[1]<i[3])){r.label=u[1];break}if(u[0]===6&&r.label<i[1]){r.label=i[1];i=u;break}if(i&&r.label<i[2]){r.label=i[2];r.ops.push(u);break}if(i[2])r.ops.pop();r.trys.pop();continue}u=t.call(e,r)}catch(e){u=[6,e];o=0}finally{n=i=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};import{p as promiseResolve,b as bootstrapLazy}from"./index-f99575c3.js";export{s as setNonce}from"./index-f99575c3.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var patchBrowser=function(){var e=import.meta.url;var t={};if(e!==""){t.resourcesUrl=new URL(".",e).href}return promiseResolve(t)};patchBrowser().then((function(e){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,globalScripts()];case 1:t.sent();return[2,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],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"]}]]]],e)]}}))}))}));
+var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function a(e){try{c(r.next(e))}catch(e){o(e)}}function u(e){try{c(r["throw"](e))}catch(e){o(e)}}function c(e){e.done?n(e.value):i(e.value).then(a,u)}c((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a;return a={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function u(e){return function(t){return c([e,t])}}function c(u){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,u[0]&&(n=0)),n)try{if(r=1,i&&(o=u[0]&2?i["return"]:u[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,u[1])).done)return o;if(i=0,o)u=[u[0]&2,o.value];switch(u[0]){case 0:case 1:o=u;break;case 4:n.label++;return{value:u[1],done:false};case 5:n.label++;i=u[1];u=[0];continue;case 7:u=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(u[0]===6||u[0]===2)){n=0;continue}if(u[0]===3&&(!o||u[1]>o[0]&&u[1]<o[3])){n.label=u[1];break}if(u[0]===6&&n.label<o[1]){n.label=o[1];o=u;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(u);break}if(o[2])n.ops.pop();n.trys.pop();continue}u=t.call(e,n)}catch(e){u=[6,e];i=0}finally{r=o=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};import{p as promiseResolve,b as bootstrapLazy}from"./index-f99575c3.js";export{s as setNonce}from"./index-f99575c3.js";import{g as globalScripts}from"./app-globals-0f993ce5.js";var patchBrowser=function(){var e=import.meta.url;var t={};if(e!==""){t.resourcesUrl=new URL(".",e).href}return promiseResolve(t)};patchBrowser().then((function(e){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,globalScripts()];case 1:t.sent();return[2,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],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"],disabled:["disabledChanged"]}]]]],e)]}}))}))}));

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

@@ -1 +1 @@
-import{p as e,b as a}from"./p-ecf343d4.js";export{s as setNonce}from"./p-ecf343d4.js";import{g as t}from"./p-e1255160.js";(()=>{const a=import.meta.url,s={};return""!==a&&(s.resourcesUrl=new URL(".",a).href),e(s)})().then((async e=>(await t(),a([["p-99fd6ce0",[[65,"mds-input-select",{autocomplete:[513],autoFocus:[516,"auto-focus"],placeholder:[513],name:[513],disabled:[516],required:[516],multiple:[516],size:[514],value:[520],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"]}]]]],e))));
+import{p as e,b as a}from"./p-ecf343d4.js";export{s as setNonce}from"./p-ecf343d4.js";import{g as t}from"./p-e1255160.js";(()=>{const a=import.meta.url,s={};return""!==a&&(s.resourcesUrl=new URL(".",a).href),e(s)})().then((async e=>(await t(),a([["p-0511e8d9",[[65,"mds-input-select",{autocomplete:[513],autoFocus:[516,"auto-focus"],placeholder:[513],name:[513],disabled:[516],required:[516],multiple:[516],size:[514],value:[520],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"],disabled:["disabledChanged"]}]]]],e))));