@mgdis/mg-components 6.15.0 → 6.17.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-DCZEYvlH.js} +48 -29
- package/dist/cjs/{index-iUZvsp-F.js → index-TUElr4Wv.js} +18 -30
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_37.cjs.entry.js +100 -365
- 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 +4 -4
- 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/atoms/internals/mg-character-left/mg-character-left.js +5 -5
- package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js +7 -7
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +6 -6
- package/dist/collection/components/atoms/mg-button/mg-button.js +13 -13
- package/dist/collection/components/atoms/mg-card/mg-card.js +2 -2
- package/dist/collection/components/atoms/mg-divider/mg-divider.js +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +32 -26
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +3 -3
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js +2 -2
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +6 -6
- 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 +37 -108
- 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-paginated/mg-input-checkbox-paginated.js +6 -8
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +42 -99
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js +82 -167
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +27 -44
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +40 -55
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +26 -26
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +32 -86
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +26 -27
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +33 -82
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +33 -34
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +32 -32
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +27 -161
- package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js +2 -4
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js +4 -5
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js +7 -7
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +1 -4
- package/dist/collection/components/molecules/mg-alert/mg-alert.js +4 -4
- package/dist/collection/components/molecules/mg-details/mg-details.js +6 -6
- package/dist/collection/components/molecules/mg-form/mg-form.js +13 -13
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +2 -2
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +3 -3
- package/dist/collection/components/molecules/mg-message/mg-message.js +2 -2
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +6 -6
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +7 -8
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +13 -13
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +6 -6
- package/dist/collection/components/molecules/mg-progress/mg-progress.js +6 -6
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +0 -1
- package/dist/collection/components/molecules/mg-table/mg-table.js +2 -3
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +6 -7
- package/dist/collection/locales/en/messages.json +8 -13
- package/dist/collection/locales/fr/messages.json +8 -13
- package/dist/components/index2.js +1 -1
- package/dist/components/index3.js +18 -30
- package/dist/components/mg-action-more.js +4 -2
- package/dist/components/mg-alert.js +4 -2
- package/dist/components/mg-badge2.js +4 -2
- package/dist/components/mg-button2.js +4 -2
- package/dist/components/mg-card2.js +4 -2
- package/dist/components/mg-character-left2.js +4 -2
- package/dist/components/mg-details.js +99 -1
- package/dist/components/mg-divider2.js +4 -2
- package/dist/components/mg-form.js +4 -2
- package/dist/components/mg-icon2.js +29 -21
- package/dist/components/mg-illustrated-message.js +4 -2
- package/dist/components/mg-input-checkbox-paginated2.js +6 -7
- package/dist/components/mg-input-checkbox.js +23 -65
- package/dist/components/mg-input-combobox.js +64 -132
- package/dist/components/mg-input-date.js +8 -29
- package/dist/components/mg-input-numeric.js +8 -27
- package/dist/components/mg-input-password.js +6 -10
- package/dist/components/mg-input-radio.js +16 -55
- package/dist/components/mg-input-rich-text-editor.js +6 -10
- package/dist/components/mg-input-select2.js +12 -46
- package/dist/components/mg-input-text2.js +6 -10
- package/dist/components/mg-input-textarea.js +6 -10
- package/dist/components/mg-input-title2.js +4 -2
- package/dist/components/mg-input-toggle.js +15 -98
- package/dist/components/mg-input2.js +26 -101
- package/dist/components/mg-item-more2.js +8 -4
- package/dist/components/mg-loader2.js +4 -2
- package/dist/components/mg-menu-item2.js +4 -2
- package/dist/components/mg-message2.js +4 -2
- package/dist/components/mg-modal.js +4 -2
- package/dist/components/mg-pagination.js +6 -10
- package/dist/components/mg-panel.js +11 -15
- package/dist/components/mg-popover-content2.js +4 -2
- package/dist/components/mg-popover2.js +4 -2
- package/dist/components/mg-progress.js +4 -2
- package/dist/components/mg-skip-links.js +4 -2
- package/dist/components/mg-table.js +4 -2
- package/dist/components/mg-tabs2.js +4 -2
- package/dist/components/mg-tag.js +4 -2
- package/dist/components/mg-tooltip-content2.js +4 -2
- package/dist/components/mg-tooltip2.js +4 -2
- package/dist/esm/events.utils-yMGqY8YG.js +23 -0
- package/dist/esm/{index-CKB-AnCZ.js → index-CNX6lq0x.js} +18 -30
- package/dist/esm/{index-DhAOnZJn.js → index-T6kOJXP1.js} +48 -29
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_37.entry.js +96 -361
- 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 +4 -4
- 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 +8 -13
- package/dist/mg-components/locales/fr/messages.json +8 -13
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/{p-47e19783.entry.js → p-0e6b40d6.entry.js} +1 -1
- package/dist/mg-components/{p-67af6274.entry.js → p-397bf67b.entry.js} +1 -1
- package/dist/mg-components/{p-a0fa44cf.entry.js → p-5dc3a1fb.entry.js} +1 -1
- package/dist/mg-components/p-8a69175b.entry.js +1 -0
- package/dist/mg-components/p-CNX6lq0x.js +1 -0
- package/dist/mg-components/p-CNgv8hc5.js +1 -0
- package/dist/mg-components/p-T6kOJXP1.js +2 -0
- package/dist/mg-components/{p-420daa1e.entry.js → p-c5da335e.entry.js} +1 -1
- package/dist/mg-components/p-d84d87ea.entry.js +1 -0
- package/dist/mg-components/p-yMGqY8YG.js +1 -0
- package/dist/types/components/atoms/mg-icon/mg-icon.conf.d.ts +1 -1
- package/dist/types/components/atoms/mg-icon/mg-icon.d.ts +0 -5
- 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/dist/types/stencil-public-runtime.d.ts +39 -2
- package/dist/types/types/index.d.ts +1 -1
- package/ide/intellij/web-types.json +23 -304
- package/ide/vscode/html-custom-data.json +18 -113
- package/package.json +22 -22
- 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-DhAOnZJn.js +0 -2
- 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
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { allItemsAreString, ClassList, getObjectValueFromKey, isValidString, nextTick, Page, Paginate, Cursor, toString, isObject, formatID, } from "@mgdis/core-ui-helpers/dist/utils";
|
|
3
|
-
import { widths, classReadonly, classDisabled
|
|
3
|
+
import { widths, classReadonly, classDisabled } from "../mg-input/mg-input.conf";
|
|
4
4
|
import { initLocales } from "../../../../locales";
|
|
5
5
|
import { Keys } from "../../../../utils/events.utils";
|
|
6
|
-
import { defineErrorMessage } from "../mg-input/mg-input.utils";
|
|
7
6
|
/**
|
|
8
7
|
* Check if object is an item
|
|
9
8
|
* @param item - object to check
|
|
@@ -127,12 +126,10 @@ export class MgInputCombobox {
|
|
|
127
126
|
*/
|
|
128
127
|
this.handleFilterInput = () => {
|
|
129
128
|
this.checkValidity();
|
|
130
|
-
if (this.hasDisplayedError)
|
|
129
|
+
if (this.hasDisplayedError)
|
|
131
130
|
this.setErrorMessage();
|
|
132
|
-
|
|
133
|
-
if (!this.popoverDisplay) {
|
|
131
|
+
if (!this.popoverDisplay)
|
|
134
132
|
this.popoverDisplay = true;
|
|
135
|
-
}
|
|
136
133
|
// update filter with debounce to prevent filter update overload
|
|
137
134
|
if (!this.debounce) {
|
|
138
135
|
this.debounce = true;
|
|
@@ -178,6 +175,7 @@ export class MgInputCombobox {
|
|
|
178
175
|
* @param event - keyboard event
|
|
179
176
|
*/
|
|
180
177
|
this.handleFilterKeydown = (event) => {
|
|
178
|
+
var _a;
|
|
181
179
|
if (this.disabled || event.ctrlKey || event.shiftKey)
|
|
182
180
|
return;
|
|
183
181
|
let guard = false;
|
|
@@ -186,10 +184,11 @@ export class MgInputCombobox {
|
|
|
186
184
|
case Keys.TAB:
|
|
187
185
|
case Keys.ENTER:
|
|
188
186
|
guard = event.key === Keys.ENTER;
|
|
189
|
-
const option = this.option
|
|
187
|
+
const option = (_a = this.option) !== null && _a !== void 0 ? _a : this.options.items.find(this.isCurrentOption);
|
|
190
188
|
// Sets the value to the content of the focused option in the listbox.
|
|
191
|
-
if (this.popoverDisplay)
|
|
189
|
+
if (this.popoverDisplay) {
|
|
192
190
|
this.setValue(option);
|
|
191
|
+
}
|
|
193
192
|
// Closes the popover.
|
|
194
193
|
this.popoverDisplay = false;
|
|
195
194
|
break;
|
|
@@ -310,46 +309,27 @@ export class MgInputCombobox {
|
|
|
310
309
|
else
|
|
311
310
|
return '';
|
|
312
311
|
};
|
|
313
|
-
/**
|
|
314
|
-
* Test if component has no value error message displayed
|
|
315
|
-
* @returns truthy if compent display no value error message
|
|
316
|
-
*/
|
|
317
|
-
this.hasNoValueError = () => this.customError === CustomError.NoValue;
|
|
318
312
|
/**
|
|
319
313
|
* Check if input is valid
|
|
320
314
|
*/
|
|
321
315
|
this.checkValidity = () => {
|
|
322
|
-
|
|
323
|
-
this.setValidity(this.readonly || this.disabled);
|
|
316
|
+
this.setValidity(this.readonly || this.disabled || this.input.checkValidity());
|
|
324
317
|
};
|
|
325
318
|
/**
|
|
326
319
|
* Set input error message
|
|
320
|
+
* @param errorMessage - errorMessage override
|
|
327
321
|
*/
|
|
328
|
-
this.setErrorMessage = () => {
|
|
322
|
+
this.setErrorMessage = (errorMessage) => {
|
|
329
323
|
// Set error message
|
|
330
324
|
this.errorMessage = undefined;
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
this.errorMessage = this.messages.errors.noValue;
|
|
339
|
-
}
|
|
340
|
-
// required
|
|
341
|
-
else if (this.input.validity.valueMissing) {
|
|
342
|
-
this.errorMessage = this.messages.errors.required;
|
|
343
|
-
}
|
|
325
|
+
// Does have a custom error message
|
|
326
|
+
if (!this.valid && errorMessage !== undefined) {
|
|
327
|
+
this.errorMessage = errorMessage;
|
|
328
|
+
}
|
|
329
|
+
// required
|
|
330
|
+
else if (!this.valid && this.input.validity.valueMissing) {
|
|
331
|
+
this.errorMessage = this.messages.errors.required;
|
|
344
332
|
}
|
|
345
|
-
};
|
|
346
|
-
/**
|
|
347
|
-
* Reset error message
|
|
348
|
-
*/
|
|
349
|
-
this.resetErrorMessage = () => {
|
|
350
|
-
this.checkValidity();
|
|
351
|
-
this.errorMessage = undefined;
|
|
352
|
-
this.hasDisplayedError = false;
|
|
353
333
|
};
|
|
354
334
|
/**
|
|
355
335
|
* Get filtered options from `filter` input value
|
|
@@ -423,14 +403,14 @@ export class MgInputCombobox {
|
|
|
423
403
|
*/
|
|
424
404
|
this.goToNextPage = () => {
|
|
425
405
|
this.showMore.emit();
|
|
426
|
-
if (this.fetchurl
|
|
406
|
+
if (Boolean(this.fetchurl)) {
|
|
427
407
|
return this.getOptions(typeof this.page.next === 'string' ? this.page.next : undefined).then(nextPage => {
|
|
428
|
-
if (
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
}
|
|
408
|
+
if (!Boolean(nextPage))
|
|
409
|
+
return;
|
|
410
|
+
// merge items from current page and next page
|
|
411
|
+
const items = [...this.page.items, ...nextPage.items];
|
|
412
|
+
// create new options pagination withe merged items
|
|
413
|
+
this.options = new Paginate(items, { total: nextPage.total, next: nextPage.next, top: items.length });
|
|
434
414
|
});
|
|
435
415
|
}
|
|
436
416
|
else {
|
|
@@ -447,20 +427,12 @@ export class MgInputCombobox {
|
|
|
447
427
|
* @returns promise
|
|
448
428
|
*/
|
|
449
429
|
this.updatePage = async () => {
|
|
450
|
-
if (this.fetchurl
|
|
430
|
+
if (Boolean(this.fetchurl)) {
|
|
451
431
|
return this.getOptions().then(page => {
|
|
452
|
-
if (
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
if (this.filter.length === 0 && page.total === 0) {
|
|
457
|
-
this.displayError();
|
|
458
|
-
}
|
|
459
|
-
// force to reset error when noValueError is displaied
|
|
460
|
-
else if (this.invalid && this.hasNoValueError()) {
|
|
461
|
-
this.resetErrorMessage();
|
|
462
|
-
}
|
|
463
|
-
}
|
|
432
|
+
if (!Boolean(page))
|
|
433
|
+
return;
|
|
434
|
+
// reset current options pagination from API response
|
|
435
|
+
this.options = new Paginate(page.items, { total: page.total, next: page.next, top: page.top });
|
|
464
436
|
});
|
|
465
437
|
}
|
|
466
438
|
else {
|
|
@@ -479,16 +451,14 @@ export class MgInputCombobox {
|
|
|
479
451
|
const response = await fetch(updateUrl, this.fetchoptions);
|
|
480
452
|
if (!response.ok) {
|
|
481
453
|
this.fetchError.emit(new Error(`${response.status} - ${response.statusText}`));
|
|
482
|
-
this.displayError();
|
|
483
454
|
return;
|
|
484
455
|
}
|
|
485
456
|
const json = await response.json();
|
|
486
|
-
const
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
value: getObjectValueFromKey(item, this.fetchmappings.response.itemValue, item),
|
|
457
|
+
const items = getObjectValueFromKey(json, this.fetchmappings.response.items).map((item) => ({
|
|
458
|
+
title: getObjectValueFromKey(item, this.fetchmappings.response.itemTitle),
|
|
459
|
+
value: this.fetchmappings.response.itemValue !== undefined ? getObjectValueFromKey(item, this.fetchmappings.response.itemValue) : item,
|
|
490
460
|
}));
|
|
491
|
-
const total = Number(getObjectValueFromKey(json, this.fetchmappings.response.total,
|
|
461
|
+
const total = Number(getObjectValueFromKey(json, this.fetchmappings.response.total, 0));
|
|
492
462
|
let next = getObjectValueFromKey(json, this.fetchmappings.response.next);
|
|
493
463
|
if (URL.canParse(updateUrl) && Boolean(next) && !URL.canParse(next)) {
|
|
494
464
|
const previousUrl = new URL(updateUrl);
|
|
@@ -500,7 +470,6 @@ export class MgInputCombobox {
|
|
|
500
470
|
}
|
|
501
471
|
catch (error) {
|
|
502
472
|
this.fetchError.emit(error);
|
|
503
|
-
this.displayError();
|
|
504
473
|
}
|
|
505
474
|
};
|
|
506
475
|
}
|
|
@@ -509,35 +478,24 @@ export class MgInputCombobox {
|
|
|
509
478
|
this.valueChange.emit(newValue);
|
|
510
479
|
}
|
|
511
480
|
watchItems(newValue) {
|
|
512
|
-
|
|
513
|
-
if (![undefined, null].includes(this.fetchurl) && [undefined, null].includes(newValue)) {
|
|
481
|
+
if (Boolean(this.fetchurl) && !Boolean(newValue)) {
|
|
514
482
|
// skip newValue check
|
|
515
483
|
return;
|
|
516
484
|
}
|
|
517
|
-
|
|
518
|
-
else if (![undefined, null].includes(this.fetchurl) && Array.isArray(newValue)) {
|
|
485
|
+
else if (Boolean(this.fetchurl) && Boolean(newValue)) {
|
|
519
486
|
throw new Error(`<mg-input-combobox> prop "items" values cannot be use with "fetchurl" prop defined. Passed value: ${toString(newValue)}.`);
|
|
520
487
|
}
|
|
521
|
-
// Empty
|
|
522
|
-
else if (
|
|
488
|
+
// Empty options
|
|
489
|
+
else if (Array.isArray(newValue) && newValue.length === 0) {
|
|
523
490
|
this.options = new Paginate([]);
|
|
524
|
-
this.displayError();
|
|
525
491
|
}
|
|
526
492
|
// String array
|
|
527
493
|
else if (allItemsAreString(newValue)) {
|
|
528
494
|
this.options = new Paginate(newValue.map(item => ({ title: item, value: item })), { total: newValue.length });
|
|
529
|
-
// force to reset error when noValueError is displayed
|
|
530
|
-
if (this.invalid && this.hasNoValueError()) {
|
|
531
|
-
this.resetErrorMessage();
|
|
532
|
-
}
|
|
533
495
|
}
|
|
534
496
|
// Object array
|
|
535
497
|
else if (isItems(newValue)) {
|
|
536
498
|
this.options = new Paginate(newValue, { total: newValue.length });
|
|
537
|
-
// force to reset error when noValueError is displayed
|
|
538
|
-
if (this.invalid && this.hasNoValueError()) {
|
|
539
|
-
this.resetErrorMessage();
|
|
540
|
-
}
|
|
541
499
|
}
|
|
542
500
|
else {
|
|
543
501
|
throw new Error(`<mg-input-combobox> prop "items" values must be the same type, string or Option. Passed value: ${toString(newValue)}.`);
|
|
@@ -605,7 +563,7 @@ export class MgInputCombobox {
|
|
|
605
563
|
}
|
|
606
564
|
}
|
|
607
565
|
watchOptions(newValue) {
|
|
608
|
-
this.page = newValue.getPage(0, this.filter
|
|
566
|
+
this.page = newValue.getPage(0, Boolean(this.filter) ? this.optionsFilter : undefined);
|
|
609
567
|
}
|
|
610
568
|
watchFilter(newValue) {
|
|
611
569
|
this.loadingWrapper({ name: 'load-data' });
|
|
@@ -671,8 +629,8 @@ export class MgInputCombobox {
|
|
|
671
629
|
throw new Error('<mg-input-combobox> method "setError()" param "errorMessage" must be a string.');
|
|
672
630
|
}
|
|
673
631
|
else {
|
|
674
|
-
this.setValidity(valid
|
|
675
|
-
this.setErrorMessage();
|
|
632
|
+
this.setValidity(valid);
|
|
633
|
+
this.setErrorMessage(valid ? undefined : errorMessage);
|
|
676
634
|
this.hasDisplayedError = this.invalid;
|
|
677
635
|
}
|
|
678
636
|
}
|
|
@@ -692,7 +650,9 @@ export class MgInputCombobox {
|
|
|
692
650
|
// - Keep everything in sync both inside and outside the component
|
|
693
651
|
return new Promise(resolve => {
|
|
694
652
|
requestAnimationFrame(() => {
|
|
695
|
-
this.
|
|
653
|
+
this.checkValidity();
|
|
654
|
+
this.errorMessage = undefined;
|
|
655
|
+
this.hasDisplayedError = false;
|
|
696
656
|
resolve();
|
|
697
657
|
});
|
|
698
658
|
});
|
|
@@ -715,34 +675,15 @@ export class MgInputCombobox {
|
|
|
715
675
|
}
|
|
716
676
|
/**
|
|
717
677
|
* Method to set validity values
|
|
718
|
-
* @param
|
|
719
|
-
* @param customErrorMessage - custom error message
|
|
678
|
+
* @param newValue - valid new value
|
|
720
679
|
*/
|
|
721
|
-
setValidity(
|
|
722
|
-
var _a;
|
|
680
|
+
setValidity(newValue) {
|
|
723
681
|
const oldValidValue = this.valid;
|
|
724
|
-
|
|
725
|
-
// Set custom validity
|
|
726
|
-
if (!valid && this.input !== undefined) {
|
|
727
|
-
// custom errror, start by reset it
|
|
728
|
-
this.customError = undefined;
|
|
729
|
-
if (isValidString(customErrorMessage)) {
|
|
730
|
-
this.customError = customErrorMessage;
|
|
731
|
-
}
|
|
732
|
-
// no value
|
|
733
|
-
else if ((this.fetchurl === undefined ? ((_a = this.items) !== null && _a !== void 0 ? _a : []).length : this.page.total) === 0) {
|
|
734
|
-
this.customError = CustomError.NoValue;
|
|
735
|
-
}
|
|
736
|
-
// get new input validity from validity state
|
|
737
|
-
valid = this.input.checkValidity() && this.customError === undefined;
|
|
738
|
-
}
|
|
739
|
-
// set valid/invalid props
|
|
740
|
-
this.valid = valid;
|
|
682
|
+
this.valid = newValue;
|
|
741
683
|
this.invalid = !this.valid;
|
|
742
684
|
// We need to send valid event even if it is the same value
|
|
743
|
-
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
685
|
+
if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
|
|
744
686
|
this.inputValid.emit(this.valid);
|
|
745
|
-
}
|
|
746
687
|
}
|
|
747
688
|
/*************
|
|
748
689
|
* Lifecycle *
|
|
@@ -783,19 +724,15 @@ export class MgInputCombobox {
|
|
|
783
724
|
const listId = `${this.identifier}-list`;
|
|
784
725
|
const readonlyValue = this.getValueTitle();
|
|
785
726
|
const withResetButton = this.value && !this.disabled;
|
|
786
|
-
const disabled = this.disabled || this.hasNoValueError();
|
|
787
727
|
let popoverContent;
|
|
788
|
-
if (((_a = this.page) === null || _a === void 0 ? void 0 : _a.items.length) > 0)
|
|
728
|
+
if (((_a = this.page) === null || _a === void 0 ? void 0 : _a.items.length) > 0)
|
|
789
729
|
popoverContent = 'list';
|
|
790
|
-
|
|
791
|
-
else if (((_b = this.page) === null || _b === void 0 ? void 0 : _b.items.length) === 0 && this.filter.length > 0) {
|
|
730
|
+
else if (((_b = this.page) === null || _b === void 0 ? void 0 : _b.items.length) === 0 && Boolean(this.filter))
|
|
792
731
|
popoverContent = 'notfound';
|
|
793
|
-
|
|
794
|
-
else if (((_c = this.page) === null || _c === void 0 ? void 0 : _c.items.length) === 0) {
|
|
732
|
+
else if (((_c = this.page) === null || _c === void 0 ? void 0 : _c.items.length) === 0)
|
|
795
733
|
popoverContent = 'notavailable';
|
|
796
|
-
}
|
|
797
734
|
let activeDescendant;
|
|
798
|
-
if (
|
|
735
|
+
if (Boolean((_d = this.option) === null || _d === void 0 ? void 0 : _d.value)) {
|
|
799
736
|
activeDescendant = this.option.value;
|
|
800
737
|
}
|
|
801
738
|
else if (typeof this.value === 'string') {
|
|
@@ -804,12 +741,12 @@ export class MgInputCombobox {
|
|
|
804
741
|
else {
|
|
805
742
|
activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
|
|
806
743
|
}
|
|
807
|
-
return (h("mg-input", { key: '
|
|
744
|
+
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: {
|
|
808
745
|
'--mg-c-input-list-width': Boolean((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) ? `${this.input.offsetWidth}px` : undefined,
|
|
809
|
-
}, "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) => {
|
|
746
|
+
}, "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) => {
|
|
810
747
|
if (el !== null)
|
|
811
748
|
this.input = el;
|
|
812
|
-
} }), 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
|
|
749
|
+
} }), 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' && [
|
|
813
750
|
// eslint-disable-next-line jsx-a11y/role-supports-aria-props
|
|
814
751
|
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 => {
|
|
815
752
|
var _a;
|
|
@@ -844,7 +781,6 @@ export class MgInputCombobox {
|
|
|
844
781
|
return {
|
|
845
782
|
"value": {
|
|
846
783
|
"type": "string",
|
|
847
|
-
"attribute": "value",
|
|
848
784
|
"mutable": true,
|
|
849
785
|
"complexType": {
|
|
850
786
|
"original": "string | Option",
|
|
@@ -865,11 +801,11 @@ export class MgInputCombobox {
|
|
|
865
801
|
},
|
|
866
802
|
"getter": false,
|
|
867
803
|
"setter": false,
|
|
868
|
-
"reflect": true
|
|
804
|
+
"reflect": true,
|
|
805
|
+
"attribute": "value"
|
|
869
806
|
},
|
|
870
807
|
"items": {
|
|
871
808
|
"type": "unknown",
|
|
872
|
-
"attribute": "items",
|
|
873
809
|
"mutable": false,
|
|
874
810
|
"complexType": {
|
|
875
811
|
"original": "(string | Option)[]",
|
|
@@ -893,7 +829,6 @@ export class MgInputCombobox {
|
|
|
893
829
|
},
|
|
894
830
|
"itemsLabel": {
|
|
895
831
|
"type": "string",
|
|
896
|
-
"attribute": "items-label",
|
|
897
832
|
"mutable": false,
|
|
898
833
|
"complexType": {
|
|
899
834
|
"original": "string",
|
|
@@ -911,11 +846,11 @@ export class MgInputCombobox {
|
|
|
911
846
|
},
|
|
912
847
|
"getter": false,
|
|
913
848
|
"setter": false,
|
|
914
|
-
"reflect": false
|
|
849
|
+
"reflect": false,
|
|
850
|
+
"attribute": "items-label"
|
|
915
851
|
},
|
|
916
852
|
"identifier": {
|
|
917
853
|
"type": "string",
|
|
918
|
-
"attribute": "identifier",
|
|
919
854
|
"mutable": false,
|
|
920
855
|
"complexType": {
|
|
921
856
|
"original": "string",
|
|
@@ -930,11 +865,11 @@ export class MgInputCombobox {
|
|
|
930
865
|
},
|
|
931
866
|
"getter": false,
|
|
932
867
|
"setter": false,
|
|
933
|
-
"reflect": false
|
|
868
|
+
"reflect": false,
|
|
869
|
+
"attribute": "identifier"
|
|
934
870
|
},
|
|
935
871
|
"name": {
|
|
936
872
|
"type": "string",
|
|
937
|
-
"attribute": "name",
|
|
938
873
|
"mutable": false,
|
|
939
874
|
"complexType": {
|
|
940
875
|
"original": "string",
|
|
@@ -950,11 +885,11 @@ export class MgInputCombobox {
|
|
|
950
885
|
"getter": false,
|
|
951
886
|
"setter": false,
|
|
952
887
|
"reflect": false,
|
|
888
|
+
"attribute": "name",
|
|
953
889
|
"defaultValue": "this.identifier"
|
|
954
890
|
},
|
|
955
891
|
"label": {
|
|
956
892
|
"type": "string",
|
|
957
|
-
"attribute": "label",
|
|
958
893
|
"mutable": false,
|
|
959
894
|
"complexType": {
|
|
960
895
|
"original": "string",
|
|
@@ -969,11 +904,11 @@ export class MgInputCombobox {
|
|
|
969
904
|
},
|
|
970
905
|
"getter": false,
|
|
971
906
|
"setter": false,
|
|
972
|
-
"reflect": false
|
|
907
|
+
"reflect": false,
|
|
908
|
+
"attribute": "label"
|
|
973
909
|
},
|
|
974
910
|
"labelOnTop": {
|
|
975
911
|
"type": "boolean",
|
|
976
|
-
"attribute": "label-on-top",
|
|
977
912
|
"mutable": false,
|
|
978
913
|
"complexType": {
|
|
979
914
|
"original": "boolean",
|
|
@@ -989,11 +924,11 @@ export class MgInputCombobox {
|
|
|
989
924
|
"getter": false,
|
|
990
925
|
"setter": false,
|
|
991
926
|
"reflect": false,
|
|
927
|
+
"attribute": "label-on-top",
|
|
992
928
|
"defaultValue": "false"
|
|
993
929
|
},
|
|
994
930
|
"labelHide": {
|
|
995
931
|
"type": "boolean",
|
|
996
|
-
"attribute": "label-hide",
|
|
997
932
|
"mutable": false,
|
|
998
933
|
"complexType": {
|
|
999
934
|
"original": "boolean",
|
|
@@ -1009,11 +944,11 @@ export class MgInputCombobox {
|
|
|
1009
944
|
"getter": false,
|
|
1010
945
|
"setter": false,
|
|
1011
946
|
"reflect": false,
|
|
947
|
+
"attribute": "label-hide",
|
|
1012
948
|
"defaultValue": "false"
|
|
1013
949
|
},
|
|
1014
950
|
"placeholder": {
|
|
1015
951
|
"type": "string",
|
|
1016
|
-
"attribute": "placeholder",
|
|
1017
952
|
"mutable": false,
|
|
1018
953
|
"complexType": {
|
|
1019
954
|
"original": "string",
|
|
@@ -1028,11 +963,11 @@ export class MgInputCombobox {
|
|
|
1028
963
|
},
|
|
1029
964
|
"getter": false,
|
|
1030
965
|
"setter": false,
|
|
1031
|
-
"reflect": false
|
|
966
|
+
"reflect": false,
|
|
967
|
+
"attribute": "placeholder"
|
|
1032
968
|
},
|
|
1033
969
|
"required": {
|
|
1034
970
|
"type": "boolean",
|
|
1035
|
-
"attribute": "required",
|
|
1036
971
|
"mutable": false,
|
|
1037
972
|
"complexType": {
|
|
1038
973
|
"original": "boolean",
|
|
@@ -1048,11 +983,11 @@ export class MgInputCombobox {
|
|
|
1048
983
|
"getter": false,
|
|
1049
984
|
"setter": false,
|
|
1050
985
|
"reflect": false,
|
|
986
|
+
"attribute": "required",
|
|
1051
987
|
"defaultValue": "false"
|
|
1052
988
|
},
|
|
1053
989
|
"readonly": {
|
|
1054
990
|
"type": "boolean",
|
|
1055
|
-
"attribute": "readonly",
|
|
1056
991
|
"mutable": false,
|
|
1057
992
|
"complexType": {
|
|
1058
993
|
"original": "boolean",
|
|
@@ -1068,11 +1003,11 @@ export class MgInputCombobox {
|
|
|
1068
1003
|
"getter": false,
|
|
1069
1004
|
"setter": false,
|
|
1070
1005
|
"reflect": false,
|
|
1006
|
+
"attribute": "readonly",
|
|
1071
1007
|
"defaultValue": "false"
|
|
1072
1008
|
},
|
|
1073
1009
|
"disabled": {
|
|
1074
1010
|
"type": "boolean",
|
|
1075
|
-
"attribute": "disabled",
|
|
1076
1011
|
"mutable": false,
|
|
1077
1012
|
"complexType": {
|
|
1078
1013
|
"original": "boolean",
|
|
@@ -1088,11 +1023,11 @@ export class MgInputCombobox {
|
|
|
1088
1023
|
"getter": false,
|
|
1089
1024
|
"setter": false,
|
|
1090
1025
|
"reflect": false,
|
|
1026
|
+
"attribute": "disabled",
|
|
1091
1027
|
"defaultValue": "false"
|
|
1092
1028
|
},
|
|
1093
1029
|
"mgWidth": {
|
|
1094
1030
|
"type": "any",
|
|
1095
|
-
"attribute": "mg-width",
|
|
1096
1031
|
"mutable": false,
|
|
1097
1032
|
"complexType": {
|
|
1098
1033
|
"original": "Width",
|
|
@@ -1114,11 +1049,11 @@ export class MgInputCombobox {
|
|
|
1114
1049
|
"getter": false,
|
|
1115
1050
|
"setter": false,
|
|
1116
1051
|
"reflect": false,
|
|
1052
|
+
"attribute": "mg-width",
|
|
1117
1053
|
"defaultValue": "'full'"
|
|
1118
1054
|
},
|
|
1119
1055
|
"tooltip": {
|
|
1120
1056
|
"type": "string",
|
|
1121
|
-
"attribute": "tooltip",
|
|
1122
1057
|
"mutable": false,
|
|
1123
1058
|
"complexType": {
|
|
1124
1059
|
"original": "string",
|
|
@@ -1133,11 +1068,11 @@ export class MgInputCombobox {
|
|
|
1133
1068
|
},
|
|
1134
1069
|
"getter": false,
|
|
1135
1070
|
"setter": false,
|
|
1136
|
-
"reflect": false
|
|
1071
|
+
"reflect": false,
|
|
1072
|
+
"attribute": "tooltip"
|
|
1137
1073
|
},
|
|
1138
1074
|
"tooltipPosition": {
|
|
1139
1075
|
"type": "string",
|
|
1140
|
-
"attribute": "tooltip-position",
|
|
1141
1076
|
"mutable": false,
|
|
1142
1077
|
"complexType": {
|
|
1143
1078
|
"original": "TooltipPosition",
|
|
@@ -1159,11 +1094,11 @@ export class MgInputCombobox {
|
|
|
1159
1094
|
"getter": false,
|
|
1160
1095
|
"setter": false,
|
|
1161
1096
|
"reflect": false,
|
|
1097
|
+
"attribute": "tooltip-position",
|
|
1162
1098
|
"defaultValue": "'input'"
|
|
1163
1099
|
},
|
|
1164
1100
|
"helpText": {
|
|
1165
1101
|
"type": "string",
|
|
1166
|
-
"attribute": "help-text",
|
|
1167
1102
|
"mutable": false,
|
|
1168
1103
|
"complexType": {
|
|
1169
1104
|
"original": "string",
|
|
@@ -1178,11 +1113,11 @@ export class MgInputCombobox {
|
|
|
1178
1113
|
},
|
|
1179
1114
|
"getter": false,
|
|
1180
1115
|
"setter": false,
|
|
1181
|
-
"reflect": false
|
|
1116
|
+
"reflect": false,
|
|
1117
|
+
"attribute": "help-text"
|
|
1182
1118
|
},
|
|
1183
1119
|
"fetchurl": {
|
|
1184
1120
|
"type": "string",
|
|
1185
|
-
"attribute": "fetchurl",
|
|
1186
1121
|
"mutable": false,
|
|
1187
1122
|
"complexType": {
|
|
1188
1123
|
"original": "string | URL",
|
|
@@ -1205,11 +1140,11 @@ export class MgInputCombobox {
|
|
|
1205
1140
|
},
|
|
1206
1141
|
"getter": false,
|
|
1207
1142
|
"setter": false,
|
|
1208
|
-
"reflect": false
|
|
1143
|
+
"reflect": false,
|
|
1144
|
+
"attribute": "fetchurl"
|
|
1209
1145
|
},
|
|
1210
1146
|
"fetchoptions": {
|
|
1211
1147
|
"type": "unknown",
|
|
1212
|
-
"attribute": "fetchoptions",
|
|
1213
1148
|
"mutable": false,
|
|
1214
1149
|
"complexType": {
|
|
1215
1150
|
"original": "RequestInit",
|
|
@@ -1238,7 +1173,6 @@ export class MgInputCombobox {
|
|
|
1238
1173
|
},
|
|
1239
1174
|
"fetchmappings": {
|
|
1240
1175
|
"type": "unknown",
|
|
1241
|
-
"attribute": "fetchmappings",
|
|
1242
1176
|
"mutable": false,
|
|
1243
1177
|
"complexType": {
|
|
1244
1178
|
"original": "{ request: RequestMappingType; response: ResponseMappingType }",
|
|
@@ -1268,28 +1202,8 @@ export class MgInputCombobox {
|
|
|
1268
1202
|
"getter": false,
|
|
1269
1203
|
"setter": false
|
|
1270
1204
|
},
|
|
1271
|
-
"noValueErrorDetail": {
|
|
1272
|
-
"type": "string",
|
|
1273
|
-
"attribute": "no-value-error-detail",
|
|
1274
|
-
"mutable": false,
|
|
1275
|
-
"complexType": {
|
|
1276
|
-
"original": "string",
|
|
1277
|
-
"resolved": "string",
|
|
1278
|
-
"references": {}
|
|
1279
|
-
},
|
|
1280
|
-
"required": false,
|
|
1281
|
-
"optional": true,
|
|
1282
|
-
"docs": {
|
|
1283
|
-
"tags": [],
|
|
1284
|
-
"text": "Define no value error detail"
|
|
1285
|
-
},
|
|
1286
|
-
"getter": false,
|
|
1287
|
-
"setter": false,
|
|
1288
|
-
"reflect": false
|
|
1289
|
-
},
|
|
1290
1205
|
"valid": {
|
|
1291
1206
|
"type": "boolean",
|
|
1292
|
-
"attribute": "valid",
|
|
1293
1207
|
"mutable": true,
|
|
1294
1208
|
"complexType": {
|
|
1295
1209
|
"original": "boolean",
|
|
@@ -1304,11 +1218,11 @@ export class MgInputCombobox {
|
|
|
1304
1218
|
},
|
|
1305
1219
|
"getter": false,
|
|
1306
1220
|
"setter": false,
|
|
1307
|
-
"reflect": false
|
|
1221
|
+
"reflect": false,
|
|
1222
|
+
"attribute": "valid"
|
|
1308
1223
|
},
|
|
1309
1224
|
"invalid": {
|
|
1310
1225
|
"type": "boolean",
|
|
1311
|
-
"attribute": "invalid",
|
|
1312
1226
|
"mutable": true,
|
|
1313
1227
|
"complexType": {
|
|
1314
1228
|
"original": "boolean",
|
|
@@ -1323,7 +1237,8 @@ export class MgInputCombobox {
|
|
|
1323
1237
|
},
|
|
1324
1238
|
"getter": false,
|
|
1325
1239
|
"setter": false,
|
|
1326
|
-
"reflect": false
|
|
1240
|
+
"reflect": false,
|
|
1241
|
+
"attribute": "invalid"
|
|
1327
1242
|
}
|
|
1328
1243
|
};
|
|
1329
1244
|
}
|