@maggioli-design-system/magma 1.10.15 → 1.10.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/mds-input-select.cjs.entry.js +8 -4
- package/dist/cjs/mds-input-upload.cjs.entry.js +5 -3
- package/dist/collection/components/mds-input-select/mds-input-select.js +8 -4
- package/dist/collection/components/mds-input-upload/mds-input-upload.js +5 -3
- package/dist/components/mds-input-select.js +8 -4
- package/dist/components/mds-input-upload.js +5 -3
- package/dist/documentation.json +1 -1
- package/dist/esm/mds-input-select.entry.js +8 -4
- package/dist/esm/mds-input-upload.entry.js +5 -3
- package/dist/esm-es5/mds-input-select.entry.js +1 -1
- package/dist/esm-es5/mds-input-upload.entry.js +1 -1
- package/dist/hydrate/index.js +13 -7
- package/dist/hydrate/index.mjs +13 -7
- package/dist/magma-components/magma-components.esm.js +1 -1
- package/dist/magma-components/{p-4c0444af.entry.js → p-0aad807f.entry.js} +1 -1
- package/dist/magma-components/p-2633778b.entry.js +1 -0
- package/dist/magma-components/p-26cd6ec8.system.js +1 -1
- package/dist/magma-components/{p-9bf7121e.system.entry.js → p-5d3baf48.system.entry.js} +1 -1
- package/dist/magma-components/{p-1b1f53e0.system.entry.js → p-617f6aa3.system.entry.js} +1 -1
- package/dist/stats.json +27 -27
- package/package.json +1 -1
- package/dist/magma-components/p-7d7be1e9.entry.js +0 -1
|
@@ -90,7 +90,9 @@ const MdsInputSelect = class {
|
|
|
90
90
|
};
|
|
91
91
|
this.setCurrentValue = () => {
|
|
92
92
|
var _a;
|
|
93
|
-
if (this.
|
|
93
|
+
if (!this.selectEl)
|
|
94
|
+
return;
|
|
95
|
+
if (this.value) {
|
|
94
96
|
this.selectEl.querySelectorAll('option').forEach((element) => {
|
|
95
97
|
element.selected = element.value === this.value;
|
|
96
98
|
});
|
|
@@ -142,8 +144,10 @@ const MdsInputSelect = class {
|
|
|
142
144
|
this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
|
|
143
145
|
defaultOption.value = '';
|
|
144
146
|
defaultOption.text = newValue;
|
|
145
|
-
if (!this.defaultValue)
|
|
147
|
+
if (!this.defaultValue) {
|
|
146
148
|
defaultOption.selected = true;
|
|
149
|
+
this.value = undefined;
|
|
150
|
+
}
|
|
147
151
|
if (this.required)
|
|
148
152
|
defaultOption.disabled = true;
|
|
149
153
|
}
|
|
@@ -163,8 +167,8 @@ const MdsInputSelect = class {
|
|
|
163
167
|
}
|
|
164
168
|
}
|
|
165
169
|
render() {
|
|
166
|
-
return (index.h(index.Host, { key: '
|
|
167
|
-
index.h("mds-input-tip-item", { key: '
|
|
170
|
+
return (index.h(index.Host, { key: 'cf052cb64b8cea01c7e9b51348f619c8be17b330' }, index.h("select", { key: '4ba39321274c246420aa5c9c253a0b925456e324', 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: '1fbe08c1e20fcd01f2278a454228c93334a8d24b', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), index.h("div", { key: 'f1fa39b8f0e61092d6aed2316135731a3035cb56', class: "icon-container" }, index.h("i", { key: '26b3ae4c79b14de5a6737602174b66e727410d32', class: "icon", innerHTML: keyboardArrowDown.miBaselineKeyboardArrowDown })), index.h("div", { key: 'ef307450d0fbd422c25f358833dca1cc93a330c3', class: "option-container" }, index.h("slot", { key: '9bd7793c4fc8abca87381757307b47c32d02da75', onSlotchange: this.onSlotChangeHandler })), index.h("mds-input-tip", { key: '6f6e8d29ffbe332bb9b45c614f0481115ac12510', position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: 'c64202c9b522a540eb36d2413c44cd21f2f608ec', expanded: true, variant: "disabled" }), this.required &&
|
|
171
|
+
index.h("mds-input-tip-item", { key: '9aa8fa0035e434466ec029b41fe0f3542d7ae93b', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
|
|
168
172
|
}
|
|
169
173
|
static get formAssociated() { return true; }
|
|
170
174
|
get host() { return index.getElement(this); }
|
|
@@ -525,6 +525,8 @@ const MdsInputUpload = class {
|
|
|
525
525
|
return { errorMessage, type };
|
|
526
526
|
}
|
|
527
527
|
update(input, files) {
|
|
528
|
+
if (!input)
|
|
529
|
+
return;
|
|
528
530
|
input.files = files;
|
|
529
531
|
const validity = {};
|
|
530
532
|
const errorMessage = new Set();
|
|
@@ -613,12 +615,12 @@ const MdsInputUpload = class {
|
|
|
613
615
|
return !!this.sort && this.files.length > 1;
|
|
614
616
|
}
|
|
615
617
|
render() {
|
|
616
|
-
return (index.h(index.Host, { key: '
|
|
618
|
+
return (index.h(index.Host, { key: '64fd13514b3166b6944f979193e32b282865590b' }, index.h("div", { key: '6da244c559b2f3db324a811efeba5eec09427d9b', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: dragArea => this.elDragArea = dragArea }, index.h("div", { key: '121ac8c11bcece89876c35caa0d8b7fe0db705ee', class: "main-action" }, index.h("div", { key: '1d17dbe2cdfe125dee111f621662fb032e4bdd3e', class: "main-action-icon" }, index.h("i", { key: '0b8e3628bda0a797fdcc45839241e7c2f02753e1', class: "icon", innerHTML: miBaselineAddCircle })), index.h("mds-text", { key: '367df10b5c8cf6cfb39f50efc64f730d0ffe54fb', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), index.h("div", { key: '8d33fd4a06db1ec030e68edf3fb0c4cd0121eda2', class: "main-actions" }, index.h("mds-button", { key: '19a16d19d74056b91489d12fd5fe597dda4d040f', variant: 'primary', onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, " ", this.files ? this.t.get('addFile', { maxFiles: this.maxFiles }) : this.t.get('selectFile')), this.files.length > 0 && index.h("mds-button", { key: '2dc5c882dd0dd4a50a436bfd48de5cf5245947c2', variant: 'error', onClick: this.onReset }, this.t.get('cancel'))), index.h("div", { key: '003925161b2dc8db7a9f3bb64cb1f144200f0aee', class: "main-infos" }, index.h("mds-progress", { key: '4f02401ecbc1f13103f6c3dcfea63d574f851190', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1
|
|
617
619
|
? index.h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))
|
|
618
620
|
: index.h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles
|
|
619
621
|
? this.t.get('currentFilesWithMax', { currentFiles: this.files.length, maxFiles: this.maxFiles })
|
|
620
|
-
: this.t.get('currentFilesNoMax', { currentFiles: this.files.length })))), index.h("input", { key: '
|
|
621
|
-
index.h("mds-tab", { key: '
|
|
622
|
+
: this.t.get('currentFilesNoMax', { currentFiles: this.files.length })))), index.h("input", { key: '361c4d80369e0c42724d749271e855d302b84b79', type: 'file', accept: this.accept, hidden: true, ref: i => this.nativeInput = i, onChange: this.onAdd, multiple: this.maxFiles > 1 }), index.h("div", { key: '901be8f68888bf2edf57fe362dfb4971561ff38c', class: "additional-infos" }, index.h("div", { key: 'ebaf9679a643913df6ac7a0425f1da040d982c44', class: clsx.clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, index.h("mds-text", { key: 'c0b7b70c2b6da485d28ea27d8a4278784207ba98', variant: "info", typography: "caption" }, this.extensions ? `${this.t.get('canUpload')} ${this.extensions}` : this.t.get('canUploadAll')), index.h("mds-text", { key: '13f3cb1f431bbb058dd2944a7ffb57e7f3b71635', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() &&
|
|
623
|
+
index.h("mds-tab", { key: '8aa2fc09ef9eaf277c7646e8abd424b322b0f9d1', class: "action-sort", onMdsTabChange: event => this.onChangeTab(event.detail) }, index.h("mds-tab-item", { key: 'f1e4197a97118ce768225347a4ca4d29cb2ea1b1', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: 'date' }), index.h("mds-tab-item", { key: 'ee763fadf59a50f22ce15158403478f52f38b877', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: 'status' }))), index.h("div", { key: '2930aa1cf12f053c68c43465664fbbb4abcf09ce', class: clsx.clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map(file => {
|
|
622
624
|
switch (file.status) {
|
|
623
625
|
case Status.ERROR:
|
|
624
626
|
return (index.h("mds-file-preview", { deletable: true, variant: "error", filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: () => this.onCancel(file.key), message: file.errorMessage }));
|
|
@@ -76,7 +76,9 @@ export class MdsInputSelect {
|
|
|
76
76
|
};
|
|
77
77
|
this.setCurrentValue = () => {
|
|
78
78
|
var _a;
|
|
79
|
-
if (this.
|
|
79
|
+
if (!this.selectEl)
|
|
80
|
+
return;
|
|
81
|
+
if (this.value) {
|
|
80
82
|
this.selectEl.querySelectorAll('option').forEach((element) => {
|
|
81
83
|
element.selected = element.value === this.value;
|
|
82
84
|
});
|
|
@@ -128,8 +130,10 @@ export class MdsInputSelect {
|
|
|
128
130
|
this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
|
|
129
131
|
defaultOption.value = '';
|
|
130
132
|
defaultOption.text = newValue;
|
|
131
|
-
if (!this.defaultValue)
|
|
133
|
+
if (!this.defaultValue) {
|
|
132
134
|
defaultOption.selected = true;
|
|
135
|
+
this.value = undefined;
|
|
136
|
+
}
|
|
133
137
|
if (this.required)
|
|
134
138
|
defaultOption.disabled = true;
|
|
135
139
|
}
|
|
@@ -149,8 +153,8 @@ export class MdsInputSelect {
|
|
|
149
153
|
}
|
|
150
154
|
}
|
|
151
155
|
render() {
|
|
152
|
-
return (h(Host, { key: '
|
|
153
|
-
h("mds-input-tip-item", { key: '
|
|
156
|
+
return (h(Host, { key: 'cf052cb64b8cea01c7e9b51348f619c8be17b330' }, h("select", { key: '4ba39321274c246420aa5c9c253a0b925456e324', 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: '1fbe08c1e20fcd01f2278a454228c93334a8d24b', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), h("div", { key: 'f1fa39b8f0e61092d6aed2316135731a3035cb56', class: "icon-container" }, h("i", { key: '26b3ae4c79b14de5a6737602174b66e727410d32', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'ef307450d0fbd422c25f358833dca1cc93a330c3', class: "option-container" }, h("slot", { key: '9bd7793c4fc8abca87381757307b47c32d02da75', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '6f6e8d29ffbe332bb9b45c614f0481115ac12510', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'c64202c9b522a540eb36d2413c44cd21f2f608ec', expanded: true, variant: "disabled" }), this.required &&
|
|
157
|
+
h("mds-input-tip-item", { key: '9aa8fa0035e434466ec029b41fe0f3542d7ae93b', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
|
|
154
158
|
}
|
|
155
159
|
static get is() { return "mds-input-select"; }
|
|
156
160
|
static get encapsulation() { return "shadow"; }
|
|
@@ -215,6 +215,8 @@ export class MdsInputUpload {
|
|
|
215
215
|
return { errorMessage, type };
|
|
216
216
|
}
|
|
217
217
|
update(input, files) {
|
|
218
|
+
if (!input)
|
|
219
|
+
return;
|
|
218
220
|
input.files = files;
|
|
219
221
|
const validity = {};
|
|
220
222
|
const errorMessage = new Set();
|
|
@@ -303,12 +305,12 @@ export class MdsInputUpload {
|
|
|
303
305
|
return !!this.sort && this.files.length > 1;
|
|
304
306
|
}
|
|
305
307
|
render() {
|
|
306
|
-
return (h(Host, { key: '
|
|
308
|
+
return (h(Host, { key: '64fd13514b3166b6944f979193e32b282865590b' }, h("div", { key: '6da244c559b2f3db324a811efeba5eec09427d9b', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: dragArea => this.elDragArea = dragArea }, h("div", { key: '121ac8c11bcece89876c35caa0d8b7fe0db705ee', class: "main-action" }, h("div", { key: '1d17dbe2cdfe125dee111f621662fb032e4bdd3e', class: "main-action-icon" }, h("i", { key: '0b8e3628bda0a797fdcc45839241e7c2f02753e1', class: "icon", innerHTML: miBaselineAddCircle })), h("mds-text", { key: '367df10b5c8cf6cfb39f50efc64f730d0ffe54fb', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), h("div", { key: '8d33fd4a06db1ec030e68edf3fb0c4cd0121eda2', class: "main-actions" }, h("mds-button", { key: '19a16d19d74056b91489d12fd5fe597dda4d040f', variant: 'primary', onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, " ", this.files ? this.t.get('addFile', { maxFiles: this.maxFiles }) : this.t.get('selectFile')), this.files.length > 0 && h("mds-button", { key: '2dc5c882dd0dd4a50a436bfd48de5cf5245947c2', variant: 'error', onClick: this.onReset }, this.t.get('cancel'))), h("div", { key: '003925161b2dc8db7a9f3bb64cb1f144200f0aee', class: "main-infos" }, h("mds-progress", { key: '4f02401ecbc1f13103f6c3dcfea63d574f851190', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1
|
|
307
309
|
? h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))
|
|
308
310
|
: h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles
|
|
309
311
|
? this.t.get('currentFilesWithMax', { currentFiles: this.files.length, maxFiles: this.maxFiles })
|
|
310
|
-
: this.t.get('currentFilesNoMax', { currentFiles: this.files.length })))), h("input", { key: '
|
|
311
|
-
h("mds-tab", { key: '
|
|
312
|
+
: this.t.get('currentFilesNoMax', { currentFiles: this.files.length })))), h("input", { key: '361c4d80369e0c42724d749271e855d302b84b79', type: 'file', accept: this.accept, hidden: true, ref: i => this.nativeInput = i, onChange: this.onAdd, multiple: this.maxFiles > 1 }), h("div", { key: '901be8f68888bf2edf57fe362dfb4971561ff38c', class: "additional-infos" }, h("div", { key: 'ebaf9679a643913df6ac7a0425f1da040d982c44', class: clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, h("mds-text", { key: 'c0b7b70c2b6da485d28ea27d8a4278784207ba98', variant: "info", typography: "caption" }, this.extensions ? `${this.t.get('canUpload')} ${this.extensions}` : this.t.get('canUploadAll')), h("mds-text", { key: '13f3cb1f431bbb058dd2944a7ffb57e7f3b71635', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() &&
|
|
313
|
+
h("mds-tab", { key: '8aa2fc09ef9eaf277c7646e8abd424b322b0f9d1', class: "action-sort", onMdsTabChange: event => this.onChangeTab(event.detail) }, h("mds-tab-item", { key: 'f1e4197a97118ce768225347a4ca4d29cb2ea1b1', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: 'date' }), h("mds-tab-item", { key: 'ee763fadf59a50f22ce15158403478f52f38b877', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: 'status' }))), h("div", { key: '2930aa1cf12f053c68c43465664fbbb4abcf09ce', class: clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map(file => {
|
|
312
314
|
switch (file.status) {
|
|
313
315
|
case Status.ERROR:
|
|
314
316
|
return (h("mds-file-preview", { deletable: true, variant: "error", filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: () => this.onCancel(file.key), message: file.errorMessage }));
|
|
@@ -85,7 +85,9 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
|
|
|
85
85
|
};
|
|
86
86
|
this.setCurrentValue = () => {
|
|
87
87
|
var _a;
|
|
88
|
-
if (this.
|
|
88
|
+
if (!this.selectEl)
|
|
89
|
+
return;
|
|
90
|
+
if (this.value) {
|
|
89
91
|
this.selectEl.querySelectorAll('option').forEach((element) => {
|
|
90
92
|
element.selected = element.value === this.value;
|
|
91
93
|
});
|
|
@@ -137,8 +139,10 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
|
|
|
137
139
|
this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
|
|
138
140
|
defaultOption.value = '';
|
|
139
141
|
defaultOption.text = newValue;
|
|
140
|
-
if (!this.defaultValue)
|
|
142
|
+
if (!this.defaultValue) {
|
|
141
143
|
defaultOption.selected = true;
|
|
144
|
+
this.value = undefined;
|
|
145
|
+
}
|
|
142
146
|
if (this.required)
|
|
143
147
|
defaultOption.disabled = true;
|
|
144
148
|
}
|
|
@@ -158,8 +162,8 @@ const MdsInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputSelect e
|
|
|
158
162
|
}
|
|
159
163
|
}
|
|
160
164
|
render() {
|
|
161
|
-
return (h(Host, { key: '
|
|
162
|
-
h("mds-input-tip-item", { key: '
|
|
165
|
+
return (h(Host, { key: 'cf052cb64b8cea01c7e9b51348f619c8be17b330' }, h("select", { key: '4ba39321274c246420aa5c9c253a0b925456e324', 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: '1fbe08c1e20fcd01f2278a454228c93334a8d24b', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), h("div", { key: 'f1fa39b8f0e61092d6aed2316135731a3035cb56', class: "icon-container" }, h("i", { key: '26b3ae4c79b14de5a6737602174b66e727410d32', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'ef307450d0fbd422c25f358833dca1cc93a330c3', class: "option-container" }, h("slot", { key: '9bd7793c4fc8abca87381757307b47c32d02da75', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '6f6e8d29ffbe332bb9b45c614f0481115ac12510', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'c64202c9b522a540eb36d2413c44cd21f2f608ec', expanded: true, variant: "disabled" }), this.required &&
|
|
166
|
+
h("mds-input-tip-item", { key: '9aa8fa0035e434466ec029b41fe0f3542d7ae93b', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
|
|
163
167
|
}
|
|
164
168
|
static get formAssociated() { return true; }
|
|
165
169
|
get host() { return this; }
|
|
@@ -526,6 +526,8 @@ const MdsInputUpload$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputUpload e
|
|
|
526
526
|
return { errorMessage, type };
|
|
527
527
|
}
|
|
528
528
|
update(input, files) {
|
|
529
|
+
if (!input)
|
|
530
|
+
return;
|
|
529
531
|
input.files = files;
|
|
530
532
|
const validity = {};
|
|
531
533
|
const errorMessage = new Set();
|
|
@@ -614,12 +616,12 @@ const MdsInputUpload$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputUpload e
|
|
|
614
616
|
return !!this.sort && this.files.length > 1;
|
|
615
617
|
}
|
|
616
618
|
render() {
|
|
617
|
-
return (h(Host, { key: '
|
|
619
|
+
return (h(Host, { key: '64fd13514b3166b6944f979193e32b282865590b' }, h("div", { key: '6da244c559b2f3db324a811efeba5eec09427d9b', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: dragArea => this.elDragArea = dragArea }, h("div", { key: '121ac8c11bcece89876c35caa0d8b7fe0db705ee', class: "main-action" }, h("div", { key: '1d17dbe2cdfe125dee111f621662fb032e4bdd3e', class: "main-action-icon" }, h("i", { key: '0b8e3628bda0a797fdcc45839241e7c2f02753e1', class: "icon", innerHTML: miBaselineAddCircle })), h("mds-text", { key: '367df10b5c8cf6cfb39f50efc64f730d0ffe54fb', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), h("div", { key: '8d33fd4a06db1ec030e68edf3fb0c4cd0121eda2', class: "main-actions" }, h("mds-button", { key: '19a16d19d74056b91489d12fd5fe597dda4d040f', variant: 'primary', onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, " ", this.files ? this.t.get('addFile', { maxFiles: this.maxFiles }) : this.t.get('selectFile')), this.files.length > 0 && h("mds-button", { key: '2dc5c882dd0dd4a50a436bfd48de5cf5245947c2', variant: 'error', onClick: this.onReset }, this.t.get('cancel'))), h("div", { key: '003925161b2dc8db7a9f3bb64cb1f144200f0aee', class: "main-infos" }, h("mds-progress", { key: '4f02401ecbc1f13103f6c3dcfea63d574f851190', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1
|
|
618
620
|
? h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))
|
|
619
621
|
: h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles
|
|
620
622
|
? this.t.get('currentFilesWithMax', { currentFiles: this.files.length, maxFiles: this.maxFiles })
|
|
621
|
-
: this.t.get('currentFilesNoMax', { currentFiles: this.files.length })))), h("input", { key: '
|
|
622
|
-
h("mds-tab", { key: '
|
|
623
|
+
: this.t.get('currentFilesNoMax', { currentFiles: this.files.length })))), h("input", { key: '361c4d80369e0c42724d749271e855d302b84b79', type: 'file', accept: this.accept, hidden: true, ref: i => this.nativeInput = i, onChange: this.onAdd, multiple: this.maxFiles > 1 }), h("div", { key: '901be8f68888bf2edf57fe362dfb4971561ff38c', class: "additional-infos" }, h("div", { key: 'ebaf9679a643913df6ac7a0425f1da040d982c44', class: clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, h("mds-text", { key: 'c0b7b70c2b6da485d28ea27d8a4278784207ba98', variant: "info", typography: "caption" }, this.extensions ? `${this.t.get('canUpload')} ${this.extensions}` : this.t.get('canUploadAll')), h("mds-text", { key: '13f3cb1f431bbb058dd2944a7ffb57e7f3b71635', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() &&
|
|
624
|
+
h("mds-tab", { key: '8aa2fc09ef9eaf277c7646e8abd424b322b0f9d1', class: "action-sort", onMdsTabChange: event => this.onChangeTab(event.detail) }, h("mds-tab-item", { key: 'f1e4197a97118ce768225347a4ca4d29cb2ea1b1', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: 'date' }), h("mds-tab-item", { key: 'ee763fadf59a50f22ce15158403478f52f38b877', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: 'status' }))), h("div", { key: '2930aa1cf12f053c68c43465664fbbb4abcf09ce', class: clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map(file => {
|
|
623
625
|
switch (file.status) {
|
|
624
626
|
case Status.ERROR:
|
|
625
627
|
return (h("mds-file-preview", { deletable: true, variant: "error", filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: () => this.onCancel(file.key), message: file.errorMessage }));
|
package/dist/documentation.json
CHANGED
|
@@ -86,7 +86,9 @@ const MdsInputSelect = class {
|
|
|
86
86
|
};
|
|
87
87
|
this.setCurrentValue = () => {
|
|
88
88
|
var _a;
|
|
89
|
-
if (this.
|
|
89
|
+
if (!this.selectEl)
|
|
90
|
+
return;
|
|
91
|
+
if (this.value) {
|
|
90
92
|
this.selectEl.querySelectorAll('option').forEach((element) => {
|
|
91
93
|
element.selected = element.value === this.value;
|
|
92
94
|
});
|
|
@@ -138,8 +140,10 @@ const MdsInputSelect = class {
|
|
|
138
140
|
this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
|
|
139
141
|
defaultOption.value = '';
|
|
140
142
|
defaultOption.text = newValue;
|
|
141
|
-
if (!this.defaultValue)
|
|
143
|
+
if (!this.defaultValue) {
|
|
142
144
|
defaultOption.selected = true;
|
|
145
|
+
this.value = undefined;
|
|
146
|
+
}
|
|
143
147
|
if (this.required)
|
|
144
148
|
defaultOption.disabled = true;
|
|
145
149
|
}
|
|
@@ -159,8 +163,8 @@ const MdsInputSelect = class {
|
|
|
159
163
|
}
|
|
160
164
|
}
|
|
161
165
|
render() {
|
|
162
|
-
return (h(Host, { key: '
|
|
163
|
-
h("mds-input-tip-item", { key: '
|
|
166
|
+
return (h(Host, { key: 'cf052cb64b8cea01c7e9b51348f619c8be17b330' }, h("select", { key: '4ba39321274c246420aa5c9c253a0b925456e324', 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: '1fbe08c1e20fcd01f2278a454228c93334a8d24b', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), h("div", { key: 'f1fa39b8f0e61092d6aed2316135731a3035cb56', class: "icon-container" }, h("i", { key: '26b3ae4c79b14de5a6737602174b66e727410d32', class: "icon", innerHTML: miBaselineKeyboardArrowDown })), h("div", { key: 'ef307450d0fbd422c25f358833dca1cc93a330c3', class: "option-container" }, h("slot", { key: '9bd7793c4fc8abca87381757307b47c32d02da75', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '6f6e8d29ffbe332bb9b45c614f0481115ac12510', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'c64202c9b522a540eb36d2413c44cd21f2f608ec', expanded: true, variant: "disabled" }), this.required &&
|
|
167
|
+
h("mds-input-tip-item", { key: '9aa8fa0035e434466ec029b41fe0f3542d7ae93b', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
|
|
164
168
|
}
|
|
165
169
|
static get formAssociated() { return true; }
|
|
166
170
|
get host() { return getElement(this); }
|
|
@@ -521,6 +521,8 @@ const MdsInputUpload = class {
|
|
|
521
521
|
return { errorMessage, type };
|
|
522
522
|
}
|
|
523
523
|
update(input, files) {
|
|
524
|
+
if (!input)
|
|
525
|
+
return;
|
|
524
526
|
input.files = files;
|
|
525
527
|
const validity = {};
|
|
526
528
|
const errorMessage = new Set();
|
|
@@ -609,12 +611,12 @@ const MdsInputUpload = class {
|
|
|
609
611
|
return !!this.sort && this.files.length > 1;
|
|
610
612
|
}
|
|
611
613
|
render() {
|
|
612
|
-
return (h(Host, { key: '
|
|
614
|
+
return (h(Host, { key: '64fd13514b3166b6944f979193e32b282865590b' }, h("div", { key: '6da244c559b2f3db324a811efeba5eec09427d9b', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: dragArea => this.elDragArea = dragArea }, h("div", { key: '121ac8c11bcece89876c35caa0d8b7fe0db705ee', class: "main-action" }, h("div", { key: '1d17dbe2cdfe125dee111f621662fb032e4bdd3e', class: "main-action-icon" }, h("i", { key: '0b8e3628bda0a797fdcc45839241e7c2f02753e1', class: "icon", innerHTML: miBaselineAddCircle })), h("mds-text", { key: '367df10b5c8cf6cfb39f50efc64f730d0ffe54fb', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), h("div", { key: '8d33fd4a06db1ec030e68edf3fb0c4cd0121eda2', class: "main-actions" }, h("mds-button", { key: '19a16d19d74056b91489d12fd5fe597dda4d040f', variant: 'primary', onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, " ", this.files ? this.t.get('addFile', { maxFiles: this.maxFiles }) : this.t.get('selectFile')), this.files.length > 0 && h("mds-button", { key: '2dc5c882dd0dd4a50a436bfd48de5cf5245947c2', variant: 'error', onClick: this.onReset }, this.t.get('cancel'))), h("div", { key: '003925161b2dc8db7a9f3bb64cb1f144200f0aee', class: "main-infos" }, h("mds-progress", { key: '4f02401ecbc1f13103f6c3dcfea63d574f851190', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1
|
|
613
615
|
? h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))
|
|
614
616
|
: h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles
|
|
615
617
|
? this.t.get('currentFilesWithMax', { currentFiles: this.files.length, maxFiles: this.maxFiles })
|
|
616
|
-
: this.t.get('currentFilesNoMax', { currentFiles: this.files.length })))), h("input", { key: '
|
|
617
|
-
h("mds-tab", { key: '
|
|
618
|
+
: this.t.get('currentFilesNoMax', { currentFiles: this.files.length })))), h("input", { key: '361c4d80369e0c42724d749271e855d302b84b79', type: 'file', accept: this.accept, hidden: true, ref: i => this.nativeInput = i, onChange: this.onAdd, multiple: this.maxFiles > 1 }), h("div", { key: '901be8f68888bf2edf57fe362dfb4971561ff38c', class: "additional-infos" }, h("div", { key: 'ebaf9679a643913df6ac7a0425f1da040d982c44', class: clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, h("mds-text", { key: 'c0b7b70c2b6da485d28ea27d8a4278784207ba98', variant: "info", typography: "caption" }, this.extensions ? `${this.t.get('canUpload')} ${this.extensions}` : this.t.get('canUploadAll')), h("mds-text", { key: '13f3cb1f431bbb058dd2944a7ffb57e7f3b71635', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() &&
|
|
619
|
+
h("mds-tab", { key: '8aa2fc09ef9eaf277c7646e8abd424b322b0f9d1', class: "action-sort", onMdsTabChange: event => this.onChangeTab(event.detail) }, h("mds-tab-item", { key: 'f1e4197a97118ce768225347a4ca4d29cb2ea1b1', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: 'date' }), h("mds-tab-item", { key: 'ee763fadf59a50f22ce15158403478f52f38b877', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: 'status' }))), h("div", { key: '2930aa1cf12f053c68c43465664fbbb4abcf09ce', class: clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map(file => {
|
|
618
620
|
switch (file.status) {
|
|
619
621
|
case Status.ERROR:
|
|
620
622
|
return (h("mds-file-preview", { deletable: true, variant: "error", filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: () => this.onCancel(file.key), message: file.errorMessage }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(n,t,r,e){function o(n){return n instanceof r?n:new r((function(t){t(n)}))}return new(r||(r=Promise))((function(r,a){function i(n){try{d(e.next(n))}catch(n){a(n)}}function s(n){try{d(e["throw"](n))}catch(n){a(n)}}function d(n){n.done?r(n.value):o(n.value).then(i,s)}d((e=e.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var r={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},e,o,a,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(n){return function(t){return d([n,t])}}function d(s){if(e)throw new TypeError("Generator is already executing.");while(i&&(i=0,s[0]&&(r=0)),r)try{if(e=1,o&&(a=s[0]&2?o["return"]:s[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,s[1])).done)return a;if(o=0,a)s=[s[0]&2,a.value];switch(s[0]){case 0:case 1:a=s;break;case 4:r.label++;return{value:s[1],done:false};case 5:r.label++;o=s[1];s=[0];continue;case 7:s=r.ops.pop();r.trys.pop();continue;default:if(!(a=r.trys,a=a.length>0&&a[a.length-1])&&(s[0]===6||s[0]===2)){r=0;continue}if(s[0]===3&&(!a||s[1]>a[0]&&s[1]<a[3])){r.label=s[1];break}if(s[0]===6&&r.label<a[1]){r.label=a[1];a=s;break}if(a&&r.label<a[2]){r.label=a[2];r.ops.push(s);break}if(a[2])r.ops.pop();r.trys.pop();continue}s=t.call(n,r)}catch(n){s=[6,n];o=0}finally{e=a=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-7f153b9b.js";import{m as miBaselineKeyboardArrowDown}from"./keyboard-arrow-down-b79b8faf.js";var mdsInputSelectCss='@tailwind components;\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 --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-02));\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:host([required]:not([required="false"])) .input {\n color: rgb(var(--tone-neutral-05));\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 --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n:host {\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 --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host([variant="info"]) {\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 --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 --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 --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 --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 --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 --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 --mds-input-select-icon-color: var(--status-error-04);\n --mds-input-select-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce),\n:host-context(.pref-animation-reduce) .input,\n:host-context(.pref-animation-reduce) .input:hover,\n:host-context(.pref-animation-reduce) .input:focus,\n:host-context(.pref-animation-reduce) .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n :host-context(.pref-animation-system),\n :host-context(.pref-animation-system) .input,\n :host-context(.pref-animation-system) .input:hover,\n :host-context(.pref-animation-system) .input:focus,\n :host-context(.pref-animation-system) .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n:host-context(.pref-theme-dark) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\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-hover-background-color: rgb(var(--variant-primary-04));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n}\n\n:host-context(.pref-theme-dark) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-color-scheme: dark) {\n :host-context(.pref-theme-system) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\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-hover-background-color: rgb(var(--variant-primary-04));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n }\n\n :host-context(.pref-theme-system) .input {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n:host-context(.pref-contrast-more) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n}\n\n:host-context(.pref-contrast-more) .input {\n color: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-contrast: more) {\n :host-context(.pref-contrast-system) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n :host-context(.pref-contrast-system) .input {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n';var MdsInputSelectStyle0=mdsInputSelectCss;var MdsInputSelect=function(){function n(n){var t=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.hasFocus=false;this.disabled=false;this.required=false;this.multiple=false;this.size=0;this.value="";this.onInput=function(n){var r=n.target;if(r){t.value=r.value}};this.onBlur=function(){t.hasFocus=false};this.onFocus=function(){t.hasFocus=true};this.emptyOptions=function(){var n;var r=(n=t.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("select");var e=r===null||r===void 0?void 0:r.querySelectorAll("option");if(!e){return}e.forEach((function(n,r){if(!t.placeholder){n.remove()}if(t.placeholder&&r>0){n.remove()}}))};this.onSlotChangeHandler=function(){var n,r,e;var o=(r=(n=t.host.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("slot")[0])===null||r===void 0?void 0:r.assignedNodes();var a=(e=t.selectEl)===null||e===void 0?void 0:e.querySelectorAll("option");if(!a){return}if(!t.placeholder&&a.length>0){t.emptyOptions()}if(t.placeholder&&a.length>1){t.emptyOptions()}o===null||o===void 0?void 0:o.forEach((function(n){var r;(r=t.selectEl)===null||r===void 0?void 0:r.appendChild(n.cloneNode(true))}));t.setCurrentValue()};this.setCurrentValue=function(){var n;if(t.value&&t.selectEl){t.selectEl.querySelectorAll("option").forEach((function(n){n.selected=n.value===t.value}))}else if(!t.placeholder){t.value=(n=t.selectEl)===null||n===void 0?void 0:n.querySelectorAll("option")[0].value}}}n.prototype.setValue=function(n){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.value=n;return[2,Promise.resolve()]}))}))};n.prototype.valueChanged=function(){var n,t,r;this.changeEvent.emit({value:(n=this.value)===null||n===void 0?void 0:n.toString()});this.setCurrentValue();this.internals.setFormValue((r=(t=this.value)===null||t===void 0?void 0:t.toString())!==null&&r!==void 0?r:null)};n.prototype.disabledChanged=function(n){if(n){this.internals.setFormValue(null)}};n.prototype.placeholderChanged=function(n,t){if(n&&!t){var r=document.querySelector(".placeholder-option");if(r)r.remove();r=document.createElement("option");this.selectEl.insertBefore(r,this.selectEl.firstChild);r.value="";r.text=n;if(!this.defaultValue)r.selected=true;if(this.required)r.disabled=true}};n.prototype.formResetCallback=function(){this.internals.setFormValue("")};n.prototype.componentWillLoad=function(){if(this.defaultValue){this.value=this.defaultValue}};n.prototype.componentDidLoad=function(){if(this.value){this.internals.setFormValue(this.value.toString())}};n.prototype.render=function(){var n=this;return h(Host,{key:"6f1790714a3e199400903418896cb09478772775"},h("select",{key:"06b3868310e2dc78e8d27d3c7e9300adc1f2c995",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:function(t){return n.selectEl=t}},h("option",{key:"92ba69bc28f0636c7c22bf301fe00600209fc8a1",class:"placeholder-option",value:"",disabled:!this.required?undefined:true,selected:this.defaultValue?undefined:true},this.placeholder)),h("div",{key:"2775a9d91e9c8852fe80dbd25b33e2d8f377202d",class:"icon-container"},h("i",{key:"7ecd711fd1c857ef5e0b33ab7f71dcb726362a05",class:"icon",innerHTML:miBaselineKeyboardArrowDown})),h("div",{key:"5dd9bfd00482cd4d426b106ccf6d86ed0e791f71",class:"option-container"},h("slot",{key:"9298900809167163839d3537efa9b89f51d5f56c",onSlotchange:this.onSlotChangeHandler})),h("mds-input-tip",{key:"4f24bd493402bf74a86df02fddb77564aae7a1fe",position:"top",active:this.hasFocus},this.disabled&&h("mds-input-tip-item",{key:"99070c69eeb5af1bfeebc1a484487a0381461adb",expanded:true,variant:"disabled"}),this.required&&h("mds-input-tip-item",{key:"9838fbb5b071cd7df3e3a3a0ae62c707cab97f43",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"],placeholder:["placeholderChanged"]}},enumerable:false,configurable:true});return n}();MdsInputSelect.style=MdsInputSelectStyle0;export{MdsInputSelect as mds_input_select};
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(n,t,r,e){function o(n){return n instanceof r?n:new r((function(t){t(n)}))}return new(r||(r=Promise))((function(r,a){function i(n){try{d(e.next(n))}catch(n){a(n)}}function s(n){try{d(e["throw"](n))}catch(n){a(n)}}function d(n){n.done?r(n.value):o(n.value).then(i,s)}d((e=e.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var r={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},e,o,a,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(n){return function(t){return d([n,t])}}function d(s){if(e)throw new TypeError("Generator is already executing.");while(i&&(i=0,s[0]&&(r=0)),r)try{if(e=1,o&&(a=s[0]&2?o["return"]:s[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,s[1])).done)return a;if(o=0,a)s=[s[0]&2,a.value];switch(s[0]){case 0:case 1:a=s;break;case 4:r.label++;return{value:s[1],done:false};case 5:r.label++;o=s[1];s=[0];continue;case 7:s=r.ops.pop();r.trys.pop();continue;default:if(!(a=r.trys,a=a.length>0&&a[a.length-1])&&(s[0]===6||s[0]===2)){r=0;continue}if(s[0]===3&&(!a||s[1]>a[0]&&s[1]<a[3])){r.label=s[1];break}if(s[0]===6&&r.label<a[1]){r.label=a[1];a=s;break}if(a&&r.label<a[2]){r.label=a[2];r.ops.push(s);break}if(a[2])r.ops.pop();r.trys.pop();continue}s=t.call(n,r)}catch(n){s=[6,n];o=0}finally{e=a=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-7f153b9b.js";import{m as miBaselineKeyboardArrowDown}from"./keyboard-arrow-down-b79b8faf.js";var mdsInputSelectCss='@tailwind components;\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 --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-02));\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:host([required]:not([required="false"])) .input {\n color: rgb(var(--tone-neutral-05));\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 --mds-input-select-background: rgb(var(--variant-primary-07));\n }\n}\n\n:host {\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 --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host([variant="info"]) {\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 --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 --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 --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 --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 --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 --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 --mds-input-select-icon-color: var(--status-error-04);\n --mds-input-select-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce),\n:host-context(.pref-animation-reduce) .input,\n:host-context(.pref-animation-reduce) .input:hover,\n:host-context(.pref-animation-reduce) .input:focus,\n:host-context(.pref-animation-reduce) .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n :host-context(.pref-animation-system),\n :host-context(.pref-animation-system) .input,\n :host-context(.pref-animation-system) .input:hover,\n :host-context(.pref-animation-system) .input:focus,\n :host-context(.pref-animation-system) .icon {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n:host-context(.pref-theme-dark) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\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-hover-background-color: rgb(var(--variant-primary-04));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n}\n\n:host-context(.pref-theme-dark) .input {\n color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-color-scheme: dark) {\n :host-context(.pref-theme-system) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\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-hover-background-color: rgb(var(--variant-primary-04));\n --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n }\n\n :host-context(.pref-theme-system) .input {\n color: rgb(var(--tone-neutral-03));\n }\n}\n\n:host-context(.pref-contrast-more) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n}\n\n:host-context(.pref-contrast-more) .input {\n color: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-contrast: more) {\n :host-context(.pref-contrast-system) {\n --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n }\n\n :host-context(.pref-contrast-system) .input {\n color: rgb(var(--tone-neutral-01));\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n';var MdsInputSelectStyle0=mdsInputSelectCss;var MdsInputSelect=function(){function n(n){var t=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.hasFocus=false;this.disabled=false;this.required=false;this.multiple=false;this.size=0;this.value="";this.onInput=function(n){var r=n.target;if(r){t.value=r.value}};this.onBlur=function(){t.hasFocus=false};this.onFocus=function(){t.hasFocus=true};this.emptyOptions=function(){var n;var r=(n=t.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("select");var e=r===null||r===void 0?void 0:r.querySelectorAll("option");if(!e){return}e.forEach((function(n,r){if(!t.placeholder){n.remove()}if(t.placeholder&&r>0){n.remove()}}))};this.onSlotChangeHandler=function(){var n,r,e;var o=(r=(n=t.host.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("slot")[0])===null||r===void 0?void 0:r.assignedNodes();var a=(e=t.selectEl)===null||e===void 0?void 0:e.querySelectorAll("option");if(!a){return}if(!t.placeholder&&a.length>0){t.emptyOptions()}if(t.placeholder&&a.length>1){t.emptyOptions()}o===null||o===void 0?void 0:o.forEach((function(n){var r;(r=t.selectEl)===null||r===void 0?void 0:r.appendChild(n.cloneNode(true))}));t.setCurrentValue()};this.setCurrentValue=function(){var n;if(!t.selectEl)return;if(t.value){t.selectEl.querySelectorAll("option").forEach((function(n){n.selected=n.value===t.value}))}else if(!t.placeholder){t.value=(n=t.selectEl)===null||n===void 0?void 0:n.querySelectorAll("option")[0].value}}}n.prototype.setValue=function(n){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.value=n;return[2,Promise.resolve()]}))}))};n.prototype.valueChanged=function(){var n,t,r;this.changeEvent.emit({value:(n=this.value)===null||n===void 0?void 0:n.toString()});this.setCurrentValue();this.internals.setFormValue((r=(t=this.value)===null||t===void 0?void 0:t.toString())!==null&&r!==void 0?r:null)};n.prototype.disabledChanged=function(n){if(n){this.internals.setFormValue(null)}};n.prototype.placeholderChanged=function(n,t){if(n&&!t){var r=document.querySelector(".placeholder-option");if(r)r.remove();r=document.createElement("option");this.selectEl.insertBefore(r,this.selectEl.firstChild);r.value="";r.text=n;if(!this.defaultValue){r.selected=true;this.value=undefined}if(this.required)r.disabled=true}};n.prototype.formResetCallback=function(){this.internals.setFormValue("")};n.prototype.componentWillLoad=function(){if(this.defaultValue){this.value=this.defaultValue}};n.prototype.componentDidLoad=function(){if(this.value){this.internals.setFormValue(this.value.toString())}};n.prototype.render=function(){var n=this;return h(Host,{key:"cf052cb64b8cea01c7e9b51348f619c8be17b330"},h("select",{key:"4ba39321274c246420aa5c9c253a0b925456e324",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:function(t){return n.selectEl=t}},h("option",{key:"1fbe08c1e20fcd01f2278a454228c93334a8d24b",class:"placeholder-option",value:"",disabled:!this.required?undefined:true,selected:this.defaultValue?undefined:true},this.placeholder)),h("div",{key:"f1fa39b8f0e61092d6aed2316135731a3035cb56",class:"icon-container"},h("i",{key:"26b3ae4c79b14de5a6737602174b66e727410d32",class:"icon",innerHTML:miBaselineKeyboardArrowDown})),h("div",{key:"ef307450d0fbd422c25f358833dca1cc93a330c3",class:"option-container"},h("slot",{key:"9bd7793c4fc8abca87381757307b47c32d02da75",onSlotchange:this.onSlotChangeHandler})),h("mds-input-tip",{key:"6f6e8d29ffbe332bb9b45c614f0481115ac12510",position:"top",active:this.hasFocus},this.disabled&&h("mds-input-tip-item",{key:"c64202c9b522a540eb36d2413c44cd21f2f608ec",expanded:true,variant:"disabled"}),this.required&&h("mds-input-tip-item",{key:"9aa8fa0035e434466ec029b41fe0f3542d7ae93b",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"],placeholder:["placeholderChanged"]}},enumerable:false,configurable:true});return n}();MdsInputSelect.style=MdsInputSelectStyle0;export{MdsInputSelect as mds_input_select};
|