@mgdis/mg-components 5.22.0 → 5.23.1
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-28bf9033.js → index-0cf3e6d5.js} +22 -13
- package/dist/cjs/index-0cf3e6d5.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mg-action-more_34.cjs.entry.js +238 -169
- package/dist/cjs/mg-action-more_34.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-components.cjs.js +3 -3
- package/dist/cjs/mg-components.cjs.js.map +1 -1
- package/dist/cjs/mg-item-more.cjs.entry.js +7 -6
- package/dist/cjs/mg-item-more.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-menu.conf-0229bb75.js +333 -0
- package/dist/cjs/mg-menu.conf-0229bb75.js.map +1 -0
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +1 -1
- package/dist/collection/components/atoms/mg-badge/mg-badge.js.map +1 -1
- 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.map +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.js.map +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-tag/mg-tag.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js.map +1 -1
- package/dist/collection/components/molecules/inputs/MgInput.js +1 -1
- package/dist/collection/components/molecules/inputs/MgInput.js.map +1 -1
- 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 +10 -7
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +84 -49
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +43 -38
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +1 -1
- 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/inputs/mg-input-toggle/mg-input-toggle.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +1 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js.map +1 -1
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +1 -1
- 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-details/mg-details.js.map +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 +1 -1
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js.map +1 -1
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +1 -1
- package/dist/collection/components/molecules/mg-item-more/mg-item-more.js.map +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 +6 -5
- package/dist/collection/components/molecules/mg-modal/mg-modal.js.map +1 -1
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +1 -1
- 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-panel/mg-panel.js.map +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-popover/mg-popover.js.map +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js.map +1 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +1 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js.map +1 -1
- package/dist/collection/locales/en/messages.json +9 -1
- package/dist/collection/locales/fr/messages.json +9 -1
- package/dist/collection/locales/index.js +2 -2
- package/dist/collection/locales/index.js.map +1 -1
- package/dist/collection/styles/fonts.css +1 -0
- package/dist/collection/styles/global.css +1 -0
- package/dist/collection/styles/main.css +1 -0
- package/dist/collection/styles/mg-components-utils.css +1 -0
- package/dist/collection/styles/variables.css +1 -0
- package/dist/collection/utils/behaviors.utils.js.map +1 -1
- package/dist/collection/utils/behaviors.utils.spec.js +1 -1
- package/dist/collection/utils/behaviors.utils.spec.js.map +1 -1
- package/dist/collection/utils/unit.test.utils.js +0 -104
- package/dist/collection/utils/unit.test.utils.js.map +1 -1
- package/dist/components/MgInput.js +3 -3
- package/dist/components/MgInput.js.map +1 -1
- package/dist/components/index.es.js +75 -0
- package/dist/components/index.es.js.map +1 -0
- package/dist/components/index2.js +22 -61
- package/dist/components/index2.js.map +1 -1
- package/dist/components/mg-action-more.js +5 -4
- package/dist/components/mg-action-more.js.map +1 -1
- package/dist/components/mg-badge2.js +5 -4
- package/dist/components/mg-badge2.js.map +1 -1
- package/dist/components/mg-button2.js +6 -5
- package/dist/components/mg-button2.js.map +1 -1
- package/dist/components/mg-card2.js +4 -3
- package/dist/components/mg-card2.js.map +1 -1
- package/dist/components/mg-character-left2.js +2 -1
- package/dist/components/mg-character-left2.js.map +1 -1
- package/dist/components/mg-details.js +4 -3
- package/dist/components/mg-details.js.map +1 -1
- package/dist/components/mg-divider.js +2 -1
- package/dist/components/mg-divider.js.map +1 -1
- package/dist/components/mg-form.js +5 -4
- package/dist/components/mg-form.js.map +1 -1
- package/dist/components/mg-icon2.js +4 -3
- package/dist/components/mg-icon2.js.map +1 -1
- package/dist/components/mg-illustrated-message.js +4 -3
- package/dist/components/mg-illustrated-message.js.map +1 -1
- package/dist/components/mg-input-checkbox.js +16 -12
- package/dist/components/mg-input-checkbox.js.map +1 -1
- package/dist/components/mg-input-date.js +55 -24
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +15 -10
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +5 -4
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-radio.js +6 -5
- package/dist/components/mg-input-radio.js.map +1 -1
- package/dist/components/mg-input-select2.js +8 -7
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text2.js +8 -7
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +8 -7
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-input-title2.js +4 -3
- package/dist/components/mg-input-title2.js.map +1 -1
- package/dist/components/mg-input-toggle.js +6 -5
- package/dist/components/mg-input-toggle.js.map +1 -1
- package/dist/components/mg-item-more.js +4 -3
- package/dist/components/mg-item-more.js.map +1 -1
- package/dist/components/mg-menu-item2.js +6 -5
- package/dist/components/mg-menu-item2.js.map +1 -1
- package/dist/components/mg-menu2.js +2 -1
- package/dist/components/mg-menu2.js.map +1 -1
- package/dist/components/mg-message.js +5 -4
- package/dist/components/mg-message.js.map +1 -1
- package/dist/components/mg-modal.js +12 -10
- package/dist/components/mg-modal.js.map +1 -1
- package/dist/components/mg-pagination2.js +4 -3
- package/dist/components/mg-pagination2.js.map +1 -1
- package/dist/components/mg-panel.js +6 -5
- package/dist/components/mg-panel.js.map +1 -1
- package/dist/components/mg-popover-content2.js +5 -4
- package/dist/components/mg-popover-content2.js.map +1 -1
- package/dist/components/mg-popover2.js +5 -4
- package/dist/components/mg-popover2.js.map +1 -1
- package/dist/components/mg-skip-links.js +4 -3
- package/dist/components/mg-skip-links.js.map +1 -1
- package/dist/components/mg-tabs.js +8 -7
- package/dist/components/mg-tabs.js.map +1 -1
- package/dist/components/mg-tag.js +5 -4
- package/dist/components/mg-tag.js.map +1 -1
- package/dist/components/mg-tooltip-content2.js +2 -1
- package/dist/components/mg-tooltip-content2.js.map +1 -1
- package/dist/components/mg-tooltip2.js +8 -7
- package/dist/components/mg-tooltip2.js.map +1 -1
- package/dist/esm/{index-93dafb06.js → index-91977c3d.js} +22 -13
- package/dist/esm/index-91977c3d.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mg-action-more_34.entry.js +206 -137
- package/dist/esm/mg-action-more_34.entry.js.map +1 -1
- package/dist/esm/mg-components.js +4 -4
- package/dist/esm/mg-components.js.map +1 -1
- package/dist/esm/mg-item-more.entry.js +5 -4
- package/dist/esm/mg-item-more.entry.js.map +1 -1
- package/dist/esm/mg-menu.conf-4b2d2eab.js +315 -0
- package/dist/esm/mg-menu.conf-4b2d2eab.js.map +1 -0
- package/dist/mg-components/locales/en/messages.json +9 -1
- package/dist/mg-components/locales/fr/messages.json +9 -1
- 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-1564df7a.js +2 -0
- package/dist/mg-components/p-1564df7a.js.map +1 -0
- package/dist/mg-components/p-49e1ffcb.js +3 -0
- package/dist/mg-components/p-49e1ffcb.js.map +1 -0
- package/dist/mg-components/p-6c68c7eb.entry.js +2 -0
- package/dist/mg-components/p-6c68c7eb.entry.js.map +1 -0
- package/dist/mg-components/p-896da866.entry.js +2 -0
- package/dist/mg-components/p-896da866.entry.js.map +1 -0
- package/dist/mg-components/styles/fonts.css +1 -0
- package/dist/mg-components/styles/global.css +1 -0
- package/dist/mg-components/styles/main.css +1 -0
- package/dist/mg-components/styles/mg-components-utils.css +1 -0
- package/dist/mg-components/styles/variables.css +1 -0
- package/dist/types/components/atoms/mg-badge/mg-badge.d.ts +1 -1
- package/dist/types/components/atoms/mg-button/mg-button.d.ts +1 -1
- package/dist/types/components/atoms/mg-card/mg-card.d.ts +1 -1
- package/dist/types/components/atoms/mg-icon/mg-icon.d.ts +1 -1
- package/dist/types/components/atoms/mg-tag/mg-tag.d.ts +1 -1
- package/dist/types/components/molecules/inputs/MgInput.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +29 -12
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +9 -9
- package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +1 -1
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +1 -1
- package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +1 -1
- package/dist/types/components/molecules/mg-form/mg-form.d.ts +1 -1
- package/dist/types/components/molecules/mg-message/mg-message.d.ts +1 -1
- package/dist/types/components/molecules/mg-modal/mg-modal.d.ts +1 -1
- package/dist/types/components/molecules/mg-panel/mg-panel.d.ts +1 -1
- package/dist/types/components/molecules/mg-popover/mg-popover-content/mg-popover-content.d.ts +1 -1
- package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts +1 -1
- package/dist/types/components.d.ts +2 -2
- package/dist/types/locales/index.d.ts +1 -180
- package/dist/types/utils/unit.test.utils.d.ts +0 -82
- package/package.json +38 -35
- package/dist/cjs/components.utils-637c479d.js +0 -447
- package/dist/cjs/components.utils-637c479d.js.map +0 -1
- package/dist/cjs/index-28bf9033.js.map +0 -1
- package/dist/collection/utils/components.utils.js +0 -147
- package/dist/collection/utils/components.utils.js.map +0 -1
- package/dist/collection/utils/components.utils.spec.js +0 -156
- package/dist/collection/utils/components.utils.spec.js.map +0 -1
- package/dist/collection/utils/e2e.test.utils.js +0 -46
- package/dist/collection/utils/e2e.test.utils.js.map +0 -1
- package/dist/collection/utils/locale.utils.js +0 -57
- package/dist/collection/utils/locale.utils.js.map +0 -1
- package/dist/collection/utils/locale.utils.spec.js +0 -52
- package/dist/collection/utils/locale.utils.spec.js.map +0 -1
- package/dist/components/components.utils.js +0 -150
- package/dist/components/components.utils.js.map +0 -1
- package/dist/esm/components.utils-f7c073a0.js +0 -431
- package/dist/esm/components.utils-f7c073a0.js.map +0 -1
- package/dist/esm/index-93dafb06.js.map +0 -1
- package/dist/mg-components/p-457dd62a.entry.js +0 -2
- package/dist/mg-components/p-457dd62a.entry.js.map +0 -1
- package/dist/mg-components/p-4fa40a8f.entry.js +0 -2
- package/dist/mg-components/p-4fa40a8f.entry.js.map +0 -1
- package/dist/mg-components/p-721c4571.js +0 -2
- package/dist/mg-components/p-721c4571.js.map +0 -1
- package/dist/mg-components/p-8155d0e2.js +0 -3
- package/dist/mg-components/p-8155d0e2.js.map +0 -1
- package/dist/types/utils/components.utils.d.ts +0 -87
- package/dist/types/utils/e2e.test.utils.d.ts +0 -22
- package/dist/types/utils/locale.utils.d.ts +0 -38
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
6
|
-
const
|
|
5
|
+
const index = require('./index-0cf3e6d5.js');
|
|
6
|
+
const mgMenu_conf = require('./mg-menu.conf-0229bb75.js');
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Available menu-item positions
|
|
@@ -25,6 +25,7 @@ var Status$1;
|
|
|
25
25
|
})(Status$1 || (Status$1 = {}));
|
|
26
26
|
|
|
27
27
|
const mgActionMoreCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{--mg-popover-padding-vertical:1rem;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}.mg-c-action-more__chevron{transition:200ms}.mg-c-action-more__chevron--rotate.mg-c-action-more__chevron{transform:rotate(180deg)}";
|
|
28
|
+
const MgActionMoreStyle0 = mgActionMoreCss;
|
|
28
29
|
|
|
29
30
|
/**
|
|
30
31
|
* MgActionMore['items'] type guard
|
|
@@ -61,7 +62,7 @@ const MgActionMore = class {
|
|
|
61
62
|
************/
|
|
62
63
|
this.name = 'mg-action-more';
|
|
63
64
|
this.classBase = 'mg-c-action-more';
|
|
64
|
-
this.mgPopoverIdentifier =
|
|
65
|
+
this.mgPopoverIdentifier = mgMenu_conf.je(this.name);
|
|
65
66
|
/************
|
|
66
67
|
* Methods *
|
|
67
68
|
***********/
|
|
@@ -129,7 +130,7 @@ const MgActionMore = class {
|
|
|
129
130
|
* Validate props
|
|
130
131
|
*/
|
|
131
132
|
componentWillLoad() {
|
|
132
|
-
this.messages =
|
|
133
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages.actionMore;
|
|
133
134
|
this.validateItems(this.items);
|
|
134
135
|
this.validateButton(this.button);
|
|
135
136
|
this.validateIcon(this.icon);
|
|
@@ -148,7 +149,7 @@ const MgActionMore = class {
|
|
|
148
149
|
[`${this.classBase}__chevron--rotate`]: this.expanded === true,
|
|
149
150
|
} }, index.h("mg-icon", { icon: "chevron-down", size: "small" })));
|
|
150
151
|
}
|
|
151
|
-
return (index.h(index.Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { class: "mg-action-more" }, index.h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, index.h("mg-button", { 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({}, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { slot: "content" }, index.h("mg-menu", { direction:
|
|
152
|
+
return (index.h(index.Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, index.h("span", { class: "mg-action-more" }, index.h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, index.h("mg-button", { 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({}, this.icon)), !this.button.isIcon && buttonContent), index.h("div", { slot: "content" }, index.h("mg-menu", { direction: mgMenu_conf.Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
|
|
152
153
|
var _a;
|
|
153
154
|
return (
|
|
154
155
|
// eslint-disable-next-line react/jsx-no-bind
|
|
@@ -163,7 +164,7 @@ const MgActionMore = class {
|
|
|
163
164
|
"displayChevron": ["validateDisplayChevron"]
|
|
164
165
|
}; }
|
|
165
166
|
};
|
|
166
|
-
MgActionMore.style =
|
|
167
|
+
MgActionMore.style = MgActionMoreStyle0;
|
|
167
168
|
|
|
168
169
|
/**
|
|
169
170
|
* List of all possibles variants
|
|
@@ -171,6 +172,7 @@ MgActionMore.style = mgActionMoreCss;
|
|
|
171
172
|
const variants$5 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
|
|
172
173
|
|
|
173
174
|
const mgBadgeCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-badge{min-width:var(--mg-badge-size);height:var(--mg-badge-size);box-sizing:border-box;padding:0 .4rem;border:.1rem solid;border-radius:calc(var(--mg-badge-size)/2);font-size:var(--mg-badge-font-size);font-weight:600;line-height:var(--mg-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:hsl(var(--color-dark));background-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary{border-color:hsl(var(--color-light));background-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--success{border-color:hsl(var(--color-success));background-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-success))}.mg-c-badge.mg-c-badge--warning{border-color:hsl(var(--color-warning));background-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-warning))}.mg-c-badge.mg-c-badge--danger{border-color:hsl(var(--color-danger));background-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-danger))}.mg-c-badge.mg-c-badge--info{border-color:hsl(var(--color-info));background-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-info))}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:hsl(var(--mg-badge-text-color, var(--color-light)))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
|
|
175
|
+
const MgBadgeStyle0 = mgBadgeCss;
|
|
174
176
|
|
|
175
177
|
const MgBadge = class {
|
|
176
178
|
constructor(hostRef) {
|
|
@@ -184,7 +186,7 @@ const MgBadge = class {
|
|
|
184
186
|
this.label = undefined;
|
|
185
187
|
this.variant = variants$5[0];
|
|
186
188
|
this.outline = undefined;
|
|
187
|
-
this.classCollection = new
|
|
189
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-badge']);
|
|
188
190
|
}
|
|
189
191
|
validateValue(newValue) {
|
|
190
192
|
if (/^(\d+\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {
|
|
@@ -192,7 +194,7 @@ const MgBadge = class {
|
|
|
192
194
|
}
|
|
193
195
|
}
|
|
194
196
|
validateLabel(newValue) {
|
|
195
|
-
if (!
|
|
197
|
+
if (!mgMenu_conf.He(newValue)) {
|
|
196
198
|
throw new Error('<mg-badge> prop "label" is required.');
|
|
197
199
|
}
|
|
198
200
|
}
|
|
@@ -236,7 +238,7 @@ const MgBadge = class {
|
|
|
236
238
|
"outline": ["validateOutline"]
|
|
237
239
|
}; }
|
|
238
240
|
};
|
|
239
|
-
MgBadge.style =
|
|
241
|
+
MgBadge.style = MgBadgeStyle0;
|
|
240
242
|
|
|
241
243
|
/**
|
|
242
244
|
* List of all possibles variants
|
|
@@ -244,6 +246,7 @@ MgBadge.style = mgBadgeCss;
|
|
|
244
246
|
const variants$4 = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
|
|
245
247
|
|
|
246
248
|
const mgButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:hsl(var(--color-dark)/10%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-primary-font-color))}:host(:hover) .mg-c-button--primary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-c-button.mg-c-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-secondary-font-color))}:host(:hover) .mg-c-button--secondary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-c-button.mg-c-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--danger:not(.mg-c-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-button.mg-c-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-danger))}:host(:hover) .mg-c-button--danger-alt:not(.mg-c-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-c-button.mg-c-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--info:not(.mg-c-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-button.mg-c-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-dark))}:host(:hover) .mg-c-button--success:not(.mg-c-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-button{position:relative;display:inline-flex;min-height:var(--default-size);box-sizing:border-box;align-items:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-width:var(--mg-button-border-top-width, 0.1rem) var(--mg-button-border-right-width, 0.1rem) var(--mg-button-border-bottom-width, 0.1rem) var(--mg-button-border-left-width, 0.1rem);border-style:solid;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));background-image:none;column-gap:.6rem;cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-button-disabled-opacity)}.mg-c-button.mg-c-button--icon{width:var(--default-size);height:var(--default-size);justify-content:center;padding:0;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:.6rem}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}";
|
|
249
|
+
const MgButtonStyle0 = mgButtonCss;
|
|
247
250
|
|
|
248
251
|
const MgButton = class {
|
|
249
252
|
constructor(hostRef) {
|
|
@@ -302,7 +305,7 @@ const MgButton = class {
|
|
|
302
305
|
this.isIcon = false;
|
|
303
306
|
this.disableOnClick = false;
|
|
304
307
|
this.loading = false;
|
|
305
|
-
this.classCollection = new
|
|
308
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-button']);
|
|
306
309
|
}
|
|
307
310
|
validateVariant(newValue, oldValue) {
|
|
308
311
|
if (!variants$4.includes(newValue)) {
|
|
@@ -361,7 +364,7 @@ const MgButton = class {
|
|
|
361
364
|
this.validateFullWidth(this.fullWidth);
|
|
362
365
|
if (this.isIcon) {
|
|
363
366
|
this.classCollection.add(`mg-c-button--icon`);
|
|
364
|
-
if (!
|
|
367
|
+
if (!mgMenu_conf.He(this.label)) {
|
|
365
368
|
throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
|
|
366
369
|
}
|
|
367
370
|
}
|
|
@@ -373,7 +376,7 @@ const MgButton = class {
|
|
|
373
376
|
* Add listners
|
|
374
377
|
*/
|
|
375
378
|
componentDidLoad() {
|
|
376
|
-
|
|
379
|
+
mgMenu_conf.Pe(() => {
|
|
377
380
|
var _a;
|
|
378
381
|
const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
|
|
379
382
|
// submit buttons should trigger form submition;
|
|
@@ -400,7 +403,7 @@ const MgButton = class {
|
|
|
400
403
|
"loading": ["loadingHandler"]
|
|
401
404
|
}; }
|
|
402
405
|
};
|
|
403
|
-
MgButton.style =
|
|
406
|
+
MgButton.style = MgButtonStyle0;
|
|
404
407
|
|
|
405
408
|
/**
|
|
406
409
|
* List available variants
|
|
@@ -412,6 +415,7 @@ const variants$3 = ['info', 'warning', 'success', 'danger', 'app'];
|
|
|
412
415
|
const variantStyles$1 = ['bar-left', 'fill'];
|
|
413
416
|
|
|
414
417
|
const mgCardCss = ".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));width:100%;min-width:var(--mg-card-min-width);max-width:var(--mg-card-max-width);box-sizing:border-box;padding:var(--mg-card-padding, var(--mg-card-padding-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));background:var(--mg-card-background, var(--mg-card-background-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-c-card ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}.mg-c-card.mg-c-card--info{overflow:hidden}.mg-c-card.mg-c-card--info.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-card.mg-c-card--info.mg-c-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--warning{overflow:hidden}.mg-c-card.mg-c-card--warning.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-c-card.mg-c-card--warning.mg-c-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--success{overflow:hidden}.mg-c-card.mg-c-card--success.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-card.mg-c-card--success.mg-c-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--danger{overflow:hidden}.mg-c-card.mg-c-card--danger.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-card.mg-c-card--danger.mg-c-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--app{overflow:hidden}.mg-c-card.mg-c-card--app.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-c-card.mg-c-card--app.mg-c-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-c-card__bar{position:absolute;top:0;left:0;width:.3rem;height:100%}";
|
|
418
|
+
const MgCardStyle0 = mgCardCss;
|
|
415
419
|
|
|
416
420
|
const MgCard = class {
|
|
417
421
|
constructor(hostRef) {
|
|
@@ -431,7 +435,7 @@ const MgCard = class {
|
|
|
431
435
|
};
|
|
432
436
|
this.variant = undefined;
|
|
433
437
|
this.variantStyle = undefined;
|
|
434
|
-
this.classCollection = new
|
|
438
|
+
this.classCollection = new mgMenu_conf.Fe([this.classBase]);
|
|
435
439
|
}
|
|
436
440
|
validateVariant(newValue, oldValue) {
|
|
437
441
|
if (newValue && !variants$3.includes(newValue))
|
|
@@ -476,9 +480,10 @@ const MgCard = class {
|
|
|
476
480
|
"variantStyle": ["validateVariantStyle"]
|
|
477
481
|
}; }
|
|
478
482
|
};
|
|
479
|
-
MgCard.style =
|
|
483
|
+
MgCard.style = MgCardStyle0;
|
|
480
484
|
|
|
481
485
|
const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block}";
|
|
486
|
+
const MgCharacterLeftStyle0 = mgCharacterLeftCss;
|
|
482
487
|
|
|
483
488
|
const MgCharacterLeft = class {
|
|
484
489
|
constructor(hostRef) {
|
|
@@ -500,7 +505,7 @@ const MgCharacterLeft = class {
|
|
|
500
505
|
*/
|
|
501
506
|
componentWillLoad() {
|
|
502
507
|
this.validateMaxlength(this.maxlength);
|
|
503
|
-
this.messages =
|
|
508
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
504
509
|
}
|
|
505
510
|
/**
|
|
506
511
|
* Render component
|
|
@@ -514,9 +519,10 @@ const MgCharacterLeft = class {
|
|
|
514
519
|
"maxlength": ["validateMaxlength"]
|
|
515
520
|
}; }
|
|
516
521
|
};
|
|
517
|
-
MgCharacterLeft.style =
|
|
522
|
+
MgCharacterLeft.style = MgCharacterLeftStyle0;
|
|
518
523
|
|
|
519
524
|
const mgDetailsCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-c-details__toggle{display:flex;min-height:calc(var(--font-size)*var(--line-height));flex-shrink:0;align-items:center;align-self:flex-start;margin-left:1.5rem;gap:.6rem}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-details-spacing)}@media (width < 43.75rem){.mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
|
|
525
|
+
const MgDetailsStyle0 = mgDetailsCss;
|
|
520
526
|
|
|
521
527
|
const MgDetails = class {
|
|
522
528
|
constructor(hostRef) {
|
|
@@ -534,7 +540,7 @@ const MgDetails = class {
|
|
|
534
540
|
this.expanded = false;
|
|
535
541
|
}
|
|
536
542
|
validateTitles(newValue) {
|
|
537
|
-
if (!
|
|
543
|
+
if (!mgMenu_conf.He(newValue)) {
|
|
538
544
|
throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
|
|
539
545
|
}
|
|
540
546
|
}
|
|
@@ -564,9 +570,10 @@ const MgDetails = class {
|
|
|
564
570
|
"expanded": ["handleExpanded"]
|
|
565
571
|
}; }
|
|
566
572
|
};
|
|
567
|
-
MgDetails.style =
|
|
573
|
+
MgDetails.style = MgDetailsStyle0;
|
|
568
574
|
|
|
569
575
|
const mgDividerCss = ".mg-c-divider{width:12rem;height:var(--mg-divider-thickness);margin:var(--mg-divider-vertical-spacing) auto;background-color:var(--mg-divider-background-color)}.mg-c-divider.mg-c-divider--full{width:100%}";
|
|
576
|
+
const MgDividerStyle0 = mgDividerCss;
|
|
570
577
|
|
|
571
578
|
const MgDivider = class {
|
|
572
579
|
constructor(hostRef) {
|
|
@@ -584,7 +591,7 @@ const MgDivider = class {
|
|
|
584
591
|
} }));
|
|
585
592
|
}
|
|
586
593
|
};
|
|
587
|
-
MgDivider.style =
|
|
594
|
+
MgDivider.style = MgDividerStyle0;
|
|
588
595
|
|
|
589
596
|
/**
|
|
590
597
|
* List of all possibles roles
|
|
@@ -596,6 +603,7 @@ const roles = ['form', 'search', 'none', 'presentation'];
|
|
|
596
603
|
const requiredMessageStatus = ['default', 'hide'];
|
|
597
604
|
|
|
598
605
|
const mgFormCss = ".mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width:var(--mg-form-inputs-title-width, 15rem);--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-shrink:0}.mg-c-form.mg-c-form--all-required{--mg-input-title-display:none}.mg-c-form>p{font-size:1.2rem}";
|
|
606
|
+
const MgFormStyle0 = mgFormCss;
|
|
599
607
|
|
|
600
608
|
const MgForm = class {
|
|
601
609
|
constructor(hostRef) {
|
|
@@ -683,7 +691,7 @@ const MgForm = class {
|
|
|
683
691
|
input.addEventListener('input-valid', this.checkValidity);
|
|
684
692
|
});
|
|
685
693
|
};
|
|
686
|
-
this.identifier =
|
|
694
|
+
this.identifier = mgMenu_conf.je('mg-form');
|
|
687
695
|
this.name = this.identifier;
|
|
688
696
|
this.readonly = false;
|
|
689
697
|
this.requiredMessage = undefined;
|
|
@@ -691,7 +699,7 @@ const MgForm = class {
|
|
|
691
699
|
this.disabled = false;
|
|
692
700
|
this.valid = undefined;
|
|
693
701
|
this.invalid = undefined;
|
|
694
|
-
this.classCollection = new
|
|
702
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-form']);
|
|
695
703
|
this.requiredMessageText = undefined;
|
|
696
704
|
}
|
|
697
705
|
validateRequiredMessage(newValue) {
|
|
@@ -726,7 +734,7 @@ const MgForm = class {
|
|
|
726
734
|
*/
|
|
727
735
|
componentWillLoad() {
|
|
728
736
|
// Get locales
|
|
729
|
-
this.messages =
|
|
737
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
730
738
|
this.validateAriaRole(this.ariaRole);
|
|
731
739
|
this.validateRequiredMessage(this.requiredMessage);
|
|
732
740
|
// Get slotted mgButtons
|
|
@@ -772,7 +780,7 @@ const MgForm = class {
|
|
|
772
780
|
"disabled": ["handleAttributeChange"]
|
|
773
781
|
}; }
|
|
774
782
|
};
|
|
775
|
-
MgForm.style =
|
|
783
|
+
MgForm.style = MgFormStyle0;
|
|
776
784
|
|
|
777
785
|
/**
|
|
778
786
|
* List of all possibles sizes
|
|
@@ -1178,6 +1186,7 @@ const icons = {
|
|
|
1178
1186
|
};
|
|
1179
1187
|
|
|
1180
1188
|
const mgIconCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:inline-flex;vertical-align:middle}.mg-c-icon{color:currentcolor}.mg-c-icon[size=small],.mg-c-icon.mg-c-icon--size-small{width:var(--mg-icon-small-size);height:var(--mg-icon-small-size)}.mg-c-icon[size=small][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-small[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc(var(--mg-icon-small-size)/2)}.mg-c-icon[size=regular],.mg-c-icon.mg-c-icon--size-regular{width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size)}.mg-c-icon[size=regular][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-regular[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc(var(--mg-icon-regular-size)/2)}.mg-c-icon[size=medium],.mg-c-icon.mg-c-icon--size-medium{width:var(--mg-icon-medium-size);height:var(--mg-icon-medium-size)}.mg-c-icon[size=medium][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-medium[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc(var(--mg-icon-medium-size)/2)}.mg-c-icon[size=large],.mg-c-icon.mg-c-icon--size-large{width:var(--mg-icon-large-size);height:var(--mg-icon-large-size)}.mg-c-icon[size=large][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-large[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc(var(--mg-icon-large-size)/2)}.mg-c-icon[size=extra-large],.mg-c-icon.mg-c-icon--size-extra-large{width:var(--mg-icon-extra-large-size);height:var(--mg-icon-extra-large-size)}.mg-c-icon[size=extra-large][class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon),.mg-c-icon.mg-c-icon--size-extra-large[class*=mg-c-icon--variant-]:not(.mg-c-icon--variant-style-icon){padding:calc(var(--mg-icon-extra-large-size)/2)}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-icon{color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-icon{color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-icon{color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-icon{color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-icon{color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-background{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-background{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-background{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-background{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-background{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-c-icon.mg-c-icon--variant-success.mg-c-icon--variant-style-full{color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-c-icon.mg-c-icon--variant-warning.mg-c-icon--variant-style-full{color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-c-icon.mg-c-icon--variant-danger.mg-c-icon--variant-style-full{color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-c-icon.mg-c-icon--variant-info.mg-c-icon--variant-style-full{color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-c-icon.mg-c-icon--variant-app.mg-c-icon--variant-style-full{color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l));background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-c-icon[class*=mg-c-icon--variant-]{border-radius:var(--mg-icon-border-radius)}.mg-c-icon--spin{animation-duration:.75s;animation-iteration-count:infinite;animation-name:rotate}@keyframes rotate{to{transform:rotate(360deg)}}";
|
|
1189
|
+
const MgIconStyle0 = mgIconCss;
|
|
1181
1190
|
|
|
1182
1191
|
const MgIcon = class {
|
|
1183
1192
|
constructor(hostRef) {
|
|
@@ -1207,7 +1216,7 @@ const MgIcon = class {
|
|
|
1207
1216
|
this.variant = undefined;
|
|
1208
1217
|
this.variantStyle = undefined;
|
|
1209
1218
|
this.spin = false;
|
|
1210
|
-
this.classCollection = new
|
|
1219
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-icon']);
|
|
1211
1220
|
}
|
|
1212
1221
|
validateIcon(newValue, oldValue) {
|
|
1213
1222
|
if (!iconList.includes(newValue))
|
|
@@ -1286,9 +1295,10 @@ const MgIcon = class {
|
|
|
1286
1295
|
"spin": ["handleSpin"]
|
|
1287
1296
|
}; }
|
|
1288
1297
|
};
|
|
1289
|
-
MgIcon.style =
|
|
1298
|
+
MgIcon.style = MgIconStyle0;
|
|
1290
1299
|
|
|
1291
1300
|
const mgIllustratedMessageCss = ".mg-c-illustrated-message{display:flex;max-width:47.5rem;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-illustrated-message-padding-vertical) 1.5rem;margin:auto;gap:3em 7rem;text-align:center}.mg-c-illustrated-message__illustration{max-height:18.4rem}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){width:auto;max-width:100%;height:auto;max-height:18.4rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small{max-height:6rem}.mg-c-illustrated-message__illustration.mg-c-illustrated-message__illustration--small ::slotted([slot=illustration]){max-height:6rem}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal{max-width:unset;flex-flow:row wrap;align-items:center}.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__slots,.mg-c-illustrated-message.mg-c-illustrated-message--horizontal .mg-c-illustrated-message__illustration{max-width:47.5rem}.mg-c-illustrated-message__title ::slotted([slot=title]){margin:0;font-family:var(--font-family) !important;font-size:2rem !important;font-weight:400 !important}.mg-c-illustrated-message__details ::slotted([slot=details]){margin:2rem 0 0}";
|
|
1301
|
+
const MgIllustratedMessageStyle0 = mgIllustratedMessageCss;
|
|
1292
1302
|
|
|
1293
1303
|
const MgIllustratedMessage = class {
|
|
1294
1304
|
constructor(hostRef) {
|
|
@@ -1305,7 +1315,7 @@ const MgIllustratedMessage = class {
|
|
|
1305
1315
|
componentDidLoad() {
|
|
1306
1316
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
1307
1317
|
const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
|
|
1308
|
-
if (!
|
|
1318
|
+
if (!mgMenu_conf._e(this.element.querySelector('[slot="title"]'), headingTags)) {
|
|
1309
1319
|
throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);
|
|
1310
1320
|
}
|
|
1311
1321
|
else if (slottedIllustrations.length !== 1) {
|
|
@@ -1328,7 +1338,7 @@ const MgIllustratedMessage = class {
|
|
|
1328
1338
|
}
|
|
1329
1339
|
get element() { return index.getElement(this); }
|
|
1330
1340
|
};
|
|
1331
|
-
MgIllustratedMessage.style =
|
|
1341
|
+
MgIllustratedMessage.style = MgIllustratedMessageStyle0;
|
|
1332
1342
|
|
|
1333
1343
|
/**
|
|
1334
1344
|
* Possible input width
|
|
@@ -1396,10 +1406,10 @@ const MgInput = (props, children, utils) => {
|
|
|
1396
1406
|
/**
|
|
1397
1407
|
* Check required properties
|
|
1398
1408
|
*/
|
|
1399
|
-
if (!
|
|
1409
|
+
if (!mgMenu_conf.He(props.identifier)) {
|
|
1400
1410
|
throw new Error('<mg-input> prop "identifier" is required.');
|
|
1401
1411
|
}
|
|
1402
|
-
if (!
|
|
1412
|
+
if (!mgMenu_conf.He(props.label)) {
|
|
1403
1413
|
throw new Error('<mg-input> prop "label" is required.');
|
|
1404
1414
|
}
|
|
1405
1415
|
if (props.labelOnTop && props.labelHide) {
|
|
@@ -1521,6 +1531,7 @@ index.h("ul", { class: {
|
|
|
1521
1531
|
})));
|
|
1522
1532
|
|
|
1523
1533
|
const mgInputCheckboxCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input__input-group-container--vertical{flex-direction:column}fieldset.mg-c-input{padding:0;border:0;margin-right:0;margin-left:0}fieldset.mg-c-input input[type=radio],fieldset.mg-c-input input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}fieldset.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}.mg-c-input__input-container mg-tooltip{margin-left:3rem}.mg-c-input__input-group{display:flex;align-items:start}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi{display:flex;flex-wrap:wrap;column-gap:calc(var(--mg-inputs-spacer)*1.2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi--with-values.mg-c-input__input-checkbox-multi{gap:.4rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi .mg-c-input__input-checkbox-multi-content{display:flex;flex-flow:column nowrap;gap:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi .mg-c-input__input-checkbox-multi-content .mg-c-input__input-group{margin-left:calc(0.4rem*2)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi--search-mode.mg-c-input__input-checkbox-multi .mg-c-input__input-checkbox-multi-content{width:37rem;height:40rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-values-container{display:flex;flex-flow:row wrap;gap:calc(0.4rem*1);padding:0;margin:0;list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-value{display:inline-flex;min-width:var(--default-size);min-height:var(--default-size);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-radius:.3rem;background-color:hsl(var(--mg-color-dark-5-hsl));font-size:var(--font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-no-result{text-align:center}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-text,.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{display:inline;margin:0;color:hsl(var(--mg-color-dark-40-hsl))}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-title{margin:0 1.1rem}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections{display:flex;flex-flow:column wrap;gap:calc(0.4rem*1)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-sections-container{display:flex;flex-flow:column nowrap;gap:calc(0.4rem*0);max-height:80vh;padding-right:1rem;overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header{display:flex;flex-flow:row wrap;gap:calc(0.4rem*2);min-height:var(--default-size);flex-wrap:nowrap;align-items:center;text-wrap:nowrap}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header-tootlip{display:inline-block;width:auto;height:auto;margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-section-header-label{font-size:var(--font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-checkbox-multi-inputs{padding:.4rem calc(0.4rem*2) .4rem calc(0.4rem/2);margin:0}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__input-checkbox-multi-section-header-tootlip){margin-left:var(--mg-inputs-spacer)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-popover-min-width:7rem;--mg-card-padding:calc(0.4rem * 2)}.mg-c-input.mg-c-input--checkbox-multi mg-input-text{--mg-inputs-margin-bottom:0}";
|
|
1534
|
+
const MgInputCheckboxStyle0 = mgInputCheckboxCss;
|
|
1524
1535
|
|
|
1525
1536
|
/**
|
|
1526
1537
|
* type CheckboxItem validation function
|
|
@@ -1647,7 +1658,7 @@ const MgInputCheckbox = class {
|
|
|
1647
1658
|
* Method to update searchResults
|
|
1648
1659
|
*/
|
|
1649
1660
|
this.updateSearchResults = () => {
|
|
1650
|
-
this.searchResults = this.checkboxItems.filter(item =>
|
|
1661
|
+
this.searchResults = this.checkboxItems.filter(item => mgMenu_conf.Ce(item.title).includes(mgMenu_conf.Ce(this.searchValue)));
|
|
1651
1662
|
};
|
|
1652
1663
|
/**
|
|
1653
1664
|
* Methode to validate if one of inputs value is checked id required
|
|
@@ -1720,7 +1731,7 @@ const MgInputCheckbox = class {
|
|
|
1720
1731
|
this.helpText = undefined;
|
|
1721
1732
|
this.valid = undefined;
|
|
1722
1733
|
this.invalid = undefined;
|
|
1723
|
-
this.classCollection = new
|
|
1734
|
+
this.classCollection = new mgMenu_conf.Fe([this.baseClassName]);
|
|
1724
1735
|
this.errorMessage = undefined;
|
|
1725
1736
|
this.checkboxItems = [];
|
|
1726
1737
|
this.displaySearchInput = undefined;
|
|
@@ -1773,13 +1784,14 @@ const MgInputCheckbox = class {
|
|
|
1773
1784
|
this.classCollection.delete(className);
|
|
1774
1785
|
}
|
|
1775
1786
|
validateCheckboxItems(newValue) {
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1787
|
+
// For the 'auto' mode we update the type depending on the new value's length.
|
|
1788
|
+
if (this.mode === 'auto')
|
|
1789
|
+
this.type = newValue.length > this.multiStart ? 'multi' : 'checkbox';
|
|
1790
|
+
// If the type is multi and the new value's length is greater than the search gauge, display the search input.
|
|
1791
|
+
this.displaySearchInput = this.type === 'multi' && newValue.length > this.searchStart;
|
|
1792
|
+
// refresh search values
|
|
1793
|
+
if (this.displaySearchInput)
|
|
1781
1794
|
this.updateSearchResults();
|
|
1782
|
-
}
|
|
1783
1795
|
this.setButtonText();
|
|
1784
1796
|
}
|
|
1785
1797
|
validateSearchValue() {
|
|
@@ -1806,7 +1818,7 @@ const MgInputCheckbox = class {
|
|
|
1806
1818
|
if (typeof valid !== 'boolean') {
|
|
1807
1819
|
throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
|
|
1808
1820
|
}
|
|
1809
|
-
else if (!
|
|
1821
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
1810
1822
|
throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
|
|
1811
1823
|
}
|
|
1812
1824
|
else {
|
|
@@ -1849,8 +1861,10 @@ const MgInputCheckbox = class {
|
|
|
1849
1861
|
*/
|
|
1850
1862
|
componentWillLoad() {
|
|
1851
1863
|
// Get locales
|
|
1852
|
-
this.messages =
|
|
1864
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
1853
1865
|
// Validate
|
|
1866
|
+
// `validateType` must be done before `validateValue` because we need to set mode['auto'|'custom'] from type
|
|
1867
|
+
// and `validateValue` updates `this.checkboxItems` watcher which requires a defined `this.type`.
|
|
1854
1868
|
this.validateType(this.type);
|
|
1855
1869
|
this.validateValue(this.value);
|
|
1856
1870
|
this.validateDisabled(this.disabled);
|
|
@@ -1932,7 +1946,7 @@ const MgInputCheckbox = class {
|
|
|
1932
1946
|
"searchValue": ["validateSearchValue"]
|
|
1933
1947
|
}; }
|
|
1934
1948
|
};
|
|
1935
|
-
MgInputCheckbox.style =
|
|
1949
|
+
MgInputCheckbox.style = MgInputCheckboxStyle0;
|
|
1936
1950
|
|
|
1937
1951
|
const MgInputCheckboxPaginated = class {
|
|
1938
1952
|
constructor(hostRef) {
|
|
@@ -2051,6 +2065,7 @@ var InputError$1;
|
|
|
2051
2065
|
})(InputError$1 || (InputError$1 = {}));
|
|
2052
2066
|
|
|
2053
2067
|
const mgInputDateCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}";
|
|
2068
|
+
const MgInputDateStyle0 = mgInputDateCss;
|
|
2054
2069
|
|
|
2055
2070
|
const MgInputDate = class {
|
|
2056
2071
|
constructor(hostRef) {
|
|
@@ -2059,6 +2074,18 @@ const MgInputDate = class {
|
|
|
2059
2074
|
this.inputValid = index.createEvent(this, "input-valid", 7);
|
|
2060
2075
|
// hasDisplayedError (triggered by blur event)
|
|
2061
2076
|
this.hasDisplayedError = false;
|
|
2077
|
+
/**
|
|
2078
|
+
* Format help text to display
|
|
2079
|
+
* @param helpText - help text format
|
|
2080
|
+
* @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)
|
|
2081
|
+
*/
|
|
2082
|
+
this.formatHelpText = (helpText) => {
|
|
2083
|
+
const defaultHelpTextVariable = '{defaultHelpText}';
|
|
2084
|
+
let text = mgMenu_conf.He(helpText) ? helpText : this.messages.input.date.helpText;
|
|
2085
|
+
if (text.includes(defaultHelpTextVariable))
|
|
2086
|
+
text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));
|
|
2087
|
+
return text.replace('{pattern}', this.renderPattern()).replace('{date}', mgMenu_conf.be(mgMenu_conf.Ae(new Date('2023-12-24')), this.systemLocale));
|
|
2088
|
+
};
|
|
2062
2089
|
/**
|
|
2063
2090
|
* Handle input event
|
|
2064
2091
|
*/
|
|
@@ -2130,15 +2157,30 @@ const MgInputDate = class {
|
|
|
2130
2157
|
}
|
|
2131
2158
|
// min, max & minMax
|
|
2132
2159
|
else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
|
|
2133
|
-
this.errorMessage = this.messages.errors.date[inputError]
|
|
2160
|
+
this.errorMessage = this.messages.errors.date[inputError]
|
|
2161
|
+
.replace('{min}', mgMenu_conf.be(this.min, this.systemLocale))
|
|
2162
|
+
.replace('{max}', mgMenu_conf.be(this.max, this.systemLocale));
|
|
2134
2163
|
}
|
|
2135
2164
|
// wrong date format
|
|
2136
2165
|
// element.validity.badInput is default error message
|
|
2137
2166
|
else {
|
|
2138
|
-
this.errorMessage = this.messages.errors.date.badInput
|
|
2167
|
+
this.errorMessage = this.messages.errors.date.badInput
|
|
2168
|
+
.replace('{min}', ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 ? mgMenu_conf.be(this.min, this.systemLocale) : mgMenu_conf.be('1900-01-01', this.systemLocale))
|
|
2169
|
+
.replace('{pattern}', this.renderPattern());
|
|
2139
2170
|
}
|
|
2140
2171
|
}
|
|
2141
2172
|
};
|
|
2173
|
+
/**
|
|
2174
|
+
* Render pattern
|
|
2175
|
+
* @returns translated html pattern
|
|
2176
|
+
*/
|
|
2177
|
+
this.renderPattern = () => {
|
|
2178
|
+
let patternLocal = mgMenu_conf.Ee(this.systemLocale);
|
|
2179
|
+
for (const key in this.messages.input.date.pattern) {
|
|
2180
|
+
patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
|
|
2181
|
+
}
|
|
2182
|
+
return `<span aria-hidden="true">${patternLocal}</span><span class="mg-u-visually-hidden">${[...patternLocal].join(' ')}</span>`;
|
|
2183
|
+
};
|
|
2142
2184
|
this.value = undefined;
|
|
2143
2185
|
this.identifier = undefined;
|
|
2144
2186
|
this.name = this.identifier;
|
|
@@ -2147,27 +2189,32 @@ const MgInputDate = class {
|
|
|
2147
2189
|
this.labelHide = false;
|
|
2148
2190
|
this.required = false;
|
|
2149
2191
|
this.readonly = false;
|
|
2192
|
+
this.min = undefined;
|
|
2193
|
+
this.max = undefined;
|
|
2150
2194
|
this.disabled = false;
|
|
2151
2195
|
this.tooltip = undefined;
|
|
2152
2196
|
this.helpText = undefined;
|
|
2153
2197
|
this.valid = undefined;
|
|
2154
2198
|
this.invalid = undefined;
|
|
2155
|
-
this.
|
|
2156
|
-
this.max = undefined;
|
|
2157
|
-
this.classCollection = new components_utils.ClassList(['mg-c-input--date']);
|
|
2199
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--date']);
|
|
2158
2200
|
this.errorMessage = undefined;
|
|
2159
2201
|
}
|
|
2160
2202
|
validateValue(newValue) {
|
|
2161
2203
|
// When the input is not fully completed or has been cleared, the value becomes an empty string.
|
|
2162
2204
|
if (newValue === '')
|
|
2163
2205
|
newValue = null;
|
|
2164
|
-
if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !
|
|
2206
|
+
if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !mgMenu_conf.Se.test(newValue))) {
|
|
2165
2207
|
throw new Error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
|
|
2166
2208
|
}
|
|
2167
2209
|
else {
|
|
2168
2210
|
this.valueChange.emit(newValue);
|
|
2169
2211
|
}
|
|
2170
2212
|
}
|
|
2213
|
+
validateMinMax(newValue) {
|
|
2214
|
+
if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === 0 || ((newValue === null || newValue === void 0 ? void 0 : newValue.length) > 0 && !(typeof newValue === 'string' && mgMenu_conf.Se.test(newValue)))) {
|
|
2215
|
+
throw new Error("<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd");
|
|
2216
|
+
}
|
|
2217
|
+
}
|
|
2171
2218
|
handleValidityChange(newValue, _oldValue, prop) {
|
|
2172
2219
|
if (this.input !== undefined) {
|
|
2173
2220
|
this.input[prop] = newValue;
|
|
@@ -2178,11 +2225,6 @@ const MgInputDate = class {
|
|
|
2178
2225
|
}
|
|
2179
2226
|
}
|
|
2180
2227
|
}
|
|
2181
|
-
validateMinMax(newValue) {
|
|
2182
|
-
if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === 0 || ((newValue === null || newValue === void 0 ? void 0 : newValue.length) > 0 && !(typeof newValue === 'string' && components_utils.dateRegExp.test(newValue)))) {
|
|
2183
|
-
throw new Error("<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd");
|
|
2184
|
-
}
|
|
2185
|
-
}
|
|
2186
2228
|
/**
|
|
2187
2229
|
* Display input error if it exists.
|
|
2188
2230
|
*/
|
|
@@ -2203,7 +2245,7 @@ const MgInputDate = class {
|
|
|
2203
2245
|
if (typeof valid !== 'boolean') {
|
|
2204
2246
|
throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
|
|
2205
2247
|
}
|
|
2206
|
-
else if (!
|
|
2248
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
2207
2249
|
throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
|
|
2208
2250
|
}
|
|
2209
2251
|
else {
|
|
@@ -2233,9 +2275,12 @@ const MgInputDate = class {
|
|
|
2233
2275
|
*/
|
|
2234
2276
|
componentWillLoad() {
|
|
2235
2277
|
// Get locales
|
|
2236
|
-
const locales =
|
|
2278
|
+
const locales = mgMenu_conf.initLocales(this.element);
|
|
2237
2279
|
this.locale = locales.locale;
|
|
2238
2280
|
this.messages = locales.messages;
|
|
2281
|
+
// as a native input use the OS locale to define the date pattern
|
|
2282
|
+
// we need to get this locale to define the displayed pattern
|
|
2283
|
+
this.systemLocale = Intl.DateTimeFormat().resolvedOptions().locale;
|
|
2239
2284
|
// Validate
|
|
2240
2285
|
this.validateValue(this.value);
|
|
2241
2286
|
this.validateMinMax(this.min);
|
|
@@ -2252,7 +2297,7 @@ const MgInputDate = class {
|
|
|
2252
2297
|
* @returns HTML Element
|
|
2253
2298
|
*/
|
|
2254
2299
|
render() {
|
|
2255
|
-
return (index.h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue:
|
|
2300
|
+
return (index.h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: mgMenu_conf.be(this.value, this.locale), tooltip: this.tooltip, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage, isFieldset: false }, index.h("input", { 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, ref: (el) => {
|
|
2256
2301
|
if (el !== null)
|
|
2257
2302
|
this.input = el;
|
|
2258
2303
|
} })));
|
|
@@ -2260,14 +2305,14 @@ const MgInputDate = class {
|
|
|
2260
2305
|
get element() { return index.getElement(this); }
|
|
2261
2306
|
static get watchers() { return {
|
|
2262
2307
|
"value": ["validateValue"],
|
|
2308
|
+
"min": ["validateMinMax", "handleValidityChange"],
|
|
2309
|
+
"max": ["validateMinMax", "handleValidityChange"],
|
|
2263
2310
|
"required": ["handleValidityChange"],
|
|
2264
2311
|
"readonly": ["handleValidityChange"],
|
|
2265
|
-
"disabled": ["handleValidityChange"]
|
|
2266
|
-
"min": ["validateMinMax"],
|
|
2267
|
-
"max": ["validateMinMax"]
|
|
2312
|
+
"disabled": ["handleValidityChange"]
|
|
2268
2313
|
}; }
|
|
2269
2314
|
};
|
|
2270
|
-
MgInputDate.style =
|
|
2315
|
+
MgInputDate.style = MgInputDateStyle0;
|
|
2271
2316
|
|
|
2272
2317
|
/**
|
|
2273
2318
|
* List of all possibles types
|
|
@@ -2282,6 +2327,7 @@ var InputError;
|
|
|
2282
2327
|
})(InputError || (InputError = {}));
|
|
2283
2328
|
|
|
2284
2329
|
const mgInputNumericCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input .mg-c-input__box{text-align:var(--mg-inputs-text-align, right)}";
|
|
2330
|
+
const MgInputNumericStyle0 = mgInputNumericCss;
|
|
2285
2331
|
|
|
2286
2332
|
const MgInputNumeric = class {
|
|
2287
2333
|
constructor(hostRef) {
|
|
@@ -2380,7 +2426,7 @@ const MgInputNumeric = class {
|
|
|
2380
2426
|
* @param value - value to format
|
|
2381
2427
|
* @returns formated local value
|
|
2382
2428
|
*/
|
|
2383
|
-
this.formatValue = (value) => (this.type === 'currency' ?
|
|
2429
|
+
this.formatValue = (value) => (this.type === 'currency' ? mgMenu_conf.Re(value, this.locale, this.currency) : mgMenu_conf.Me(value, this.locale));
|
|
2384
2430
|
/**
|
|
2385
2431
|
* Validate append slot
|
|
2386
2432
|
*/
|
|
@@ -2399,19 +2445,19 @@ const MgInputNumeric = class {
|
|
|
2399
2445
|
this.placeholder = undefined;
|
|
2400
2446
|
this.required = false;
|
|
2401
2447
|
this.readonly = false;
|
|
2448
|
+
this.max = undefined;
|
|
2449
|
+
this.min = undefined;
|
|
2402
2450
|
this.disabled = false;
|
|
2403
2451
|
this.mgWidth = undefined;
|
|
2404
2452
|
this.tooltip = undefined;
|
|
2405
2453
|
this.helpText = undefined;
|
|
2406
2454
|
this.type = types[0];
|
|
2407
2455
|
this.currency = 'USD';
|
|
2408
|
-
this.max = undefined;
|
|
2409
|
-
this.min = undefined;
|
|
2410
2456
|
this.integerLength = 13;
|
|
2411
2457
|
this.decimalLength = 2;
|
|
2412
2458
|
this.valid = undefined;
|
|
2413
2459
|
this.invalid = undefined;
|
|
2414
|
-
this.classCollection = new
|
|
2460
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--numeric']);
|
|
2415
2461
|
this.errorMessage = undefined;
|
|
2416
2462
|
this.hasFocus = undefined;
|
|
2417
2463
|
}
|
|
@@ -2478,7 +2524,7 @@ const MgInputNumeric = class {
|
|
|
2478
2524
|
if (typeof valid !== 'boolean') {
|
|
2479
2525
|
throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
|
|
2480
2526
|
}
|
|
2481
|
-
else if (!
|
|
2527
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
2482
2528
|
throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
|
|
2483
2529
|
}
|
|
2484
2530
|
else {
|
|
@@ -2547,7 +2593,7 @@ const MgInputNumeric = class {
|
|
|
2547
2593
|
*/
|
|
2548
2594
|
componentWillLoad() {
|
|
2549
2595
|
// Get locales
|
|
2550
|
-
const locales =
|
|
2596
|
+
const locales = mgMenu_conf.initLocales(this.element);
|
|
2551
2597
|
this.locale = locales.locale;
|
|
2552
2598
|
this.messages = locales.messages;
|
|
2553
2599
|
// Validate component config
|
|
@@ -2580,14 +2626,17 @@ const MgInputNumeric = class {
|
|
|
2580
2626
|
"required": ["handleValidityChange"],
|
|
2581
2627
|
"readonly": ["handleValidityChange"],
|
|
2582
2628
|
"disabled": ["handleValidityChange"],
|
|
2629
|
+
"min": ["handleValidityChange"],
|
|
2630
|
+
"max": ["handleValidityChange"],
|
|
2583
2631
|
"type": ["validateType"],
|
|
2584
2632
|
"integerLength": ["validateIntegerLength"],
|
|
2585
2633
|
"decimalLength": ["validateDecimalLength"]
|
|
2586
2634
|
}; }
|
|
2587
2635
|
};
|
|
2588
|
-
MgInputNumeric.style =
|
|
2636
|
+
MgInputNumeric.style = MgInputNumericStyle0;
|
|
2589
2637
|
|
|
2590
2638
|
const mgInputPasswordCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}";
|
|
2639
|
+
const MgInputPasswordStyle0 = mgInputPasswordCss;
|
|
2591
2640
|
|
|
2592
2641
|
const MgInputPassword = class {
|
|
2593
2642
|
constructor(hostRef) {
|
|
@@ -2655,7 +2704,7 @@ const MgInputPassword = class {
|
|
|
2655
2704
|
this.helpText = undefined;
|
|
2656
2705
|
this.valid = undefined;
|
|
2657
2706
|
this.invalid = undefined;
|
|
2658
|
-
this.classCollection = new
|
|
2707
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--password']);
|
|
2659
2708
|
this.errorMessage = undefined;
|
|
2660
2709
|
}
|
|
2661
2710
|
handleValue(newValue) {
|
|
@@ -2691,7 +2740,7 @@ const MgInputPassword = class {
|
|
|
2691
2740
|
if (typeof valid !== 'boolean') {
|
|
2692
2741
|
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
|
|
2693
2742
|
}
|
|
2694
|
-
else if (!
|
|
2743
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
2695
2744
|
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
|
|
2696
2745
|
}
|
|
2697
2746
|
else {
|
|
@@ -2721,7 +2770,7 @@ const MgInputPassword = class {
|
|
|
2721
2770
|
*/
|
|
2722
2771
|
componentWillLoad() {
|
|
2723
2772
|
// Get locales
|
|
2724
|
-
this.messages =
|
|
2773
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
2725
2774
|
// Check validity when component is ready
|
|
2726
2775
|
// return a promise to process action only in the FIRST render().
|
|
2727
2776
|
// https://stenciljs.com/docs/component-lifecycle#componentwillload
|
|
@@ -2747,9 +2796,10 @@ const MgInputPassword = class {
|
|
|
2747
2796
|
"disabled": ["handleValidityChange"]
|
|
2748
2797
|
}; }
|
|
2749
2798
|
};
|
|
2750
|
-
MgInputPassword.style =
|
|
2799
|
+
MgInputPassword.style = MgInputPasswordStyle0;
|
|
2751
2800
|
|
|
2752
2801
|
const mgInputRadioCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input__input-group-container--vertical{flex-direction:column}fieldset.mg-c-input{padding:0;border:0;margin-right:0;margin-left:0}fieldset.mg-c-input input[type=radio],fieldset.mg-c-input input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}fieldset.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}.mg-c-input__input-container mg-tooltip{margin-left:3rem}.mg-c-input__input-group{display:flex;align-items:start}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}";
|
|
2802
|
+
const MgInputRadioStyle0 = mgInputRadioCss;
|
|
2753
2803
|
|
|
2754
2804
|
/**
|
|
2755
2805
|
* type Option validation function
|
|
@@ -2830,7 +2880,7 @@ const MgInputRadio = class {
|
|
|
2830
2880
|
this.helpText = undefined;
|
|
2831
2881
|
this.valid = undefined;
|
|
2832
2882
|
this.invalid = undefined;
|
|
2833
|
-
this.classCollection = new
|
|
2883
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--radio']);
|
|
2834
2884
|
this.errorMessage = undefined;
|
|
2835
2885
|
this.options = undefined;
|
|
2836
2886
|
}
|
|
@@ -2843,7 +2893,7 @@ const MgInputRadio = class {
|
|
|
2843
2893
|
throw new Error('<mg-input-radio> prop "items" require at least 2 items.');
|
|
2844
2894
|
}
|
|
2845
2895
|
// String array
|
|
2846
|
-
else if (
|
|
2896
|
+
else if (mgMenu_conf.De(newValue)) {
|
|
2847
2897
|
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
2848
2898
|
}
|
|
2849
2899
|
// Object array
|
|
@@ -2884,7 +2934,7 @@ const MgInputRadio = class {
|
|
|
2884
2934
|
if (typeof valid !== 'boolean') {
|
|
2885
2935
|
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
|
|
2886
2936
|
}
|
|
2887
|
-
else if (!
|
|
2937
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
2888
2938
|
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
|
|
2889
2939
|
}
|
|
2890
2940
|
else {
|
|
@@ -2914,7 +2964,7 @@ const MgInputRadio = class {
|
|
|
2914
2964
|
*/
|
|
2915
2965
|
componentWillLoad() {
|
|
2916
2966
|
// Get locales
|
|
2917
|
-
this.messages =
|
|
2967
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
2918
2968
|
// Validate
|
|
2919
2969
|
this.validateItems(this.items);
|
|
2920
2970
|
// Check validity when component is ready
|
|
@@ -2943,9 +2993,10 @@ const MgInputRadio = class {
|
|
|
2943
2993
|
"disabled": ["handleValidityChange"]
|
|
2944
2994
|
}; }
|
|
2945
2995
|
};
|
|
2946
|
-
MgInputRadio.style =
|
|
2996
|
+
MgInputRadio.style = MgInputRadioStyle0;
|
|
2947
2997
|
|
|
2948
2998
|
const mgInputSelectCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__box{width:100%;padding-top:0;padding-right:1rem;padding-bottom:0}:host(:not([mg-width])) .mg-c-input--select:not(.mg-c-input--label-on-top) .mg-c-input__box{max-width:unset}";
|
|
2999
|
+
const MgInputSelectStyle0 = mgInputSelectCss;
|
|
2949
3000
|
|
|
2950
3001
|
/**
|
|
2951
3002
|
* Check if item is a well configured option
|
|
@@ -3025,7 +3076,7 @@ const MgInputSelect = class {
|
|
|
3025
3076
|
if (this.input.value === '') {
|
|
3026
3077
|
this.setValue(null);
|
|
3027
3078
|
}
|
|
3028
|
-
else if (
|
|
3079
|
+
else if (mgMenu_conf.De(this.items) && this.items.includes(this.input.value)) {
|
|
3029
3080
|
this.setValue(this.input.value);
|
|
3030
3081
|
}
|
|
3031
3082
|
else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
|
|
@@ -3099,7 +3150,7 @@ const MgInputSelect = class {
|
|
|
3099
3150
|
this.helpText = undefined;
|
|
3100
3151
|
this.valid = undefined;
|
|
3101
3152
|
this.invalid = undefined;
|
|
3102
|
-
this.classCollection = new
|
|
3153
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--select']);
|
|
3103
3154
|
this.errorMessage = undefined;
|
|
3104
3155
|
this.options = undefined;
|
|
3105
3156
|
this.valueExist = undefined;
|
|
@@ -3107,7 +3158,7 @@ const MgInputSelect = class {
|
|
|
3107
3158
|
}
|
|
3108
3159
|
validateValue(newValue) {
|
|
3109
3160
|
var _a, _b;
|
|
3110
|
-
if (
|
|
3161
|
+
if (mgMenu_conf.De(this.items) && typeof newValue === 'string') {
|
|
3111
3162
|
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
|
|
3112
3163
|
}
|
|
3113
3164
|
else if (allItemsAreOptions(this.items)) {
|
|
@@ -3124,7 +3175,7 @@ const MgInputSelect = class {
|
|
|
3124
3175
|
this.options = [];
|
|
3125
3176
|
}
|
|
3126
3177
|
// String array
|
|
3127
|
-
else if (
|
|
3178
|
+
else if (mgMenu_conf.De(newValue)) {
|
|
3128
3179
|
if (typeof this.value === 'string')
|
|
3129
3180
|
this.valueExist = newValue.includes(this.value);
|
|
3130
3181
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
@@ -3175,7 +3226,7 @@ const MgInputSelect = class {
|
|
|
3175
3226
|
if (typeof valid !== 'boolean') {
|
|
3176
3227
|
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
|
|
3177
3228
|
}
|
|
3178
|
-
else if (!
|
|
3229
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
3179
3230
|
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
|
|
3180
3231
|
}
|
|
3181
3232
|
else {
|
|
@@ -3205,7 +3256,7 @@ const MgInputSelect = class {
|
|
|
3205
3256
|
*/
|
|
3206
3257
|
componentWillLoad() {
|
|
3207
3258
|
// Get locales
|
|
3208
|
-
this.messages =
|
|
3259
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
3209
3260
|
// Validate
|
|
3210
3261
|
this.validateItems(this.items);
|
|
3211
3262
|
this.validateValue(this.value);
|
|
@@ -3240,9 +3291,10 @@ const MgInputSelect = class {
|
|
|
3240
3291
|
"disabled": ["handleValidityChange"]
|
|
3241
3292
|
}; }
|
|
3242
3293
|
};
|
|
3243
|
-
MgInputSelect.style =
|
|
3294
|
+
MgInputSelect.style = MgInputSelectStyle0;
|
|
3244
3295
|
|
|
3245
3296
|
const mgInputTextCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.mg-c-input mg-character-left{font-size:1.1rem;opacity:.6}.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__help-text,.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__error{margin-top:0}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__with-character-left{position:relative;display:inline-flex}.mg-c-input--width-full .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left .mg-c-input__box{padding-right:calc(var(--mg-character-left-message-length)*1ch + .8rem)}.mg-c-input__with-character-left mg-character-left{position:absolute;top:50%;right:1rem;display:none;font-size:1.1rem;opacity:.6;transform:translateY(-50%)}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{display:block}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon{position:absolute;top:50%;left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer)*2)}";
|
|
3297
|
+
const MgInputTextStyle0 = mgInputTextCss;
|
|
3246
3298
|
|
|
3247
3299
|
const isDatalistOption = (options) => Array.isArray(options) && options.every(option => typeof option === 'string');
|
|
3248
3300
|
const MgInputText = class {
|
|
@@ -3274,7 +3326,7 @@ const MgInputText = class {
|
|
|
3274
3326
|
*/
|
|
3275
3327
|
this.handleFocus = () => {
|
|
3276
3328
|
this.classCollection.add(this.classFocus);
|
|
3277
|
-
this.classCollection = new
|
|
3329
|
+
this.classCollection = new mgMenu_conf.Fe(this.classCollection.classes);
|
|
3278
3330
|
};
|
|
3279
3331
|
/**
|
|
3280
3332
|
* Handle blur event
|
|
@@ -3282,7 +3334,7 @@ const MgInputText = class {
|
|
|
3282
3334
|
this.handleBlur = () => {
|
|
3283
3335
|
// Manage focus
|
|
3284
3336
|
this.classCollection.delete(this.classFocus);
|
|
3285
|
-
this.classCollection = new
|
|
3337
|
+
this.classCollection = new mgMenu_conf.Fe(this.classCollection.classes);
|
|
3286
3338
|
// Display Error
|
|
3287
3339
|
this.handlerInProgress = Handler.BLUR;
|
|
3288
3340
|
this.displayError().finally(() => {
|
|
@@ -3357,7 +3409,7 @@ const MgInputText = class {
|
|
|
3357
3409
|
this.helpText = undefined;
|
|
3358
3410
|
this.valid = undefined;
|
|
3359
3411
|
this.invalid = undefined;
|
|
3360
|
-
this.classCollection = new
|
|
3412
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--text']);
|
|
3361
3413
|
this.errorMessage = undefined;
|
|
3362
3414
|
}
|
|
3363
3415
|
handleValue(newValue) {
|
|
@@ -3387,7 +3439,7 @@ const MgInputText = class {
|
|
|
3387
3439
|
}
|
|
3388
3440
|
}
|
|
3389
3441
|
validatePattern(newValue) {
|
|
3390
|
-
if (newValue !== undefined && !(
|
|
3442
|
+
if (newValue !== undefined && !(mgMenu_conf.He(this.pattern) && mgMenu_conf.He(this.patternErrorMessage))) {
|
|
3391
3443
|
throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
|
|
3392
3444
|
}
|
|
3393
3445
|
}
|
|
@@ -3417,7 +3469,7 @@ const MgInputText = class {
|
|
|
3417
3469
|
if (typeof valid !== 'boolean') {
|
|
3418
3470
|
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
|
|
3419
3471
|
}
|
|
3420
|
-
else if (!
|
|
3472
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
3421
3473
|
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
|
|
3422
3474
|
}
|
|
3423
3475
|
else {
|
|
@@ -3447,7 +3499,7 @@ const MgInputText = class {
|
|
|
3447
3499
|
*/
|
|
3448
3500
|
componentWillLoad() {
|
|
3449
3501
|
// Get locales
|
|
3450
|
-
this.messages =
|
|
3502
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
3451
3503
|
this.characterLeftId = `${this.identifier}-character-left`;
|
|
3452
3504
|
this.datalistId = `${this.identifier}-datalist`;
|
|
3453
3505
|
// Validate
|
|
@@ -3489,9 +3541,10 @@ const MgInputText = class {
|
|
|
3489
3541
|
"patternErrorMessage": ["validatePattern"]
|
|
3490
3542
|
}; }
|
|
3491
3543
|
};
|
|
3492
|
-
MgInputText.style =
|
|
3544
|
+
MgInputText.style = MgInputTextStyle0;
|
|
3493
3545
|
|
|
3494
3546
|
const mgInputTextareaCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.mg-c-input mg-character-left{font-size:1.1rem;opacity:.6}.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__help-text,.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__error{margin-top:0}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input__with-character-left{width:100%}.mg-c-input__with-character-left mg-character-left{display:block;margin-top:.2rem;text-align:end;visibility:hidden}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}";
|
|
3547
|
+
const MgInputTextareaStyle0 = mgInputTextareaCss;
|
|
3495
3548
|
|
|
3496
3549
|
const MgInputTextarea = class {
|
|
3497
3550
|
constructor(hostRef) {
|
|
@@ -3521,7 +3574,7 @@ const MgInputTextarea = class {
|
|
|
3521
3574
|
*/
|
|
3522
3575
|
this.handleFocus = () => {
|
|
3523
3576
|
this.classCollection.add(this.classFocus);
|
|
3524
|
-
this.classCollection = new
|
|
3577
|
+
this.classCollection = new mgMenu_conf.Fe(this.classCollection.classes);
|
|
3525
3578
|
};
|
|
3526
3579
|
/**
|
|
3527
3580
|
* Handle blur event
|
|
@@ -3529,7 +3582,7 @@ const MgInputTextarea = class {
|
|
|
3529
3582
|
this.handleBlur = () => {
|
|
3530
3583
|
// Manage focus
|
|
3531
3584
|
this.classCollection.delete(this.classFocus);
|
|
3532
|
-
this.classCollection = new
|
|
3585
|
+
this.classCollection = new mgMenu_conf.Fe(this.classCollection.classes);
|
|
3533
3586
|
// Display Error
|
|
3534
3587
|
this.handlerInProgress = Handler.BLUR;
|
|
3535
3588
|
this.displayError().finally(() => {
|
|
@@ -3592,7 +3645,7 @@ const MgInputTextarea = class {
|
|
|
3592
3645
|
this.valid = undefined;
|
|
3593
3646
|
this.invalid = undefined;
|
|
3594
3647
|
this.resizable = 'none';
|
|
3595
|
-
this.classCollection = new
|
|
3648
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--textarea']);
|
|
3596
3649
|
this.errorMessage = undefined;
|
|
3597
3650
|
}
|
|
3598
3651
|
handleValue(newValue) {
|
|
@@ -3610,7 +3663,7 @@ const MgInputTextarea = class {
|
|
|
3610
3663
|
}
|
|
3611
3664
|
}
|
|
3612
3665
|
validatePattern(newValue) {
|
|
3613
|
-
if (newValue !== undefined && !(
|
|
3666
|
+
if (newValue !== undefined && !(mgMenu_conf.He(this.pattern) && mgMenu_conf.He(this.patternErrorMessage))) {
|
|
3614
3667
|
throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
|
|
3615
3668
|
}
|
|
3616
3669
|
}
|
|
@@ -3642,7 +3695,7 @@ const MgInputTextarea = class {
|
|
|
3642
3695
|
if (typeof valid !== 'boolean') {
|
|
3643
3696
|
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
|
|
3644
3697
|
}
|
|
3645
|
-
else if (!
|
|
3698
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
3646
3699
|
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
|
|
3647
3700
|
}
|
|
3648
3701
|
else {
|
|
@@ -3672,7 +3725,7 @@ const MgInputTextarea = class {
|
|
|
3672
3725
|
*/
|
|
3673
3726
|
componentWillLoad() {
|
|
3674
3727
|
// Get locales
|
|
3675
|
-
this.messages =
|
|
3728
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
3676
3729
|
this.characterLeftId = `${this.identifier}-character-left`;
|
|
3677
3730
|
// Validate
|
|
3678
3731
|
this.validateDisplayCharacterLeft(this.displayCharacterLeft);
|
|
@@ -3711,9 +3764,10 @@ const MgInputTextarea = class {
|
|
|
3711
3764
|
"displayCharacterLeft": ["validateDisplayCharacterLeft"]
|
|
3712
3765
|
}; }
|
|
3713
3766
|
};
|
|
3714
|
-
MgInputTextarea.style =
|
|
3767
|
+
MgInputTextarea.style = MgInputTextareaStyle0;
|
|
3715
3768
|
|
|
3716
3769
|
const mgInputTitleCss = ".mg-u-is-asterisk.sc-mg-input-title{color:hsl(var(--color-danger))}legend.mg-c-input-title.sc-mg-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required.sc-mg-input-title{display:var(--mg-input-title-display, unset)}";
|
|
3770
|
+
const MgInputTitleStyle0 = mgInputTitleCss;
|
|
3717
3771
|
|
|
3718
3772
|
const MgInputTitle = class {
|
|
3719
3773
|
constructor(hostRef) {
|
|
@@ -3725,7 +3779,7 @@ const MgInputTitle = class {
|
|
|
3725
3779
|
this.tagName = 'label';
|
|
3726
3780
|
}
|
|
3727
3781
|
validateIdentifier(newValue) {
|
|
3728
|
-
if (!
|
|
3782
|
+
if (!mgMenu_conf.He(newValue)) {
|
|
3729
3783
|
throw new Error('<mg-input-title> prop "identifier" is required.');
|
|
3730
3784
|
}
|
|
3731
3785
|
}
|
|
@@ -3756,9 +3810,10 @@ const MgInputTitle = class {
|
|
|
3756
3810
|
"isLegend": ["validateIsLegend"]
|
|
3757
3811
|
}; }
|
|
3758
3812
|
};
|
|
3759
|
-
MgInputTitle.style =
|
|
3813
|
+
MgInputTitle.style = MgInputTitleStyle0;
|
|
3760
3814
|
|
|
3761
3815
|
const mgInputToggleCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.5rem .9rem;border:0;border-radius:calc((var(--font-size)*var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)*var(--line-height) + 2*(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)*var(--line-height) + 1rem);height:calc(var(--font-size)*var(--line-height) + 1rem);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__button-toggle{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);cursor:initial}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__toggle-item-container:last-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{display:flex}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--color-dark));font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}";
|
|
3816
|
+
const MgInputToggleStyle0 = mgInputToggleCss;
|
|
3762
3817
|
|
|
3763
3818
|
/**
|
|
3764
3819
|
* type Option validation function
|
|
@@ -3825,7 +3880,7 @@ const MgInputToggle = class {
|
|
|
3825
3880
|
this.disabled = false;
|
|
3826
3881
|
this.tooltip = undefined;
|
|
3827
3882
|
this.helpText = undefined;
|
|
3828
|
-
this.classCollection = new
|
|
3883
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--toggle']);
|
|
3829
3884
|
this.options = undefined;
|
|
3830
3885
|
this.errorMessage = undefined;
|
|
3831
3886
|
this.valid = undefined;
|
|
@@ -3842,7 +3897,7 @@ const MgInputToggle = class {
|
|
|
3842
3897
|
throw new Error('<mg-input-toggle> prop "items" require 2 items.');
|
|
3843
3898
|
}
|
|
3844
3899
|
// String array
|
|
3845
|
-
else if (
|
|
3900
|
+
else if (mgMenu_conf.De(newValue)) {
|
|
3846
3901
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
3847
3902
|
}
|
|
3848
3903
|
// Object array
|
|
@@ -3898,7 +3953,7 @@ const MgInputToggle = class {
|
|
|
3898
3953
|
if (typeof valid !== 'boolean') {
|
|
3899
3954
|
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
|
|
3900
3955
|
}
|
|
3901
|
-
else if (!
|
|
3956
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
3902
3957
|
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
|
|
3903
3958
|
}
|
|
3904
3959
|
else {
|
|
@@ -3966,9 +4021,10 @@ const MgInputToggle = class {
|
|
|
3966
4021
|
"checked": ["handleChecked"]
|
|
3967
4022
|
}; }
|
|
3968
4023
|
};
|
|
3969
|
-
MgInputToggle.style =
|
|
4024
|
+
MgInputToggle.style = MgInputToggleStyle0;
|
|
3970
4025
|
|
|
3971
4026
|
const mgMenuCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}";
|
|
4027
|
+
const MgMenuStyle0 = mgMenuCss;
|
|
3972
4028
|
|
|
3973
4029
|
const MgMenu = class {
|
|
3974
4030
|
constructor(hostRef) {
|
|
@@ -4046,7 +4102,7 @@ const MgMenu = class {
|
|
|
4046
4102
|
this.element.appendChild(mgItemMore);
|
|
4047
4103
|
};
|
|
4048
4104
|
this.label = undefined;
|
|
4049
|
-
this.direction =
|
|
4105
|
+
this.direction = mgMenu_conf.Direction.HORIZONTAL;
|
|
4050
4106
|
this.itemmore = undefined;
|
|
4051
4107
|
this.size = 'regular';
|
|
4052
4108
|
this.isChildMenu = undefined;
|
|
@@ -4057,18 +4113,18 @@ const MgMenu = class {
|
|
|
4057
4113
|
}
|
|
4058
4114
|
}
|
|
4059
4115
|
validateDirection(newValue) {
|
|
4060
|
-
if (![
|
|
4061
|
-
throw new Error(`<${this.name}> prop "direction" must be one of: ${
|
|
4116
|
+
if (![mgMenu_conf.Direction.VERTICAL, mgMenu_conf.Direction.HORIZONTAL].includes(newValue)) {
|
|
4117
|
+
throw new Error(`<${this.name}> prop "direction" must be one of: ${mgMenu_conf.Direction.HORIZONTAL}, ${mgMenu_conf.Direction.VERTICAL}.`);
|
|
4062
4118
|
}
|
|
4063
4119
|
}
|
|
4064
4120
|
validateItemMore(newValue) {
|
|
4065
|
-
if (newValue !== undefined && this.direction !==
|
|
4066
|
-
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${
|
|
4121
|
+
if (newValue !== undefined && this.direction !== mgMenu_conf.Direction.HORIZONTAL) {
|
|
4122
|
+
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${mgMenu_conf.Direction.HORIZONTAL}.`);
|
|
4067
4123
|
}
|
|
4068
4124
|
}
|
|
4069
4125
|
validateSize(newValue) {
|
|
4070
|
-
if (!
|
|
4071
|
-
throw new Error(`<${this.name}> prop "size" must be one of: ${
|
|
4126
|
+
if (!mgMenu_conf.sizes.includes(newValue)) {
|
|
4127
|
+
throw new Error(`<${this.name}> prop "size" must be one of: ${mgMenu_conf.sizes.join(', ')}.`);
|
|
4072
4128
|
}
|
|
4073
4129
|
}
|
|
4074
4130
|
/*************
|
|
@@ -4096,7 +4152,7 @@ const MgMenu = class {
|
|
|
4096
4152
|
this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
|
|
4097
4153
|
this.isChildMenu = this.element.closest('mg-menu-item') !== null;
|
|
4098
4154
|
// add mg-item-more to manage OverflowBehavior
|
|
4099
|
-
if (this.direction ===
|
|
4155
|
+
if (this.direction === mgMenu_conf.Direction.HORIZONTAL && !this.isChildMenu)
|
|
4100
4156
|
this.renderMgItemMore();
|
|
4101
4157
|
// use mutation observer to improve reactivity
|
|
4102
4158
|
new MutationObserver(entries => {
|
|
@@ -4134,9 +4190,10 @@ const MgMenu = class {
|
|
|
4134
4190
|
"size": ["validateSize"]
|
|
4135
4191
|
}; }
|
|
4136
4192
|
};
|
|
4137
|
-
MgMenu.style =
|
|
4193
|
+
MgMenu.style = MgMenuStyle0;
|
|
4138
4194
|
|
|
4139
4195
|
const mgMenuItemCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{height:3.8rem;padding:1rem 2rem}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-regular .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular.mg-c-menu-item__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{height:5.1rem;padding:1rem 3rem}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-medium .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium.mg-c-menu-item__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{height:7.1rem;padding:1rem 4rem}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button,.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=label]),.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button ::slotted([slot=metadata]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=label]),.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-menu-item.mg-c-menu-item--size-large .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical,.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large.mg-c-menu-item__navigation-button--vertical{padding-left:calc(4rem - 0.3rem)}.mg-c-menu-item__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));column-gap:var(--mg-menu-item-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-menu-item__navigation-button:disabled,.mg-c-menu-item__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-menu-item__navigation-button:focus-visible{z-index:10}.mg-c-menu-item__navigation-button:hover:not(.mg-c-menu-item__navigation-button--disabled),.mg-c-menu-item__navigation-button:focus-visible:not(.mg-c-menu-item__navigation-button--disabled){background-color:hsl(var(--mg-menu-item-focused-background-color-hsl)/10%)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active{color:hsl(var(--mg-menu-item-color-active-hsl));font-weight:600}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--active.mg-c-menu-item__navigation-button--vertical{border-left-color:hsl(var(--mg-menu-item-border-color-active-hsl))}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--hidden{display:none}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(1*2rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(2*2rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(3*2rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(4*2rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(5*2rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-regular{padding-left:calc(6*2rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(1*3rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(2*3rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(3*3rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(4*3rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(5*3rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-medium{padding-left:calc(6*3rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}:host([data-style-direction=vertical][data-level=\"1\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(1*4rem - .3rem)}:host([data-level=\"1\"]) .mg-c-menu-item__collapse-container{z-index:calc(1*10)}:host([data-style-direction=vertical][data-level=\"2\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(2*4rem - .3rem)}:host([data-level=\"2\"]) .mg-c-menu-item__collapse-container{z-index:calc(2*10)}:host([data-style-direction=vertical][data-level=\"3\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(3*4rem - .3rem)}:host([data-level=\"3\"]) .mg-c-menu-item__collapse-container{z-index:calc(3*10)}:host([data-style-direction=vertical][data-level=\"4\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(4*4rem - .3rem)}:host([data-level=\"4\"]) .mg-c-menu-item__collapse-container{z-index:calc(4*10)}:host([data-style-direction=vertical][data-level=\"5\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(5*4rem - .3rem)}:host([data-level=\"5\"]) .mg-c-menu-item__collapse-container{z-index:calc(5*10)}:host([data-style-direction=vertical][data-level=\"6\"]) .mg-c-menu-item__navigation-button.mg-c-menu-item__navigation-button--size-large{padding-left:calc(6*4rem - .3rem)}:host([data-level=\"6\"]) .mg-c-menu-item__collapse-container{z-index:calc(6*10)}.mg-c-menu-item{max-width:var(--mg-menu-item-navigation-button-max-width)}.mg-c-menu-item__collapse-container{z-index:10;width:max-content}.mg-c-menu-item__navigation-button-center{min-width:0}.mg-c-menu-item__navigation-button-text-content{display:flex;width:100%;align-items:center}.mg-c-menu-item__navigation-button-text-content-notification,.mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:1rem;font-size:var(--font-size)}.mg-c-menu-item__navigation-button-chevron{margin-left:auto;transition:200ms}.mg-c-menu-item__navigation-button-chevron--rotate.mg-c-menu-item__navigation-button-chevron{transform:rotate(180deg)}:host{position:relative;display:flex;--mg-popover-padding-vertical:0;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}:host([data-style-direction=vertical]){flex-direction:column}:host([data-style-direction=vertical]) .mg-c-menu-item__navigation-button{width:100%}:host([data-style-direction=vertical]) .mg-c-menu-item__collapse-container{position:unset;top:unset;left:unset;width:unset}:host([data-style-direction=vertical]) .mg-c-menu-item-chevron{margin-left:auto}:host([data-overflow-more]){--mg-menu-item-navigation-button-column-gap:0}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-chevron{display:none}:host([data-overflow-more]) .mg-c-menu-item__navigation-button-text-content ::slotted([slot=information]){margin-left:0}:host([data-overflow-more]) ::slotted(mg-menu){--mg-menu-item-navigation-button-column-gap:1rem}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level,:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level{background-color:hsl(var(--color-light))}:host([data-style-direction=horizontal]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu),:host([data-overflow-more]) .mg-c-menu-item__collapse-container.mg-c-menu-item__collapse-container--first-level ::slotted(mg-menu){padding:1rem 0}::slotted([slot=label]),::slotted([slot=metadata]){display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}::slotted(*){display:flex;flex-direction:column}:host([status=disabled]){pointer-events:none}:host([hidden]){display:none}";
|
|
4196
|
+
const MgMenuItemStyle0 = mgMenuItemCss;
|
|
4140
4197
|
|
|
4141
4198
|
const MgMenuItem = class {
|
|
4142
4199
|
constructor(hostRef) {
|
|
@@ -4200,7 +4257,7 @@ const MgMenuItem = class {
|
|
|
4200
4257
|
throw new Error(`<${this.name}> slot "label" is required.`);
|
|
4201
4258
|
['label', 'metadata'].forEach(slot => {
|
|
4202
4259
|
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
4203
|
-
if (!
|
|
4260
|
+
if (!mgMenu_conf.He(element.textContent))
|
|
4204
4261
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
4205
4262
|
if ((guard && element.getAttribute('title') === null) || !guard)
|
|
4206
4263
|
element.setAttribute('title', element.textContent);
|
|
@@ -4240,7 +4297,7 @@ const MgMenuItem = class {
|
|
|
4240
4297
|
* Condition to know if component should display a mg-popover
|
|
4241
4298
|
* @returns truthy if component display popover
|
|
4242
4299
|
*/
|
|
4243
|
-
this.displayPopover = () => this.isDirection(
|
|
4300
|
+
this.displayPopover = () => this.isDirection(mgMenu_conf.Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
|
|
4244
4301
|
/************
|
|
4245
4302
|
* Handlers *
|
|
4246
4303
|
************/
|
|
@@ -4269,12 +4326,12 @@ const MgMenuItem = class {
|
|
|
4269
4326
|
* @returns HTML Element
|
|
4270
4327
|
*/
|
|
4271
4328
|
this.renderSlot = () => index.h("slot", null);
|
|
4272
|
-
this.identifier =
|
|
4329
|
+
this.identifier = mgMenu_conf.je('mg-menu-item');
|
|
4273
4330
|
this.href = undefined;
|
|
4274
4331
|
this.status = Status$1.VISIBLE;
|
|
4275
4332
|
this.expanded = false;
|
|
4276
4333
|
this.size = 'regular';
|
|
4277
|
-
this.navigationButtonClassList = new
|
|
4334
|
+
this.navigationButtonClassList = new mgMenu_conf.Fe([this.navigationButton]);
|
|
4278
4335
|
this.direction = undefined;
|
|
4279
4336
|
this.isInMainMenu = undefined;
|
|
4280
4337
|
this.isItemMore = undefined;
|
|
@@ -4319,7 +4376,7 @@ const MgMenuItem = class {
|
|
|
4319
4376
|
this.element.setAttribute('data-style-direction', newValue);
|
|
4320
4377
|
this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
|
|
4321
4378
|
// manage all sub levels child menu-items level with data-level attribut
|
|
4322
|
-
if (this.isDirection(
|
|
4379
|
+
if (this.isDirection(mgMenu_conf.Direction.VERTICAL, newValue)) {
|
|
4323
4380
|
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
|
|
4324
4381
|
item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
|
|
4325
4382
|
});
|
|
@@ -4349,7 +4406,7 @@ const MgMenuItem = class {
|
|
|
4349
4406
|
// has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
|
|
4350
4407
|
// we store only matching elements
|
|
4351
4408
|
this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
|
|
4352
|
-
this.badgeLabel =
|
|
4409
|
+
this.badgeLabel = mgMenu_conf.initLocales(this.element).messages.plusMenu.badgeLabel;
|
|
4353
4410
|
this.isItemMore = this.element.dataset.overflowMore !== undefined;
|
|
4354
4411
|
// Validate props
|
|
4355
4412
|
this.validateStatus(this.status);
|
|
@@ -4370,7 +4427,7 @@ const MgMenuItem = class {
|
|
|
4370
4427
|
return setTimeout(() => {
|
|
4371
4428
|
// define menu-item context states
|
|
4372
4429
|
const menu = this.element.closest('mg-menu');
|
|
4373
|
-
this.direction = this.isItemMore || menu === null ?
|
|
4430
|
+
this.direction = this.isItemMore || menu === null ? mgMenu_conf.Direction.HORIZONTAL : menu.direction;
|
|
4374
4431
|
this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;
|
|
4375
4432
|
if ((menu === null || menu === void 0 ? void 0 : menu.size) !== undefined)
|
|
4376
4433
|
this.size = menu.size;
|
|
@@ -4379,7 +4436,7 @@ const MgMenuItem = class {
|
|
|
4379
4436
|
// when main menu item contain an active item it will get the active style
|
|
4380
4437
|
// AND if item is in vertical menu it will be expanded
|
|
4381
4438
|
if (this.hasActiveChild() && this.isInMainMenu)
|
|
4382
|
-
this.expanded = this.isDirection(
|
|
4439
|
+
this.expanded = this.isDirection(mgMenu_conf.Direction.VERTICAL);
|
|
4383
4440
|
this.updateStatus([Status$1.ACTIVE]);
|
|
4384
4441
|
this.updateDisplayNotificationBadge();
|
|
4385
4442
|
this.updatePopoverGuard();
|
|
@@ -4414,7 +4471,7 @@ const MgMenuItem = class {
|
|
|
4414
4471
|
render() {
|
|
4415
4472
|
const getContainerClasses = () => ({
|
|
4416
4473
|
['mg-c-menu-item__collapse-container']: true,
|
|
4417
|
-
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(
|
|
4474
|
+
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(mgMenu_conf.Direction.HORIZONTAL),
|
|
4418
4475
|
});
|
|
4419
4476
|
return (index.h(index.Host, { 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()))) : ([
|
|
4420
4477
|
this.renderInteractiveElement(),
|
|
@@ -4430,7 +4487,7 @@ const MgMenuItem = class {
|
|
|
4430
4487
|
"hasChildren": ["validateHasChildren"]
|
|
4431
4488
|
}; }
|
|
4432
4489
|
};
|
|
4433
|
-
MgMenuItem.style =
|
|
4490
|
+
MgMenuItem.style = MgMenuItemStyle0;
|
|
4434
4491
|
|
|
4435
4492
|
/**
|
|
4436
4493
|
* List of all possibles message variants
|
|
@@ -4438,6 +4495,7 @@ MgMenuItem.style = mgMenuItemCss;
|
|
|
4438
4495
|
const variants$1 = ['info', 'warning', 'success', 'danger'];
|
|
4439
4496
|
|
|
4440
4497
|
const mgMessageCss = ":host{--mg-card-padding:0;--mg-card-border-radius:var(--mg-message-border-radius);--mg-card-border:none;--mg-card-overflow:hidden}:host([hide]){display:none}.mg-c-message{display:inline-block;min-height:var(--default-size)}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:hsl(var(--color-info))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:hsl(var(--color-warning))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:hsl(var(--color-success))}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:hsl(var(--color-danger))}.mg-c-message.mg-c-message--close-button{--mg-card-padding:0 3.4rem 0 0}.mg-c-message.mg-c-message--hide{display:none}.mg-c-message ::slotted(*){padding:0;margin:0}.mg-c-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size))/2);left:1.3rem;line-height:1}.mg-c-message__content{display:flex;flex-wrap:wrap;padding:0 1rem 0 3.8rem;place-content:stretch flex-end}.mg-c-message__content-slot{flex-grow:1;margin:.84rem 0}.mg-c-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-c-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-c-message__close-button{position:absolute;top:0;right:0}.mg-c-message ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}.mg-c-message,.mg-c-message mg-message{max-width:100%}";
|
|
4498
|
+
const MgMessageStyle0 = mgMessageCss;
|
|
4441
4499
|
|
|
4442
4500
|
const MgMessage = class {
|
|
4443
4501
|
constructor(hostRef) {
|
|
@@ -4507,13 +4565,13 @@ const MgMessage = class {
|
|
|
4507
4565
|
return 'exclamation-circle';
|
|
4508
4566
|
}
|
|
4509
4567
|
};
|
|
4510
|
-
this.identifier =
|
|
4568
|
+
this.identifier = mgMenu_conf.je('mg-message');
|
|
4511
4569
|
this.delay = undefined;
|
|
4512
4570
|
this.variant = variants$1[0];
|
|
4513
4571
|
this.closeButton = false;
|
|
4514
4572
|
this.hide = false;
|
|
4515
4573
|
this.noAriaRole = undefined;
|
|
4516
|
-
this.classCollection = new
|
|
4574
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-message']);
|
|
4517
4575
|
this.hasActions = false;
|
|
4518
4576
|
}
|
|
4519
4577
|
validateDelay(newValue) {
|
|
@@ -4571,7 +4629,7 @@ const MgMessage = class {
|
|
|
4571
4629
|
*/
|
|
4572
4630
|
componentWillLoad() {
|
|
4573
4631
|
// Get locales
|
|
4574
|
-
this.messages =
|
|
4632
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
4575
4633
|
// Validate
|
|
4576
4634
|
this.validateVariant(this.variant);
|
|
4577
4635
|
// Check if close button is an can be activated
|
|
@@ -4602,7 +4660,7 @@ const MgMessage = class {
|
|
|
4602
4660
|
"hide": ["validateHide"]
|
|
4603
4661
|
}; }
|
|
4604
4662
|
};
|
|
4605
|
-
MgMessage.style =
|
|
4663
|
+
MgMessage.style = MgMessageStyle0;
|
|
4606
4664
|
|
|
4607
4665
|
/**
|
|
4608
4666
|
* List of all possibles dialog roles
|
|
@@ -4610,6 +4668,7 @@ MgMessage.style = mgMessageCss;
|
|
|
4610
4668
|
const dialogRoles = ['dialog', 'alertdialog'];
|
|
4611
4669
|
|
|
4612
4670
|
const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-padding:1.5rem 2.5rem;--mg-card-border:none}.mg-c-modal{position:fixed;z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem 0;background-color:hsl(var(--color-light)/85%);inset:0}.mg-c-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:3rem}.mg-c-modal__header{margin-bottom:.5rem}.mg-c-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size)*var(--line-height))/2*-1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size))/2*-1);float:right}.mg-c-modal__content{overflow-y:auto}.mg-c-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-c-modal.mg-c-modal--hide{display:none}.mg-c-modal ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}";
|
|
4671
|
+
const MgModalStyle0 = mgModalCss;
|
|
4613
4672
|
|
|
4614
4673
|
const MgModal = class {
|
|
4615
4674
|
constructor(hostRef) {
|
|
@@ -4655,11 +4714,12 @@ const MgModal = class {
|
|
|
4655
4714
|
*/
|
|
4656
4715
|
this.setFocus = () => {
|
|
4657
4716
|
// Get all focusable elements
|
|
4658
|
-
const
|
|
4659
|
-
// If at least one
|
|
4660
|
-
if (
|
|
4661
|
-
|
|
4662
|
-
|
|
4717
|
+
const slottedFocusableElements = Array.from(this.element.querySelectorAll(mgMenu_conf.Be));
|
|
4718
|
+
// If close button is enabled or at least one of the slotted element is focusable
|
|
4719
|
+
if (this.closeButton || slottedFocusableElements.length > 0) {
|
|
4720
|
+
// Check if slotted focusable elements have shadowDom with focusable elements
|
|
4721
|
+
this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
|
|
4722
|
+
acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(mgMenu_conf.Be) || focusableElement : focusableElement);
|
|
4663
4723
|
return acc;
|
|
4664
4724
|
}, []);
|
|
4665
4725
|
// When close button is enabled it's the first focusable element.
|
|
@@ -4681,21 +4741,21 @@ const MgModal = class {
|
|
|
4681
4741
|
this.handleClose = () => {
|
|
4682
4742
|
this.hide = true;
|
|
4683
4743
|
};
|
|
4684
|
-
this.identifier =
|
|
4744
|
+
this.identifier = mgMenu_conf.je('mg-modal');
|
|
4685
4745
|
this.dialogRole = dialogRoles[0];
|
|
4686
4746
|
this.modalTitle = undefined;
|
|
4687
4747
|
this.closeButton = false;
|
|
4688
4748
|
this.hide = undefined;
|
|
4689
4749
|
this.hasActions = false;
|
|
4690
4750
|
this.hasContent = false;
|
|
4691
|
-
this.classCollection = new
|
|
4751
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-modal']);
|
|
4692
4752
|
}
|
|
4693
4753
|
validateDialogRole(newValue) {
|
|
4694
4754
|
if (!dialogRoles.includes(newValue))
|
|
4695
4755
|
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
|
|
4696
4756
|
}
|
|
4697
4757
|
validateModalTitle(newValue) {
|
|
4698
|
-
if (!
|
|
4758
|
+
if (!mgMenu_conf.He(newValue)) {
|
|
4699
4759
|
throw new Error('<mg-modal> prop "modalTitle" is required.');
|
|
4700
4760
|
}
|
|
4701
4761
|
}
|
|
@@ -4737,7 +4797,7 @@ const MgModal = class {
|
|
|
4737
4797
|
// Store body overflow
|
|
4738
4798
|
this.bodyOverflow = document.body.style.overflow;
|
|
4739
4799
|
// Get locales
|
|
4740
|
-
this.messages =
|
|
4800
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
4741
4801
|
// Validate
|
|
4742
4802
|
this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
|
|
4743
4803
|
this.hasContent = this.element.querySelector('[slot="content"]') !== null;
|
|
@@ -4779,7 +4839,7 @@ const MgModal = class {
|
|
|
4779
4839
|
"hide": ["validateHide"]
|
|
4780
4840
|
}; }
|
|
4781
4841
|
};
|
|
4782
|
-
MgModal.style =
|
|
4842
|
+
MgModal.style = MgModalStyle0;
|
|
4783
4843
|
|
|
4784
4844
|
var NavigationAction;
|
|
4785
4845
|
(function (NavigationAction) {
|
|
@@ -4788,6 +4848,7 @@ var NavigationAction;
|
|
|
4788
4848
|
})(NavigationAction || (NavigationAction = {}));
|
|
4789
4849
|
|
|
4790
4850
|
const mgPaginationCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;flex-direction:row;align-items:center}.mg-c-pagination mg-input-select{margin-right:.5rem}.mg-c-pagination mg-button{display:flex}.mg-c-pagination mg-button:first-of-type{margin-right:1rem}.mg-c-pagination mg-button:last-of-type{margin-left:1rem}.mg-c-pagination.mg-c-pagination--hide-page-count mg-button{margin:0}";
|
|
4851
|
+
const MgPaginationStyle0 = mgPaginationCss;
|
|
4791
4852
|
|
|
4792
4853
|
/**
|
|
4793
4854
|
* Range generator
|
|
@@ -4841,7 +4902,7 @@ const MgPagination = class {
|
|
|
4841
4902
|
this.handleGoToPage = (action, disabled) => {
|
|
4842
4903
|
!disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
|
|
4843
4904
|
};
|
|
4844
|
-
this.identifier =
|
|
4905
|
+
this.identifier = mgMenu_conf.je('mg-pagination');
|
|
4845
4906
|
this.label = undefined;
|
|
4846
4907
|
this.hideNavigationLabels = undefined;
|
|
4847
4908
|
this.hidePageCount = undefined;
|
|
@@ -4870,7 +4931,7 @@ const MgPagination = class {
|
|
|
4870
4931
|
*/
|
|
4871
4932
|
componentWillLoad() {
|
|
4872
4933
|
// Get locales
|
|
4873
|
-
this.messages =
|
|
4934
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
4874
4935
|
// Validate
|
|
4875
4936
|
this.validateTotalPages(this.totalPages);
|
|
4876
4937
|
this.validateCurrentPage(this.currentPage);
|
|
@@ -4895,7 +4956,7 @@ const MgPagination = class {
|
|
|
4895
4956
|
"currentPage": ["validateCurrentPage"]
|
|
4896
4957
|
}; }
|
|
4897
4958
|
};
|
|
4898
|
-
MgPagination.style =
|
|
4959
|
+
MgPagination.style = MgPaginationStyle0;
|
|
4899
4960
|
|
|
4900
4961
|
/**
|
|
4901
4962
|
* Available expand toggle display options
|
|
@@ -4907,6 +4968,7 @@ const expandToggleDisplays = ['text', 'icon'];
|
|
|
4907
4968
|
const titlePositions = ['left', 'right'];
|
|
4908
4969
|
|
|
4909
4970
|
const mgPanelCss = ":host{--mg-card-border:none;--mg-card-padding:0;--mg-card-border-radius:var(--mg-panel-border-radius);--mg-card-background:hsl(var(--mg-panel-background));--mg-card-box-shadow:var(--mg-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 1rem 0 .3rem}.mg-c-panel__header.mg-c-panel__header--reverse{padding-right:.3rem;padding-left:1rem}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:.3rem 0}.mg-c-panel__header-content{min-height:var(--default-size);flex:1 auto;align-items:center;padding-left:.3rem}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:.3rem}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:.3rem}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-panel-content-padding)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:1rem}.mg-c-panel ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}";
|
|
4971
|
+
const MgPanelStyle0 = mgPanelCss;
|
|
4910
4972
|
|
|
4911
4973
|
const MgPanel = class {
|
|
4912
4974
|
constructor(hostRef) {
|
|
@@ -5005,7 +5067,7 @@ const MgPanel = class {
|
|
|
5005
5067
|
];
|
|
5006
5068
|
return this.titlePosition === 'right' ? children.reverse() : children;
|
|
5007
5069
|
};
|
|
5008
|
-
this.identifier =
|
|
5070
|
+
this.identifier = mgMenu_conf.je('mg-panel');
|
|
5009
5071
|
this.panelTitle = undefined;
|
|
5010
5072
|
this.titlePattern = undefined;
|
|
5011
5073
|
this.titlePatternErrorMessage = undefined;
|
|
@@ -5014,12 +5076,12 @@ const MgPanel = class {
|
|
|
5014
5076
|
this.expanded = false;
|
|
5015
5077
|
this.expandToggleDisplay = expandToggleDisplays[0];
|
|
5016
5078
|
this.expandToggleDisabled = undefined;
|
|
5017
|
-
this.classCollection = new
|
|
5079
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-panel']);
|
|
5018
5080
|
this.isEditing = false;
|
|
5019
5081
|
this.updatedPanelTitle = undefined;
|
|
5020
5082
|
}
|
|
5021
5083
|
validatePanelTitle(newValue) {
|
|
5022
|
-
if (!
|
|
5084
|
+
if (!mgMenu_conf.He(newValue))
|
|
5023
5085
|
throw new Error('<mg-panel> prop "panelTitle" is required.');
|
|
5024
5086
|
this.titleChange.emit(newValue);
|
|
5025
5087
|
}
|
|
@@ -5048,7 +5110,7 @@ const MgPanel = class {
|
|
|
5048
5110
|
*/
|
|
5049
5111
|
componentWillLoad() {
|
|
5050
5112
|
// Get locales
|
|
5051
|
-
this.messages =
|
|
5113
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
5052
5114
|
// Validate
|
|
5053
5115
|
this.validateTitlePattern(this.titlePattern);
|
|
5054
5116
|
this.validateTitlePattern(this.titlePatternErrorMessage);
|
|
@@ -5082,7 +5144,7 @@ const MgPanel = class {
|
|
|
5082
5144
|
"expandToggleDisplay": ["validateExpandToggleDisplay"]
|
|
5083
5145
|
}; }
|
|
5084
5146
|
};
|
|
5085
|
-
MgPanel.style =
|
|
5147
|
+
MgPanel.style = MgPanelStyle0;
|
|
5086
5148
|
|
|
5087
5149
|
var top = 'top';
|
|
5088
5150
|
var bottom = 'bottom';
|
|
@@ -6876,6 +6938,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
|
|
|
6876
6938
|
}); // eslint-disable-next-line import/no-unused-modules
|
|
6877
6939
|
|
|
6878
6940
|
const mgPopoverCss = ":host{--mg-card-padding:var(--mg-popover-padding-vertical, 1.5rem) var(--mg-popover-padding-horizontal, var(--mg-popover-padding-vertical, 1.5rem));--mg-card-border:none;--mg-card-border-radius:0.5rem;--mg-card-background:hsl(var(--mg-popover-background-color));position:relative;display:contents}:host::slotted(*){display:inline-block}";
|
|
6941
|
+
const MgPopoverStyle0 = mgPopoverCss;
|
|
6879
6942
|
|
|
6880
6943
|
const MgPopover = class {
|
|
6881
6944
|
constructor(hostRef) {
|
|
@@ -6969,7 +7032,7 @@ const MgPopover = class {
|
|
|
6969
7032
|
mgPopoverContent.setAttribute('id', this.identifier);
|
|
6970
7033
|
}
|
|
6971
7034
|
};
|
|
6972
|
-
this.identifier =
|
|
7035
|
+
this.identifier = mgMenu_conf.je('mg-popover');
|
|
6973
7036
|
this.placement = 'bottom';
|
|
6974
7037
|
this.arrowHide = false;
|
|
6975
7038
|
this.closeButton = false;
|
|
@@ -7012,7 +7075,7 @@ const MgPopover = class {
|
|
|
7012
7075
|
*/
|
|
7013
7076
|
componentWillLoad() {
|
|
7014
7077
|
// Get windows to attach events
|
|
7015
|
-
this.windows =
|
|
7078
|
+
this.windows = mgMenu_conf.Ne(window);
|
|
7016
7079
|
// render mg-popover-content slot
|
|
7017
7080
|
this.renderPopoverContent();
|
|
7018
7081
|
this.validateCloseButton(this.closeButton);
|
|
@@ -7084,9 +7147,10 @@ const MgPopover = class {
|
|
|
7084
7147
|
"display": ["handleDisplay"]
|
|
7085
7148
|
}; }
|
|
7086
7149
|
};
|
|
7087
|
-
MgPopover.style =
|
|
7150
|
+
MgPopover.style = MgPopoverStyle0;
|
|
7088
7151
|
|
|
7089
7152
|
const mgPopoverContentCss = ":host{position:relative;z-index:2000;display:none;padding:1rem;color:hsl(var(--mg-popover-font-color))}:host([data-show]){display:block}:host([data-popper-placement^=left-start]),:host([data-popper-placement^=left-end]),:host([data-popper-placement^=right-start]),:host([data-popper-placement^=right-end]){padding:0 1rem}.mg-c-popover-content{--mg-card-max-width:var(--mg-popover-max-width);--mg-card-min-width:var(--mg-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size)*var(--line-height))/2);margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size))/2);margin-left:3rem;float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}:host([data-popper-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-popper-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-popper-placement$=end][data-arrow-hide]),:host([data-popper-placement^=left][data-arrow-hide]){padding-right:0}:host([data-popper-placement$=start][data-arrow-hide]),:host([data-popper-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(3rem + 2*var(--mg-card-border-radius) + 2rem);height:calc(3rem + 2*var(--mg-card-border-radius) + 2rem);visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-popper-placement^=top]) ::slotted([slot=arrow]),:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){height:1rem}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-card-border-radius) + 1rem);border-right:calc(3rem/2) solid rgba(0,0,0,0);border-left:calc(3rem/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=top]) ::slotted([slot=arrow]){bottom:.1rem;filter:drop-shadow(0 0.5rem 0.25rem hsl(var(--color-dark)/15%))}:host([data-popper-placement^=top]) ::slotted([slot=arrow])::before{border-top:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow]){top:.1rem;filter:drop-shadow(0 -0.5rem 0.25rem hsl(var(--color-dark)/15%))}:host([data-popper-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left]) ::slotted([slot=arrow]),:host([data-popper-placement^=right]) ::slotted([slot=arrow]){width:1rem}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-card-border-radius) + 1rem);border-top:calc(3rem/2) solid rgba(0,0,0,0);border-bottom:calc(3rem/2) solid rgba(0,0,0,0)}:host([data-popper-placement^=left]) ::slotted([slot=arrow]){right:.1rem;filter:drop-shadow(0.5rem 0 0.25rem hsl(var(--color-dark)/15%))}:host([data-popper-placement^=left]) ::slotted([slot=arrow])::before{border-left:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=right]) ::slotted([slot=arrow]){left:.1rem;filter:drop-shadow(-0.5rem 0 0.25rem hsl(var(--color-dark)/15%))}:host([data-popper-placement^=right]) ::slotted([slot=arrow])::before{border-right:1rem solid hsl(var(--mg-popover-background-color))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=left-end]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-start]) ::slotted([slot=arrow]),:host([data-popper-placement^=right-end]) ::slotted([slot=arrow]){height:calc(3rem + 2*var(--mg-card-border-radius))}:host([data-popper-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-popper-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-card-border-radius)}";
|
|
7153
|
+
const MgPopoverContentStyle0 = mgPopoverContentCss;
|
|
7090
7154
|
|
|
7091
7155
|
const MgPopoverContent = class {
|
|
7092
7156
|
constructor(hostRef) {
|
|
@@ -7099,7 +7163,7 @@ const MgPopoverContent = class {
|
|
|
7099
7163
|
this.hideContent.emit();
|
|
7100
7164
|
};
|
|
7101
7165
|
this.closeButton = false;
|
|
7102
|
-
this.classCollection = new
|
|
7166
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-popover-content']);
|
|
7103
7167
|
}
|
|
7104
7168
|
/*************
|
|
7105
7169
|
* Lifecycle *
|
|
@@ -7109,7 +7173,7 @@ const MgPopoverContent = class {
|
|
|
7109
7173
|
*/
|
|
7110
7174
|
componentWillLoad() {
|
|
7111
7175
|
// Get locales
|
|
7112
|
-
this.messages =
|
|
7176
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
7113
7177
|
}
|
|
7114
7178
|
/**
|
|
7115
7179
|
* Check if component slots are valide
|
|
@@ -7117,7 +7181,7 @@ const MgPopoverContent = class {
|
|
|
7117
7181
|
componentDidLoad() {
|
|
7118
7182
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
7119
7183
|
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
7120
|
-
if (slottedTitleElement && !
|
|
7184
|
+
if (slottedTitleElement && !mgMenu_conf._e(slottedTitleElement, headingTags)) {
|
|
7121
7185
|
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
|
|
7122
7186
|
}
|
|
7123
7187
|
}
|
|
@@ -7130,9 +7194,10 @@ const MgPopoverContent = class {
|
|
|
7130
7194
|
}
|
|
7131
7195
|
get element() { return index.getElement(this); }
|
|
7132
7196
|
};
|
|
7133
|
-
MgPopoverContent.style =
|
|
7197
|
+
MgPopoverContent.style = MgPopoverContentStyle0;
|
|
7134
7198
|
|
|
7135
7199
|
const mgSkipLinksCss = ".mg-c-skip-links{position:absolute;background:hsl(var(--color-light));opacity:0;transform:translateY(-100%)}.mg-c-skip-links:focus-within{position:relative;opacity:1;transform:translateY(0)}.mg-c-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;padding:.64rem 1.8rem;margin:0;gap:.6rem;list-style:none}.mg-c-skip-links__link{display:inline-block;padding:1.2rem;color:hsl(var(--color-dark))}.mg-c-skip-links__link:hover{background:hsl(var(--color-dark)/10%)}";
|
|
7200
|
+
const MgSkipLinksStyle0 = mgSkipLinksCss;
|
|
7136
7201
|
|
|
7137
7202
|
const MgSkipLinks = class {
|
|
7138
7203
|
constructor(hostRef) {
|
|
@@ -7152,7 +7217,7 @@ const MgSkipLinks = class {
|
|
|
7152
7217
|
this.links = undefined;
|
|
7153
7218
|
}
|
|
7154
7219
|
validateLinks(links) {
|
|
7155
|
-
if (links === undefined || links.length === 0 || links.some(link => !
|
|
7220
|
+
if (links === undefined || links.length === 0 || links.some(link => !mgMenu_conf.He(link.href) || !link.href.startsWith('#') || !mgMenu_conf.He(link.label))) {
|
|
7156
7221
|
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.`);
|
|
7157
7222
|
}
|
|
7158
7223
|
}
|
|
@@ -7164,7 +7229,7 @@ const MgSkipLinks = class {
|
|
|
7164
7229
|
*/
|
|
7165
7230
|
componentWillLoad() {
|
|
7166
7231
|
this.validateLinks(this.links);
|
|
7167
|
-
this.messages =
|
|
7232
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
7168
7233
|
}
|
|
7169
7234
|
/**
|
|
7170
7235
|
* Render
|
|
@@ -7178,7 +7243,7 @@ const MgSkipLinks = class {
|
|
|
7178
7243
|
"links": ["validateLinks"]
|
|
7179
7244
|
}; }
|
|
7180
7245
|
};
|
|
7181
|
-
MgSkipLinks.style =
|
|
7246
|
+
MgSkipLinks.style = MgSkipLinksStyle0;
|
|
7182
7247
|
|
|
7183
7248
|
/**
|
|
7184
7249
|
* Available tabs items status
|
|
@@ -7196,6 +7261,7 @@ var Status;
|
|
|
7196
7261
|
const sizes = ['regular', 'large'];
|
|
7197
7262
|
|
|
7198
7263
|
const mgTabsCss = ".mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular{padding:1rem 2rem}.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular ::slotted([slot=metadata]){font-size:var(--font-size)}.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular.mg-c-tabs__navigation-button--horizontal{padding-bottom:calc(1rem - 0.3rem)}.mg-c-tabs.mg-c-tabs--size-regular .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-regular.mg-c-tabs__navigation-button--vertical{padding-left:calc(2rem - 0.3rem)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large{padding:1.5rem 3rem}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=metadata]){font-size:calc(var(--font-size) + .2rem)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--horizontal{padding-bottom:calc(1.5rem - 0.3rem)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--vertical{padding-left:calc(3rem - 0.3rem)}.mg-c-tabs__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:hsl(var(--mg-tabs-color-hsl, var(--color-dark)));column-gap:var(--mg-tabs-navigation-button-column-gap, 1rem);cursor:pointer;font-family:var(--font-family);font-weight:400;line-height:var(--line-height);text-decoration:none;white-space:nowrap}.mg-c-tabs__navigation-button:disabled,.mg-c-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-disabled-opacity)}.mg-c-tabs__navigation-button:focus-visible{z-index:10}.mg-c-tabs__navigation-button:hover:not(.mg-c-tabs__navigation-button--disabled),.mg-c-tabs__navigation-button:focus-visible:not(.mg-c-tabs__navigation-button--disabled){background-color:hsl(var(--mg-tabs-focused-background-color-hsl)/10%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active{color:hsl(var(--mg-tabs-color-active-hsl));font-weight:600}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--horizontal{border-bottom-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--vertical{border-left-color:hsl(var(--mg-tabs-border-color-active-hsl))}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--hidden{display:none}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal{border-bottom:.3rem solid rgba(0,0,0,0)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical{border-left:.3rem solid rgba(0,0,0,0)}.mg-c-tabs__header{display:flex;flex-flow:row wrap;border-bottom:var(--mg-tabs-border-bottom)}.mg-c-tabs__content-container:focus-visible{outline:none}.mg-c-tabs__navigation-button-text{flex:0 0 content}";
|
|
7264
|
+
const MgTabsStyle0 = mgTabsCss;
|
|
7199
7265
|
|
|
7200
7266
|
/**
|
|
7201
7267
|
* type TabItem validation function
|
|
@@ -7303,7 +7369,7 @@ const MgTabs = class {
|
|
|
7303
7369
|
*/
|
|
7304
7370
|
this.resetFocus = () => {
|
|
7305
7371
|
// update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
|
|
7306
|
-
|
|
7372
|
+
mgMenu_conf.Pe(() => {
|
|
7307
7373
|
this.tabFocus = undefined;
|
|
7308
7374
|
Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
|
|
7309
7375
|
tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
|
|
@@ -7318,16 +7384,16 @@ const MgTabs = class {
|
|
|
7318
7384
|
if (slots.length !== this.tabs.length)
|
|
7319
7385
|
throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
|
|
7320
7386
|
};
|
|
7321
|
-
this.identifier =
|
|
7387
|
+
this.identifier = mgMenu_conf.je('mg-tabs');
|
|
7322
7388
|
this.label = undefined;
|
|
7323
7389
|
this.size = 'regular';
|
|
7324
7390
|
this.items = undefined;
|
|
7325
7391
|
this.activeTab = undefined;
|
|
7326
7392
|
this.tabs = [];
|
|
7327
|
-
this.classCollection = new
|
|
7393
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-tabs']);
|
|
7328
7394
|
}
|
|
7329
7395
|
validateLabel(newValue) {
|
|
7330
|
-
if (!
|
|
7396
|
+
if (!mgMenu_conf.He(newValue)) {
|
|
7331
7397
|
throw new Error('<mg-tabs> prop "label" is required.');
|
|
7332
7398
|
}
|
|
7333
7399
|
}
|
|
@@ -7339,7 +7405,7 @@ const MgTabs = class {
|
|
|
7339
7405
|
}
|
|
7340
7406
|
validateItems(newValue) {
|
|
7341
7407
|
// String array
|
|
7342
|
-
if (
|
|
7408
|
+
if (mgMenu_conf.De(newValue))
|
|
7343
7409
|
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
7344
7410
|
// Object array
|
|
7345
7411
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
@@ -7417,7 +7483,7 @@ const MgTabs = class {
|
|
|
7417
7483
|
"activeTab": ["validateActiveTab"]
|
|
7418
7484
|
}; }
|
|
7419
7485
|
};
|
|
7420
|
-
MgTabs.style =
|
|
7486
|
+
MgTabs.style = MgTabsStyle0;
|
|
7421
7487
|
|
|
7422
7488
|
/**
|
|
7423
7489
|
* List of all possibles variants
|
|
@@ -7425,6 +7491,7 @@ MgTabs.style = mgTabsCss;
|
|
|
7425
7491
|
const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
|
|
7426
7492
|
|
|
7427
7493
|
const mgTagCss = ":host{display:inline-block}.mg-c-tag{display:inline-flex;min-height:var(--mg-tag-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-tag-height) - .2rem - var(--mg-tag-font-size)*var(--line-height))/2) .6rem;border:.1rem solid;border-radius:var(--mg-tag-border-radius);font-size:var(--mg-tag-font-size);font-weight:600;text-align:center;vertical-align:middle}.mg-c-tag.mg-c-tag--primary{border-color:hsl(var(--color-dark));background-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-c-tag.mg-c-tag--primary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft{border-color:hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));background-color:hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--secondary{border-color:hsl(var(--color-light));background-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-light))}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft{border-color:hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));background-color:hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--success{border-color:hsl(var(--color-success));background-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--success.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-success))}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft{border-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-success))}.mg-c-tag.mg-c-tag--warning{border-color:hsl(var(--color-warning));background-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-c-tag.mg-c-tag--warning.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-warning))}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft{border-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-warning))}.mg-c-tag.mg-c-tag--danger{border-color:hsl(var(--color-danger));background-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-c-tag.mg-c-tag--danger.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-danger))}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft{border-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-danger))}.mg-c-tag.mg-c-tag--info{border-color:hsl(var(--color-info));background-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-c-tag.mg-c-tag--info.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-info))}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft{border-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));color:hsl(var(--color-dark));font-weight:400}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft ::slotted(mg-icon){color:hsl(var(--color-info))}::slotted(mg-icon){margin-right:.4rem}slot{display:inline-flex;align-items:center}";
|
|
7494
|
+
const MgTagStyle0 = mgTagCss;
|
|
7428
7495
|
|
|
7429
7496
|
const MgTag = class {
|
|
7430
7497
|
constructor(hostRef) {
|
|
@@ -7438,7 +7505,7 @@ const MgTag = class {
|
|
|
7438
7505
|
this.variant = variants[0];
|
|
7439
7506
|
this.outline = undefined;
|
|
7440
7507
|
this.soft = undefined;
|
|
7441
|
-
this.classCollection = new
|
|
7508
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-tag']);
|
|
7442
7509
|
}
|
|
7443
7510
|
validateVariant(newValue, oldValue) {
|
|
7444
7511
|
if (!variants.includes(newValue)) {
|
|
@@ -7475,7 +7542,7 @@ const MgTag = class {
|
|
|
7475
7542
|
* @param textContent - html element textContent property
|
|
7476
7543
|
*/
|
|
7477
7544
|
validateTextContent(textContent) {
|
|
7478
|
-
if (!
|
|
7545
|
+
if (!mgMenu_conf.He(textContent))
|
|
7479
7546
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
7480
7547
|
}
|
|
7481
7548
|
/*************
|
|
@@ -7504,7 +7571,7 @@ const MgTag = class {
|
|
|
7504
7571
|
"soft": ["validateSoft"]
|
|
7505
7572
|
}; }
|
|
7506
7573
|
};
|
|
7507
|
-
MgTag.style =
|
|
7574
|
+
MgTag.style = MgTagStyle0;
|
|
7508
7575
|
|
|
7509
7576
|
var Guard;
|
|
7510
7577
|
(function (Guard) {
|
|
@@ -7514,6 +7581,7 @@ var Guard;
|
|
|
7514
7581
|
})(Guard || (Guard = {}));
|
|
7515
7582
|
|
|
7516
7583
|
const mgTooltipCss = ":host{display:inline-block}";
|
|
7584
|
+
const MgTooltipStyle0 = mgTooltipCss;
|
|
7517
7585
|
|
|
7518
7586
|
/**
|
|
7519
7587
|
* HTMLMgButtonElement type guard
|
|
@@ -7533,7 +7601,7 @@ const MgTooltip = class {
|
|
|
7533
7601
|
// Enable the event listeners
|
|
7534
7602
|
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
7535
7603
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
7536
|
-
|
|
7604
|
+
mgMenu_conf.Pe(() => {
|
|
7537
7605
|
this.windows.forEach((localWindow) => {
|
|
7538
7606
|
localWindow.addEventListener('click', this.clickOutside, false);
|
|
7539
7607
|
localWindow.addEventListener('keydown', this.pressEscape, false);
|
|
@@ -7698,7 +7766,7 @@ const MgTooltip = class {
|
|
|
7698
7766
|
});
|
|
7699
7767
|
});
|
|
7700
7768
|
};
|
|
7701
|
-
this.identifier =
|
|
7769
|
+
this.identifier = mgMenu_conf.je('mg-tooltip');
|
|
7702
7770
|
this.message = undefined;
|
|
7703
7771
|
this.placement = 'bottom';
|
|
7704
7772
|
this.display = false;
|
|
@@ -7709,7 +7777,7 @@ const MgTooltip = class {
|
|
|
7709
7777
|
this.renderTooltipContent();
|
|
7710
7778
|
}
|
|
7711
7779
|
validateMessage(newValue) {
|
|
7712
|
-
if (!
|
|
7780
|
+
if (!mgMenu_conf.He(newValue)) {
|
|
7713
7781
|
throw new Error('<mg-tooltip> prop "message" is required.');
|
|
7714
7782
|
}
|
|
7715
7783
|
this.mgTooltipContent.message = newValue;
|
|
@@ -7758,7 +7826,7 @@ const MgTooltip = class {
|
|
|
7758
7826
|
*/
|
|
7759
7827
|
componentWillLoad() {
|
|
7760
7828
|
// Get windows to attach events
|
|
7761
|
-
this.windows =
|
|
7829
|
+
this.windows = mgMenu_conf.Ne(window);
|
|
7762
7830
|
// Get tooltip element
|
|
7763
7831
|
this.renderTooltipContent();
|
|
7764
7832
|
this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
|
|
@@ -7777,7 +7845,7 @@ const MgTooltip = class {
|
|
|
7777
7845
|
// get slotted element wich is not the tooltip
|
|
7778
7846
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
7779
7847
|
// Get interactive element
|
|
7780
|
-
const interactiveElement = slotElement.matches(
|
|
7848
|
+
const interactiveElement = slotElement.matches(mgMenu_conf.Be) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(mgMenu_conf.Be);
|
|
7781
7849
|
// define selected element to become tooltip selector
|
|
7782
7850
|
this.tooltipedElement = interactiveElement || slotElement;
|
|
7783
7851
|
// Check if slotted element is a disabled mg-button
|
|
@@ -7819,9 +7887,10 @@ const MgTooltip = class {
|
|
|
7819
7887
|
"disabled": ["validateDisabled"]
|
|
7820
7888
|
}; }
|
|
7821
7889
|
};
|
|
7822
|
-
MgTooltip.style =
|
|
7890
|
+
MgTooltip.style = MgTooltipStyle0;
|
|
7823
7891
|
|
|
7824
7892
|
const mgTooltipContentCss = ":host{z-index:1000;display:none;max-width:40rem;box-sizing:border-box;padding:.5rem .8rem;border-radius:var(--mg-tooltip-border-radius);background-color:hsl(var(--mg-tooltip-background-color));color:hsl(var(--mg-tooltip-font-color));text-align:start}:host([data-show]){display:block}::slotted([slot=arrow]){visibility:hidden}::slotted([slot=arrow])::before{content:\"\";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:.8rem;height:.8rem;background-color:hsl(var(--mg-tooltip-background-color))}:host([data-popper-placement^=top])>::slotted([slot=arrow]){bottom:-0.4rem}:host([data-popper-placement^=bottom])>::slotted([slot=arrow]){top:-0.4rem}:host([data-popper-placement^=left])>::slotted([slot=arrow]){right:-0.4rem}:host([data-popper-placement^=right])>::slotted([slot=arrow]){left:-0.4rem}";
|
|
7893
|
+
const MgTooltipContentStyle0 = mgTooltipContentCss;
|
|
7825
7894
|
|
|
7826
7895
|
const MgTooltipContent = class {
|
|
7827
7896
|
constructor(hostRef) {
|
|
@@ -7839,7 +7908,7 @@ const MgTooltipContent = class {
|
|
|
7839
7908
|
return (index.h(index.Host, { role: "tooltip" }, index.h("span", { innerHTML: this.message, class: "mg-tooltip-content__message" }), index.h("slot", { name: "arrow" })));
|
|
7840
7909
|
}
|
|
7841
7910
|
};
|
|
7842
|
-
MgTooltipContent.style =
|
|
7911
|
+
MgTooltipContent.style = MgTooltipContentStyle0;
|
|
7843
7912
|
|
|
7844
7913
|
exports.mg_action_more = MgActionMore;
|
|
7845
7914
|
exports.mg_badge = MgBadge;
|