@mgdis/mg-components 5.28.1 → 5.29.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/{index-ce4f7698.js → index-8a3adbd1.js} +40 -8
- package/dist/cjs/index-8a3adbd1.js.map +1 -0
- package/dist/cjs/{index-d8721674.js → index-e1a25816.js} +48 -47
- package/dist/cjs/index-e1a25816.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_36.cjs.entry.js +112 -103
- package/dist/cjs/mg-action-more_36.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-components.cjs.js +3 -3
- package/dist/cjs/mg-components.cjs.js.map +1 -1
- package/dist/cjs/mg-loader.cjs.entry.js +3 -3
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/atoms/mg-button/mg-button.js +2 -2
- package/dist/collection/components/atoms/mg-button/mg-button.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js +1 -3
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +2 -3
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +18 -7
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +3 -3
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -2
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js.map +1 -1
- package/dist/components/index.es.js +41 -40
- package/dist/components/index.es.js.map +1 -1
- package/dist/components/index2.js +2 -2
- package/dist/components/mg-action-more.js +2 -2
- package/dist/components/mg-badge2.js +3 -3
- package/dist/components/mg-button2.js +5 -5
- package/dist/components/mg-button2.js.map +1 -1
- package/dist/components/mg-card2.js +2 -2
- package/dist/components/mg-details.js +2 -2
- package/dist/components/mg-form.js +3 -3
- package/dist/components/mg-icon2.js +2 -2
- package/dist/components/mg-illustrated-message.js +2 -2
- package/dist/components/mg-input-checkbox-paginated2.js +1 -3
- package/dist/components/mg-input-checkbox-paginated2.js.map +1 -1
- package/dist/components/mg-input-checkbox.js +5 -5
- package/dist/components/mg-input-checkbox.js.map +1 -1
- package/dist/components/mg-input-date.js +11 -11
- package/dist/components/mg-input-numeric.js +5 -5
- package/dist/components/mg-input-password.js +3 -3
- package/dist/components/mg-input-radio.js +21 -9
- package/dist/components/mg-input-radio.js.map +1 -1
- package/dist/components/mg-input-select2.js +8 -8
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text2.js +6 -6
- package/dist/components/mg-input-textarea.js +6 -6
- package/dist/components/mg-input-title2.js +2 -2
- package/dist/components/mg-input-toggle.js +4 -4
- package/dist/components/mg-input2.js +3 -3
- package/dist/components/mg-item-more2.js +3 -3
- package/dist/components/mg-loader.js +2 -2
- package/dist/components/mg-menu-item2.js +5 -5
- package/dist/components/mg-message.js +3 -3
- package/dist/components/mg-modal.js +6 -6
- package/dist/components/mg-pagination2.js +2 -2
- package/dist/components/mg-panel.js +4 -4
- package/dist/components/mg-popover-content2.js +3 -3
- package/dist/components/mg-popover2.js +3 -3
- package/dist/components/mg-skip-links.js +3 -3
- package/dist/components/mg-skip-links.js.map +1 -1
- package/dist/components/mg-tabs.js +6 -6
- package/dist/components/mg-tag.js +3 -3
- package/dist/components/mg-tooltip2.js +6 -6
- package/dist/esm/{index-9ed65b6d.js → index-0df3b137.js} +40 -8
- package/dist/esm/index-0df3b137.js.map +1 -0
- package/dist/esm/{index-817d7645.js → index-eed80cc2.js} +43 -42
- package/dist/esm/index-eed80cc2.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_36.entry.js +112 -103
- package/dist/esm/mg-action-more_36.entry.js.map +1 -1
- package/dist/esm/mg-components.js +4 -4
- package/dist/esm/mg-components.js.map +1 -1
- package/dist/esm/mg-loader.entry.js +3 -3
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/mg-components.esm.js.map +1 -1
- package/dist/mg-components/{p-ef541188.entry.js → p-88f6c2f9.entry.js} +2 -2
- package/dist/mg-components/p-88f6c2f9.entry.js.map +1 -0
- package/dist/mg-components/{p-c4207303.entry.js → p-e5db08c5.entry.js} +2 -2
- package/dist/mg-components/p-efce3d8c.js +2 -0
- package/dist/mg-components/p-efce3d8c.js.map +1 -0
- package/dist/mg-components/p-f95b4418.js +3 -0
- package/dist/mg-components/p-f95b4418.js.map +1 -0
- package/dist/types/components/atoms/mg-button/mg-button.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +5 -1
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +1 -1
- package/dist/types/components.d.ts +10 -10
- package/ide/intellij/web-types.json +4 -4
- package/ide/vscode/html-custom-data.json +3 -3
- package/package.json +25 -26
- package/dist/cjs/index-ce4f7698.js.map +0 -1
- package/dist/cjs/index-d8721674.js.map +0 -1
- package/dist/esm/index-817d7645.js.map +0 -1
- package/dist/esm/index-9ed65b6d.js.map +0 -1
- package/dist/mg-components/p-06a9d801.js +0 -3
- package/dist/mg-components/p-06a9d801.js.map +0 -1
- package/dist/mg-components/p-eb6ec303.js +0 -2
- package/dist/mg-components/p-eb6ec303.js.map +0 -1
- package/dist/mg-components/p-ef541188.entry.js.map +0 -1
- /package/dist/mg-components/{p-c4207303.entry.js.map → p-e5db08c5.entry.js.map} +0 -0
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
6
|
-
const index$1 = require('./index-
|
|
5
|
+
const index = require('./index-8a3adbd1.js');
|
|
6
|
+
const index$1 = require('./index-e1a25816.js');
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Available menu-item positions
|
|
@@ -79,7 +79,7 @@ const MgActionMore = class {
|
|
|
79
79
|
************/
|
|
80
80
|
this.name = 'mg-action-more';
|
|
81
81
|
this.classBase = 'mg-c-action-more';
|
|
82
|
-
this.mgPopoverIdentifier = index$1.
|
|
82
|
+
this.mgPopoverIdentifier = index$1.ze(this.name);
|
|
83
83
|
/************
|
|
84
84
|
* Methods *
|
|
85
85
|
***********/
|
|
@@ -203,7 +203,7 @@ const MgBadge = class {
|
|
|
203
203
|
this.label = undefined;
|
|
204
204
|
this.variant = variants$5[0];
|
|
205
205
|
this.outline = undefined;
|
|
206
|
-
this.classCollection = new index$1.
|
|
206
|
+
this.classCollection = new index$1.Ie(['mg-c-badge']);
|
|
207
207
|
}
|
|
208
208
|
validateValue(newValue) {
|
|
209
209
|
if (/^(\d+\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {
|
|
@@ -211,7 +211,7 @@ const MgBadge = class {
|
|
|
211
211
|
}
|
|
212
212
|
}
|
|
213
213
|
validateLabel(newValue) {
|
|
214
|
-
if (!index$1.
|
|
214
|
+
if (!index$1.Ze(newValue)) {
|
|
215
215
|
throw new Error('<mg-badge> prop "label" is required.');
|
|
216
216
|
}
|
|
217
217
|
}
|
|
@@ -322,7 +322,7 @@ const MgButton = class {
|
|
|
322
322
|
this.isIcon = false;
|
|
323
323
|
this.disableOnClick = false;
|
|
324
324
|
this.loading = false;
|
|
325
|
-
this.classCollection = new index$1.
|
|
325
|
+
this.classCollection = new index$1.Ie(['mg-c-button']);
|
|
326
326
|
}
|
|
327
327
|
validateVariant(newValue, oldValue) {
|
|
328
328
|
if (!variants$4.includes(newValue)) {
|
|
@@ -381,7 +381,7 @@ const MgButton = class {
|
|
|
381
381
|
this.validateFullWidth(this.fullWidth);
|
|
382
382
|
if (this.isIcon) {
|
|
383
383
|
this.classCollection.add(`mg-c-button--icon`);
|
|
384
|
-
if (!index$1.
|
|
384
|
+
if (!index$1.Ze(this.label)) {
|
|
385
385
|
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
386
386
|
}
|
|
387
387
|
}
|
|
@@ -393,7 +393,7 @@ const MgButton = class {
|
|
|
393
393
|
* Add listners
|
|
394
394
|
*/
|
|
395
395
|
componentDidLoad() {
|
|
396
|
-
index$1.
|
|
396
|
+
index$1.Ye(() => {
|
|
397
397
|
var _a;
|
|
398
398
|
const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
|
|
399
399
|
// submit buttons should trigger form submition;
|
|
@@ -410,7 +410,7 @@ const MgButton = class {
|
|
|
410
410
|
*/
|
|
411
411
|
render() {
|
|
412
412
|
var _a;
|
|
413
|
-
return (index.h(index.Host, { key: '
|
|
413
|
+
return (index.h(index.Host, { key: '1b54d5a3ae7656215f0f60dcebf13caed4afe09e', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, index.h("div", { key: 'ee66e5b1d78d7344634e736b39e29640de8c5755', class: this.classCollection.join(), id: this.identifier }, this.loading && index.h("mg-icon", { key: '6da3bfa9accafda3cf1d960d229bf3d75abc9250', icon: "loader", spin: true }), index.h("div", { key: '9ab6e8910210543fc7c0745d63f0e260003aa000', class: "mg-c-button__content" }, index.h("slot", { key: '44ba371bb96f86632f084610cdffb0b0fafa3980' })))));
|
|
414
414
|
}
|
|
415
415
|
get element() { return index.getElement(this); }
|
|
416
416
|
static get watchers() { return {
|
|
@@ -452,7 +452,7 @@ const MgCard = class {
|
|
|
452
452
|
};
|
|
453
453
|
this.variant = undefined;
|
|
454
454
|
this.variantStyle = undefined;
|
|
455
|
-
this.classCollection = new index$1.
|
|
455
|
+
this.classCollection = new index$1.Ie([this.classBase]);
|
|
456
456
|
}
|
|
457
457
|
validateVariant(newValue, oldValue) {
|
|
458
458
|
if (newValue && !variants$3.includes(newValue))
|
|
@@ -557,7 +557,7 @@ const MgDetails = class {
|
|
|
557
557
|
this.expanded = false;
|
|
558
558
|
}
|
|
559
559
|
validateTitles(newValue) {
|
|
560
|
-
if (!index$1.
|
|
560
|
+
if (!index$1.Ze(newValue)) {
|
|
561
561
|
throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
|
|
562
562
|
}
|
|
563
563
|
}
|
|
@@ -715,7 +715,7 @@ const MgForm = class {
|
|
|
715
715
|
}
|
|
716
716
|
});
|
|
717
717
|
};
|
|
718
|
-
this.identifier = index$1.
|
|
718
|
+
this.identifier = index$1.ze('mg-form');
|
|
719
719
|
this.name = this.identifier;
|
|
720
720
|
this.readonly = false;
|
|
721
721
|
this.requiredMessage = undefined;
|
|
@@ -724,7 +724,7 @@ const MgForm = class {
|
|
|
724
724
|
this.disabled = false;
|
|
725
725
|
this.valid = undefined;
|
|
726
726
|
this.invalid = undefined;
|
|
727
|
-
this.classCollection = new index$1.
|
|
727
|
+
this.classCollection = new index$1.Ie(['mg-c-form']);
|
|
728
728
|
this.requiredMessageText = undefined;
|
|
729
729
|
}
|
|
730
730
|
validateRequiredMessage(newValue) {
|
|
@@ -865,7 +865,7 @@ const MgIcon = class {
|
|
|
865
865
|
this.variant = undefined;
|
|
866
866
|
this.variantStyle = undefined;
|
|
867
867
|
this.spin = false;
|
|
868
|
-
this.classCollection = new index$1.
|
|
868
|
+
this.classCollection = new index$1.Ie(['mg-c-icon']);
|
|
869
869
|
}
|
|
870
870
|
validateIcon(newValue, oldValue) {
|
|
871
871
|
if (!Object.keys(icons).includes(newValue))
|
|
@@ -964,7 +964,7 @@ const MgIllustratedMessage = class {
|
|
|
964
964
|
componentDidLoad() {
|
|
965
965
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
966
966
|
const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
|
|
967
|
-
if (!index$1.
|
|
967
|
+
if (!index$1.Xe(this.element.querySelector('[slot="title"]'), headingTags)) {
|
|
968
968
|
throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
|
|
969
969
|
}
|
|
970
970
|
else if (slottedIllustrations.length !== 1) {
|
|
@@ -1065,7 +1065,7 @@ const MgInput = class {
|
|
|
1065
1065
|
this.isVerticalList = false;
|
|
1066
1066
|
}
|
|
1067
1067
|
watchIdentifier(newValue) {
|
|
1068
|
-
if (!index$1.
|
|
1068
|
+
if (!index$1.Ze(newValue)) {
|
|
1069
1069
|
throw new Error('<mg-input> prop "identifier" is required.');
|
|
1070
1070
|
}
|
|
1071
1071
|
else {
|
|
@@ -1150,7 +1150,7 @@ const MgInput = class {
|
|
|
1150
1150
|
*/
|
|
1151
1151
|
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1152
1152
|
watchLabel() {
|
|
1153
|
-
if (!index$1.
|
|
1153
|
+
if (!index$1.Ze(this.label)) {
|
|
1154
1154
|
throw new Error('<mg-input> prop "label" is required.');
|
|
1155
1155
|
}
|
|
1156
1156
|
else {
|
|
@@ -1305,9 +1305,7 @@ var SelectValuesButtonKey;
|
|
|
1305
1305
|
* @param props - MgInputCheckboxList Interface Props
|
|
1306
1306
|
* @returns input template
|
|
1307
1307
|
*/
|
|
1308
|
-
const MgInputCheckboxList = (props) => (
|
|
1309
|
-
// eslint-disable-next-line jsx-a11y/no-redundant-roles
|
|
1310
|
-
index.h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-describedby": props.displaySearchInput ? 'search-results' : undefined, "aria-label": props.displaySearchInput ? props.messages.searchResults : undefined, "aria-live": props.displaySearchInput ? 'polite' : undefined, id: props.id }, props.checkboxes.map(input => {
|
|
1308
|
+
const MgInputCheckboxList = (props) => (index.h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-describedby": props.displaySearchInput ? 'search-results' : undefined, "aria-label": props.displaySearchInput ? props.messages.searchResults : undefined, "aria-live": props.displaySearchInput ? 'polite' : undefined, id: props.id }, props.checkboxes.map(input => {
|
|
1311
1309
|
var _a, _b;
|
|
1312
1310
|
return (index.h("li", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } },
|
|
1313
1311
|
index.h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }),
|
|
@@ -1464,7 +1462,7 @@ const MgInputCheckbox = class {
|
|
|
1464
1462
|
* Method to update searchResults
|
|
1465
1463
|
*/
|
|
1466
1464
|
this.updateSearchResults = () => {
|
|
1467
|
-
this.searchResults = this.checkboxItems.filter(item => index$1.
|
|
1465
|
+
this.searchResults = this.checkboxItems.filter(item => index$1.Je(item.title).includes(index$1.Je(this.searchValue)));
|
|
1468
1466
|
};
|
|
1469
1467
|
/**
|
|
1470
1468
|
* Method to validate if one of inputs value is checked id required
|
|
@@ -1538,7 +1536,7 @@ const MgInputCheckbox = class {
|
|
|
1538
1536
|
this.helpText = undefined;
|
|
1539
1537
|
this.valid = undefined;
|
|
1540
1538
|
this.invalid = undefined;
|
|
1541
|
-
this.classCollection = new index$1.
|
|
1539
|
+
this.classCollection = new index$1.Ie([this.baseClassName, classFieldset]);
|
|
1542
1540
|
this.errorMessage = undefined;
|
|
1543
1541
|
this.checkboxItems = [];
|
|
1544
1542
|
this.displaySearchInput = undefined;
|
|
@@ -1646,7 +1644,7 @@ const MgInputCheckbox = class {
|
|
|
1646
1644
|
if (typeof valid !== 'boolean') {
|
|
1647
1645
|
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
|
|
1648
1646
|
}
|
|
1649
|
-
else if (!index$1.
|
|
1647
|
+
else if (!index$1.Ze(errorMessage)) {
|
|
1650
1648
|
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
|
|
1651
1649
|
}
|
|
1652
1650
|
else {
|
|
@@ -1759,7 +1757,7 @@ const MgInputCheckbox = class {
|
|
|
1759
1757
|
* @returns HTML Element
|
|
1760
1758
|
*/
|
|
1761
1759
|
render() {
|
|
1762
|
-
return (index.h("mg-input", { key: '
|
|
1760
|
+
return (index.h("mg-input", { key: 'c0b23390de51d9be03440d1afbb0a058af4b8207', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonlyValue: this.value.filter(({ value }) => value).map(({ title }) => title), tooltip: !this.readonly ? this.tooltip : undefined, tooltipPosition: this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, this.type === 'checkbox' || this.readonly ? (index.h(MgInputCheckboxList, { checkboxes: this.checkboxItems, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })) : (this.renderCheckboxMulti())));
|
|
1763
1761
|
}
|
|
1764
1762
|
get element() { return index.getElement(this); }
|
|
1765
1763
|
static get watchers() { return {
|
|
@@ -1909,7 +1907,7 @@ const MgInputDate = class {
|
|
|
1909
1907
|
* @param value - value to test
|
|
1910
1908
|
* @returns truthy when value match the pattern
|
|
1911
1909
|
*/
|
|
1912
|
-
this.isValidPattern = (value) => index$1.
|
|
1910
|
+
this.isValidPattern = (value) => index$1.Ze(value) && index$1.We.test(value);
|
|
1913
1911
|
/**
|
|
1914
1912
|
* Format help text to display
|
|
1915
1913
|
* @param helpText - help text format
|
|
@@ -1917,10 +1915,10 @@ const MgInputDate = class {
|
|
|
1917
1915
|
*/
|
|
1918
1916
|
this.formatHelpText = (helpText) => {
|
|
1919
1917
|
const defaultHelpTextVariable = '{defaultHelpText}';
|
|
1920
|
-
let text = index$1.
|
|
1918
|
+
let text = index$1.Ze(helpText) ? helpText : this.messages.input.date.helpText;
|
|
1921
1919
|
if (text.includes(defaultHelpTextVariable))
|
|
1922
1920
|
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));
|
|
1923
|
-
return text.replace('{pattern}', this.renderPattern()).replace('{date}', index$1.
|
|
1921
|
+
return text.replace('{pattern}', this.renderPattern()).replace('{date}', index$1.He(index$1.lt(new Date('2023-12-24')), this.systemLocale));
|
|
1924
1922
|
};
|
|
1925
1923
|
/**
|
|
1926
1924
|
* Handle input event
|
|
@@ -2012,8 +2010,8 @@ const MgInputDate = class {
|
|
|
2012
2010
|
// min, max & minMax
|
|
2013
2011
|
else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
|
|
2014
2012
|
this.errorMessage = this.messages.errors.date[inputError]
|
|
2015
|
-
.replace('{min}', index$1.
|
|
2016
|
-
.replace('{max}', index$1.
|
|
2013
|
+
.replace('{min}', index$1.He(this.min, this.systemLocale))
|
|
2014
|
+
.replace('{max}', index$1.He(this.max, this.systemLocale));
|
|
2017
2015
|
}
|
|
2018
2016
|
// wrong date format
|
|
2019
2017
|
// element.validity.badInput is default error message
|
|
@@ -2027,7 +2025,7 @@ const MgInputDate = class {
|
|
|
2027
2025
|
* @returns translated html pattern
|
|
2028
2026
|
*/
|
|
2029
2027
|
this.renderPattern = () => {
|
|
2030
|
-
let patternLocal = index$1.
|
|
2028
|
+
let patternLocal = index$1.nt(this.systemLocale);
|
|
2031
2029
|
for (const key in this.messages.input.date.pattern) {
|
|
2032
2030
|
patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
|
|
2033
2031
|
}
|
|
@@ -2049,7 +2047,7 @@ const MgInputDate = class {
|
|
|
2049
2047
|
this.helpText = undefined;
|
|
2050
2048
|
this.valid = undefined;
|
|
2051
2049
|
this.invalid = undefined;
|
|
2052
|
-
this.classCollection = new index$1.
|
|
2050
|
+
this.classCollection = new index$1.Ie(['mg-c-input--date']);
|
|
2053
2051
|
this.errorMessage = undefined;
|
|
2054
2052
|
}
|
|
2055
2053
|
validateValue(newValue) {
|
|
@@ -2057,7 +2055,7 @@ const MgInputDate = class {
|
|
|
2057
2055
|
if (newValue === '')
|
|
2058
2056
|
newValue = null;
|
|
2059
2057
|
// check value validity
|
|
2060
|
-
if (newValue && !index$1.
|
|
2058
|
+
if (newValue && !index$1.Ze(newValue)) {
|
|
2061
2059
|
throw new Error("<mg-input-date> props 'value' must be a valid string");
|
|
2062
2060
|
}
|
|
2063
2061
|
else if (!newValue || (newValue && this.isValidPattern(newValue))) {
|
|
@@ -2114,7 +2112,7 @@ const MgInputDate = class {
|
|
|
2114
2112
|
if (typeof valid !== 'boolean') {
|
|
2115
2113
|
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
|
|
2116
2114
|
}
|
|
2117
|
-
else if (!index$1.
|
|
2115
|
+
else if (!index$1.Ze(errorMessage)) {
|
|
2118
2116
|
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
|
|
2119
2117
|
}
|
|
2120
2118
|
else {
|
|
@@ -2168,7 +2166,7 @@ const MgInputDate = class {
|
|
|
2168
2166
|
* @returns HTML Element
|
|
2169
2167
|
*/
|
|
2170
2168
|
render() {
|
|
2171
|
-
return (index.h("mg-input", { key: 'f38d79cb71311149b4d15885b65cd8f025dde15d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: index$1.
|
|
2169
|
+
return (index.h("mg-input", { key: 'f38d79cb71311149b4d15885b65cd8f025dde15d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: index$1.He(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, index.h("input", { key: '67bf6f0ad58ee1a506ffd0d3d41d5954db68465c', type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
|
|
2172
2170
|
if (el !== null)
|
|
2173
2171
|
this.input = el;
|
|
2174
2172
|
} })));
|
|
@@ -2299,9 +2297,9 @@ const MgInputNumeric = class {
|
|
|
2299
2297
|
this.formatValue = (value) => {
|
|
2300
2298
|
switch (this.format) {
|
|
2301
2299
|
case 'number':
|
|
2302
|
-
return index$1.
|
|
2300
|
+
return index$1.at(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2303
2301
|
case 'currency':
|
|
2304
|
-
return index$1.
|
|
2302
|
+
return index$1.it(value, this.locale, this.currency);
|
|
2305
2303
|
case 'none':
|
|
2306
2304
|
return value.toString();
|
|
2307
2305
|
}
|
|
@@ -2338,7 +2336,7 @@ const MgInputNumeric = class {
|
|
|
2338
2336
|
this.decimalLength = 2;
|
|
2339
2337
|
this.valid = undefined;
|
|
2340
2338
|
this.invalid = undefined;
|
|
2341
|
-
this.classCollection = new index$1.
|
|
2339
|
+
this.classCollection = new index$1.Ie(['mg-c-input--numeric']);
|
|
2342
2340
|
this.errorMessage = undefined;
|
|
2343
2341
|
this.hasFocus = undefined;
|
|
2344
2342
|
}
|
|
@@ -2434,7 +2432,7 @@ const MgInputNumeric = class {
|
|
|
2434
2432
|
if (typeof valid !== 'boolean') {
|
|
2435
2433
|
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
|
|
2436
2434
|
}
|
|
2437
|
-
else if (!index$1.
|
|
2435
|
+
else if (!index$1.Ze(errorMessage)) {
|
|
2438
2436
|
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
|
|
2439
2437
|
}
|
|
2440
2438
|
else {
|
|
@@ -2627,7 +2625,7 @@ const MgInputPassword = class {
|
|
|
2627
2625
|
this.helpText = undefined;
|
|
2628
2626
|
this.valid = undefined;
|
|
2629
2627
|
this.invalid = undefined;
|
|
2630
|
-
this.classCollection = new index$1.
|
|
2628
|
+
this.classCollection = new index$1.Ie(['mg-c-input--password']);
|
|
2631
2629
|
this.errorMessage = undefined;
|
|
2632
2630
|
this.displayPassword = false;
|
|
2633
2631
|
}
|
|
@@ -2685,7 +2683,7 @@ const MgInputPassword = class {
|
|
|
2685
2683
|
if (typeof valid !== 'boolean') {
|
|
2686
2684
|
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
|
|
2687
2685
|
}
|
|
2688
|
-
else if (!index$1.
|
|
2686
|
+
else if (!index$1.Ze(errorMessage)) {
|
|
2689
2687
|
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
|
|
2690
2688
|
}
|
|
2691
2689
|
else {
|
|
@@ -2832,11 +2830,22 @@ const MgInputRadio = class {
|
|
|
2832
2830
|
this.helpText = undefined;
|
|
2833
2831
|
this.valid = undefined;
|
|
2834
2832
|
this.invalid = undefined;
|
|
2835
|
-
this.classCollection = new index$1.
|
|
2833
|
+
this.classCollection = new index$1.Ie(['mg-c-input--radio', classFieldset]);
|
|
2836
2834
|
this.errorMessage = undefined;
|
|
2837
2835
|
this.options = undefined;
|
|
2836
|
+
this.readonlyValue = undefined;
|
|
2838
2837
|
}
|
|
2839
|
-
|
|
2838
|
+
watchValue(newValue) {
|
|
2839
|
+
var _a;
|
|
2840
|
+
if (index$1.Ge(this.items) && typeof newValue === 'string') {
|
|
2841
|
+
this.readonlyValue = newValue;
|
|
2842
|
+
}
|
|
2843
|
+
else if (this.items.every(isOption$2)) {
|
|
2844
|
+
this.readonlyValue = (_a = this.items.find(item => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
|
|
2845
|
+
}
|
|
2846
|
+
else {
|
|
2847
|
+
this.readonlyValue = null;
|
|
2848
|
+
}
|
|
2840
2849
|
this.valueChange.emit(newValue);
|
|
2841
2850
|
}
|
|
2842
2851
|
validateItems(newValue) {
|
|
@@ -2845,7 +2854,7 @@ const MgInputRadio = class {
|
|
|
2845
2854
|
throw new Error('<mg-input-radio> prop "items" require at least 2 items.');
|
|
2846
2855
|
}
|
|
2847
2856
|
// String array
|
|
2848
|
-
else if (index$1.
|
|
2857
|
+
else if (index$1.Ge(newValue)) {
|
|
2849
2858
|
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
2850
2859
|
}
|
|
2851
2860
|
// Object array
|
|
@@ -2904,7 +2913,7 @@ const MgInputRadio = class {
|
|
|
2904
2913
|
if (typeof valid !== 'boolean') {
|
|
2905
2914
|
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
|
|
2906
2915
|
}
|
|
2907
|
-
else if (!index$1.
|
|
2916
|
+
else if (!index$1.Ze(errorMessage)) {
|
|
2908
2917
|
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
|
|
2909
2918
|
}
|
|
2910
2919
|
else {
|
|
@@ -2940,6 +2949,7 @@ const MgInputRadio = class {
|
|
|
2940
2949
|
this.watchInputVerticalList(this.inputVerticalList);
|
|
2941
2950
|
this.watchReadonly(this.readonly);
|
|
2942
2951
|
this.watchDisabled(this.disabled);
|
|
2952
|
+
this.watchValue(this.value);
|
|
2943
2953
|
// Check validity when component is ready
|
|
2944
2954
|
// return a promise to process action only in the FIRST render().
|
|
2945
2955
|
// https://stenciljs.com/docs/component-lifecycle#componentwillload
|
|
@@ -2952,15 +2962,14 @@ const MgInputRadio = class {
|
|
|
2952
2962
|
* @returns HTML Element
|
|
2953
2963
|
*/
|
|
2954
2964
|
render() {
|
|
2955
|
-
|
|
2956
|
-
return (index.h("mg-input", { key: 'a987bc86a4bf97aead796cd7c91110cc0e3c90df', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("ul", { key: 'e5e249a744ecb1f09cdbe7f9ec9d8f44b8b20ece', class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
|
|
2965
|
+
return (index.h("mg-input", { key: '5c091907a3ac41d272fe2486de715f3a0bd59565', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("ul", { key: 'bae1b7f3b6310dcd22448928117e77763c158070', class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
|
|
2957
2966
|
if (el !== null)
|
|
2958
2967
|
this.inputs[index$1] = el;
|
|
2959
2968
|
} }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title)))))));
|
|
2960
2969
|
}
|
|
2961
2970
|
get element() { return index.getElement(this); }
|
|
2962
2971
|
static get watchers() { return {
|
|
2963
|
-
"value": ["
|
|
2972
|
+
"value": ["watchValue"],
|
|
2964
2973
|
"items": ["validateItems"],
|
|
2965
2974
|
"inputVerticalList": ["watchInputVerticalList"],
|
|
2966
2975
|
"readonly": ["watchReadonly", "handleValidityChange"],
|
|
@@ -3051,7 +3060,7 @@ const MgInputSelect = class {
|
|
|
3051
3060
|
if (this.input.value === '') {
|
|
3052
3061
|
this.setValue(null);
|
|
3053
3062
|
}
|
|
3054
|
-
else if (index$1.
|
|
3063
|
+
else if (index$1.Ge(this.items) && this.items.includes(this.input.value)) {
|
|
3055
3064
|
this.setValue(this.input.value);
|
|
3056
3065
|
}
|
|
3057
3066
|
else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
|
|
@@ -3125,7 +3134,7 @@ const MgInputSelect = class {
|
|
|
3125
3134
|
this.helpText = undefined;
|
|
3126
3135
|
this.valid = undefined;
|
|
3127
3136
|
this.invalid = undefined;
|
|
3128
|
-
this.classCollection = new index$1.
|
|
3137
|
+
this.classCollection = new index$1.Ie(['mg-c-input--select']);
|
|
3129
3138
|
this.errorMessage = undefined;
|
|
3130
3139
|
this.options = undefined;
|
|
3131
3140
|
this.valueExist = undefined;
|
|
@@ -3133,7 +3142,7 @@ const MgInputSelect = class {
|
|
|
3133
3142
|
}
|
|
3134
3143
|
validateValue(newValue) {
|
|
3135
3144
|
var _a, _b;
|
|
3136
|
-
if (index$1.
|
|
3145
|
+
if (index$1.Ge(this.items) && typeof newValue === 'string') {
|
|
3137
3146
|
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
|
|
3138
3147
|
}
|
|
3139
3148
|
else if (allItemsAreOptions(this.items)) {
|
|
@@ -3150,7 +3159,7 @@ const MgInputSelect = class {
|
|
|
3150
3159
|
this.options = [];
|
|
3151
3160
|
}
|
|
3152
3161
|
// String array
|
|
3153
|
-
else if (index$1.
|
|
3162
|
+
else if (index$1.Ge(newValue)) {
|
|
3154
3163
|
if (typeof this.value === 'string')
|
|
3155
3164
|
this.valueExist = newValue.includes(this.value);
|
|
3156
3165
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
@@ -3222,7 +3231,7 @@ const MgInputSelect = class {
|
|
|
3222
3231
|
if (typeof valid !== 'boolean') {
|
|
3223
3232
|
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
|
|
3224
3233
|
}
|
|
3225
|
-
else if (!index$1.
|
|
3234
|
+
else if (!index$1.Ze(errorMessage)) {
|
|
3226
3235
|
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
|
|
3227
3236
|
}
|
|
3228
3237
|
else {
|
|
@@ -3275,11 +3284,11 @@ const MgInputSelect = class {
|
|
|
3275
3284
|
* @returns HTML Element
|
|
3276
3285
|
*/
|
|
3277
3286
|
render() {
|
|
3278
|
-
return (index.h("mg-input", { key: '
|
|
3287
|
+
return (index.h("mg-input", { key: 'a5826f3afc824d081a9bef4237a1d0dbd440a2f3', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("select", { key: '709c0a75f1a644b306dcc37207369d0e3a9463e4', class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
3279
3288
|
if (el !== null)
|
|
3280
3289
|
this.input = el;
|
|
3281
3290
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
3282
|
-
index.h("option", { key: '
|
|
3291
|
+
index.h("option", { key: '9e5f8961c712a4bee4ffd1656ae89a78ced5181b', value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (index.h("optgroup", { label: option.group, key: option.group }, option.options.map(this.renderOption))) : (isOption$1(option) && this.renderOption(option))))));
|
|
3283
3292
|
}
|
|
3284
3293
|
get element() { return index.getElement(this); }
|
|
3285
3294
|
static get watchers() { return {
|
|
@@ -3334,7 +3343,7 @@ const MgInputText = class {
|
|
|
3334
3343
|
*/
|
|
3335
3344
|
this.handleFocus = () => {
|
|
3336
3345
|
this.classCollection.add(this.classFocus);
|
|
3337
|
-
this.classCollection = new index$1.
|
|
3346
|
+
this.classCollection = new index$1.Ie(this.classCollection.classes);
|
|
3338
3347
|
};
|
|
3339
3348
|
/**
|
|
3340
3349
|
* Handle blur event
|
|
@@ -3342,7 +3351,7 @@ const MgInputText = class {
|
|
|
3342
3351
|
this.handleBlur = () => {
|
|
3343
3352
|
// Manage focus
|
|
3344
3353
|
this.classCollection.delete(this.classFocus);
|
|
3345
|
-
this.classCollection = new index$1.
|
|
3354
|
+
this.classCollection = new index$1.Ie(this.classCollection.classes);
|
|
3346
3355
|
// Display Error
|
|
3347
3356
|
this.handlerInProgress = Handler.BLUR;
|
|
3348
3357
|
this.displayError().finally(() => {
|
|
@@ -3417,7 +3426,7 @@ const MgInputText = class {
|
|
|
3417
3426
|
this.helpText = undefined;
|
|
3418
3427
|
this.valid = undefined;
|
|
3419
3428
|
this.invalid = undefined;
|
|
3420
|
-
this.classCollection = new index$1.
|
|
3429
|
+
this.classCollection = new index$1.Ie(['mg-c-input--text']);
|
|
3421
3430
|
this.errorMessage = undefined;
|
|
3422
3431
|
}
|
|
3423
3432
|
handleValue(newValue) {
|
|
@@ -3468,7 +3477,7 @@ const MgInputText = class {
|
|
|
3468
3477
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3469
3478
|
}
|
|
3470
3479
|
validatePattern(newValue) {
|
|
3471
|
-
if (newValue !== undefined && !(index$1.
|
|
3480
|
+
if (newValue !== undefined && !(index$1.Ze(this.pattern) && index$1.Ze(this.patternErrorMessage))) {
|
|
3472
3481
|
throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
|
|
3473
3482
|
}
|
|
3474
3483
|
}
|
|
@@ -3498,7 +3507,7 @@ const MgInputText = class {
|
|
|
3498
3507
|
if (typeof valid !== 'boolean') {
|
|
3499
3508
|
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
|
|
3500
3509
|
}
|
|
3501
|
-
else if (!index$1.
|
|
3510
|
+
else if (!index$1.Ze(errorMessage)) {
|
|
3502
3511
|
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
|
|
3503
3512
|
}
|
|
3504
3513
|
else {
|
|
@@ -3607,7 +3616,7 @@ const MgInputTextarea = class {
|
|
|
3607
3616
|
*/
|
|
3608
3617
|
this.handleFocus = () => {
|
|
3609
3618
|
this.classCollection.add(this.classFocus);
|
|
3610
|
-
this.classCollection = new index$1.
|
|
3619
|
+
this.classCollection = new index$1.Ie(this.classCollection.classes);
|
|
3611
3620
|
};
|
|
3612
3621
|
/**
|
|
3613
3622
|
* Handle blur event
|
|
@@ -3615,7 +3624,7 @@ const MgInputTextarea = class {
|
|
|
3615
3624
|
this.handleBlur = () => {
|
|
3616
3625
|
// Manage focus
|
|
3617
3626
|
this.classCollection.delete(this.classFocus);
|
|
3618
|
-
this.classCollection = new index$1.
|
|
3627
|
+
this.classCollection = new index$1.Ie(this.classCollection.classes);
|
|
3619
3628
|
// Display Error
|
|
3620
3629
|
this.handlerInProgress = Handler.BLUR;
|
|
3621
3630
|
this.displayError().finally(() => {
|
|
@@ -3678,7 +3687,7 @@ const MgInputTextarea = class {
|
|
|
3678
3687
|
this.valid = undefined;
|
|
3679
3688
|
this.invalid = undefined;
|
|
3680
3689
|
this.resizable = 'none';
|
|
3681
|
-
this.classCollection = new index$1.
|
|
3690
|
+
this.classCollection = new index$1.Ie(['mg-c-input--textarea']);
|
|
3682
3691
|
this.errorMessage = undefined;
|
|
3683
3692
|
}
|
|
3684
3693
|
handleValue(newValue) {
|
|
@@ -3717,7 +3726,7 @@ const MgInputTextarea = class {
|
|
|
3717
3726
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3718
3727
|
}
|
|
3719
3728
|
validatePattern(newValue) {
|
|
3720
|
-
if (newValue !== undefined && !(index$1.
|
|
3729
|
+
if (newValue !== undefined && !(index$1.Ze(this.pattern) && index$1.Ze(this.patternErrorMessage))) {
|
|
3721
3730
|
throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
|
|
3722
3731
|
}
|
|
3723
3732
|
}
|
|
@@ -3749,7 +3758,7 @@ const MgInputTextarea = class {
|
|
|
3749
3758
|
if (typeof valid !== 'boolean') {
|
|
3750
3759
|
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
|
|
3751
3760
|
}
|
|
3752
|
-
else if (!index$1.
|
|
3761
|
+
else if (!index$1.Ze(errorMessage)) {
|
|
3753
3762
|
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
|
|
3754
3763
|
}
|
|
3755
3764
|
else {
|
|
@@ -3838,7 +3847,7 @@ const MgInputTitle = class {
|
|
|
3838
3847
|
this.tagName = 'label';
|
|
3839
3848
|
}
|
|
3840
3849
|
validateIdentifier(newValue) {
|
|
3841
|
-
if (!index$1.
|
|
3850
|
+
if (!index$1.Ze(newValue)) {
|
|
3842
3851
|
throw new Error('<mg-input-title> prop "identifier" is required.');
|
|
3843
3852
|
}
|
|
3844
3853
|
}
|
|
@@ -3952,7 +3961,7 @@ const MgInputToggle = class {
|
|
|
3952
3961
|
this.tooltip = undefined;
|
|
3953
3962
|
this.tooltipPosition = 'input';
|
|
3954
3963
|
this.helpText = undefined;
|
|
3955
|
-
this.classCollection = new index$1.
|
|
3964
|
+
this.classCollection = new index$1.Ie(['mg-c-input--toggle']);
|
|
3956
3965
|
this.options = undefined;
|
|
3957
3966
|
this.errorMessage = undefined;
|
|
3958
3967
|
this.valid = undefined;
|
|
@@ -3969,7 +3978,7 @@ const MgInputToggle = class {
|
|
|
3969
3978
|
throw new Error('<mg-input-toggle> prop "items" require 2 items.');
|
|
3970
3979
|
}
|
|
3971
3980
|
// String array
|
|
3972
|
-
else if (index$1.
|
|
3981
|
+
else if (index$1.Ge(newValue)) {
|
|
3973
3982
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
3974
3983
|
}
|
|
3975
3984
|
// Object array
|
|
@@ -4025,7 +4034,7 @@ const MgInputToggle = class {
|
|
|
4025
4034
|
if (typeof valid !== 'boolean') {
|
|
4026
4035
|
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
|
|
4027
4036
|
}
|
|
4028
|
-
else if (!index$1.
|
|
4037
|
+
else if (!index$1.Ze(errorMessage)) {
|
|
4029
4038
|
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
|
|
4030
4039
|
}
|
|
4031
4040
|
else {
|
|
@@ -4256,7 +4265,7 @@ const MgItemMore = class {
|
|
|
4256
4265
|
if (!proxy)
|
|
4257
4266
|
return;
|
|
4258
4267
|
// remove proxy id to prevent duplicate key. default html id is: '';
|
|
4259
|
-
if (index$1.
|
|
4268
|
+
if (index$1.Ze(proxy.id))
|
|
4260
4269
|
proxy.id = '';
|
|
4261
4270
|
const proxyClickHandler = () => {
|
|
4262
4271
|
this.parentMenu
|
|
@@ -4300,7 +4309,7 @@ const MgItemMore = class {
|
|
|
4300
4309
|
// create item-more menu items element from main menu-items clones
|
|
4301
4310
|
this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
|
|
4302
4311
|
// we need to get all `mg-menu-item` linked to the cloned one to set mirror process
|
|
4303
|
-
index$1.
|
|
4312
|
+
index$1.Ye(() => {
|
|
4304
4313
|
if (child.querySelector('mg-menu')) {
|
|
4305
4314
|
child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);
|
|
4306
4315
|
}
|
|
@@ -4626,7 +4635,7 @@ const MgMenuItem = class {
|
|
|
4626
4635
|
throw new Error(`<${this.name}> slot "label" is required.`);
|
|
4627
4636
|
['label', 'metadata'].forEach(slot => {
|
|
4628
4637
|
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
4629
|
-
if (!index$1.
|
|
4638
|
+
if (!index$1.Ze(element.textContent))
|
|
4630
4639
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
4631
4640
|
if ((guard && element.getAttribute('title') === null) || !guard)
|
|
4632
4641
|
element.setAttribute('title', element.textContent);
|
|
@@ -4695,13 +4704,13 @@ const MgMenuItem = class {
|
|
|
4695
4704
|
* @returns HTML Element
|
|
4696
4705
|
*/
|
|
4697
4706
|
this.renderSlot = () => index.h("slot", null);
|
|
4698
|
-
this.identifier = index$1.
|
|
4707
|
+
this.identifier = index$1.ze('mg-menu-item');
|
|
4699
4708
|
this.href = undefined;
|
|
4700
4709
|
this.target = undefined;
|
|
4701
4710
|
this.status = Status$1.VISIBLE;
|
|
4702
4711
|
this.expanded = false;
|
|
4703
4712
|
this.size = 'regular';
|
|
4704
|
-
this.navigationButtonClassList = new index$1.
|
|
4713
|
+
this.navigationButtonClassList = new index$1.Ie([this.navigationButton]);
|
|
4705
4714
|
this.direction = undefined;
|
|
4706
4715
|
this.isInMainMenu = undefined;
|
|
4707
4716
|
this.isItemMore = undefined;
|
|
@@ -4848,7 +4857,7 @@ const MgMenuItem = class {
|
|
|
4848
4857
|
* Emit event when component is updated
|
|
4849
4858
|
*/
|
|
4850
4859
|
componentShouldUpdate() {
|
|
4851
|
-
return index$1.
|
|
4860
|
+
return index$1.Ye(() => {
|
|
4852
4861
|
this.itemUpdated.emit();
|
|
4853
4862
|
});
|
|
4854
4863
|
}
|
|
@@ -4955,13 +4964,13 @@ const MgMessage = class {
|
|
|
4955
4964
|
return 'exclamation-circle';
|
|
4956
4965
|
}
|
|
4957
4966
|
};
|
|
4958
|
-
this.identifier = index$1.
|
|
4967
|
+
this.identifier = index$1.ze('mg-message');
|
|
4959
4968
|
this.delay = undefined;
|
|
4960
4969
|
this.variant = variants$1[0];
|
|
4961
4970
|
this.closeButton = false;
|
|
4962
4971
|
this.hide = false;
|
|
4963
4972
|
this.noAriaRole = undefined;
|
|
4964
|
-
this.classCollection = new index$1.
|
|
4973
|
+
this.classCollection = new index$1.Ie(['mg-c-message']);
|
|
4965
4974
|
this.hasActions = false;
|
|
4966
4975
|
}
|
|
4967
4976
|
validateDelay(newValue) {
|
|
@@ -5104,12 +5113,12 @@ const MgModal = class {
|
|
|
5104
5113
|
*/
|
|
5105
5114
|
this.setFocus = () => {
|
|
5106
5115
|
// Get all focusable elements
|
|
5107
|
-
const slottedFocusableElements = Array.from(this.element.querySelectorAll(index$1.
|
|
5116
|
+
const slottedFocusableElements = Array.from(this.element.querySelectorAll(index$1.Ke));
|
|
5108
5117
|
// If close button is enabled or at least one of the slotted element is focusable
|
|
5109
5118
|
if (this.closeButton || slottedFocusableElements.length > 0) {
|
|
5110
5119
|
// Check if slotted focusable elements have shadowDom with focusable elements
|
|
5111
5120
|
this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
|
|
5112
|
-
acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(index$1.
|
|
5121
|
+
acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(index$1.Ke) || focusableElement : focusableElement);
|
|
5113
5122
|
return acc;
|
|
5114
5123
|
}, []);
|
|
5115
5124
|
// When close button is enabled it's the first focusable element.
|
|
@@ -5131,21 +5140,21 @@ const MgModal = class {
|
|
|
5131
5140
|
this.handleClose = () => {
|
|
5132
5141
|
this.hide = true;
|
|
5133
5142
|
};
|
|
5134
|
-
this.identifier = index$1.
|
|
5143
|
+
this.identifier = index$1.ze('mg-modal');
|
|
5135
5144
|
this.dialogRole = dialogRoles[0];
|
|
5136
5145
|
this.modalTitle = undefined;
|
|
5137
5146
|
this.closeButton = false;
|
|
5138
5147
|
this.hide = undefined;
|
|
5139
5148
|
this.hasActions = false;
|
|
5140
5149
|
this.hasContent = false;
|
|
5141
|
-
this.classCollection = new index$1.
|
|
5150
|
+
this.classCollection = new index$1.Ie(['mg-c-modal']);
|
|
5142
5151
|
}
|
|
5143
5152
|
validateDialogRole(newValue) {
|
|
5144
5153
|
if (!dialogRoles.includes(newValue))
|
|
5145
5154
|
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
|
|
5146
5155
|
}
|
|
5147
5156
|
validateModalTitle(newValue) {
|
|
5148
|
-
if (!index$1.
|
|
5157
|
+
if (!index$1.Ze(newValue)) {
|
|
5149
5158
|
throw new Error('<mg-modal> prop "modalTitle" is required.');
|
|
5150
5159
|
}
|
|
5151
5160
|
}
|
|
@@ -5292,7 +5301,7 @@ const MgPagination = class {
|
|
|
5292
5301
|
this.handleGoToPage = (action, disabled) => {
|
|
5293
5302
|
!disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
|
|
5294
5303
|
};
|
|
5295
|
-
this.identifier = index$1.
|
|
5304
|
+
this.identifier = index$1.ze('mg-pagination');
|
|
5296
5305
|
this.label = undefined;
|
|
5297
5306
|
this.hideNavigationLabels = undefined;
|
|
5298
5307
|
this.hidePageCount = undefined;
|
|
@@ -5457,7 +5466,7 @@ const MgPanel = class {
|
|
|
5457
5466
|
];
|
|
5458
5467
|
return this.titlePosition === 'right' ? children.reverse() : children;
|
|
5459
5468
|
};
|
|
5460
|
-
this.identifier = index$1.
|
|
5469
|
+
this.identifier = index$1.ze('mg-panel');
|
|
5461
5470
|
this.panelTitle = undefined;
|
|
5462
5471
|
this.titlePattern = undefined;
|
|
5463
5472
|
this.titlePatternErrorMessage = undefined;
|
|
@@ -5466,12 +5475,12 @@ const MgPanel = class {
|
|
|
5466
5475
|
this.expanded = false;
|
|
5467
5476
|
this.expandToggleDisplay = expandToggleDisplays[0];
|
|
5468
5477
|
this.expandToggleDisabled = undefined;
|
|
5469
|
-
this.classCollection = new index$1.
|
|
5478
|
+
this.classCollection = new index$1.Ie(['mg-c-panel']);
|
|
5470
5479
|
this.isEditing = false;
|
|
5471
5480
|
this.updatedPanelTitle = undefined;
|
|
5472
5481
|
}
|
|
5473
5482
|
validatePanelTitle(newValue) {
|
|
5474
|
-
if (!index$1.
|
|
5483
|
+
if (!index$1.Ze(newValue))
|
|
5475
5484
|
throw new Error('<mg-panel> prop "panelTitle" is required.');
|
|
5476
5485
|
this.titleChange.emit(newValue);
|
|
5477
5486
|
}
|
|
@@ -7422,7 +7431,7 @@ const MgPopover = class {
|
|
|
7422
7431
|
mgPopoverContent.setAttribute('id', this.identifier);
|
|
7423
7432
|
}
|
|
7424
7433
|
};
|
|
7425
|
-
this.identifier = index$1.
|
|
7434
|
+
this.identifier = index$1.ze('mg-popover');
|
|
7426
7435
|
this.placement = 'bottom';
|
|
7427
7436
|
this.arrowHide = false;
|
|
7428
7437
|
this.closeButton = false;
|
|
@@ -7465,7 +7474,7 @@ const MgPopover = class {
|
|
|
7465
7474
|
*/
|
|
7466
7475
|
componentWillLoad() {
|
|
7467
7476
|
// Get windows to attach events
|
|
7468
|
-
this.windows = index$1.
|
|
7477
|
+
this.windows = index$1.Qe(window);
|
|
7469
7478
|
// render mg-popover-content slot
|
|
7470
7479
|
this.renderPopoverContent();
|
|
7471
7480
|
this.validateCloseButton(this.closeButton);
|
|
@@ -7557,7 +7566,7 @@ const MgPopoverContent = class {
|
|
|
7557
7566
|
this.hideContent.emit();
|
|
7558
7567
|
};
|
|
7559
7568
|
this.closeButton = false;
|
|
7560
|
-
this.classCollection = new index$1.
|
|
7569
|
+
this.classCollection = new index$1.Ie(['mg-c-popover-content']);
|
|
7561
7570
|
}
|
|
7562
7571
|
/*************
|
|
7563
7572
|
* Lifecycle *
|
|
@@ -7575,7 +7584,7 @@ const MgPopoverContent = class {
|
|
|
7575
7584
|
componentDidLoad() {
|
|
7576
7585
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
7577
7586
|
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
7578
|
-
if (slottedTitleElement && !index$1.
|
|
7587
|
+
if (slottedTitleElement && !index$1.Xe(slottedTitleElement, headingTags)) {
|
|
7579
7588
|
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
|
|
7580
7589
|
}
|
|
7581
7590
|
}
|
|
@@ -7611,7 +7620,7 @@ const MgSkipLinks = class {
|
|
|
7611
7620
|
this.links = undefined;
|
|
7612
7621
|
}
|
|
7613
7622
|
validateLinks(links) {
|
|
7614
|
-
if (links === undefined || links.length === 0 || links.some(link => !index$1.
|
|
7623
|
+
if (links === undefined || links.length === 0 || links.some(link => !index$1.Ze(link.href) || !link.href.startsWith('#') || !index$1.Ze(link.label))) {
|
|
7615
7624
|
throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
|
|
7616
7625
|
}
|
|
7617
7626
|
}
|
|
@@ -7630,7 +7639,7 @@ const MgSkipLinks = class {
|
|
|
7630
7639
|
* @returns HTML Element
|
|
7631
7640
|
*/
|
|
7632
7641
|
render() {
|
|
7633
|
-
return (index.h("nav", { key: '
|
|
7642
|
+
return (index.h("nav", { key: 'e5a7020edfe2e491af48785f3d9fa9bede770ae5', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: 'da692631900bb61269803e93718d0dacdb6a5e8a', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (index.h("li", { key: link.href }, index.h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
|
|
7634
7643
|
}
|
|
7635
7644
|
get element() { return index.getElement(this); }
|
|
7636
7645
|
static get watchers() { return {
|
|
@@ -7763,7 +7772,7 @@ const MgTabs = class {
|
|
|
7763
7772
|
*/
|
|
7764
7773
|
this.resetFocus = () => {
|
|
7765
7774
|
// update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
|
|
7766
|
-
index$1.
|
|
7775
|
+
index$1.Ye(() => {
|
|
7767
7776
|
this.tabFocus = undefined;
|
|
7768
7777
|
Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
|
|
7769
7778
|
tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
|
|
@@ -7778,16 +7787,16 @@ const MgTabs = class {
|
|
|
7778
7787
|
if (slots.length !== this.tabs.length)
|
|
7779
7788
|
throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
|
|
7780
7789
|
};
|
|
7781
|
-
this.identifier = index$1.
|
|
7790
|
+
this.identifier = index$1.ze('mg-tabs');
|
|
7782
7791
|
this.label = undefined;
|
|
7783
7792
|
this.size = 'regular';
|
|
7784
7793
|
this.items = undefined;
|
|
7785
7794
|
this.activeTab = undefined;
|
|
7786
7795
|
this.tabs = [];
|
|
7787
|
-
this.classCollection = new index$1.
|
|
7796
|
+
this.classCollection = new index$1.Ie(['mg-c-tabs']);
|
|
7788
7797
|
}
|
|
7789
7798
|
validateLabel(newValue) {
|
|
7790
|
-
if (!index$1.
|
|
7799
|
+
if (!index$1.Ze(newValue)) {
|
|
7791
7800
|
throw new Error('<mg-tabs> prop "label" is required.');
|
|
7792
7801
|
}
|
|
7793
7802
|
}
|
|
@@ -7799,7 +7808,7 @@ const MgTabs = class {
|
|
|
7799
7808
|
}
|
|
7800
7809
|
validateItems(newValue) {
|
|
7801
7810
|
// String array
|
|
7802
|
-
if (index$1.
|
|
7811
|
+
if (index$1.Ge(newValue))
|
|
7803
7812
|
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
7804
7813
|
// Object array
|
|
7805
7814
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
@@ -7899,7 +7908,7 @@ const MgTag = class {
|
|
|
7899
7908
|
this.variant = variants[0];
|
|
7900
7909
|
this.outline = undefined;
|
|
7901
7910
|
this.soft = undefined;
|
|
7902
|
-
this.classCollection = new index$1.
|
|
7911
|
+
this.classCollection = new index$1.Ie(['mg-c-tag']);
|
|
7903
7912
|
}
|
|
7904
7913
|
validateVariant(newValue, oldValue) {
|
|
7905
7914
|
if (!variants.includes(newValue)) {
|
|
@@ -7936,7 +7945,7 @@ const MgTag = class {
|
|
|
7936
7945
|
* @param textContent - html element textContent property
|
|
7937
7946
|
*/
|
|
7938
7947
|
validateTextContent(textContent) {
|
|
7939
|
-
if (!index$1.
|
|
7948
|
+
if (!index$1.Ze(textContent))
|
|
7940
7949
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
7941
7950
|
}
|
|
7942
7951
|
/*************
|
|
@@ -7996,7 +8005,7 @@ const MgTooltip = class {
|
|
|
7996
8005
|
// Enable the event listeners
|
|
7997
8006
|
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
7998
8007
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
7999
|
-
index$1.
|
|
8008
|
+
index$1.Ye(() => {
|
|
8000
8009
|
this.windows.forEach((localWindow) => {
|
|
8001
8010
|
localWindow.addEventListener('click', this.handleClickOutside, false);
|
|
8002
8011
|
localWindow.addEventListener('keydown', this.handlePressEscape, false);
|
|
@@ -8186,7 +8195,7 @@ const MgTooltip = class {
|
|
|
8186
8195
|
element.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);
|
|
8187
8196
|
}
|
|
8188
8197
|
};
|
|
8189
|
-
this.identifier = index$1.
|
|
8198
|
+
this.identifier = index$1.ze('mg-tooltip');
|
|
8190
8199
|
this.message = undefined;
|
|
8191
8200
|
this.placement = 'bottom';
|
|
8192
8201
|
this.display = false;
|
|
@@ -8197,7 +8206,7 @@ const MgTooltip = class {
|
|
|
8197
8206
|
this.renderTooltipContent();
|
|
8198
8207
|
}
|
|
8199
8208
|
watchMessage(newValue) {
|
|
8200
|
-
if (!index$1.
|
|
8209
|
+
if (!index$1.Ze(newValue)) {
|
|
8201
8210
|
throw new Error('<mg-tooltip> prop "message" is required.');
|
|
8202
8211
|
}
|
|
8203
8212
|
this.mgTooltipContent.message = newValue;
|
|
@@ -8252,7 +8261,7 @@ const MgTooltip = class {
|
|
|
8252
8261
|
*/
|
|
8253
8262
|
componentWillLoad() {
|
|
8254
8263
|
// Get windows to attach events
|
|
8255
|
-
this.windows = index$1.
|
|
8264
|
+
this.windows = index$1.Qe(window);
|
|
8256
8265
|
// Get tooltip element
|
|
8257
8266
|
this.renderTooltipContent();
|
|
8258
8267
|
//validate properties
|
|
@@ -8270,7 +8279,7 @@ const MgTooltip = class {
|
|
|
8270
8279
|
// get slotted element wich is not the tooltip
|
|
8271
8280
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
8272
8281
|
// Get interactive element
|
|
8273
|
-
const interactiveElement = slotElement.matches(index$1.
|
|
8282
|
+
const interactiveElement = slotElement.matches(index$1.Ke) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1.Ke);
|
|
8274
8283
|
this.setTooltipedElement(interactiveElement || slotElement);
|
|
8275
8284
|
// Check if slotted element is a disabled mg-button
|
|
8276
8285
|
// In this case we wrap the mg-button into a div to enable the tooltip
|