@mgdis/mg-components 6.15.0 → 6.16.0
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/events.utils-D5SAtkpQ.js +25 -0
- package/dist/cjs/{index-BGxkpQwi.js → index-T3-qWqFE.js} +2 -2
- package/dist/cjs/{index-iUZvsp-F.js → index-YM1EJx9X.js} +8 -20
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_37.cjs.entry.js +68 -305
- package/dist/cjs/mg-alert.cjs.entry.js +2 -2
- package/dist/cjs/mg-components.cjs.js +3 -3
- package/dist/cjs/mg-input-combobox.cjs.entry.js +78 -140
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +3 -3
- package/dist/cjs/{mg-input.conf-CwjEAih3.js → mg-input.conf-WTsvDfpC.js} +0 -7
- package/dist/cjs/mg-loader.cjs.entry.js +2 -2
- package/dist/cjs/mg-progress.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.conf.js +0 -6
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +22 -93
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js +1 -2
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +13 -69
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js +54 -136
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +10 -63
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +6 -54
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +9 -142
- package/dist/collection/locales/en/messages.json +3 -8
- package/dist/collection/locales/fr/messages.json +3 -8
- package/dist/components/index2.js +1 -1
- package/dist/components/index3.js +8 -20
- package/dist/components/mg-details.js +97 -1
- package/dist/components/mg-input-checkbox-paginated2.js +1 -2
- package/dist/components/mg-input-checkbox.js +19 -63
- package/dist/components/mg-input-combobox.js +60 -130
- package/dist/components/mg-input-date.js +1 -7
- package/dist/components/mg-input-numeric.js +1 -7
- package/dist/components/mg-input-password.js +2 -8
- package/dist/components/mg-input-radio.js +12 -53
- package/dist/components/mg-input-rich-text-editor.js +1 -7
- package/dist/components/mg-input-select2.js +8 -44
- package/dist/components/mg-input-text2.js +2 -8
- package/dist/components/mg-input-textarea.js +2 -8
- package/dist/components/mg-input-toggle.js +11 -96
- package/dist/components/mg-input2.js +22 -99
- package/dist/components/mg-pagination.js +2 -8
- package/dist/components/mg-panel.js +7 -13
- package/dist/esm/events.utils-yMGqY8YG.js +23 -0
- package/dist/esm/{index-CKB-AnCZ.js → index-Bab8_u8S.js} +8 -20
- package/dist/esm/{index-DhAOnZJn.js → index-JHj_9FSs.js} +2 -2
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_37.entry.js +64 -301
- package/dist/esm/mg-alert.entry.js +2 -2
- package/dist/esm/mg-components.js +4 -4
- package/dist/esm/mg-input-combobox.entry.js +59 -121
- package/dist/esm/mg-input-rich-text-editor.entry.js +3 -3
- package/dist/esm/{mg-input.conf-BAUTlb6r.js → mg-input.conf-CNgv8hc5.js} +1 -7
- package/dist/esm/mg-loader.entry.js +2 -2
- package/dist/esm/mg-progress.entry.js +1 -1
- package/dist/mg-components/locales/en/messages.json +3 -8
- package/dist/mg-components/locales/fr/messages.json +3 -8
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/{p-420daa1e.entry.js → p-42a90251.entry.js} +1 -1
- package/dist/mg-components/p-54156253.entry.js +1 -0
- package/dist/mg-components/{p-47e19783.entry.js → p-658f828c.entry.js} +1 -1
- package/dist/mg-components/{p-67af6274.entry.js → p-82455ac7.entry.js} +1 -1
- package/dist/mg-components/p-Bab8_u8S.js +1 -0
- package/dist/mg-components/p-CNgv8hc5.js +1 -0
- package/dist/mg-components/{p-DhAOnZJn.js → p-JHj_9FSs.js} +1 -1
- package/dist/mg-components/p-abbd151c.entry.js +1 -0
- package/dist/mg-components/{p-a0fa44cf.entry.js → p-c85b5d10.entry.js} +1 -1
- package/dist/mg-components/p-yMGqY8YG.js +1 -0
- package/dist/types/components/molecules/inputs/mg-input/mg-input.conf.d.ts +0 -13
- package/dist/types/components/molecules/inputs/mg-input/mg-input.d.ts +4 -15
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +3 -21
- package/dist/types/components/molecules/inputs/mg-input-combobox/mg-input-combobox.d.ts +2 -16
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +0 -18
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +0 -18
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +4 -40
- package/dist/types/components.d.ts +7 -63
- package/ide/intellij/web-types.json +10 -136
- package/ide/vscode/html-custom-data.json +6 -104
- package/package.json +20 -20
- package/dist/cjs/mg-input.utils-D-ASK4ua.js +0 -49
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.utils.js +0 -21
- package/dist/components/mg-details2.js +0 -99
- package/dist/components/mg-input.utils.js +0 -24
- package/dist/esm/mg-input.utils-BYI03zSi.js +0 -46
- package/dist/mg-components/p-31856cff.entry.js +0 -1
- package/dist/mg-components/p-698dfc6c.entry.js +0 -1
- package/dist/mg-components/p-BAUTlb6r.js +0 -1
- package/dist/mg-components/p-CKB-AnCZ.js +0 -1
- package/dist/mg-components/p-PuX-pdL4.js +0 -1
- package/dist/types/components/molecules/inputs/mg-input/mg-input.utils.d.ts +0 -8
|
@@ -3,13 +3,11 @@ import { C as ClassList, m as cleanString, i as isValidString, t as toString } f
|
|
|
3
3
|
import { d as defineCustomElement$9, a as MgInputCheckboxList } from './mg-input-checkbox-paginated2.js';
|
|
4
4
|
import { d as defineCustomElement$a, b as classFieldset, e as classVerticalList, c as classReadonly, a as classDisabled } from './mg-input2.js';
|
|
5
5
|
import { i as initLocales } from './index3.js';
|
|
6
|
-
import { d as defineErrorMessage } from './mg-input.utils.js';
|
|
7
6
|
import { d as defineCustomElement$4, S as Status } from './mg-tabs2.js';
|
|
8
|
-
import { d as defineCustomElement$
|
|
9
|
-
import { d as defineCustomElement$
|
|
10
|
-
import { d as defineCustomElement$
|
|
11
|
-
import { d as defineCustomElement$
|
|
12
|
-
import { d as defineCustomElement$c } from './mg-details2.js';
|
|
7
|
+
import { d as defineCustomElement$f } from './mg-badge2.js';
|
|
8
|
+
import { d as defineCustomElement$e } from './mg-button2.js';
|
|
9
|
+
import { d as defineCustomElement$d } from './mg-card2.js';
|
|
10
|
+
import { d as defineCustomElement$c } from './mg-character-left2.js';
|
|
13
11
|
import { d as defineCustomElement$b } from './mg-icon2.js';
|
|
14
12
|
import { d as defineCustomElement$8 } from './mg-input-text2.js';
|
|
15
13
|
import { d as defineCustomElement$7 } from './mg-input-title2.js';
|
|
@@ -30,7 +28,7 @@ const SectionKind = {
|
|
|
30
28
|
NOT_SELECTED: 'not-selected',
|
|
31
29
|
};
|
|
32
30
|
|
|
33
|
-
const mgInputCheckboxCss = ".mg-c-
|
|
31
|
+
const mgInputCheckboxCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-group-container{padding:var(--mg-b-size-4) var(--mg-b-size-8);margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container{display:flex;width:unset;flex:unset;flex-wrap:wrap;column-gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container-list{display:flex;flex-flow:row wrap;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tab{display:block;min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs{min-height:0;flex-shrink:1}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-action{padding-top:var(--mg-b-size-16);padding-bottom:var(--mg-b-size-12)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__tabs-content{height:calc(24*var(--mg-b-size-8) - 2*var(--mg-b-size-8));overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-value{display:inline-flex;min-width:var(--mg-b-size-min-height);min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-radius:var(--mg-b-size-4);background-color:var(--mg-b-color-neutral-20);font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi b{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container b{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--with-values .mg-c-input__input-container{gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content{display:flex;width:calc(var(--mg-b-size-floating-element-max-width) - var(--mg-b-size-16));flex-direction:column;gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content .mg-c-input__tabs-content{min-height:calc(var(--mg-b-size-4)*55)}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__section-header-tootlip){margin-left:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-c-card-spacing:var(--mg-b-size-8)}.mg-c-input.mg-c-input--readonly ul{display:flex;min-height:var(--mg-b-font-size);flex-flow:column wrap;padding:0;margin:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) 0 0;list-style:none;row-gap:var(--mg-b-size-8)}";
|
|
34
32
|
|
|
35
33
|
/**
|
|
36
34
|
* type CheckboxItem validation function
|
|
@@ -229,18 +227,8 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
|
|
|
229
227
|
* Check if input is valid
|
|
230
228
|
*/
|
|
231
229
|
this.checkValidity = () => {
|
|
232
|
-
this.setValidity(this.readonly || this.disabled || (
|
|
230
|
+
this.setValidity(this.readonly || this.disabled || (!this.hasInvalidInput() && this.validateRequired()));
|
|
233
231
|
};
|
|
234
|
-
/**
|
|
235
|
-
* Test if component has items
|
|
236
|
-
* @returns truthy if component has items
|
|
237
|
-
*/
|
|
238
|
-
this.hasInputValue = () => { var _a; return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0; };
|
|
239
|
-
/**
|
|
240
|
-
* Test if component has no value error message displayed
|
|
241
|
-
* @returns truthy if compent display no value error message
|
|
242
|
-
*/
|
|
243
|
-
this.hasNoValueErrorMessageDisplay = () => this.errorMessage === this.messages.errors.noValue;
|
|
244
232
|
/**
|
|
245
233
|
* Set button text locale key
|
|
246
234
|
*/
|
|
@@ -282,25 +270,12 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
|
|
|
282
270
|
// Set error message
|
|
283
271
|
this.errorMessage = undefined;
|
|
284
272
|
if (displayError && !this.valid) {
|
|
285
|
-
if (errorMessage !== undefined)
|
|
273
|
+
if (errorMessage !== undefined)
|
|
286
274
|
this.errorMessage = errorMessage;
|
|
287
|
-
|
|
288
|
-
else if (!this.hasInputValue()) {
|
|
289
|
-
this.errorMessage = this.messages.errors.noValue;
|
|
290
|
-
}
|
|
291
|
-
else if (!this.validateRequired()) {
|
|
275
|
+
else if (!this.validateRequired())
|
|
292
276
|
this.errorMessage = this.messages.errors.required;
|
|
293
|
-
}
|
|
294
277
|
}
|
|
295
278
|
};
|
|
296
|
-
/**
|
|
297
|
-
* Reset error message
|
|
298
|
-
*/
|
|
299
|
-
this.resetErrorMessage = () => {
|
|
300
|
-
this.checkValidity();
|
|
301
|
-
this.errorMessage = undefined;
|
|
302
|
-
this.hasDisplayedError = false;
|
|
303
|
-
};
|
|
304
279
|
/**
|
|
305
280
|
* Method to get mg-popover identifier
|
|
306
281
|
* @returns MgPopover identifier
|
|
@@ -329,14 +304,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
|
|
|
329
304
|
* @returns The rendered readonly value.
|
|
330
305
|
*/
|
|
331
306
|
this.renderReadonly = (readonlyValue) => {
|
|
332
|
-
|
|
333
|
-
if (this.inputVerticalList) {
|
|
334
|
-
return (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (h("li", { key: value }, h("b", null, value))))));
|
|
335
|
-
}
|
|
336
|
-
else {
|
|
337
|
-
return h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', '));
|
|
338
|
-
}
|
|
339
|
-
}
|
|
307
|
+
return this.inputVerticalList ? (h("ul", { class: "mg-c-input__readonly-value" }, readonlyValue.map(value => (h("li", { key: value }, h("b", null, value)))))) : (h("b", { class: "mg-c-input__readonly-value" }, readonlyValue.join(', ')));
|
|
340
308
|
};
|
|
341
309
|
/**
|
|
342
310
|
* Renders the MgInputCheckboxList component.
|
|
@@ -345,16 +313,9 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
|
|
|
345
313
|
this.renderMgInputCheckboxList = () => (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, id: this.checkboxesId, disabled: this.disabled, name: this.name, invalid: this.invalid }));
|
|
346
314
|
}
|
|
347
315
|
validateValue(newValue) {
|
|
348
|
-
if (
|
|
349
|
-
this.displayError();
|
|
350
|
-
}
|
|
351
|
-
else if (newValue.length > 0 && isCheckboxItems(newValue)) {
|
|
316
|
+
if (isCheckboxItems(newValue)) {
|
|
352
317
|
this.checkboxItems = newValue.map((item, index) => (Object.assign(Object.assign({}, item), { _id: `${this.identifier}_${index}`, _handleInput: this.handleInput.bind(this), _handleBlur: this.handleBlur.bind(this), _handleKeydown: this.handleKeydown.bind(this) })));
|
|
353
318
|
this.valueChange.emit(newValue);
|
|
354
|
-
// force to reset error when noValueError is displaied
|
|
355
|
-
if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
|
|
356
|
-
this.resetErrorMessage();
|
|
357
|
-
}
|
|
358
319
|
}
|
|
359
320
|
else {
|
|
360
321
|
throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${toString(newValue)}.`);
|
|
@@ -498,7 +459,9 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
|
|
|
498
459
|
// - Keep everything in sync both inside and outside the component
|
|
499
460
|
return new Promise(resolve => {
|
|
500
461
|
requestAnimationFrame(() => {
|
|
501
|
-
this.
|
|
462
|
+
this.checkValidity();
|
|
463
|
+
this.errorMessage = undefined;
|
|
464
|
+
this.hasDisplayedError = false;
|
|
502
465
|
resolve();
|
|
503
466
|
});
|
|
504
467
|
});
|
|
@@ -621,9 +584,8 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
|
|
|
621
584
|
* @returns HTML Element
|
|
622
585
|
*/
|
|
623
586
|
render() {
|
|
624
|
-
var _a;
|
|
625
587
|
let inputContent;
|
|
626
|
-
const readonlyValue =
|
|
588
|
+
const readonlyValue = this.value.filter(({ value }) => value).map(({ title }) => title);
|
|
627
589
|
if (this.readonly) {
|
|
628
590
|
inputContent = this.renderReadonly(readonlyValue);
|
|
629
591
|
}
|
|
@@ -633,7 +595,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
|
|
|
633
595
|
else {
|
|
634
596
|
inputContent = this.renderCheckboxMulti();
|
|
635
597
|
}
|
|
636
|
-
return (h("mg-input", { key: '
|
|
598
|
+
return (h("mg-input", { key: '84d13ac702497773013daa72357e4d1dcf4ebb30', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
|
|
637
599
|
}
|
|
638
600
|
get element() { return this; }
|
|
639
601
|
static get watchers() { return {
|
|
@@ -670,7 +632,6 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
|
|
|
670
632
|
"editButtonMessage": [1, "edit-button-message"],
|
|
671
633
|
"showButtonMessage": [1, "show-button-message"],
|
|
672
634
|
"selectButtonMessage": [1, "select-button-message"],
|
|
673
|
-
"noValueErrorDetail": [1, "no-value-error-detail"],
|
|
674
635
|
"classCollection": [32],
|
|
675
636
|
"errorMessage": [32],
|
|
676
637
|
"checkboxItems": [32],
|
|
@@ -699,7 +660,7 @@ function defineCustomElement$1() {
|
|
|
699
660
|
if (typeof customElements === "undefined") {
|
|
700
661
|
return;
|
|
701
662
|
}
|
|
702
|
-
const components = ["mg-input-checkbox", "mg-badge", "mg-button", "mg-card", "mg-character-left", "mg-
|
|
663
|
+
const components = ["mg-input-checkbox", "mg-badge", "mg-button", "mg-card", "mg-character-left", "mg-icon", "mg-input", "mg-input-checkbox-paginated", "mg-input-text", "mg-input-title", "mg-popover", "mg-popover-content", "mg-tabs", "mg-tooltip", "mg-tooltip-content"];
|
|
703
664
|
components.forEach(tagName => { switch (tagName) {
|
|
704
665
|
case "mg-input-checkbox":
|
|
705
666
|
if (!customElements.get(tagName)) {
|
|
@@ -707,26 +668,21 @@ function defineCustomElement$1() {
|
|
|
707
668
|
}
|
|
708
669
|
break;
|
|
709
670
|
case "mg-badge":
|
|
710
|
-
if (!customElements.get(tagName)) {
|
|
711
|
-
defineCustomElement$g();
|
|
712
|
-
}
|
|
713
|
-
break;
|
|
714
|
-
case "mg-button":
|
|
715
671
|
if (!customElements.get(tagName)) {
|
|
716
672
|
defineCustomElement$f();
|
|
717
673
|
}
|
|
718
674
|
break;
|
|
719
|
-
case "mg-
|
|
675
|
+
case "mg-button":
|
|
720
676
|
if (!customElements.get(tagName)) {
|
|
721
677
|
defineCustomElement$e();
|
|
722
678
|
}
|
|
723
679
|
break;
|
|
724
|
-
case "mg-
|
|
680
|
+
case "mg-card":
|
|
725
681
|
if (!customElements.get(tagName)) {
|
|
726
682
|
defineCustomElement$d();
|
|
727
683
|
}
|
|
728
684
|
break;
|
|
729
|
-
case "mg-
|
|
685
|
+
case "mg-character-left":
|
|
730
686
|
if (!customElements.get(tagName)) {
|
|
731
687
|
defineCustomElement$c();
|
|
732
688
|
}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
|
-
import { P as Paginate, C as ClassList, f as formatID, e as Cursor,
|
|
3
|
-
import { d as defineCustomElement$8,
|
|
2
|
+
import { P as Paginate, C as ClassList, f as formatID, e as Cursor, n as nextTick, h as Page, j as getObjectValueFromKey, t as toString, d as allItemsAreString, k as isObject, i as isValidString } from './index2.js';
|
|
3
|
+
import { d as defineCustomElement$8, c as classReadonly, a as classDisabled, w as widths } from './mg-input2.js';
|
|
4
4
|
import { i as initLocales } from './index3.js';
|
|
5
5
|
import { K as Keys } from './events.utils.js';
|
|
6
|
-
import { d as
|
|
7
|
-
import { d as defineCustomElement$
|
|
8
|
-
import { d as defineCustomElement$b } from './mg-card2.js';
|
|
9
|
-
import { d as defineCustomElement$a } from './mg-details2.js';
|
|
6
|
+
import { d as defineCustomElement$b } from './mg-button2.js';
|
|
7
|
+
import { d as defineCustomElement$a } from './mg-card2.js';
|
|
10
8
|
import { d as defineCustomElement$9 } from './mg-icon2.js';
|
|
11
9
|
import { d as defineCustomElement$7 } from './mg-input-title2.js';
|
|
12
10
|
import { d as defineCustomElement$6 } from './mg-loader2.js';
|
|
@@ -15,7 +13,7 @@ import { d as defineCustomElement$4 } from './mg-popover-content2.js';
|
|
|
15
13
|
import { d as defineCustomElement$3 } from './mg-tooltip2.js';
|
|
16
14
|
import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
|
|
17
15
|
|
|
18
|
-
const mgInputComboboxCss = ".mg-c-
|
|
16
|
+
const mgInputComboboxCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__popover-info{padding:var(--mg-b-size-8);margin:0;color:var(--mg-b-color-neutral-90);text-align:center}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--combobox mg-popover{--mg-c-card-overflow:hidden;--mg-c-popover-padding-vertical:0;--mg-c-popover-padding-horizontal:0}.mg-c-input.mg-c-input--combobox .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--combobox .mg-c-input__box{cursor:pointer}.mg-c-input.mg-c-input--combobox .mg-c-input__popover-container{display:flex;min-width:var(--mg-c-input-list-width);max-height:calc(50*var(--mg-b-size-8) - var(--mg-b-size-32));flex-direction:column;gap:var(--mg-b-size-4);overflow-y:scroll}.mg-c-input.mg-c-input--combobox .mg-c-input__load-more{padding:0 var(--mg-b-size-8) var(--mg-b-size-4)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list{padding:0;margin:0;cursor:pointer;list-style:none}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item{display:flex;padding:var(--mg-b-size-8)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item:hover,.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--focus-visible{background-color:var(--mg-b-color-neutral-20)}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected{font-weight:700}.mg-c-input.mg-c-input--combobox .mg-c-input__input-list-item.mg-c-input__input-list-item--selected mg-icon{margin-left:auto}.mg-c-input.mg-c-input--combobox.mg-c-input--width-2 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-24) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-4 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + var(--mg-b-size-48) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-16 .mg-c-input__box{width:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2 + calc(23 * var(--mg-b-size-8)) + var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full mg-popover{--mg-c-popover-max-width:var(--mg-c-input-list-width, var(--mg-c-popover-max-width))}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__input-group-container{display:flex;width:100%}.mg-c-input.mg-c-input--combobox.mg-c-input--width-full .mg-c-input__box{flex:1}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-4))}.mg-c-input.mg-c-input--combobox.mg-c-input--input-append .mg-c-input__box-append{position:absolute;top:0;right:0}";
|
|
19
17
|
|
|
20
18
|
/**
|
|
21
19
|
* Check if object is an item
|
|
@@ -148,12 +146,10 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
148
146
|
*/
|
|
149
147
|
this.handleFilterInput = () => {
|
|
150
148
|
this.checkValidity();
|
|
151
|
-
if (this.hasDisplayedError)
|
|
149
|
+
if (this.hasDisplayedError)
|
|
152
150
|
this.setErrorMessage();
|
|
153
|
-
|
|
154
|
-
if (!this.popoverDisplay) {
|
|
151
|
+
if (!this.popoverDisplay)
|
|
155
152
|
this.popoverDisplay = true;
|
|
156
|
-
}
|
|
157
153
|
// update filter with debounce to prevent filter update overload
|
|
158
154
|
if (!this.debounce) {
|
|
159
155
|
this.debounce = true;
|
|
@@ -199,6 +195,7 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
199
195
|
* @param event - keyboard event
|
|
200
196
|
*/
|
|
201
197
|
this.handleFilterKeydown = (event) => {
|
|
198
|
+
var _a;
|
|
202
199
|
if (this.disabled || event.ctrlKey || event.shiftKey)
|
|
203
200
|
return;
|
|
204
201
|
let guard = false;
|
|
@@ -207,10 +204,11 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
207
204
|
case Keys.TAB:
|
|
208
205
|
case Keys.ENTER:
|
|
209
206
|
guard = event.key === Keys.ENTER;
|
|
210
|
-
const option = this.option
|
|
207
|
+
const option = (_a = this.option) !== null && _a !== void 0 ? _a : this.options.items.find(this.isCurrentOption);
|
|
211
208
|
// Sets the value to the content of the focused option in the listbox.
|
|
212
|
-
if (this.popoverDisplay)
|
|
209
|
+
if (this.popoverDisplay) {
|
|
213
210
|
this.setValue(option);
|
|
211
|
+
}
|
|
214
212
|
// Closes the popover.
|
|
215
213
|
this.popoverDisplay = false;
|
|
216
214
|
break;
|
|
@@ -331,46 +329,27 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
331
329
|
else
|
|
332
330
|
return '';
|
|
333
331
|
};
|
|
334
|
-
/**
|
|
335
|
-
* Test if component has no value error message displayed
|
|
336
|
-
* @returns truthy if compent display no value error message
|
|
337
|
-
*/
|
|
338
|
-
this.hasNoValueError = () => this.customError === CustomError.NoValue;
|
|
339
332
|
/**
|
|
340
333
|
* Check if input is valid
|
|
341
334
|
*/
|
|
342
335
|
this.checkValidity = () => {
|
|
343
|
-
|
|
344
|
-
this.setValidity(this.readonly || this.disabled);
|
|
336
|
+
this.setValidity(this.readonly || this.disabled || this.input.checkValidity());
|
|
345
337
|
};
|
|
346
338
|
/**
|
|
347
339
|
* Set input error message
|
|
340
|
+
* @param errorMessage - errorMessage override
|
|
348
341
|
*/
|
|
349
|
-
this.setErrorMessage = () => {
|
|
342
|
+
this.setErrorMessage = (errorMessage) => {
|
|
350
343
|
// Set error message
|
|
351
344
|
this.errorMessage = undefined;
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
this.errorMessage = this.messages.errors.noValue;
|
|
360
|
-
}
|
|
361
|
-
// required
|
|
362
|
-
else if (this.input.validity.valueMissing) {
|
|
363
|
-
this.errorMessage = this.messages.errors.required;
|
|
364
|
-
}
|
|
345
|
+
// Does have a custom error message
|
|
346
|
+
if (!this.valid && errorMessage !== undefined) {
|
|
347
|
+
this.errorMessage = errorMessage;
|
|
348
|
+
}
|
|
349
|
+
// required
|
|
350
|
+
else if (!this.valid && this.input.validity.valueMissing) {
|
|
351
|
+
this.errorMessage = this.messages.errors.required;
|
|
365
352
|
}
|
|
366
|
-
};
|
|
367
|
-
/**
|
|
368
|
-
* Reset error message
|
|
369
|
-
*/
|
|
370
|
-
this.resetErrorMessage = () => {
|
|
371
|
-
this.checkValidity();
|
|
372
|
-
this.errorMessage = undefined;
|
|
373
|
-
this.hasDisplayedError = false;
|
|
374
353
|
};
|
|
375
354
|
/**
|
|
376
355
|
* Get filtered options from `filter` input value
|
|
@@ -444,14 +423,14 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
444
423
|
*/
|
|
445
424
|
this.goToNextPage = () => {
|
|
446
425
|
this.showMore.emit();
|
|
447
|
-
if (this.fetchurl
|
|
426
|
+
if (Boolean(this.fetchurl)) {
|
|
448
427
|
return this.getOptions(typeof this.page.next === 'string' ? this.page.next : undefined).then(nextPage => {
|
|
449
|
-
if (
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
}
|
|
428
|
+
if (!Boolean(nextPage))
|
|
429
|
+
return;
|
|
430
|
+
// merge items from current page and next page
|
|
431
|
+
const items = [...this.page.items, ...nextPage.items];
|
|
432
|
+
// create new options pagination withe merged items
|
|
433
|
+
this.options = new Paginate(items, { total: nextPage.total, next: nextPage.next, top: items.length });
|
|
455
434
|
});
|
|
456
435
|
}
|
|
457
436
|
else {
|
|
@@ -468,20 +447,12 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
468
447
|
* @returns promise
|
|
469
448
|
*/
|
|
470
449
|
this.updatePage = async () => {
|
|
471
|
-
if (this.fetchurl
|
|
450
|
+
if (Boolean(this.fetchurl)) {
|
|
472
451
|
return this.getOptions().then(page => {
|
|
473
|
-
if (
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
if (this.filter.length === 0 && page.total === 0) {
|
|
478
|
-
this.displayError();
|
|
479
|
-
}
|
|
480
|
-
// force to reset error when noValueError is displaied
|
|
481
|
-
else if (this.invalid && this.hasNoValueError()) {
|
|
482
|
-
this.resetErrorMessage();
|
|
483
|
-
}
|
|
484
|
-
}
|
|
452
|
+
if (!Boolean(page))
|
|
453
|
+
return;
|
|
454
|
+
// reset current options pagination from API response
|
|
455
|
+
this.options = new Paginate(page.items, { total: page.total, next: page.next, top: page.top });
|
|
485
456
|
});
|
|
486
457
|
}
|
|
487
458
|
else {
|
|
@@ -500,16 +471,14 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
500
471
|
const response = await fetch(updateUrl, this.fetchoptions);
|
|
501
472
|
if (!response.ok) {
|
|
502
473
|
this.fetchError.emit(new Error(`${response.status} - ${response.statusText}`));
|
|
503
|
-
this.displayError();
|
|
504
474
|
return;
|
|
505
475
|
}
|
|
506
476
|
const json = await response.json();
|
|
507
|
-
const
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
value: getObjectValueFromKey(item, this.fetchmappings.response.itemValue, item),
|
|
477
|
+
const items = getObjectValueFromKey(json, this.fetchmappings.response.items).map((item) => ({
|
|
478
|
+
title: getObjectValueFromKey(item, this.fetchmappings.response.itemTitle),
|
|
479
|
+
value: this.fetchmappings.response.itemValue !== undefined ? getObjectValueFromKey(item, this.fetchmappings.response.itemValue) : item,
|
|
511
480
|
}));
|
|
512
|
-
const total = Number(getObjectValueFromKey(json, this.fetchmappings.response.total,
|
|
481
|
+
const total = Number(getObjectValueFromKey(json, this.fetchmappings.response.total, 0));
|
|
513
482
|
let next = getObjectValueFromKey(json, this.fetchmappings.response.next);
|
|
514
483
|
if (URL.canParse(updateUrl) && Boolean(next) && !URL.canParse(next)) {
|
|
515
484
|
const previousUrl = new URL(updateUrl);
|
|
@@ -521,7 +490,6 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
521
490
|
}
|
|
522
491
|
catch (error) {
|
|
523
492
|
this.fetchError.emit(error);
|
|
524
|
-
this.displayError();
|
|
525
493
|
}
|
|
526
494
|
};
|
|
527
495
|
}
|
|
@@ -530,35 +498,24 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
530
498
|
this.valueChange.emit(newValue);
|
|
531
499
|
}
|
|
532
500
|
watchItems(newValue) {
|
|
533
|
-
|
|
534
|
-
if (![undefined, null].includes(this.fetchurl) && [undefined, null].includes(newValue)) {
|
|
501
|
+
if (Boolean(this.fetchurl) && !Boolean(newValue)) {
|
|
535
502
|
// skip newValue check
|
|
536
503
|
return;
|
|
537
504
|
}
|
|
538
|
-
|
|
539
|
-
else if (![undefined, null].includes(this.fetchurl) && Array.isArray(newValue)) {
|
|
505
|
+
else if (Boolean(this.fetchurl) && Boolean(newValue)) {
|
|
540
506
|
throw new Error(`<mg-input-combobox> prop "items" values cannot be use with "fetchurl" prop defined. Passed value: ${toString(newValue)}.`);
|
|
541
507
|
}
|
|
542
|
-
// Empty
|
|
543
|
-
else if (
|
|
508
|
+
// Empty options
|
|
509
|
+
else if (Array.isArray(newValue) && newValue.length === 0) {
|
|
544
510
|
this.options = new Paginate([]);
|
|
545
|
-
this.displayError();
|
|
546
511
|
}
|
|
547
512
|
// String array
|
|
548
513
|
else if (allItemsAreString(newValue)) {
|
|
549
514
|
this.options = new Paginate(newValue.map(item => ({ title: item, value: item })), { total: newValue.length });
|
|
550
|
-
// force to reset error when noValueError is displayed
|
|
551
|
-
if (this.invalid && this.hasNoValueError()) {
|
|
552
|
-
this.resetErrorMessage();
|
|
553
|
-
}
|
|
554
515
|
}
|
|
555
516
|
// Object array
|
|
556
517
|
else if (isItems(newValue)) {
|
|
557
518
|
this.options = new Paginate(newValue, { total: newValue.length });
|
|
558
|
-
// force to reset error when noValueError is displayed
|
|
559
|
-
if (this.invalid && this.hasNoValueError()) {
|
|
560
|
-
this.resetErrorMessage();
|
|
561
|
-
}
|
|
562
519
|
}
|
|
563
520
|
else {
|
|
564
521
|
throw new Error(`<mg-input-combobox> prop "items" values must be the same type, string or Option. Passed value: ${toString(newValue)}.`);
|
|
@@ -626,7 +583,7 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
626
583
|
}
|
|
627
584
|
}
|
|
628
585
|
watchOptions(newValue) {
|
|
629
|
-
this.page = newValue.getPage(0, this.filter
|
|
586
|
+
this.page = newValue.getPage(0, Boolean(this.filter) ? this.optionsFilter : undefined);
|
|
630
587
|
}
|
|
631
588
|
watchFilter(newValue) {
|
|
632
589
|
this.loadingWrapper({ name: 'load-data' });
|
|
@@ -692,8 +649,8 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
692
649
|
throw new Error('<mg-input-combobox> method "setError()" param "errorMessage" must be a string.');
|
|
693
650
|
}
|
|
694
651
|
else {
|
|
695
|
-
this.setValidity(valid
|
|
696
|
-
this.setErrorMessage();
|
|
652
|
+
this.setValidity(valid);
|
|
653
|
+
this.setErrorMessage(valid ? undefined : errorMessage);
|
|
697
654
|
this.hasDisplayedError = this.invalid;
|
|
698
655
|
}
|
|
699
656
|
}
|
|
@@ -713,7 +670,9 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
713
670
|
// - Keep everything in sync both inside and outside the component
|
|
714
671
|
return new Promise(resolve => {
|
|
715
672
|
requestAnimationFrame(() => {
|
|
716
|
-
this.
|
|
673
|
+
this.checkValidity();
|
|
674
|
+
this.errorMessage = undefined;
|
|
675
|
+
this.hasDisplayedError = false;
|
|
717
676
|
resolve();
|
|
718
677
|
});
|
|
719
678
|
});
|
|
@@ -736,34 +695,15 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
736
695
|
}
|
|
737
696
|
/**
|
|
738
697
|
* Method to set validity values
|
|
739
|
-
* @param
|
|
740
|
-
* @param customErrorMessage - custom error message
|
|
698
|
+
* @param newValue - valid new value
|
|
741
699
|
*/
|
|
742
|
-
setValidity(
|
|
743
|
-
var _a;
|
|
700
|
+
setValidity(newValue) {
|
|
744
701
|
const oldValidValue = this.valid;
|
|
745
|
-
|
|
746
|
-
// Set custom validity
|
|
747
|
-
if (!valid && this.input !== undefined) {
|
|
748
|
-
// custom errror, start by reset it
|
|
749
|
-
this.customError = undefined;
|
|
750
|
-
if (isValidString(customErrorMessage)) {
|
|
751
|
-
this.customError = customErrorMessage;
|
|
752
|
-
}
|
|
753
|
-
// no value
|
|
754
|
-
else if ((this.fetchurl === undefined ? ((_a = this.items) !== null && _a !== void 0 ? _a : []).length : this.page.total) === 0) {
|
|
755
|
-
this.customError = CustomError.NoValue;
|
|
756
|
-
}
|
|
757
|
-
// get new input validity from validity state
|
|
758
|
-
valid = this.input.checkValidity() && this.customError === undefined;
|
|
759
|
-
}
|
|
760
|
-
// set valid/invalid props
|
|
761
|
-
this.valid = valid;
|
|
702
|
+
this.valid = newValue;
|
|
762
703
|
this.invalid = !this.valid;
|
|
763
704
|
// We need to send valid event even if it is the same value
|
|
764
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
705
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
765
706
|
this.inputValid.emit(this.valid);
|
|
766
|
-
}
|
|
767
707
|
}
|
|
768
708
|
/*************
|
|
769
709
|
* Lifecycle *
|
|
@@ -804,19 +744,15 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
804
744
|
const listId = `${this.identifier}-list`;
|
|
805
745
|
const readonlyValue = this.getValueTitle();
|
|
806
746
|
const withResetButton = this.value && !this.disabled;
|
|
807
|
-
const disabled = this.disabled || this.hasNoValueError();
|
|
808
747
|
let popoverContent;
|
|
809
|
-
if (((_a = this.page) === null || _a === void 0 ? void 0 : _a.items.length) > 0)
|
|
748
|
+
if (((_a = this.page) === null || _a === void 0 ? void 0 : _a.items.length) > 0)
|
|
810
749
|
popoverContent = 'list';
|
|
811
|
-
|
|
812
|
-
else if (((_b = this.page) === null || _b === void 0 ? void 0 : _b.items.length) === 0 && this.filter.length > 0) {
|
|
750
|
+
else if (((_b = this.page) === null || _b === void 0 ? void 0 : _b.items.length) === 0 && Boolean(this.filter))
|
|
813
751
|
popoverContent = 'notfound';
|
|
814
|
-
|
|
815
|
-
else if (((_c = this.page) === null || _c === void 0 ? void 0 : _c.items.length) === 0) {
|
|
752
|
+
else if (((_c = this.page) === null || _c === void 0 ? void 0 : _c.items.length) === 0)
|
|
816
753
|
popoverContent = 'notavailable';
|
|
817
|
-
}
|
|
818
754
|
let activeDescendant;
|
|
819
|
-
if (
|
|
755
|
+
if (Boolean((_d = this.option) === null || _d === void 0 ? void 0 : _d.value)) {
|
|
820
756
|
activeDescendant = this.option.value;
|
|
821
757
|
}
|
|
822
758
|
else if (typeof this.value === 'string') {
|
|
@@ -825,12 +761,12 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
825
761
|
else {
|
|
826
762
|
activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
|
|
827
763
|
}
|
|
828
|
-
return (h("mg-input", { key: '
|
|
764
|
+
return (h("mg-input", { key: '79e5263cd3b1c0fa0b3f386a547f2bdd48a33b28', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
|
|
829
765
|
'--mg-c-input-list-width': Boolean((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) ? `${this.input.offsetWidth}px` : undefined,
|
|
830
|
-
}, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, h("div", { class: "mg-c-input__input-group-container" }, h("mg-icon", { icon: "magnifying-glass" }), h("input", { type: "text", role: "combobox", class: "mg-c-input__box mg-c-input__box--width", value: this.filter, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: disabled, required: this.required, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.popoverDisplay.toString(), "aria-controls": listId, "aria-invalid": (this.invalid === true).toString(), "aria-activedescendant": formatID(activeDescendant), onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
|
|
766
|
+
}, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, h("div", { class: "mg-c-input__input-group-container" }, h("mg-icon", { icon: "magnifying-glass" }), h("input", { type: "text", role: "combobox", class: "mg-c-input__box mg-c-input__box--width", value: this.filter, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.popoverDisplay.toString(), "aria-controls": listId, "aria-invalid": (this.invalid === true).toString(), "aria-activedescendant": formatID(activeDescendant), onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
|
|
831
767
|
if (el !== null)
|
|
832
768
|
this.input = el;
|
|
833
|
-
} }), withResetButton ? (h("mg-button", { class: "mg-c-input__box-append mg-c-input__reset", variant: "flat", "is-icon": true, label: this.messages.general.reset, "aria-controls": this.identifier, tabindex: "-1", onClick: this.handleResetButton
|
|
769
|
+
} }), withResetButton ? (h("mg-button", { class: "mg-c-input__box-append mg-c-input__reset", variant: "flat", "is-icon": true, label: this.messages.general.reset, "aria-controls": this.identifier, tabindex: "-1", onClick: this.handleResetButton }, h("mg-icon", { icon: "cross" }))) : (h("mg-button", { class: "mg-c-input__box-append", variant: "flat", "is-icon": true, label: this.itemsLabel, tabindex: "-1", disabled: this.disabled }, h("mg-icon", { icon: `chevron-${this.popoverDisplay ? 'up' : 'down'}` })))), h("div", { slot: "content", class: "mg-c-input__popover-container" }, popoverContent === 'list' && [
|
|
834
770
|
// eslint-disable-next-line jsx-a11y/role-supports-aria-props
|
|
835
771
|
h("ul", { key: "list", class: "mg-c-input__input-list", role: "listbox", id: listId, "aria-label": this.itemsLabel, "aria-setsize": this.page.total }, this.page.items.map(option => {
|
|
836
772
|
var _a;
|
|
@@ -886,7 +822,6 @@ const MgInputCombobox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCombobox
|
|
|
886
822
|
"fetchurl": [1],
|
|
887
823
|
"fetchoptions": [16],
|
|
888
824
|
"fetchmappings": [16],
|
|
889
|
-
"noValueErrorDetail": [1, "no-value-error-detail"],
|
|
890
825
|
"valid": [1028],
|
|
891
826
|
"invalid": [1028],
|
|
892
827
|
"isLoading": [32],
|
|
@@ -919,7 +854,7 @@ function defineCustomElement$1() {
|
|
|
919
854
|
if (typeof customElements === "undefined") {
|
|
920
855
|
return;
|
|
921
856
|
}
|
|
922
|
-
const components = ["mg-input-combobox", "mg-button", "mg-card", "mg-
|
|
857
|
+
const components = ["mg-input-combobox", "mg-button", "mg-card", "mg-icon", "mg-input", "mg-input-title", "mg-loader", "mg-popover", "mg-popover-content", "mg-tooltip", "mg-tooltip-content"];
|
|
923
858
|
components.forEach(tagName => { switch (tagName) {
|
|
924
859
|
case "mg-input-combobox":
|
|
925
860
|
if (!customElements.get(tagName)) {
|
|
@@ -927,16 +862,11 @@ function defineCustomElement$1() {
|
|
|
927
862
|
}
|
|
928
863
|
break;
|
|
929
864
|
case "mg-button":
|
|
930
|
-
if (!customElements.get(tagName)) {
|
|
931
|
-
defineCustomElement$c();
|
|
932
|
-
}
|
|
933
|
-
break;
|
|
934
|
-
case "mg-card":
|
|
935
865
|
if (!customElements.get(tagName)) {
|
|
936
866
|
defineCustomElement$b();
|
|
937
867
|
}
|
|
938
868
|
break;
|
|
939
|
-
case "mg-
|
|
869
|
+
case "mg-card":
|
|
940
870
|
if (!customElements.get(tagName)) {
|
|
941
871
|
defineCustomElement$a();
|
|
942
872
|
}
|