@mgdis/mg-components 5.27.1 → 5.27.2
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-4b43c17b.js → index-00072168.js} +43 -43
- package/dist/cjs/index-00072168.js.map +1 -0
- package/dist/cjs/{index-83102ab3.js → index-7e27c7ae.js} +26 -3
- package/dist/cjs/index-7e27c7ae.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mg-action-more_36.cjs.entry.js +138 -138
- package/dist/cjs/mg-action-more_36.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-components.cjs.js +2 -2
- package/dist/cjs/mg-components.cjs.js.map +1 -1
- package/dist/cjs/mg-loader.cjs.entry.js +4 -4
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/atoms/mg-button/mg-button.js +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js.map +1 -1
- package/dist/collection/components/atoms/mg-card/mg-card.js +1 -1
- package/dist/collection/components/atoms/mg-card/mg-card.js.map +1 -1
- package/dist/collection/components/atoms/mg-character-left/mg-character-left.js +1 -1
- package/dist/collection/components/atoms/mg-divider/mg-divider.js +1 -1
- package/dist/collection/components/atoms/mg-input-title/mg-input-title.js +1 -1
- package/dist/collection/components/atoms/mg-input-title/mg-input-title.js.map +1 -1
- package/dist/collection/components/atoms/mg-tag/mg-tag.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +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 +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +2 -2
- 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 +3 -3
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +1 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +1 -1
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +3 -3
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js.map +1 -1
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +3 -3
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +2 -2
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.js +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.js.map +1 -1
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +2 -2
- package/dist/collection/components/molecules/mg-modal/mg-modal.js.map +1 -1
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +3 -3
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js.map +1 -1
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
- 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-content/mg-popover-content.js.map +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +1 -1
- package/dist/components/index.es.js +39 -39
- package/dist/components/index.es.js.map +1 -1
- package/dist/components/index2.js +2 -2
- package/dist/components/mg-action-more.js +5 -5
- package/dist/components/mg-action-more.js.map +1 -1
- 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 +3 -3
- package/dist/components/mg-card2.js.map +1 -1
- package/dist/components/mg-character-left2.js +1 -1
- package/dist/components/mg-details.js +3 -3
- package/dist/components/mg-divider.js +1 -1
- package/dist/components/mg-form.js +4 -4
- package/dist/components/mg-form.js.map +1 -1
- package/dist/components/mg-icon2.js +2 -2
- package/dist/components/mg-illustrated-message.js +5 -5
- package/dist/components/mg-input-checkbox-paginated2.js +2 -2
- 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-date.js +11 -11
- package/dist/components/mg-input-numeric.js +7 -7
- package/dist/components/mg-input-password.js +5 -5
- package/dist/components/mg-input-radio.js +5 -5
- 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 +9 -9
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +8 -8
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-input-title2.js +3 -3
- package/dist/components/mg-input-title2.js.map +1 -1
- package/dist/components/mg-input-toggle.js +5 -5
- package/dist/components/mg-input2.js +4 -4
- package/dist/components/mg-item-more2.js +5 -5
- package/dist/components/mg-item-more2.js.map +1 -1
- package/dist/components/mg-loader.js +3 -3
- package/dist/components/mg-menu-item2.js +6 -6
- package/dist/components/mg-message.js +4 -4
- package/dist/components/mg-message.js.map +1 -1
- package/dist/components/mg-modal.js +8 -8
- package/dist/components/mg-modal.js.map +1 -1
- package/dist/components/mg-pagination2.js +5 -5
- package/dist/components/mg-pagination2.js.map +1 -1
- package/dist/components/mg-panel.js +5 -5
- package/dist/components/mg-popover-content2.js +4 -4
- package/dist/components/mg-popover-content2.js.map +1 -1
- package/dist/components/mg-popover2.js +4 -4
- package/dist/components/mg-skip-links.js +3 -3
- package/dist/components/mg-tabs.js +7 -7
- package/dist/components/mg-tag.js +4 -4
- package/dist/components/mg-tooltip-content2.js +1 -1
- package/dist/components/mg-tooltip2.js +7 -7
- package/dist/esm/{index-c4ed16b2.js → index-8d5d1bfd.js} +41 -41
- package/dist/esm/index-8d5d1bfd.js.map +1 -0
- package/dist/esm/{index-d43d1c5d.js → index-e479d5ae.js} +26 -3
- package/dist/esm/index-e479d5ae.js.map +1 -0
- package/dist/esm/loader.js +2 -2
- package/dist/esm/mg-action-more_36.entry.js +138 -138
- package/dist/esm/mg-action-more_36.entry.js.map +1 -1
- package/dist/esm/mg-components.js +3 -3
- package/dist/esm/mg-components.js.map +1 -1
- package/dist/esm/mg-loader.entry.js +4 -4
- 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-7315d4a6.js +3 -0
- package/dist/mg-components/p-7315d4a6.js.map +1 -0
- package/dist/mg-components/{p-350454b9.js → p-8800813b.js} +2 -2
- package/dist/mg-components/p-8800813b.js.map +1 -0
- package/dist/mg-components/{p-d4084a15.entry.js → p-99e2f42a.entry.js} +2 -2
- package/dist/mg-components/p-f9ac8927.entry.js +2 -0
- package/dist/mg-components/{p-9cdd1bc9.entry.js.map → p-f9ac8927.entry.js.map} +1 -1
- package/ide/intellij/web-types.json +1 -1
- package/ide/vscode/html-custom-data.json +1 -1
- package/package.json +10 -10
- package/dist/cjs/index-4b43c17b.js.map +0 -1
- package/dist/cjs/index-83102ab3.js.map +0 -1
- package/dist/esm/index-c4ed16b2.js.map +0 -1
- package/dist/esm/index-d43d1c5d.js.map +0 -1
- package/dist/mg-components/p-350454b9.js.map +0 -1
- package/dist/mg-components/p-9cdd1bc9.entry.js +0 -2
- package/dist/mg-components/p-cf0b0988.js +0 -3
- package/dist/mg-components/p-cf0b0988.js.map +0 -1
- /package/dist/mg-components/{p-d4084a15.entry.js.map → p-99e2f42a.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-7e27c7ae.js');
|
|
6
|
+
const index$1 = require('./index-00072168.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.Me(this.name);
|
|
83
83
|
/************
|
|
84
84
|
* Methods *
|
|
85
85
|
***********/
|
|
@@ -161,12 +161,12 @@ const MgActionMore = class {
|
|
|
161
161
|
const buttonLabel = this.button.label || this.messages.label;
|
|
162
162
|
const buttonContent = [buttonLabel];
|
|
163
163
|
if (!this.button.isIcon && this.displayChevron) {
|
|
164
|
-
buttonContent.push(index.h("span", {
|
|
164
|
+
buttonContent.push(index.h("span", { class: {
|
|
165
165
|
[`${this.classBase}__chevron`]: true,
|
|
166
166
|
[`${this.classBase}__chevron--rotate`]: this.expanded === true,
|
|
167
|
-
} }, index.h("mg-icon", {
|
|
167
|
+
} }, index.h("mg-icon", { icon: "chevron-down", size: "small" })));
|
|
168
168
|
}
|
|
169
|
-
return (index.h(index.Host, { key: '
|
|
169
|
+
return (index.h(index.Host, { key: '3833ffe89499015c991ac366c5bb87283948962b', "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { key: '3393bfd576f5bbef7570090a5813a4eecc944559', class: "mg-action-more" }, index.h("mg-popover", { key: '6c589e9efbbfef4adba6f2c59eb3f562c621daf1', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, index.h("mg-button", { key: '485538eb6f660de92c372ebd395e18ff7ef66c96', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && index.h("mg-icon", Object.assign({ key: 'd385d7c69f118b8f20d59547357dad7d8a56766d' }, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { key: '553f7704a5fc0b1a89062ce234607296d8bf53f2', slot: "content" }, index.h("mg-menu", { key: '4a161502b2d1dec2b17cd7c44cd492ec745cb7dd', direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
|
|
170
170
|
var _a;
|
|
171
171
|
return (
|
|
172
172
|
// eslint-disable-next-line react/jsx-no-bind
|
|
@@ -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.Oe(['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.Ne(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.Oe(['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.Ne(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.Ce(() => {
|
|
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: '8aa45a51510eccbb021e452d540c77844f3f4792', 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: '9743ead1b9fd1f70ef0690087806a1767c5825b0', class: this.classCollection.join(), id: this.identifier }, this.loading && index.h("mg-icon", { icon: "loader", spin: true }), index.h("div", { key: '
|
|
413
|
+
return (index.h(index.Host, { key: '8aa45a51510eccbb021e452d540c77844f3f4792', 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: '9743ead1b9fd1f70ef0690087806a1767c5825b0', class: this.classCollection.join(), id: this.identifier }, this.loading && index.h("mg-icon", { key: '543718fe45ad3e1901c4ef0c39b98705aa9fd64e', icon: "loader", spin: true }), index.h("div", { key: '21bc8c1a14f93db8b2373864a18da5c651e1ac4d', class: "mg-c-button__content" }, index.h("slot", { key: 'd16d710b4cb94ec1b7e3dfee2d4a70ee059528b4' })))));
|
|
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.Oe([this.classBase]);
|
|
456
456
|
}
|
|
457
457
|
validateVariant(newValue, oldValue) {
|
|
458
458
|
if (newValue && !variants$3.includes(newValue))
|
|
@@ -490,7 +490,7 @@ const MgCard = class {
|
|
|
490
490
|
*/
|
|
491
491
|
render() {
|
|
492
492
|
var _a;
|
|
493
|
-
return (index.h("div", { key: '
|
|
493
|
+
return (index.h("div", { key: 'b786a9ff3b706dcb24f6b3218feef97e284e2b9a', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && index.h("span", { key: '11a3b421c49864667832919e6d2cbe9ea19f9344', class: "mg-c-card__bar" }), index.h("slot", { key: '7421932644500c619d34cbe003a0f0bb50b612a7' })));
|
|
494
494
|
}
|
|
495
495
|
static get watchers() { return {
|
|
496
496
|
"variant": ["validateVariant"],
|
|
@@ -529,7 +529,7 @@ const MgCharacterLeft = class {
|
|
|
529
529
|
* @returns HTML Element
|
|
530
530
|
*/
|
|
531
531
|
render() {
|
|
532
|
-
return (index.h("span", { key: '
|
|
532
|
+
return (index.h("span", { key: 'd67db2514f27a2c0de9c187036f8f7e192761ce2', id: this.identifier, "aria-live": "polite" }, index.h("span", { key: 'e0622c110944075e1d659347965b20a9bfb5ebac', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), index.h("span", { key: '82a7deaf6f6f2ad32a8d2cfe57787b2b7a20fd4b', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
|
|
533
533
|
}
|
|
534
534
|
get element() { return index.getElement(this); }
|
|
535
535
|
static get watchers() { return {
|
|
@@ -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.Ne(newValue)) {
|
|
561
561
|
throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
|
|
562
562
|
}
|
|
563
563
|
}
|
|
@@ -579,7 +579,7 @@ const MgDetails = class {
|
|
|
579
579
|
* @returns HTML Element
|
|
580
580
|
*/
|
|
581
581
|
render() {
|
|
582
|
-
return (index.h("details", { key: '
|
|
582
|
+
return (index.h("details", { key: '9c629e03b5286afb8b9139aa4e182f10a1005c81', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, index.h("summary", { key: 'a525137281cb20fe8b74db56fe0e6f4f59427e4d' }, index.h("slot", { key: '7fb96692cfa339e904894bbddffd2211ff7741b5', name: "summary" }), index.h("span", { key: 'b322eb9e02173a24bcff738d6f1333ce6ab68912', class: "mg-c-details__toggle" }, index.h("mg-icon", { key: 'fd952a2abf6b689360faa0ef5219eb400b1a6f61', icon: "chevron-up", size: "small", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), index.h("span", { key: '10b0a8a350f857296ae5600de5f68a9b528a3739', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), index.h("div", { key: 'e54fe3d881a04ccbb3d394b0492f6ab906eac1f8', class: "mg-c-details__details" }, index.h("slot", { key: 'ae05e78c61d9fa8e1d90aa58ac7d6ce8862128ff', name: "details" }))));
|
|
583
583
|
}
|
|
584
584
|
static get watchers() { return {
|
|
585
585
|
"toggleClosed": ["validateTitles"],
|
|
@@ -602,7 +602,7 @@ const MgDivider = class {
|
|
|
602
602
|
* @returns HTML Element
|
|
603
603
|
*/
|
|
604
604
|
render() {
|
|
605
|
-
return (index.h("div", { key: '
|
|
605
|
+
return (index.h("div", { key: '92413bf42dc057ea1dfd645b4d619a7f180e5aca', class: {
|
|
606
606
|
'mg-c-divider': true,
|
|
607
607
|
'mg-c-divider--full': this.size === 'full',
|
|
608
608
|
} }));
|
|
@@ -715,7 +715,7 @@ const MgForm = class {
|
|
|
715
715
|
}
|
|
716
716
|
});
|
|
717
717
|
};
|
|
718
|
-
this.identifier = index$1.
|
|
718
|
+
this.identifier = index$1.Me('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.Oe(['mg-c-form']);
|
|
728
728
|
this.requiredMessageText = undefined;
|
|
729
729
|
}
|
|
730
730
|
validateRequiredMessage(newValue) {
|
|
@@ -806,7 +806,7 @@ const MgForm = class {
|
|
|
806
806
|
* @returns HTML Element
|
|
807
807
|
*/
|
|
808
808
|
render() {
|
|
809
|
-
return (index.h("form", { key: '
|
|
809
|
+
return (index.h("form", { key: '498fe7564261b0aad99bab2686a6f0f4624785cc', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { key: 'd0d0f1f6373eff660de65104afb3ba40835a58e3', innerHTML: this.requiredMessageText }), index.h("slot", { key: '9e98e1b0fda2a8b69f8efb8bacccb6cd1173ba4f' }), !this.readonly && !this.disabled && index.h("slot", { key: '083f5490c17548defa713bb697b731b02fad9198', name: "actions" })));
|
|
810
810
|
}
|
|
811
811
|
get element() { return index.getElement(this); }
|
|
812
812
|
static get watchers() { return {
|
|
@@ -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.Oe(['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.De(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) {
|
|
@@ -977,13 +977,13 @@ const MgIllustratedMessage = class {
|
|
|
977
977
|
* @returns HTML Element
|
|
978
978
|
*/
|
|
979
979
|
render() {
|
|
980
|
-
return (index.h("div", { key: '
|
|
980
|
+
return (index.h("div", { key: '042f4e43323c30176c3d2b4d596d55a25a4382b7', class: {
|
|
981
981
|
'mg-c-illustrated-message': true,
|
|
982
982
|
'mg-c-illustrated-message--horizontal': this.direction === 'horizontal',
|
|
983
|
-
} }, index.h("div", { key: '
|
|
983
|
+
} }, index.h("div", { key: 'ebda1c1ca89ac40ff69820f96c10c0515ab9590a', class: {
|
|
984
984
|
'mg-c-illustrated-message__illustration': true,
|
|
985
985
|
'mg-c-illustrated-message__illustration--small': this.size === 'small',
|
|
986
|
-
} }, index.h("slot", { key: '
|
|
986
|
+
} }, index.h("slot", { key: 'aa65a2f9ea28bba75b7b7ad8c0816ea9efe4c180', name: "illustration" })), index.h("div", { key: '8173740ede93f2800ef9de9645fd4cc05ee66e3b', class: "mg-c-illustrated-message__slots" }, index.h("div", { key: '970bba9668cd3ab806399cee83e6a8c9648adff0', class: "mg-c-illustrated-message__title" }, index.h("slot", { key: '590d7970e1845e48658ae6287fdf91e782fcfe57', name: "title" })), index.h("div", { key: '0c49e0842c7d12e6810fbf95404d8a66f7139320', class: "mg-c-illustrated-message__details" }, index.h("slot", { key: 'efec02b5d379d2a042591e4a02896691be8d67cb', name: "details" })))));
|
|
987
987
|
}
|
|
988
988
|
get element() { return index.getElement(this); }
|
|
989
989
|
};
|
|
@@ -1064,7 +1064,7 @@ const MgInput = class {
|
|
|
1064
1064
|
this.isVerticalList = false;
|
|
1065
1065
|
}
|
|
1066
1066
|
watchIdentifier(newValue) {
|
|
1067
|
-
if (!index$1.
|
|
1067
|
+
if (!index$1.Ne(newValue)) {
|
|
1068
1068
|
throw new Error('<mg-input> prop "identifier" is required.');
|
|
1069
1069
|
}
|
|
1070
1070
|
else {
|
|
@@ -1149,7 +1149,7 @@ const MgInput = class {
|
|
|
1149
1149
|
*/
|
|
1150
1150
|
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
1151
1151
|
watchLabel() {
|
|
1152
|
-
if (!index$1.
|
|
1152
|
+
if (!index$1.Ne(this.label)) {
|
|
1153
1153
|
throw new Error('<mg-input> prop "label" is required.');
|
|
1154
1154
|
}
|
|
1155
1155
|
else {
|
|
@@ -1243,7 +1243,7 @@ const MgInput = class {
|
|
|
1243
1243
|
render() {
|
|
1244
1244
|
const readonlyValue = this.getReadonlyValues();
|
|
1245
1245
|
const isGroup = this.isFieldset && !this.isReadonly;
|
|
1246
|
-
return (index.h(index.Host, { key: '
|
|
1246
|
+
return (index.h(index.Host, { key: '7a344b1c43f967771a6a3460adf83d60aa7fcc7e', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, index.h("div", { key: 'e88dbd6ad81f94b6ab3fdd2d73986b06f05f233d', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, index.h("slot", { key: '12f3e23bd14c710ef5ecad3dedeb4f3d058c49d7', name: this.slotLabel }), this.tooltip && !this.isReadonly && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), index.h("div", { key: 'd7adace17ac5d68597dd5ece286ec04e405abccd', class: "mg-c-input__input-container" }, this.isReadonly
|
|
1247
1247
|
? [
|
|
1248
1248
|
Array.isArray(readonlyValue) ? (index.h("ul", { key: "readonly-value-list" }, readonlyValue.map(value => (index.h("li", { key: value }, index.h("strong", null, value)))))) : (index.h("strong", { key: "readonly-value" }, readonlyValue)),
|
|
1249
1249
|
index.h("slot", { key: "default-slot" }),
|
|
@@ -1445,7 +1445,7 @@ const MgInputCheckbox = class {
|
|
|
1445
1445
|
* Method to update searchResults
|
|
1446
1446
|
*/
|
|
1447
1447
|
this.updateSearchResults = () => {
|
|
1448
|
-
this.searchResults = this.checkboxItems.filter(item => index$1.
|
|
1448
|
+
this.searchResults = this.checkboxItems.filter(item => index$1.Ue(item.title).includes(index$1.Ue(this.searchValue)));
|
|
1449
1449
|
};
|
|
1450
1450
|
/**
|
|
1451
1451
|
* Method to validate if one of inputs value is checked id required
|
|
@@ -1519,7 +1519,7 @@ const MgInputCheckbox = class {
|
|
|
1519
1519
|
this.helpText = undefined;
|
|
1520
1520
|
this.valid = undefined;
|
|
1521
1521
|
this.invalid = undefined;
|
|
1522
|
-
this.classCollection = new index$1.
|
|
1522
|
+
this.classCollection = new index$1.Oe([this.baseClassName, classFieldset]);
|
|
1523
1523
|
this.errorMessage = undefined;
|
|
1524
1524
|
this.checkboxItems = [];
|
|
1525
1525
|
this.displaySearchInput = undefined;
|
|
@@ -1627,7 +1627,7 @@ const MgInputCheckbox = class {
|
|
|
1627
1627
|
if (typeof valid !== 'boolean') {
|
|
1628
1628
|
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
|
|
1629
1629
|
}
|
|
1630
|
-
else if (!index$1.
|
|
1630
|
+
else if (!index$1.Ne(errorMessage)) {
|
|
1631
1631
|
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
|
|
1632
1632
|
}
|
|
1633
1633
|
else {
|
|
@@ -1740,7 +1740,7 @@ const MgInputCheckbox = class {
|
|
|
1740
1740
|
* @returns HTML Element
|
|
1741
1741
|
*/
|
|
1742
1742
|
render() {
|
|
1743
|
-
return (index.h("mg-input", { key: '
|
|
1743
|
+
return (index.h("mg-input", { key: 'b695390b3a9525ba849c4442c6c6b0e643ec7348', 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())));
|
|
1744
1744
|
}
|
|
1745
1745
|
get element() { return index.getElement(this); }
|
|
1746
1746
|
static get watchers() { return {
|
|
@@ -1855,10 +1855,10 @@ const MgInputCheckboxPaginated = class {
|
|
|
1855
1855
|
* @returns HTML Element
|
|
1856
1856
|
*/
|
|
1857
1857
|
render() {
|
|
1858
|
-
const getText = (checkboxes) => (index.h("em", { key: '
|
|
1858
|
+
const getText = (checkboxes) => (index.h("em", { key: '0a1e9d02d508a27fda294b25d835f44b73d4c443', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
|
|
1859
1859
|
const [from, to] = this.getFromToIndexes();
|
|
1860
1860
|
const itemsContainerId = `items-${this.sectionKind}-container`;
|
|
1861
|
-
return (index.h(index.Host, { key: '
|
|
1861
|
+
return (index.h(index.Host, { key: '71c72a433b984a609046fdce7cf4c6130c8e1ada', hidden: this.checkboxes.length < 1 }, index.h("div", { key: 'b2bd73e01db4db0edca92c5e7fc64edfda9d3b6d', class: "mg-c-input__section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (index.h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, index.h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), index.h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (index.h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (index.h("mg-tooltip", { key: 'dcc6b405032e5b59cc748f1cbc87ab087c37cc31', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip, "data-popper-strategy": "absolute" }, index.h("mg-button", { key: 'a1d38aedc328d81ac8139f70e8564538f7e4b4c4', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (index.h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), index.h("div", { key: 'd9913a7ceeac5d91f0c58e5021a88f1bf37b1387', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, index.h(MgInputCheckboxList, { key: 'f262b871762d3c3f3e9828ed04cd735a89f9f27d', checkboxes: this.getArrayRange(this.checkboxes, from, to), displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
|
|
1862
1862
|
}
|
|
1863
1863
|
static get watchers() { return {
|
|
1864
1864
|
"checkboxes": ["validateCheckboxes"],
|
|
@@ -1890,7 +1890,7 @@ const MgInputDate = class {
|
|
|
1890
1890
|
* @param value - value to test
|
|
1891
1891
|
* @returns truthy when value match the pattern
|
|
1892
1892
|
*/
|
|
1893
|
-
this.isValidPattern = (value) => index$1.
|
|
1893
|
+
this.isValidPattern = (value) => index$1.Ne(value) && index$1.ge.test(value);
|
|
1894
1894
|
/**
|
|
1895
1895
|
* Format help text to display
|
|
1896
1896
|
* @param helpText - help text format
|
|
@@ -1898,10 +1898,10 @@ const MgInputDate = class {
|
|
|
1898
1898
|
*/
|
|
1899
1899
|
this.formatHelpText = (helpText) => {
|
|
1900
1900
|
const defaultHelpTextVariable = '{defaultHelpText}';
|
|
1901
|
-
let text = index$1.
|
|
1901
|
+
let text = index$1.Ne(helpText) ? helpText : this.messages.input.date.helpText;
|
|
1902
1902
|
if (text.includes(defaultHelpTextVariable))
|
|
1903
1903
|
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));
|
|
1904
|
-
return text.replace('{pattern}', this.renderPattern()).replace('{date}', index$1.
|
|
1904
|
+
return text.replace('{pattern}', this.renderPattern()).replace('{date}', index$1.pe(index$1.ze(new Date('2023-12-24')), this.systemLocale));
|
|
1905
1905
|
};
|
|
1906
1906
|
/**
|
|
1907
1907
|
* Handle input event
|
|
@@ -1993,8 +1993,8 @@ const MgInputDate = class {
|
|
|
1993
1993
|
// min, max & minMax
|
|
1994
1994
|
else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
|
|
1995
1995
|
this.errorMessage = this.messages.errors.date[inputError]
|
|
1996
|
-
.replace('{min}', index$1.
|
|
1997
|
-
.replace('{max}', index$1.
|
|
1996
|
+
.replace('{min}', index$1.pe(this.min, this.systemLocale))
|
|
1997
|
+
.replace('{max}', index$1.pe(this.max, this.systemLocale));
|
|
1998
1998
|
}
|
|
1999
1999
|
// wrong date format
|
|
2000
2000
|
// element.validity.badInput is default error message
|
|
@@ -2008,7 +2008,7 @@ const MgInputDate = class {
|
|
|
2008
2008
|
* @returns translated html pattern
|
|
2009
2009
|
*/
|
|
2010
2010
|
this.renderPattern = () => {
|
|
2011
|
-
let patternLocal = index$1.
|
|
2011
|
+
let patternLocal = index$1.We(this.systemLocale);
|
|
2012
2012
|
for (const key in this.messages.input.date.pattern) {
|
|
2013
2013
|
patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
|
|
2014
2014
|
}
|
|
@@ -2030,7 +2030,7 @@ const MgInputDate = class {
|
|
|
2030
2030
|
this.helpText = undefined;
|
|
2031
2031
|
this.valid = undefined;
|
|
2032
2032
|
this.invalid = undefined;
|
|
2033
|
-
this.classCollection = new index$1.
|
|
2033
|
+
this.classCollection = new index$1.Oe(['mg-c-input--date']);
|
|
2034
2034
|
this.errorMessage = undefined;
|
|
2035
2035
|
}
|
|
2036
2036
|
validateValue(newValue) {
|
|
@@ -2038,7 +2038,7 @@ const MgInputDate = class {
|
|
|
2038
2038
|
if (newValue === '')
|
|
2039
2039
|
newValue = null;
|
|
2040
2040
|
// check value validity
|
|
2041
|
-
if (newValue && !index$1.
|
|
2041
|
+
if (newValue && !index$1.Ne(newValue)) {
|
|
2042
2042
|
throw new Error("<mg-input-date> props 'value' must be a valid string");
|
|
2043
2043
|
}
|
|
2044
2044
|
else if (!newValue || (newValue && this.isValidPattern(newValue))) {
|
|
@@ -2095,7 +2095,7 @@ const MgInputDate = class {
|
|
|
2095
2095
|
if (typeof valid !== 'boolean') {
|
|
2096
2096
|
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
|
|
2097
2097
|
}
|
|
2098
|
-
else if (!index$1.
|
|
2098
|
+
else if (!index$1.Ne(errorMessage)) {
|
|
2099
2099
|
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
|
|
2100
2100
|
}
|
|
2101
2101
|
else {
|
|
@@ -2149,7 +2149,7 @@ const MgInputDate = class {
|
|
|
2149
2149
|
* @returns HTML Element
|
|
2150
2150
|
*/
|
|
2151
2151
|
render() {
|
|
2152
|
-
return (index.h("mg-input", { key: '
|
|
2152
|
+
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.pe(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) => {
|
|
2153
2153
|
if (el !== null)
|
|
2154
2154
|
this.input = el;
|
|
2155
2155
|
} })));
|
|
@@ -2280,9 +2280,9 @@ const MgInputNumeric = class {
|
|
|
2280
2280
|
this.formatValue = (value) => {
|
|
2281
2281
|
switch (this.format) {
|
|
2282
2282
|
case 'number':
|
|
2283
|
-
return index$1.
|
|
2283
|
+
return index$1.we(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
|
|
2284
2284
|
case 'currency':
|
|
2285
|
-
return index$1.
|
|
2285
|
+
return index$1.qe(value, this.locale, this.currency);
|
|
2286
2286
|
case 'none':
|
|
2287
2287
|
return value.toString();
|
|
2288
2288
|
}
|
|
@@ -2319,7 +2319,7 @@ const MgInputNumeric = class {
|
|
|
2319
2319
|
this.decimalLength = 2;
|
|
2320
2320
|
this.valid = undefined;
|
|
2321
2321
|
this.invalid = undefined;
|
|
2322
|
-
this.classCollection = new index$1.
|
|
2322
|
+
this.classCollection = new index$1.Oe(['mg-c-input--numeric']);
|
|
2323
2323
|
this.errorMessage = undefined;
|
|
2324
2324
|
this.hasFocus = undefined;
|
|
2325
2325
|
}
|
|
@@ -2415,7 +2415,7 @@ const MgInputNumeric = class {
|
|
|
2415
2415
|
if (typeof valid !== 'boolean') {
|
|
2416
2416
|
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
|
|
2417
2417
|
}
|
|
2418
|
-
else if (!index$1.
|
|
2418
|
+
else if (!index$1.Ne(errorMessage)) {
|
|
2419
2419
|
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
|
|
2420
2420
|
}
|
|
2421
2421
|
else {
|
|
@@ -2510,10 +2510,10 @@ const MgInputNumeric = class {
|
|
|
2510
2510
|
* @returns HTML Element
|
|
2511
2511
|
*/
|
|
2512
2512
|
render() {
|
|
2513
|
-
return (index.h("mg-input", { key: '
|
|
2513
|
+
return (index.h("mg-input", { key: '52a1e1cc7a6f16290a62c258e099cd8c0cc30567', 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("input", { key: 'a36bbe191ff0fcacbf7bd459ad7d743a623eba44', type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
2514
2514
|
if (el !== null)
|
|
2515
2515
|
this.input = el;
|
|
2516
|
-
} }), index.h("slot", { key: '
|
|
2516
|
+
} }), index.h("slot", { key: '6b6ae5ae8aa3de2c1d0360c2ddef962a7b3e6bc0', name: "append-input" })));
|
|
2517
2517
|
}
|
|
2518
2518
|
get element() { return index.getElement(this); }
|
|
2519
2519
|
static get watchers() { return {
|
|
@@ -2607,7 +2607,7 @@ const MgInputPassword = class {
|
|
|
2607
2607
|
this.helpText = undefined;
|
|
2608
2608
|
this.valid = undefined;
|
|
2609
2609
|
this.invalid = undefined;
|
|
2610
|
-
this.classCollection = new index$1.
|
|
2610
|
+
this.classCollection = new index$1.Oe(['mg-c-input--password']);
|
|
2611
2611
|
this.errorMessage = undefined;
|
|
2612
2612
|
this.displayPassword = false;
|
|
2613
2613
|
}
|
|
@@ -2665,7 +2665,7 @@ const MgInputPassword = class {
|
|
|
2665
2665
|
if (typeof valid !== 'boolean') {
|
|
2666
2666
|
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
|
|
2667
2667
|
}
|
|
2668
|
-
else if (!index$1.
|
|
2668
|
+
else if (!index$1.Ne(errorMessage)) {
|
|
2669
2669
|
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
|
|
2670
2670
|
}
|
|
2671
2671
|
else {
|
|
@@ -2711,10 +2711,10 @@ const MgInputPassword = class {
|
|
|
2711
2711
|
* @returns HTML Element
|
|
2712
2712
|
*/
|
|
2713
2713
|
render() {
|
|
2714
|
-
return (index.h("mg-input", { key: '
|
|
2714
|
+
return (index.h("mg-input", { key: '39c2a1a17b4b64cb79ed6ca7036dd304ed01a8e6', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("span", { key: 'd85a4240b6d178cde418ee72164f337c4986aeff', class: "mg-c-input__input-group" }, index.h("input", { key: '2caccd24026632f5e65dd4cf12914bf71ca656d3', type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
|
|
2715
2715
|
if (el !== null)
|
|
2716
2716
|
this.input = el;
|
|
2717
|
-
} }), index.h("mg-button", { key: '
|
|
2717
|
+
} }), index.h("mg-button", { key: '59bd6c94c412eb8bcd5ece82e569e7df6fadaf9a', label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, index.h("mg-icon", { key: '22db9c43220335f258b8fa5978cb66a5d4c14c61', icon: this.displayPassword ? 'eye-slash' : 'eye' })))));
|
|
2718
2718
|
}
|
|
2719
2719
|
get element() { return index.getElement(this); }
|
|
2720
2720
|
static get watchers() { return {
|
|
@@ -2812,7 +2812,7 @@ const MgInputRadio = class {
|
|
|
2812
2812
|
this.helpText = undefined;
|
|
2813
2813
|
this.valid = undefined;
|
|
2814
2814
|
this.invalid = undefined;
|
|
2815
|
-
this.classCollection = new index$1.
|
|
2815
|
+
this.classCollection = new index$1.Oe(['mg-c-input--radio', classFieldset]);
|
|
2816
2816
|
this.errorMessage = undefined;
|
|
2817
2817
|
this.options = undefined;
|
|
2818
2818
|
}
|
|
@@ -2825,7 +2825,7 @@ const MgInputRadio = class {
|
|
|
2825
2825
|
throw new Error('<mg-input-radio> prop "items" require at least 2 items.');
|
|
2826
2826
|
}
|
|
2827
2827
|
// String array
|
|
2828
|
-
else if (index$1.
|
|
2828
|
+
else if (index$1.Fe(newValue)) {
|
|
2829
2829
|
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
2830
2830
|
}
|
|
2831
2831
|
// Object array
|
|
@@ -2884,7 +2884,7 @@ const MgInputRadio = class {
|
|
|
2884
2884
|
if (typeof valid !== 'boolean') {
|
|
2885
2885
|
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
|
|
2886
2886
|
}
|
|
2887
|
-
else if (!index$1.
|
|
2887
|
+
else if (!index$1.Ne(errorMessage)) {
|
|
2888
2888
|
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
|
|
2889
2889
|
}
|
|
2890
2890
|
else {
|
|
@@ -2933,7 +2933,7 @@ const MgInputRadio = class {
|
|
|
2933
2933
|
*/
|
|
2934
2934
|
render() {
|
|
2935
2935
|
var _a;
|
|
2936
|
-
return (index.h("mg-input", { key: '
|
|
2936
|
+
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) => {
|
|
2937
2937
|
if (el !== null)
|
|
2938
2938
|
this.inputs[index$1] = el;
|
|
2939
2939
|
} }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title)))))));
|
|
@@ -3031,7 +3031,7 @@ const MgInputSelect = class {
|
|
|
3031
3031
|
if (this.input.value === '') {
|
|
3032
3032
|
this.setValue(null);
|
|
3033
3033
|
}
|
|
3034
|
-
else if (index$1.
|
|
3034
|
+
else if (index$1.Fe(this.items) && this.items.includes(this.input.value)) {
|
|
3035
3035
|
this.setValue(this.input.value);
|
|
3036
3036
|
}
|
|
3037
3037
|
else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
|
|
@@ -3105,7 +3105,7 @@ const MgInputSelect = class {
|
|
|
3105
3105
|
this.helpText = undefined;
|
|
3106
3106
|
this.valid = undefined;
|
|
3107
3107
|
this.invalid = undefined;
|
|
3108
|
-
this.classCollection = new index$1.
|
|
3108
|
+
this.classCollection = new index$1.Oe(['mg-c-input--select']);
|
|
3109
3109
|
this.errorMessage = undefined;
|
|
3110
3110
|
this.options = undefined;
|
|
3111
3111
|
this.valueExist = undefined;
|
|
@@ -3113,7 +3113,7 @@ const MgInputSelect = class {
|
|
|
3113
3113
|
}
|
|
3114
3114
|
validateValue(newValue) {
|
|
3115
3115
|
var _a, _b;
|
|
3116
|
-
if (index$1.
|
|
3116
|
+
if (index$1.Fe(this.items) && typeof newValue === 'string') {
|
|
3117
3117
|
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
|
|
3118
3118
|
}
|
|
3119
3119
|
else if (allItemsAreOptions(this.items)) {
|
|
@@ -3130,7 +3130,7 @@ const MgInputSelect = class {
|
|
|
3130
3130
|
this.options = [];
|
|
3131
3131
|
}
|
|
3132
3132
|
// String array
|
|
3133
|
-
else if (index$1.
|
|
3133
|
+
else if (index$1.Fe(newValue)) {
|
|
3134
3134
|
if (typeof this.value === 'string')
|
|
3135
3135
|
this.valueExist = newValue.includes(this.value);
|
|
3136
3136
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
@@ -3202,7 +3202,7 @@ const MgInputSelect = class {
|
|
|
3202
3202
|
if (typeof valid !== 'boolean') {
|
|
3203
3203
|
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
|
|
3204
3204
|
}
|
|
3205
|
-
else if (!index$1.
|
|
3205
|
+
else if (!index$1.Ne(errorMessage)) {
|
|
3206
3206
|
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
|
|
3207
3207
|
}
|
|
3208
3208
|
else {
|
|
@@ -3255,11 +3255,11 @@ const MgInputSelect = class {
|
|
|
3255
3255
|
* @returns HTML Element
|
|
3256
3256
|
*/
|
|
3257
3257
|
render() {
|
|
3258
|
-
return (index.h("mg-input", { key: '
|
|
3258
|
+
return (index.h("mg-input", { key: 'b6e431b881062928dfff44b35b40e2c16a8c56fc', 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: '964162aae800e85cf9801c67c264736061fd80c6', 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) => {
|
|
3259
3259
|
if (el !== null)
|
|
3260
3260
|
this.input = el;
|
|
3261
3261
|
} }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
|
|
3262
|
-
index.h("option", { 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))))));
|
|
3262
|
+
index.h("option", { key: '9c24f8983858810541a0a626a5705ac9d05e26e0', 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))))));
|
|
3263
3263
|
}
|
|
3264
3264
|
get element() { return index.getElement(this); }
|
|
3265
3265
|
static get watchers() { return {
|
|
@@ -3314,7 +3314,7 @@ const MgInputText = class {
|
|
|
3314
3314
|
*/
|
|
3315
3315
|
this.handleFocus = () => {
|
|
3316
3316
|
this.classCollection.add(this.classFocus);
|
|
3317
|
-
this.classCollection = new index$1.
|
|
3317
|
+
this.classCollection = new index$1.Oe(this.classCollection.classes);
|
|
3318
3318
|
};
|
|
3319
3319
|
/**
|
|
3320
3320
|
* Handle blur event
|
|
@@ -3322,7 +3322,7 @@ const MgInputText = class {
|
|
|
3322
3322
|
this.handleBlur = () => {
|
|
3323
3323
|
// Manage focus
|
|
3324
3324
|
this.classCollection.delete(this.classFocus);
|
|
3325
|
-
this.classCollection = new index$1.
|
|
3325
|
+
this.classCollection = new index$1.Oe(this.classCollection.classes);
|
|
3326
3326
|
// Display Error
|
|
3327
3327
|
this.handlerInProgress = Handler.BLUR;
|
|
3328
3328
|
this.displayError().finally(() => {
|
|
@@ -3397,7 +3397,7 @@ const MgInputText = class {
|
|
|
3397
3397
|
this.helpText = undefined;
|
|
3398
3398
|
this.valid = undefined;
|
|
3399
3399
|
this.invalid = undefined;
|
|
3400
|
-
this.classCollection = new index$1.
|
|
3400
|
+
this.classCollection = new index$1.Oe(['mg-c-input--text']);
|
|
3401
3401
|
this.errorMessage = undefined;
|
|
3402
3402
|
}
|
|
3403
3403
|
handleValue(newValue) {
|
|
@@ -3448,7 +3448,7 @@ const MgInputText = class {
|
|
|
3448
3448
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3449
3449
|
}
|
|
3450
3450
|
validatePattern(newValue) {
|
|
3451
|
-
if (newValue !== undefined && !(index$1.
|
|
3451
|
+
if (newValue !== undefined && !(index$1.Ne(this.pattern) && index$1.Ne(this.patternErrorMessage))) {
|
|
3452
3452
|
throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
|
|
3453
3453
|
}
|
|
3454
3454
|
}
|
|
@@ -3478,7 +3478,7 @@ const MgInputText = class {
|
|
|
3478
3478
|
if (typeof valid !== 'boolean') {
|
|
3479
3479
|
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
|
|
3480
3480
|
}
|
|
3481
|
-
else if (!index$1.
|
|
3481
|
+
else if (!index$1.Ne(errorMessage)) {
|
|
3482
3482
|
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
|
|
3483
3483
|
}
|
|
3484
3484
|
else {
|
|
@@ -3532,14 +3532,14 @@ const MgInputText = class {
|
|
|
3532
3532
|
* @returns HTML Element
|
|
3533
3533
|
*/
|
|
3534
3534
|
render() {
|
|
3535
|
-
return (index.h("mg-input", { key: '
|
|
3535
|
+
return (index.h("mg-input", { key: 'ee9b290a3c97af6c264b37958c3a6123d516f391', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.value, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("div", { key: 'e348db67a88f9941c549cb190aaca88c93aac54c', class: "mg-c-input__with-character-left", style: {
|
|
3536
3536
|
'--mg-character-left-message-length': (this.displayCharacterLeft
|
|
3537
3537
|
? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
|
|
3538
3538
|
: 0).toString(),
|
|
3539
|
-
} }, this.icon !== undefined && index.h("mg-icon", { icon: this.icon }), index.h("input", { key: '
|
|
3539
|
+
} }, this.icon !== undefined && index.h("mg-icon", { key: 'dfe0ce7e271c40d4da20f00b35ad4fe104e08c91', icon: this.icon }), index.h("input", { key: '451af2cff19f47d9b9d3de824546324b6bfaf235', type: this.type, class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, list: this.hasDatalist() ? this.datalistId : undefined, autocomplete: this.hasDatalist() ? 'off' : undefined, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
3540
3540
|
if (el !== null)
|
|
3541
3541
|
this.input = el;
|
|
3542
|
-
} }), this.hasDatalist() && (index.h("datalist", { id: this.datalistId }, this.datalistoptions.map(option => (index.h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), index.h("slot", { key: '
|
|
3542
|
+
} }), this.hasDatalist() && (index.h("datalist", { key: '387530d84dd29575c5e8985ad40211e490bb04e4', id: this.datalistId }, this.datalistoptions.map(option => (index.h("option", { value: option, key: option }))))), this.displayCharacterLeft && this.maxlength > 0 && (index.h("mg-character-left", { key: 'e0278d4295d5c923f21f617bbf37ee09bd907b54', identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), index.h("slot", { key: '3d896e5ad21380c04c58fe925b8186e9f0a9207b', name: "append-input" })));
|
|
3543
3543
|
}
|
|
3544
3544
|
get element() { return index.getElement(this); }
|
|
3545
3545
|
static get watchers() { return {
|
|
@@ -3587,7 +3587,7 @@ const MgInputTextarea = class {
|
|
|
3587
3587
|
*/
|
|
3588
3588
|
this.handleFocus = () => {
|
|
3589
3589
|
this.classCollection.add(this.classFocus);
|
|
3590
|
-
this.classCollection = new index$1.
|
|
3590
|
+
this.classCollection = new index$1.Oe(this.classCollection.classes);
|
|
3591
3591
|
};
|
|
3592
3592
|
/**
|
|
3593
3593
|
* Handle blur event
|
|
@@ -3595,7 +3595,7 @@ const MgInputTextarea = class {
|
|
|
3595
3595
|
this.handleBlur = () => {
|
|
3596
3596
|
// Manage focus
|
|
3597
3597
|
this.classCollection.delete(this.classFocus);
|
|
3598
|
-
this.classCollection = new index$1.
|
|
3598
|
+
this.classCollection = new index$1.Oe(this.classCollection.classes);
|
|
3599
3599
|
// Display Error
|
|
3600
3600
|
this.handlerInProgress = Handler.BLUR;
|
|
3601
3601
|
this.displayError().finally(() => {
|
|
@@ -3658,7 +3658,7 @@ const MgInputTextarea = class {
|
|
|
3658
3658
|
this.valid = undefined;
|
|
3659
3659
|
this.invalid = undefined;
|
|
3660
3660
|
this.resizable = 'none';
|
|
3661
|
-
this.classCollection = new index$1.
|
|
3661
|
+
this.classCollection = new index$1.Oe(['mg-c-input--textarea']);
|
|
3662
3662
|
this.errorMessage = undefined;
|
|
3663
3663
|
}
|
|
3664
3664
|
handleValue(newValue) {
|
|
@@ -3697,7 +3697,7 @@ const MgInputTextarea = class {
|
|
|
3697
3697
|
this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
|
|
3698
3698
|
}
|
|
3699
3699
|
validatePattern(newValue) {
|
|
3700
|
-
if (newValue !== undefined && !(index$1.
|
|
3700
|
+
if (newValue !== undefined && !(index$1.Ne(this.pattern) && index$1.Ne(this.patternErrorMessage))) {
|
|
3701
3701
|
throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
|
|
3702
3702
|
}
|
|
3703
3703
|
}
|
|
@@ -3729,7 +3729,7 @@ const MgInputTextarea = class {
|
|
|
3729
3729
|
if (typeof valid !== 'boolean') {
|
|
3730
3730
|
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
|
|
3731
3731
|
}
|
|
3732
|
-
else if (!index$1.
|
|
3732
|
+
else if (!index$1.Ne(errorMessage)) {
|
|
3733
3733
|
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
|
|
3734
3734
|
}
|
|
3735
3735
|
else {
|
|
@@ -3780,7 +3780,7 @@ const MgInputTextarea = class {
|
|
|
3780
3780
|
* @returns HTML Element
|
|
3781
3781
|
*/
|
|
3782
3782
|
render() {
|
|
3783
|
-
return (index.h("mg-input", { key: '
|
|
3783
|
+
return (index.h("mg-input", { key: 'c4386e9b6efe517276d3cd55d213819ff90d7e20', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [this.characterLeftId], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.value, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, index.h("div", { key: '2d30db0ea21becffcdce57e46734e76877dc4858', class: "mg-c-input__with-character-left" }, index.h("textarea", { key: 'bc95d0db89014cafbb4e45893974e1ad09a41bf9', class: {
|
|
3784
3784
|
'mg-c-input__box': true,
|
|
3785
3785
|
'mg-c-input__box--width': true,
|
|
3786
3786
|
'mg-c-input__box--resizable': this.resizable === 'both',
|
|
@@ -3789,7 +3789,7 @@ const MgInputTextarea = class {
|
|
|
3789
3789
|
}, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
|
|
3790
3790
|
if (el !== null)
|
|
3791
3791
|
this.input = el;
|
|
3792
|
-
} }), this.displayCharacterLeft && this.maxlength > 0 && (index.h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
|
|
3792
|
+
} }), this.displayCharacterLeft && this.maxlength > 0 && (index.h("mg-character-left", { key: '522f8440ff28f9767c7273f56936cc994dfa17da', identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
|
|
3793
3793
|
}
|
|
3794
3794
|
get element() { return index.getElement(this); }
|
|
3795
3795
|
static get watchers() { return {
|
|
@@ -3818,7 +3818,7 @@ const MgInputTitle = class {
|
|
|
3818
3818
|
this.tagName = 'label';
|
|
3819
3819
|
}
|
|
3820
3820
|
validateIdentifier(newValue) {
|
|
3821
|
-
if (!index$1.
|
|
3821
|
+
if (!index$1.Ne(newValue)) {
|
|
3822
3822
|
throw new Error('<mg-input-title> prop "identifier" is required.');
|
|
3823
3823
|
}
|
|
3824
3824
|
}
|
|
@@ -3842,7 +3842,7 @@ const MgInputTitle = class {
|
|
|
3842
3842
|
render() {
|
|
3843
3843
|
const TagName = this.readonly ? 'span' : this.tagName;
|
|
3844
3844
|
// \u00A0 represent a
|
|
3845
|
-
return (index.h(TagName, { key: '
|
|
3845
|
+
return (index.h(TagName, { key: '217fcd80f25886c71c9ec8da6673e3ba5dbb78f7', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, index.h("slot", { key: '0efdaadd578a4a557e96f76ebfe1182af2ffdfac' }), this.required && !this.readonly && (index.h("span", { key: 'ebb62ba6769b0e6c8807d67aa0d4bcb80db76ac7', class: "mg-c-input-title__required" }, "\u00A0", index.h("span", { key: '9945e1bff4ec58e1c705a25cef538b2dab806fab', class: "mg-u-is-asterisk" }, "*")))));
|
|
3846
3846
|
}
|
|
3847
3847
|
static get watchers() { return {
|
|
3848
3848
|
"identifier": ["validateIdentifier"],
|
|
@@ -3932,7 +3932,7 @@ const MgInputToggle = class {
|
|
|
3932
3932
|
this.tooltip = undefined;
|
|
3933
3933
|
this.tooltipPosition = 'input';
|
|
3934
3934
|
this.helpText = undefined;
|
|
3935
|
-
this.classCollection = new index$1.
|
|
3935
|
+
this.classCollection = new index$1.Oe(['mg-c-input--toggle']);
|
|
3936
3936
|
this.options = undefined;
|
|
3937
3937
|
this.errorMessage = undefined;
|
|
3938
3938
|
this.valid = undefined;
|
|
@@ -3949,7 +3949,7 @@ const MgInputToggle = class {
|
|
|
3949
3949
|
throw new Error('<mg-input-toggle> prop "items" require 2 items.');
|
|
3950
3950
|
}
|
|
3951
3951
|
// String array
|
|
3952
|
-
else if (index$1.
|
|
3952
|
+
else if (index$1.Fe(newValue)) {
|
|
3953
3953
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
3954
3954
|
}
|
|
3955
3955
|
// Object array
|
|
@@ -4005,7 +4005,7 @@ const MgInputToggle = class {
|
|
|
4005
4005
|
if (typeof valid !== 'boolean') {
|
|
4006
4006
|
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
|
|
4007
4007
|
}
|
|
4008
|
-
else if (!index$1.
|
|
4008
|
+
else if (!index$1.Ne(errorMessage)) {
|
|
4009
4009
|
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
|
|
4010
4010
|
}
|
|
4011
4011
|
else {
|
|
@@ -4061,7 +4061,7 @@ const MgInputToggle = class {
|
|
|
4061
4061
|
*/
|
|
4062
4062
|
render() {
|
|
4063
4063
|
var _a;
|
|
4064
|
-
return (index.h("mg-input", { key: '
|
|
4064
|
+
return (index.h("mg-input", { key: '8d4b88c7a14660ee3cfc69c3fce7f35f41b8a199', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonlyValue: (_a = this.getCheckedItem(this.checked)) === null || _a === void 0 ? void 0 : _a.title, tooltip: !this.readonly && this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, index.h("button", { key: '9af8b4159d4159894b9c37867cd5581296c48295', type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, index.h("span", { key: '7b11e8151dc231718c81c73f7d99980eec4bb1ed', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { key: '7efaeced52095c79b2d61f9b3628ec2f605d747b', name: "item-1" })), index.h("span", { key: 'd2e3775fbae5c6c679125ac99c56dfde431ecdc2', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { key: 'edbb817680e42f7012f5b8d69e1c47626d97a161', name: "item-2" })))));
|
|
4065
4065
|
}
|
|
4066
4066
|
get element() { return index.getElement(this); }
|
|
4067
4067
|
static get watchers() { return {
|
|
@@ -4251,7 +4251,7 @@ const MgItemMore = class {
|
|
|
4251
4251
|
navElement.click();
|
|
4252
4252
|
});
|
|
4253
4253
|
// add id suffix to prevent duplicate key. default html id is: '';
|
|
4254
|
-
if (index$1.
|
|
4254
|
+
if (index$1.Ne(proxy.id))
|
|
4255
4255
|
proxy.id = `${proxy.id}-proxy`;
|
|
4256
4256
|
// update properties and DOM when proxyfied item is updated
|
|
4257
4257
|
proxified.addEventListener('item-updated', (event) => {
|
|
@@ -4330,10 +4330,10 @@ const MgItemMore = class {
|
|
|
4330
4330
|
* @returns HTML Element
|
|
4331
4331
|
*/
|
|
4332
4332
|
render() {
|
|
4333
|
-
return (index.h(index.Host, { key: '
|
|
4333
|
+
return (index.h(index.Host, { key: '18e3ecec55a7078662bdb04ba6325a4d44ff1c78', role: "listitem" }, this.parentMenu && (index.h("mg-menu-item", { key: 'e04f4b62b1ce70eeae25f959ef6aeca2e4a2690d', "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
|
|
4334
4334
|
if (el)
|
|
4335
4335
|
this.moreElementMenuItem = el;
|
|
4336
|
-
} }, index.h("mg-icon", { icon: this.icon.icon, slot: "image" }), index.h("span", { class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
|
|
4336
|
+
} }, index.h("mg-icon", { key: '8f20ef688479578ebee9eabb63644837e1d45113', icon: this.icon.icon, slot: "image" }), index.h("span", { key: '7a4f08410d1e85682a8c3e1935525c418a4141de', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: 'f67f53d289cf65883a3534f17fb2baaa91314a66', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
|
|
4337
4337
|
}
|
|
4338
4338
|
get element() { return index.getElement(this); }
|
|
4339
4339
|
static get watchers() { return {
|
|
@@ -4500,7 +4500,7 @@ const MgMenu = class {
|
|
|
4500
4500
|
* @returns HTML Element
|
|
4501
4501
|
*/
|
|
4502
4502
|
render() {
|
|
4503
|
-
return (index.h(index.Host, { key: '
|
|
4503
|
+
return (index.h(index.Host, { key: 'a5fe4a1a61b4255cc9a06217f30ef2f154fd797d', role: "list", "aria-label": this.label }, index.h("slot", { key: '37de5388d1cca3fa46dfbb73ab26ba6e299940b5' })));
|
|
4504
4504
|
}
|
|
4505
4505
|
get element() { return index.getElement(this); }
|
|
4506
4506
|
static get watchers() { return {
|
|
@@ -4578,7 +4578,7 @@ const MgMenuItem = class {
|
|
|
4578
4578
|
throw new Error(`<${this.name}> slot "label" is required.`);
|
|
4579
4579
|
['label', 'metadata'].forEach(slot => {
|
|
4580
4580
|
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
4581
|
-
if (!index$1.
|
|
4581
|
+
if (!index$1.Ne(element.textContent))
|
|
4582
4582
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
4583
4583
|
if ((guard && element.getAttribute('title') === null) || !guard)
|
|
4584
4584
|
element.setAttribute('title', element.textContent);
|
|
@@ -4647,13 +4647,13 @@ const MgMenuItem = class {
|
|
|
4647
4647
|
* @returns HTML Element
|
|
4648
4648
|
*/
|
|
4649
4649
|
this.renderSlot = () => index.h("slot", null);
|
|
4650
|
-
this.identifier = index$1.
|
|
4650
|
+
this.identifier = index$1.Me('mg-menu-item');
|
|
4651
4651
|
this.href = undefined;
|
|
4652
4652
|
this.target = undefined;
|
|
4653
4653
|
this.status = Status$1.VISIBLE;
|
|
4654
4654
|
this.expanded = false;
|
|
4655
4655
|
this.size = 'regular';
|
|
4656
|
-
this.navigationButtonClassList = new index$1.
|
|
4656
|
+
this.navigationButtonClassList = new index$1.Oe([this.navigationButton]);
|
|
4657
4657
|
this.direction = undefined;
|
|
4658
4658
|
this.isInMainMenu = undefined;
|
|
4659
4659
|
this.isItemMore = undefined;
|
|
@@ -4800,7 +4800,7 @@ const MgMenuItem = class {
|
|
|
4800
4800
|
* Emit event when component is updated
|
|
4801
4801
|
*/
|
|
4802
4802
|
componentShouldUpdate() {
|
|
4803
|
-
return index$1.
|
|
4803
|
+
return index$1.Ce(() => {
|
|
4804
4804
|
this.itemUpdated.emit();
|
|
4805
4805
|
});
|
|
4806
4806
|
}
|
|
@@ -4813,7 +4813,7 @@ const MgMenuItem = class {
|
|
|
4813
4813
|
['mg-c-menu-item__collapse-container']: true,
|
|
4814
4814
|
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
|
|
4815
4815
|
});
|
|
4816
|
-
return (index.h(index.Host, { key: '
|
|
4816
|
+
return (index.h(index.Host, { key: '10b41e1b90d01a0f0df082cd9fc50884e87c2e59', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (index.h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), index.h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
4817
4817
|
this.renderInteractiveElement(),
|
|
4818
4818
|
index.h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
4819
4819
|
])));
|
|
@@ -4906,13 +4906,13 @@ const MgMessage = class {
|
|
|
4906
4906
|
return 'exclamation-circle';
|
|
4907
4907
|
}
|
|
4908
4908
|
};
|
|
4909
|
-
this.identifier = index$1.
|
|
4909
|
+
this.identifier = index$1.Me('mg-message');
|
|
4910
4910
|
this.delay = undefined;
|
|
4911
4911
|
this.variant = variants$1[0];
|
|
4912
4912
|
this.closeButton = false;
|
|
4913
4913
|
this.hide = false;
|
|
4914
4914
|
this.noAriaRole = undefined;
|
|
4915
|
-
this.classCollection = new index$1.
|
|
4915
|
+
this.classCollection = new index$1.Oe(['mg-c-message']);
|
|
4916
4916
|
this.hasActions = false;
|
|
4917
4917
|
}
|
|
4918
4918
|
validateDelay(newValue) {
|
|
@@ -4991,7 +4991,7 @@ const MgMessage = class {
|
|
|
4991
4991
|
let role;
|
|
4992
4992
|
if (!this.noAriaRole)
|
|
4993
4993
|
role = this.variant === 'info' ? 'status' : 'alert';
|
|
4994
|
-
return (index.h("div", { key: '
|
|
4994
|
+
return (index.h("div", { key: 'a30da97a75717852677dc66ba0e9bc0a000c8c35', id: this.identifier, class: this.classCollection.join(), role: role }, index.h("mg-card", { key: '9cea0e509146e245a91290e76bc3908fcf3e3806', variant: this.variant, "variant-style": "bar-left" }, index.h("span", { key: '0beb527b84230d6cafed7ac1d2c9caa59ad1f80f', class: "mg-c-message__icon" }, index.h("mg-icon", { key: 'e0346db73f7c2c4595bb09e1be93039763106a5d', icon: this.getIcon() })), index.h("div", { key: '128567f70f2d664688cf012ab995a57eea2bca17', class: "mg-c-message__content" }, index.h("span", { key: '2b1cc03309002908b6c54b95c6ad58bdc966e787', class: "mg-c-message__content-slot" }, index.h("slot", { key: 'fd7b3e74c3bd2a70d2cbbef0a9519cdee38da5ce' })), this.hasActions && index.h("span", { key: 'adb6d3b819226a5e6173f077650be05c64e69f13', class: "mg-c-message__content-separator" }), this.hasActions && (index.h("span", { key: '136b8a00d7b0dbb14750d7637bce7d83d8cfd112', class: "mg-c-message__content-actions-slot" }, index.h("slot", { key: '926939a26ee3fa4e3b4625cdc4003dccc9d2e2e3', name: "actions" })))), this.closeButton && (index.h("span", { key: '770a2313622d50f5dc027d65b878e2955a134ca3', class: "mg-c-message__close-button" }, index.h("mg-button", { key: '094652edc8aa518cb3c0322025b5bf5c66b3fa33', identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, index.h("mg-icon", { key: '2b0ee538aec157e9507bf3c14026e71c422fc365', icon: "cross" })))))));
|
|
4995
4995
|
}
|
|
4996
4996
|
get element() { return index.getElement(this); }
|
|
4997
4997
|
static get watchers() { return {
|
|
@@ -5055,12 +5055,12 @@ const MgModal = class {
|
|
|
5055
5055
|
*/
|
|
5056
5056
|
this.setFocus = () => {
|
|
5057
5057
|
// Get all focusable elements
|
|
5058
|
-
const slottedFocusableElements = Array.from(this.element.querySelectorAll(index$1.
|
|
5058
|
+
const slottedFocusableElements = Array.from(this.element.querySelectorAll(index$1._e));
|
|
5059
5059
|
// If close button is enabled or at least one of the slotted element is focusable
|
|
5060
5060
|
if (this.closeButton || slottedFocusableElements.length > 0) {
|
|
5061
5061
|
// Check if slotted focusable elements have shadowDom with focusable elements
|
|
5062
5062
|
this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
|
|
5063
|
-
acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(index$1.
|
|
5063
|
+
acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(index$1._e) || focusableElement : focusableElement);
|
|
5064
5064
|
return acc;
|
|
5065
5065
|
}, []);
|
|
5066
5066
|
// When close button is enabled it's the first focusable element.
|
|
@@ -5082,21 +5082,21 @@ const MgModal = class {
|
|
|
5082
5082
|
this.handleClose = () => {
|
|
5083
5083
|
this.hide = true;
|
|
5084
5084
|
};
|
|
5085
|
-
this.identifier = index$1.
|
|
5085
|
+
this.identifier = index$1.Me('mg-modal');
|
|
5086
5086
|
this.dialogRole = dialogRoles[0];
|
|
5087
5087
|
this.modalTitle = undefined;
|
|
5088
5088
|
this.closeButton = false;
|
|
5089
5089
|
this.hide = undefined;
|
|
5090
5090
|
this.hasActions = false;
|
|
5091
5091
|
this.hasContent = false;
|
|
5092
|
-
this.classCollection = new index$1.
|
|
5092
|
+
this.classCollection = new index$1.Oe(['mg-c-modal']);
|
|
5093
5093
|
}
|
|
5094
5094
|
validateDialogRole(newValue) {
|
|
5095
5095
|
if (!dialogRoles.includes(newValue))
|
|
5096
5096
|
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
|
|
5097
5097
|
}
|
|
5098
5098
|
validateModalTitle(newValue) {
|
|
5099
|
-
if (!index$1.
|
|
5099
|
+
if (!index$1.Ne(newValue)) {
|
|
5100
5100
|
throw new Error('<mg-modal> prop "modalTitle" is required.');
|
|
5101
5101
|
}
|
|
5102
5102
|
}
|
|
@@ -5164,14 +5164,14 @@ const MgModal = class {
|
|
|
5164
5164
|
* @returns HTML Element
|
|
5165
5165
|
*/
|
|
5166
5166
|
render() {
|
|
5167
|
-
return (index.h("div", { key: '
|
|
5167
|
+
return (index.h("div", { key: '472cae1bd3a5291e14265d00ee594c726f179a1f', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, index.h("mg-card", { key: '870e59e1126988fefe5c04380b5bbd593e8629af' }, index.h("div", { key: '9d49127cf8bf68b55549f379b760c6597b1a2d6c', class: "mg-c-modal__dialog" }, index.h("header", { key: 'b8629ece3524f5dd64b248080fa06f21980ddf7b', class: "mg-c-modal__header" }, this.closeButton && (index.h("span", { key: 'f38d648290d1db901fb2cc09ae8b8ed13bf7e0b6', class: "mg-c-modal__close-button" }, index.h("mg-button", { key: 'b12aecfd77b5fb7588c3b2f6487c10c2cba9f097', identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
|
|
5168
5168
|
if (el !== null) {
|
|
5169
5169
|
// store closeButton Element
|
|
5170
5170
|
this.closeButtonElement = el;
|
|
5171
5171
|
// add close button element to modalFocusableElements when it is render
|
|
5172
5172
|
this.modalFocusableElements.unshift(this.closeButtonElement);
|
|
5173
5173
|
}
|
|
5174
|
-
} }, index.h("mg-icon", { icon: "cross" })))), index.h("h1", { key: '
|
|
5174
|
+
} }, index.h("mg-icon", { key: '2e5590b14d6b4da659f4f6d8630606a9bafdb9c6', icon: "cross" })))), index.h("h1", { key: '6ca12328af9955d0716c330c32004c68cca11b4c', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (index.h("article", { key: '0873f01de1bfe75c2e91ea89b762d433006e7878', class: "mg-c-modal__content" }, index.h("slot", { key: 'dd8fd2e6527d640c40261dcbae76846d107337dc', name: "content" }))), this.hasActions && (index.h("footer", { key: 'e97c6d3ad9bbca892afcabeb5b15e63425d05070', class: "mg-c-modal__footer" }, index.h("slot", { key: 'c865f0b4244f5ea4ed5e7733813a8b10bc985504', name: "actions" })))))));
|
|
5175
5175
|
}
|
|
5176
5176
|
get element() { return index.getElement(this); }
|
|
5177
5177
|
static get watchers() { return {
|
|
@@ -5243,7 +5243,7 @@ const MgPagination = class {
|
|
|
5243
5243
|
this.handleGoToPage = (action, disabled) => {
|
|
5244
5244
|
!disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
|
|
5245
5245
|
};
|
|
5246
|
-
this.identifier = index$1.
|
|
5246
|
+
this.identifier = index$1.Me('mg-pagination');
|
|
5247
5247
|
this.label = undefined;
|
|
5248
5248
|
this.hideNavigationLabels = undefined;
|
|
5249
5249
|
this.hidePageCount = undefined;
|
|
@@ -5286,10 +5286,10 @@ const MgPagination = class {
|
|
|
5286
5286
|
* @returns HTML Element
|
|
5287
5287
|
*/
|
|
5288
5288
|
render() {
|
|
5289
|
-
const navigationActionButton = (disabled, action) => (index.h("mg-button", { key: '
|
|
5289
|
+
const navigationActionButton = (disabled, action) => (index.h("mg-button", { key: 'b708c70615e0fb49d1628dc6cf83e54ea5ab0a61', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
|
|
5290
5290
|
// eslint-disable-next-line react/jsx-no-bind
|
|
5291
|
-
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && index.h("mg-icon", { icon: "chevron-right" })));
|
|
5292
|
-
return (index.h(index.Host, { key: '
|
|
5291
|
+
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && index.h("mg-icon", { key: '1c8375c68fd7729fb7ea91220ffb4f7267ac3a47', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && index.h("mg-icon", { key: '1af0c20c2d5ce86e593b2eca82dee410a782c193', icon: "chevron-right" })));
|
|
5292
|
+
return (index.h(index.Host, { key: '4490a0b9d3c0ac55519d052b4d76ab8f682f0f3a', hidden: this.totalPages < 2 }, index.h("nav", { key: 'eaf362cd327e88290f3af5dcfd1d46fff6178ff9', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (index.h("mg-input-select", { key: '06c9786c833302a4ee88ed7f2217875112ee7a20', identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), index.h("span", { key: '7877dbee55a509b13c8cf881154d96bbe1c5cee7', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), index.h("span", { key: 'd4615625b40108526f7aaa8f8a8505b2a61e43e9', class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
|
|
5293
5293
|
}
|
|
5294
5294
|
get element() { return index.getElement(this); }
|
|
5295
5295
|
static get watchers() { return {
|
|
@@ -5408,7 +5408,7 @@ const MgPanel = class {
|
|
|
5408
5408
|
];
|
|
5409
5409
|
return this.titlePosition === 'right' ? children.reverse() : children;
|
|
5410
5410
|
};
|
|
5411
|
-
this.identifier = index$1.
|
|
5411
|
+
this.identifier = index$1.Me('mg-panel');
|
|
5412
5412
|
this.panelTitle = undefined;
|
|
5413
5413
|
this.titlePattern = undefined;
|
|
5414
5414
|
this.titlePatternErrorMessage = undefined;
|
|
@@ -5417,12 +5417,12 @@ const MgPanel = class {
|
|
|
5417
5417
|
this.expanded = false;
|
|
5418
5418
|
this.expandToggleDisplay = expandToggleDisplays[0];
|
|
5419
5419
|
this.expandToggleDisabled = undefined;
|
|
5420
|
-
this.classCollection = new index$1.
|
|
5420
|
+
this.classCollection = new index$1.Oe(['mg-c-panel']);
|
|
5421
5421
|
this.isEditing = false;
|
|
5422
5422
|
this.updatedPanelTitle = undefined;
|
|
5423
5423
|
}
|
|
5424
5424
|
validatePanelTitle(newValue) {
|
|
5425
|
-
if (!index$1.
|
|
5425
|
+
if (!index$1.Ne(newValue))
|
|
5426
5426
|
throw new Error('<mg-panel> prop "panelTitle" is required.');
|
|
5427
5427
|
this.titleChange.emit(newValue);
|
|
5428
5428
|
}
|
|
@@ -5473,7 +5473,7 @@ const MgPanel = class {
|
|
|
5473
5473
|
*/
|
|
5474
5474
|
render() {
|
|
5475
5475
|
const headerId = `${this.identifier}-header`;
|
|
5476
|
-
return (index.h("section", { key: '
|
|
5476
|
+
return (index.h("section", { key: 'd01136210425cb7790aab87d6c137ba74fc02af5', class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", { key: '84084da775de623fd20c069de5e49d2542755907' }, index.h("header", { key: '9f3ef1d0d7b2dc275d0c7b39175e0f775cbb1e1b', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), index.h("article", { key: '4b6cd2b1b604515d657368642fe21b21eb33b55b', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, index.h("slot", { key: '45db8591e0b85ed5e9704dc1a42fa75d24e96e39' })))));
|
|
5477
5477
|
}
|
|
5478
5478
|
get element() { return index.getElement(this); }
|
|
5479
5479
|
static get watchers() { return {
|
|
@@ -7373,7 +7373,7 @@ const MgPopover = class {
|
|
|
7373
7373
|
mgPopoverContent.setAttribute('id', this.identifier);
|
|
7374
7374
|
}
|
|
7375
7375
|
};
|
|
7376
|
-
this.identifier = index$1.
|
|
7376
|
+
this.identifier = index$1.Me('mg-popover');
|
|
7377
7377
|
this.placement = 'bottom';
|
|
7378
7378
|
this.arrowHide = false;
|
|
7379
7379
|
this.closeButton = false;
|
|
@@ -7416,7 +7416,7 @@ const MgPopover = class {
|
|
|
7416
7416
|
*/
|
|
7417
7417
|
componentWillLoad() {
|
|
7418
7418
|
// Get windows to attach events
|
|
7419
|
-
this.windows = index$1.
|
|
7419
|
+
this.windows = index$1.Be(window);
|
|
7420
7420
|
// render mg-popover-content slot
|
|
7421
7421
|
this.renderPopoverContent();
|
|
7422
7422
|
this.validateCloseButton(this.closeButton);
|
|
@@ -7478,7 +7478,7 @@ const MgPopover = class {
|
|
|
7478
7478
|
* @returns HTML Element
|
|
7479
7479
|
*/
|
|
7480
7480
|
render() {
|
|
7481
|
-
return (index.h(index.Host, { key: '
|
|
7481
|
+
return (index.h(index.Host, { key: '788fd2a8f759f8ae9188b05395cbfc33b5b06c69' }, index.h("slot", { key: '9109948237f93d375e6d1b234274f8283c0260d3' }), index.h("slot", { key: 'e76a1093edab91746a4d3302d7976129ed7c6042', name: "content" })));
|
|
7482
7482
|
}
|
|
7483
7483
|
get element() { return index.getElement(this); }
|
|
7484
7484
|
static get watchers() { return {
|
|
@@ -7504,7 +7504,7 @@ const MgPopoverContent = class {
|
|
|
7504
7504
|
this.hideContent.emit();
|
|
7505
7505
|
};
|
|
7506
7506
|
this.closeButton = false;
|
|
7507
|
-
this.classCollection = new index$1.
|
|
7507
|
+
this.classCollection = new index$1.Oe(['mg-c-popover-content']);
|
|
7508
7508
|
}
|
|
7509
7509
|
/*************
|
|
7510
7510
|
* Lifecycle *
|
|
@@ -7522,7 +7522,7 @@ const MgPopoverContent = class {
|
|
|
7522
7522
|
componentDidLoad() {
|
|
7523
7523
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
7524
7524
|
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
7525
|
-
if (slottedTitleElement && !index$1.
|
|
7525
|
+
if (slottedTitleElement && !index$1.De(slottedTitleElement, headingTags)) {
|
|
7526
7526
|
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
|
|
7527
7527
|
}
|
|
7528
7528
|
}
|
|
@@ -7531,7 +7531,7 @@ const MgPopoverContent = class {
|
|
|
7531
7531
|
* @returns HTML Element
|
|
7532
7532
|
*/
|
|
7533
7533
|
render() {
|
|
7534
|
-
return (index.h(index.Host, { key: '
|
|
7534
|
+
return (index.h(index.Host, { key: 'ffe73fca1c2d8ffa0f5ac2359b50a453b37df7be' }, index.h("mg-card", { key: 'f6e04d90892104abf496cf3ca3a601cb747346c9', class: this.classCollection.join() }, this.closeButton && (index.h("mg-button", { key: '53b6f7360b07321c0433fb2f44f1b1dd9016f204', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { key: 'aa638786bca9af815d36e1de905559d60e68e44c', icon: "cross" }))), index.h("div", { key: '0b9f1319e409a0b1d75d16236806fd024c8b804e', class: "mg-c-popover-content__title" }, index.h("slot", { key: '7f52704d2ed49ea048ffd06b763a238d288ccaf3', name: "title" })), index.h("slot", { key: '7a2fd6b013e592acb616793439b2f4e8458ec372', name: "content" })), index.h("slot", { key: 'ceb0a6453ece1b861fe5ab3d63e803b1f41cb148', name: "arrow" })));
|
|
7535
7535
|
}
|
|
7536
7536
|
get element() { return index.getElement(this); }
|
|
7537
7537
|
};
|
|
@@ -7558,7 +7558,7 @@ const MgSkipLinks = class {
|
|
|
7558
7558
|
this.links = undefined;
|
|
7559
7559
|
}
|
|
7560
7560
|
validateLinks(links) {
|
|
7561
|
-
if (links === undefined || links.length === 0 || links.some(link => !index$1.
|
|
7561
|
+
if (links === undefined || links.length === 0 || links.some(link => !index$1.Ne(link.href) || !link.href.startsWith('#') || !index$1.Ne(link.label))) {
|
|
7562
7562
|
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.`);
|
|
7563
7563
|
}
|
|
7564
7564
|
}
|
|
@@ -7577,7 +7577,7 @@ const MgSkipLinks = class {
|
|
|
7577
7577
|
* @returns HTML Element
|
|
7578
7578
|
*/
|
|
7579
7579
|
render() {
|
|
7580
|
-
return (index.h("nav", { key: '
|
|
7580
|
+
return (index.h("nav", { key: '2dac1b6dab0eb2634b803240325822ea3c8bae63', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: 'e050de2426d080ede6a2b983ec0f9452b0e0f43b', 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)))))));
|
|
7581
7581
|
}
|
|
7582
7582
|
get element() { return index.getElement(this); }
|
|
7583
7583
|
static get watchers() { return {
|
|
@@ -7710,7 +7710,7 @@ const MgTabs = class {
|
|
|
7710
7710
|
*/
|
|
7711
7711
|
this.resetFocus = () => {
|
|
7712
7712
|
// update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
|
|
7713
|
-
index$1.
|
|
7713
|
+
index$1.Ce(() => {
|
|
7714
7714
|
this.tabFocus = undefined;
|
|
7715
7715
|
Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
|
|
7716
7716
|
tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
|
|
@@ -7725,16 +7725,16 @@ const MgTabs = class {
|
|
|
7725
7725
|
if (slots.length !== this.tabs.length)
|
|
7726
7726
|
throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
|
|
7727
7727
|
};
|
|
7728
|
-
this.identifier = index$1.
|
|
7728
|
+
this.identifier = index$1.Me('mg-tabs');
|
|
7729
7729
|
this.label = undefined;
|
|
7730
7730
|
this.size = 'regular';
|
|
7731
7731
|
this.items = undefined;
|
|
7732
7732
|
this.activeTab = undefined;
|
|
7733
7733
|
this.tabs = [];
|
|
7734
|
-
this.classCollection = new index$1.
|
|
7734
|
+
this.classCollection = new index$1.Oe(['mg-c-tabs']);
|
|
7735
7735
|
}
|
|
7736
7736
|
validateLabel(newValue) {
|
|
7737
|
-
if (!index$1.
|
|
7737
|
+
if (!index$1.Ne(newValue)) {
|
|
7738
7738
|
throw new Error('<mg-tabs> prop "label" is required.');
|
|
7739
7739
|
}
|
|
7740
7740
|
}
|
|
@@ -7746,7 +7746,7 @@ const MgTabs = class {
|
|
|
7746
7746
|
}
|
|
7747
7747
|
validateItems(newValue) {
|
|
7748
7748
|
// String array
|
|
7749
|
-
if (index$1.
|
|
7749
|
+
if (index$1.Fe(newValue))
|
|
7750
7750
|
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
7751
7751
|
// Object array
|
|
7752
7752
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
@@ -7808,7 +7808,7 @@ const MgTabs = class {
|
|
|
7808
7808
|
* @returns HTML Element
|
|
7809
7809
|
*/
|
|
7810
7810
|
render() {
|
|
7811
|
-
return (index.h("div", { key: '
|
|
7811
|
+
return (index.h("div", { key: '9327c6fb0d13d41d82b50e2f4f79696916ef142f', class: this.classCollection.join() }, index.h("header", { key: 'b783c343af1e817a2ab231d803e8ecf32df52566', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index$1), class: {
|
|
7812
7812
|
[`${this.buttonTabBaseClass}`]: true,
|
|
7813
7813
|
[`${this.buttonTabBaseClass}--horizontal`]: true,
|
|
7814
7814
|
[`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
|
|
@@ -7846,7 +7846,7 @@ const MgTag = class {
|
|
|
7846
7846
|
this.variant = variants[0];
|
|
7847
7847
|
this.outline = undefined;
|
|
7848
7848
|
this.soft = undefined;
|
|
7849
|
-
this.classCollection = new index$1.
|
|
7849
|
+
this.classCollection = new index$1.Oe(['mg-c-tag']);
|
|
7850
7850
|
}
|
|
7851
7851
|
validateVariant(newValue, oldValue) {
|
|
7852
7852
|
if (!variants.includes(newValue)) {
|
|
@@ -7883,7 +7883,7 @@ const MgTag = class {
|
|
|
7883
7883
|
* @param textContent - html element textContent property
|
|
7884
7884
|
*/
|
|
7885
7885
|
validateTextContent(textContent) {
|
|
7886
|
-
if (!index$1.
|
|
7886
|
+
if (!index$1.Ne(textContent))
|
|
7887
7887
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
7888
7888
|
}
|
|
7889
7889
|
/*************
|
|
@@ -7903,7 +7903,7 @@ const MgTag = class {
|
|
|
7903
7903
|
* @returns HTML Element
|
|
7904
7904
|
*/
|
|
7905
7905
|
render() {
|
|
7906
|
-
return (index.h("span", { key: '
|
|
7906
|
+
return (index.h("span", { key: '0746ab46695d72da229ea6b899c5ec9d4d09b0f0', class: this.classCollection.join() }, index.h("slot", { key: 'c1b246aaf9b5b199726c856b7e6a67be54e55b7c' })));
|
|
7907
7907
|
}
|
|
7908
7908
|
get element() { return index.getElement(this); }
|
|
7909
7909
|
static get watchers() { return {
|
|
@@ -7943,7 +7943,7 @@ const MgTooltip = class {
|
|
|
7943
7943
|
// Enable the event listeners
|
|
7944
7944
|
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
7945
7945
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
7946
|
-
index$1.
|
|
7946
|
+
index$1.Ce(() => {
|
|
7947
7947
|
this.windows.forEach((localWindow) => {
|
|
7948
7948
|
localWindow.addEventListener('click', this.clickOutside, false);
|
|
7949
7949
|
localWindow.addEventListener('keydown', this.pressEscape, false);
|
|
@@ -8114,7 +8114,7 @@ const MgTooltip = class {
|
|
|
8114
8114
|
});
|
|
8115
8115
|
});
|
|
8116
8116
|
};
|
|
8117
|
-
this.identifier = index$1.
|
|
8117
|
+
this.identifier = index$1.Me('mg-tooltip');
|
|
8118
8118
|
this.message = undefined;
|
|
8119
8119
|
this.placement = 'bottom';
|
|
8120
8120
|
this.display = false;
|
|
@@ -8125,7 +8125,7 @@ const MgTooltip = class {
|
|
|
8125
8125
|
this.renderTooltipContent();
|
|
8126
8126
|
}
|
|
8127
8127
|
validateMessage(newValue) {
|
|
8128
|
-
if (!index$1.
|
|
8128
|
+
if (!index$1.Ne(newValue)) {
|
|
8129
8129
|
throw new Error('<mg-tooltip> prop "message" is required.');
|
|
8130
8130
|
}
|
|
8131
8131
|
this.mgTooltipContent.message = newValue;
|
|
@@ -8174,7 +8174,7 @@ const MgTooltip = class {
|
|
|
8174
8174
|
*/
|
|
8175
8175
|
componentWillLoad() {
|
|
8176
8176
|
// Get windows to attach events
|
|
8177
|
-
this.windows = index$1.
|
|
8177
|
+
this.windows = index$1.Be(window);
|
|
8178
8178
|
// Get tooltip element
|
|
8179
8179
|
this.renderTooltipContent();
|
|
8180
8180
|
this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
|
|
@@ -8193,7 +8193,7 @@ const MgTooltip = class {
|
|
|
8193
8193
|
// get slotted element wich is not the tooltip
|
|
8194
8194
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
8195
8195
|
// Get interactive element
|
|
8196
|
-
const interactiveElement = slotElement.matches(index$1.
|
|
8196
|
+
const interactiveElement = slotElement.matches(index$1._e) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1._e);
|
|
8197
8197
|
// define selected element to become tooltip selector
|
|
8198
8198
|
this.tooltipedElement = interactiveElement || slotElement;
|
|
8199
8199
|
// Check if slotted element is a disabled mg-button
|
|
@@ -8225,7 +8225,7 @@ const MgTooltip = class {
|
|
|
8225
8225
|
* @returns HTML Element
|
|
8226
8226
|
*/
|
|
8227
8227
|
render() {
|
|
8228
|
-
return (index.h(index.Host, { key: '
|
|
8228
|
+
return (index.h(index.Host, { key: 'bc92b38b5934945abf8657aeb56804c81274a11e' }, index.h("slot", { key: '5fca70b68f35c72c92252106d4b26766e2f671bb' }), index.h("slot", { key: '4426a5f6f55f549791ff22cc7220d728d2cca04f', name: "content" })));
|
|
8229
8229
|
}
|
|
8230
8230
|
get element() { return index.getElement(this); }
|
|
8231
8231
|
static get watchers() { return {
|
|
@@ -8253,7 +8253,7 @@ const MgTooltipContent = class {
|
|
|
8253
8253
|
* @returns HTML Element
|
|
8254
8254
|
*/
|
|
8255
8255
|
render() {
|
|
8256
|
-
return (index.h(index.Host, { key: '
|
|
8256
|
+
return (index.h(index.Host, { key: '749056e11074a73ef0bbe1aab102c334f0de8fed', role: "tooltip" }, index.h("span", { key: 'e7db4c4ab009e7ebd9908c86d151216919c59e9a', innerHTML: this.message, class: "mg-tooltip-content__message" }), index.h("slot", { key: 'f260fbe909763b8e221acd4178df0880f650a3a5', name: "arrow" })));
|
|
8257
8257
|
}
|
|
8258
8258
|
};
|
|
8259
8259
|
MgTooltipContent.style = MgTooltipContentStyle0;
|