@mgdis/mg-components 5.22.0 → 5.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-28bf9033.js → index-0cf3e6d5.js} +22 -13
- package/dist/cjs/index-0cf3e6d5.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mg-action-more_34.cjs.entry.js +225 -158
- package/dist/cjs/mg-action-more_34.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-components.cjs.js +2 -2
- package/dist/cjs/mg-components.cjs.js.map +1 -1
- package/dist/cjs/mg-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 +35 -6
- 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 +1 -2
- 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/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 +41 -10
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +7 -6
- 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 +2 -2
- package/dist/esm/mg-action-more_34.entry.js +193 -126
- package/dist/esm/mg-action-more_34.entry.js.map +1 -1
- package/dist/esm/mg-components.js +3 -3
- package/dist/esm/mg-components.js.map +1 -1
- package/dist/esm/mg-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-d6d71404.entry.js +2 -0
- package/dist/mg-components/p-d6d71404.entry.js.map +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 +18 -1
- package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +1 -1
- 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 +33 -32
- 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;
|
|
@@ -2154,14 +2196,14 @@ const MgInputDate = class {
|
|
|
2154
2196
|
this.invalid = undefined;
|
|
2155
2197
|
this.min = undefined;
|
|
2156
2198
|
this.max = undefined;
|
|
2157
|
-
this.classCollection = new
|
|
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 {
|
|
@@ -2179,7 +2221,7 @@ const MgInputDate = class {
|
|
|
2179
2221
|
}
|
|
2180
2222
|
}
|
|
2181
2223
|
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' &&
|
|
2224
|
+
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)))) {
|
|
2183
2225
|
throw new Error("<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd");
|
|
2184
2226
|
}
|
|
2185
2227
|
}
|
|
@@ -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
|
} })));
|
|
@@ -2267,7 +2312,7 @@ const MgInputDate = class {
|
|
|
2267
2312
|
"max": ["validateMinMax"]
|
|
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
|
*/
|
|
@@ -2411,7 +2457,7 @@ const MgInputNumeric = class {
|
|
|
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
|
|
@@ -2585,9 +2631,10 @@ const MgInputNumeric = class {
|
|
|
2585
2631
|
"decimalLength": ["validateDecimalLength"]
|
|
2586
2632
|
}; }
|
|
2587
2633
|
};
|
|
2588
|
-
MgInputNumeric.style =
|
|
2634
|
+
MgInputNumeric.style = MgInputNumericStyle0;
|
|
2589
2635
|
|
|
2590
2636
|
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}}";
|
|
2637
|
+
const MgInputPasswordStyle0 = mgInputPasswordCss;
|
|
2591
2638
|
|
|
2592
2639
|
const MgInputPassword = class {
|
|
2593
2640
|
constructor(hostRef) {
|
|
@@ -2655,7 +2702,7 @@ const MgInputPassword = class {
|
|
|
2655
2702
|
this.helpText = undefined;
|
|
2656
2703
|
this.valid = undefined;
|
|
2657
2704
|
this.invalid = undefined;
|
|
2658
|
-
this.classCollection = new
|
|
2705
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--password']);
|
|
2659
2706
|
this.errorMessage = undefined;
|
|
2660
2707
|
}
|
|
2661
2708
|
handleValue(newValue) {
|
|
@@ -2691,7 +2738,7 @@ const MgInputPassword = class {
|
|
|
2691
2738
|
if (typeof valid !== 'boolean') {
|
|
2692
2739
|
throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
|
|
2693
2740
|
}
|
|
2694
|
-
else if (!
|
|
2741
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
2695
2742
|
throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
|
|
2696
2743
|
}
|
|
2697
2744
|
else {
|
|
@@ -2721,7 +2768,7 @@ const MgInputPassword = class {
|
|
|
2721
2768
|
*/
|
|
2722
2769
|
componentWillLoad() {
|
|
2723
2770
|
// Get locales
|
|
2724
|
-
this.messages =
|
|
2771
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
2725
2772
|
// Check validity when component is ready
|
|
2726
2773
|
// return a promise to process action only in the FIRST render().
|
|
2727
2774
|
// https://stenciljs.com/docs/component-lifecycle#componentwillload
|
|
@@ -2747,9 +2794,10 @@ const MgInputPassword = class {
|
|
|
2747
2794
|
"disabled": ["handleValidityChange"]
|
|
2748
2795
|
}; }
|
|
2749
2796
|
};
|
|
2750
|
-
MgInputPassword.style =
|
|
2797
|
+
MgInputPassword.style = MgInputPasswordStyle0;
|
|
2751
2798
|
|
|
2752
2799
|
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}}";
|
|
2800
|
+
const MgInputRadioStyle0 = mgInputRadioCss;
|
|
2753
2801
|
|
|
2754
2802
|
/**
|
|
2755
2803
|
* type Option validation function
|
|
@@ -2830,7 +2878,7 @@ const MgInputRadio = class {
|
|
|
2830
2878
|
this.helpText = undefined;
|
|
2831
2879
|
this.valid = undefined;
|
|
2832
2880
|
this.invalid = undefined;
|
|
2833
|
-
this.classCollection = new
|
|
2881
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--radio']);
|
|
2834
2882
|
this.errorMessage = undefined;
|
|
2835
2883
|
this.options = undefined;
|
|
2836
2884
|
}
|
|
@@ -2843,7 +2891,7 @@ const MgInputRadio = class {
|
|
|
2843
2891
|
throw new Error('<mg-input-radio> prop "items" require at least 2 items.');
|
|
2844
2892
|
}
|
|
2845
2893
|
// String array
|
|
2846
|
-
else if (
|
|
2894
|
+
else if (mgMenu_conf.De(newValue)) {
|
|
2847
2895
|
this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
|
|
2848
2896
|
}
|
|
2849
2897
|
// Object array
|
|
@@ -2884,7 +2932,7 @@ const MgInputRadio = class {
|
|
|
2884
2932
|
if (typeof valid !== 'boolean') {
|
|
2885
2933
|
throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
|
|
2886
2934
|
}
|
|
2887
|
-
else if (!
|
|
2935
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
2888
2936
|
throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
|
|
2889
2937
|
}
|
|
2890
2938
|
else {
|
|
@@ -2914,7 +2962,7 @@ const MgInputRadio = class {
|
|
|
2914
2962
|
*/
|
|
2915
2963
|
componentWillLoad() {
|
|
2916
2964
|
// Get locales
|
|
2917
|
-
this.messages =
|
|
2965
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
2918
2966
|
// Validate
|
|
2919
2967
|
this.validateItems(this.items);
|
|
2920
2968
|
// Check validity when component is ready
|
|
@@ -2943,9 +2991,10 @@ const MgInputRadio = class {
|
|
|
2943
2991
|
"disabled": ["handleValidityChange"]
|
|
2944
2992
|
}; }
|
|
2945
2993
|
};
|
|
2946
|
-
MgInputRadio.style =
|
|
2994
|
+
MgInputRadio.style = MgInputRadioStyle0;
|
|
2947
2995
|
|
|
2948
2996
|
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}";
|
|
2997
|
+
const MgInputSelectStyle0 = mgInputSelectCss;
|
|
2949
2998
|
|
|
2950
2999
|
/**
|
|
2951
3000
|
* Check if item is a well configured option
|
|
@@ -3025,7 +3074,7 @@ const MgInputSelect = class {
|
|
|
3025
3074
|
if (this.input.value === '') {
|
|
3026
3075
|
this.setValue(null);
|
|
3027
3076
|
}
|
|
3028
|
-
else if (
|
|
3077
|
+
else if (mgMenu_conf.De(this.items) && this.items.includes(this.input.value)) {
|
|
3029
3078
|
this.setValue(this.input.value);
|
|
3030
3079
|
}
|
|
3031
3080
|
else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
|
|
@@ -3099,7 +3148,7 @@ const MgInputSelect = class {
|
|
|
3099
3148
|
this.helpText = undefined;
|
|
3100
3149
|
this.valid = undefined;
|
|
3101
3150
|
this.invalid = undefined;
|
|
3102
|
-
this.classCollection = new
|
|
3151
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--select']);
|
|
3103
3152
|
this.errorMessage = undefined;
|
|
3104
3153
|
this.options = undefined;
|
|
3105
3154
|
this.valueExist = undefined;
|
|
@@ -3107,7 +3156,7 @@ const MgInputSelect = class {
|
|
|
3107
3156
|
}
|
|
3108
3157
|
validateValue(newValue) {
|
|
3109
3158
|
var _a, _b;
|
|
3110
|
-
if (
|
|
3159
|
+
if (mgMenu_conf.De(this.items) && typeof newValue === 'string') {
|
|
3111
3160
|
this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
|
|
3112
3161
|
}
|
|
3113
3162
|
else if (allItemsAreOptions(this.items)) {
|
|
@@ -3124,7 +3173,7 @@ const MgInputSelect = class {
|
|
|
3124
3173
|
this.options = [];
|
|
3125
3174
|
}
|
|
3126
3175
|
// String array
|
|
3127
|
-
else if (
|
|
3176
|
+
else if (mgMenu_conf.De(newValue)) {
|
|
3128
3177
|
if (typeof this.value === 'string')
|
|
3129
3178
|
this.valueExist = newValue.includes(this.value);
|
|
3130
3179
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
@@ -3175,7 +3224,7 @@ const MgInputSelect = class {
|
|
|
3175
3224
|
if (typeof valid !== 'boolean') {
|
|
3176
3225
|
throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
|
|
3177
3226
|
}
|
|
3178
|
-
else if (!
|
|
3227
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
3179
3228
|
throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
|
|
3180
3229
|
}
|
|
3181
3230
|
else {
|
|
@@ -3205,7 +3254,7 @@ const MgInputSelect = class {
|
|
|
3205
3254
|
*/
|
|
3206
3255
|
componentWillLoad() {
|
|
3207
3256
|
// Get locales
|
|
3208
|
-
this.messages =
|
|
3257
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
3209
3258
|
// Validate
|
|
3210
3259
|
this.validateItems(this.items);
|
|
3211
3260
|
this.validateValue(this.value);
|
|
@@ -3240,9 +3289,10 @@ const MgInputSelect = class {
|
|
|
3240
3289
|
"disabled": ["handleValidityChange"]
|
|
3241
3290
|
}; }
|
|
3242
3291
|
};
|
|
3243
|
-
MgInputSelect.style =
|
|
3292
|
+
MgInputSelect.style = MgInputSelectStyle0;
|
|
3244
3293
|
|
|
3245
3294
|
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)}";
|
|
3295
|
+
const MgInputTextStyle0 = mgInputTextCss;
|
|
3246
3296
|
|
|
3247
3297
|
const isDatalistOption = (options) => Array.isArray(options) && options.every(option => typeof option === 'string');
|
|
3248
3298
|
const MgInputText = class {
|
|
@@ -3274,7 +3324,7 @@ const MgInputText = class {
|
|
|
3274
3324
|
*/
|
|
3275
3325
|
this.handleFocus = () => {
|
|
3276
3326
|
this.classCollection.add(this.classFocus);
|
|
3277
|
-
this.classCollection = new
|
|
3327
|
+
this.classCollection = new mgMenu_conf.Fe(this.classCollection.classes);
|
|
3278
3328
|
};
|
|
3279
3329
|
/**
|
|
3280
3330
|
* Handle blur event
|
|
@@ -3282,7 +3332,7 @@ const MgInputText = class {
|
|
|
3282
3332
|
this.handleBlur = () => {
|
|
3283
3333
|
// Manage focus
|
|
3284
3334
|
this.classCollection.delete(this.classFocus);
|
|
3285
|
-
this.classCollection = new
|
|
3335
|
+
this.classCollection = new mgMenu_conf.Fe(this.classCollection.classes);
|
|
3286
3336
|
// Display Error
|
|
3287
3337
|
this.handlerInProgress = Handler.BLUR;
|
|
3288
3338
|
this.displayError().finally(() => {
|
|
@@ -3357,7 +3407,7 @@ const MgInputText = class {
|
|
|
3357
3407
|
this.helpText = undefined;
|
|
3358
3408
|
this.valid = undefined;
|
|
3359
3409
|
this.invalid = undefined;
|
|
3360
|
-
this.classCollection = new
|
|
3410
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--text']);
|
|
3361
3411
|
this.errorMessage = undefined;
|
|
3362
3412
|
}
|
|
3363
3413
|
handleValue(newValue) {
|
|
@@ -3387,7 +3437,7 @@ const MgInputText = class {
|
|
|
3387
3437
|
}
|
|
3388
3438
|
}
|
|
3389
3439
|
validatePattern(newValue) {
|
|
3390
|
-
if (newValue !== undefined && !(
|
|
3440
|
+
if (newValue !== undefined && !(mgMenu_conf.He(this.pattern) && mgMenu_conf.He(this.patternErrorMessage))) {
|
|
3391
3441
|
throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
|
|
3392
3442
|
}
|
|
3393
3443
|
}
|
|
@@ -3417,7 +3467,7 @@ const MgInputText = class {
|
|
|
3417
3467
|
if (typeof valid !== 'boolean') {
|
|
3418
3468
|
throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
|
|
3419
3469
|
}
|
|
3420
|
-
else if (!
|
|
3470
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
3421
3471
|
throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
|
|
3422
3472
|
}
|
|
3423
3473
|
else {
|
|
@@ -3447,7 +3497,7 @@ const MgInputText = class {
|
|
|
3447
3497
|
*/
|
|
3448
3498
|
componentWillLoad() {
|
|
3449
3499
|
// Get locales
|
|
3450
|
-
this.messages =
|
|
3500
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
3451
3501
|
this.characterLeftId = `${this.identifier}-character-left`;
|
|
3452
3502
|
this.datalistId = `${this.identifier}-datalist`;
|
|
3453
3503
|
// Validate
|
|
@@ -3489,9 +3539,10 @@ const MgInputText = class {
|
|
|
3489
3539
|
"patternErrorMessage": ["validatePattern"]
|
|
3490
3540
|
}; }
|
|
3491
3541
|
};
|
|
3492
|
-
MgInputText.style =
|
|
3542
|
+
MgInputText.style = MgInputTextStyle0;
|
|
3493
3543
|
|
|
3494
3544
|
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}}";
|
|
3545
|
+
const MgInputTextareaStyle0 = mgInputTextareaCss;
|
|
3495
3546
|
|
|
3496
3547
|
const MgInputTextarea = class {
|
|
3497
3548
|
constructor(hostRef) {
|
|
@@ -3521,7 +3572,7 @@ const MgInputTextarea = class {
|
|
|
3521
3572
|
*/
|
|
3522
3573
|
this.handleFocus = () => {
|
|
3523
3574
|
this.classCollection.add(this.classFocus);
|
|
3524
|
-
this.classCollection = new
|
|
3575
|
+
this.classCollection = new mgMenu_conf.Fe(this.classCollection.classes);
|
|
3525
3576
|
};
|
|
3526
3577
|
/**
|
|
3527
3578
|
* Handle blur event
|
|
@@ -3529,7 +3580,7 @@ const MgInputTextarea = class {
|
|
|
3529
3580
|
this.handleBlur = () => {
|
|
3530
3581
|
// Manage focus
|
|
3531
3582
|
this.classCollection.delete(this.classFocus);
|
|
3532
|
-
this.classCollection = new
|
|
3583
|
+
this.classCollection = new mgMenu_conf.Fe(this.classCollection.classes);
|
|
3533
3584
|
// Display Error
|
|
3534
3585
|
this.handlerInProgress = Handler.BLUR;
|
|
3535
3586
|
this.displayError().finally(() => {
|
|
@@ -3592,7 +3643,7 @@ const MgInputTextarea = class {
|
|
|
3592
3643
|
this.valid = undefined;
|
|
3593
3644
|
this.invalid = undefined;
|
|
3594
3645
|
this.resizable = 'none';
|
|
3595
|
-
this.classCollection = new
|
|
3646
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--textarea']);
|
|
3596
3647
|
this.errorMessage = undefined;
|
|
3597
3648
|
}
|
|
3598
3649
|
handleValue(newValue) {
|
|
@@ -3610,7 +3661,7 @@ const MgInputTextarea = class {
|
|
|
3610
3661
|
}
|
|
3611
3662
|
}
|
|
3612
3663
|
validatePattern(newValue) {
|
|
3613
|
-
if (newValue !== undefined && !(
|
|
3664
|
+
if (newValue !== undefined && !(mgMenu_conf.He(this.pattern) && mgMenu_conf.He(this.patternErrorMessage))) {
|
|
3614
3665
|
throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
|
|
3615
3666
|
}
|
|
3616
3667
|
}
|
|
@@ -3642,7 +3693,7 @@ const MgInputTextarea = class {
|
|
|
3642
3693
|
if (typeof valid !== 'boolean') {
|
|
3643
3694
|
throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
|
|
3644
3695
|
}
|
|
3645
|
-
else if (!
|
|
3696
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
3646
3697
|
throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
|
|
3647
3698
|
}
|
|
3648
3699
|
else {
|
|
@@ -3672,7 +3723,7 @@ const MgInputTextarea = class {
|
|
|
3672
3723
|
*/
|
|
3673
3724
|
componentWillLoad() {
|
|
3674
3725
|
// Get locales
|
|
3675
|
-
this.messages =
|
|
3726
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
3676
3727
|
this.characterLeftId = `${this.identifier}-character-left`;
|
|
3677
3728
|
// Validate
|
|
3678
3729
|
this.validateDisplayCharacterLeft(this.displayCharacterLeft);
|
|
@@ -3711,9 +3762,10 @@ const MgInputTextarea = class {
|
|
|
3711
3762
|
"displayCharacterLeft": ["validateDisplayCharacterLeft"]
|
|
3712
3763
|
}; }
|
|
3713
3764
|
};
|
|
3714
|
-
MgInputTextarea.style =
|
|
3765
|
+
MgInputTextarea.style = MgInputTextareaStyle0;
|
|
3715
3766
|
|
|
3716
3767
|
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)}";
|
|
3768
|
+
const MgInputTitleStyle0 = mgInputTitleCss;
|
|
3717
3769
|
|
|
3718
3770
|
const MgInputTitle = class {
|
|
3719
3771
|
constructor(hostRef) {
|
|
@@ -3725,7 +3777,7 @@ const MgInputTitle = class {
|
|
|
3725
3777
|
this.tagName = 'label';
|
|
3726
3778
|
}
|
|
3727
3779
|
validateIdentifier(newValue) {
|
|
3728
|
-
if (!
|
|
3780
|
+
if (!mgMenu_conf.He(newValue)) {
|
|
3729
3781
|
throw new Error('<mg-input-title> prop "identifier" is required.');
|
|
3730
3782
|
}
|
|
3731
3783
|
}
|
|
@@ -3756,9 +3808,10 @@ const MgInputTitle = class {
|
|
|
3756
3808
|
"isLegend": ["validateIsLegend"]
|
|
3757
3809
|
}; }
|
|
3758
3810
|
};
|
|
3759
|
-
MgInputTitle.style =
|
|
3811
|
+
MgInputTitle.style = MgInputTitleStyle0;
|
|
3760
3812
|
|
|
3761
3813
|
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}";
|
|
3814
|
+
const MgInputToggleStyle0 = mgInputToggleCss;
|
|
3762
3815
|
|
|
3763
3816
|
/**
|
|
3764
3817
|
* type Option validation function
|
|
@@ -3825,7 +3878,7 @@ const MgInputToggle = class {
|
|
|
3825
3878
|
this.disabled = false;
|
|
3826
3879
|
this.tooltip = undefined;
|
|
3827
3880
|
this.helpText = undefined;
|
|
3828
|
-
this.classCollection = new
|
|
3881
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-input--toggle']);
|
|
3829
3882
|
this.options = undefined;
|
|
3830
3883
|
this.errorMessage = undefined;
|
|
3831
3884
|
this.valid = undefined;
|
|
@@ -3842,7 +3895,7 @@ const MgInputToggle = class {
|
|
|
3842
3895
|
throw new Error('<mg-input-toggle> prop "items" require 2 items.');
|
|
3843
3896
|
}
|
|
3844
3897
|
// String array
|
|
3845
|
-
else if (
|
|
3898
|
+
else if (mgMenu_conf.De(newValue)) {
|
|
3846
3899
|
this.options = newValue.map(item => ({ title: item, value: item }));
|
|
3847
3900
|
}
|
|
3848
3901
|
// Object array
|
|
@@ -3898,7 +3951,7 @@ const MgInputToggle = class {
|
|
|
3898
3951
|
if (typeof valid !== 'boolean') {
|
|
3899
3952
|
throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
|
|
3900
3953
|
}
|
|
3901
|
-
else if (!
|
|
3954
|
+
else if (!mgMenu_conf.He(errorMessage)) {
|
|
3902
3955
|
throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
|
|
3903
3956
|
}
|
|
3904
3957
|
else {
|
|
@@ -3966,9 +4019,10 @@ const MgInputToggle = class {
|
|
|
3966
4019
|
"checked": ["handleChecked"]
|
|
3967
4020
|
}; }
|
|
3968
4021
|
};
|
|
3969
|
-
MgInputToggle.style =
|
|
4022
|
+
MgInputToggle.style = MgInputToggleStyle0;
|
|
3970
4023
|
|
|
3971
4024
|
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}";
|
|
4025
|
+
const MgMenuStyle0 = mgMenuCss;
|
|
3972
4026
|
|
|
3973
4027
|
const MgMenu = class {
|
|
3974
4028
|
constructor(hostRef) {
|
|
@@ -4046,7 +4100,7 @@ const MgMenu = class {
|
|
|
4046
4100
|
this.element.appendChild(mgItemMore);
|
|
4047
4101
|
};
|
|
4048
4102
|
this.label = undefined;
|
|
4049
|
-
this.direction =
|
|
4103
|
+
this.direction = mgMenu_conf.Direction.HORIZONTAL;
|
|
4050
4104
|
this.itemmore = undefined;
|
|
4051
4105
|
this.size = 'regular';
|
|
4052
4106
|
this.isChildMenu = undefined;
|
|
@@ -4057,18 +4111,18 @@ const MgMenu = class {
|
|
|
4057
4111
|
}
|
|
4058
4112
|
}
|
|
4059
4113
|
validateDirection(newValue) {
|
|
4060
|
-
if (![
|
|
4061
|
-
throw new Error(`<${this.name}> prop "direction" must be one of: ${
|
|
4114
|
+
if (![mgMenu_conf.Direction.VERTICAL, mgMenu_conf.Direction.HORIZONTAL].includes(newValue)) {
|
|
4115
|
+
throw new Error(`<${this.name}> prop "direction" must be one of: ${mgMenu_conf.Direction.HORIZONTAL}, ${mgMenu_conf.Direction.VERTICAL}.`);
|
|
4062
4116
|
}
|
|
4063
4117
|
}
|
|
4064
4118
|
validateItemMore(newValue) {
|
|
4065
|
-
if (newValue !== undefined && this.direction !==
|
|
4066
|
-
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${
|
|
4119
|
+
if (newValue !== undefined && this.direction !== mgMenu_conf.Direction.HORIZONTAL) {
|
|
4120
|
+
throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${mgMenu_conf.Direction.HORIZONTAL}.`);
|
|
4067
4121
|
}
|
|
4068
4122
|
}
|
|
4069
4123
|
validateSize(newValue) {
|
|
4070
|
-
if (!
|
|
4071
|
-
throw new Error(`<${this.name}> prop "size" must be one of: ${
|
|
4124
|
+
if (!mgMenu_conf.sizes.includes(newValue)) {
|
|
4125
|
+
throw new Error(`<${this.name}> prop "size" must be one of: ${mgMenu_conf.sizes.join(', ')}.`);
|
|
4072
4126
|
}
|
|
4073
4127
|
}
|
|
4074
4128
|
/*************
|
|
@@ -4096,7 +4150,7 @@ const MgMenu = class {
|
|
|
4096
4150
|
this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
|
|
4097
4151
|
this.isChildMenu = this.element.closest('mg-menu-item') !== null;
|
|
4098
4152
|
// add mg-item-more to manage OverflowBehavior
|
|
4099
|
-
if (this.direction ===
|
|
4153
|
+
if (this.direction === mgMenu_conf.Direction.HORIZONTAL && !this.isChildMenu)
|
|
4100
4154
|
this.renderMgItemMore();
|
|
4101
4155
|
// use mutation observer to improve reactivity
|
|
4102
4156
|
new MutationObserver(entries => {
|
|
@@ -4134,9 +4188,10 @@ const MgMenu = class {
|
|
|
4134
4188
|
"size": ["validateSize"]
|
|
4135
4189
|
}; }
|
|
4136
4190
|
};
|
|
4137
|
-
MgMenu.style =
|
|
4191
|
+
MgMenu.style = MgMenuStyle0;
|
|
4138
4192
|
|
|
4139
4193
|
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}";
|
|
4194
|
+
const MgMenuItemStyle0 = mgMenuItemCss;
|
|
4140
4195
|
|
|
4141
4196
|
const MgMenuItem = class {
|
|
4142
4197
|
constructor(hostRef) {
|
|
@@ -4200,7 +4255,7 @@ const MgMenuItem = class {
|
|
|
4200
4255
|
throw new Error(`<${this.name}> slot "label" is required.`);
|
|
4201
4256
|
['label', 'metadata'].forEach(slot => {
|
|
4202
4257
|
Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
|
|
4203
|
-
if (!
|
|
4258
|
+
if (!mgMenu_conf.He(element.textContent))
|
|
4204
4259
|
throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
|
|
4205
4260
|
if ((guard && element.getAttribute('title') === null) || !guard)
|
|
4206
4261
|
element.setAttribute('title', element.textContent);
|
|
@@ -4240,7 +4295,7 @@ const MgMenuItem = class {
|
|
|
4240
4295
|
* Condition to know if component should display a mg-popover
|
|
4241
4296
|
* @returns truthy if component display popover
|
|
4242
4297
|
*/
|
|
4243
|
-
this.displayPopover = () => this.isDirection(
|
|
4298
|
+
this.displayPopover = () => this.isDirection(mgMenu_conf.Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
|
|
4244
4299
|
/************
|
|
4245
4300
|
* Handlers *
|
|
4246
4301
|
************/
|
|
@@ -4269,12 +4324,12 @@ const MgMenuItem = class {
|
|
|
4269
4324
|
* @returns HTML Element
|
|
4270
4325
|
*/
|
|
4271
4326
|
this.renderSlot = () => index.h("slot", null);
|
|
4272
|
-
this.identifier =
|
|
4327
|
+
this.identifier = mgMenu_conf.je('mg-menu-item');
|
|
4273
4328
|
this.href = undefined;
|
|
4274
4329
|
this.status = Status$1.VISIBLE;
|
|
4275
4330
|
this.expanded = false;
|
|
4276
4331
|
this.size = 'regular';
|
|
4277
|
-
this.navigationButtonClassList = new
|
|
4332
|
+
this.navigationButtonClassList = new mgMenu_conf.Fe([this.navigationButton]);
|
|
4278
4333
|
this.direction = undefined;
|
|
4279
4334
|
this.isInMainMenu = undefined;
|
|
4280
4335
|
this.isItemMore = undefined;
|
|
@@ -4319,7 +4374,7 @@ const MgMenuItem = class {
|
|
|
4319
4374
|
this.element.setAttribute('data-style-direction', newValue);
|
|
4320
4375
|
this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);
|
|
4321
4376
|
// manage all sub levels child menu-items level with data-level attribut
|
|
4322
|
-
if (this.isDirection(
|
|
4377
|
+
if (this.isDirection(mgMenu_conf.Direction.VERTICAL, newValue)) {
|
|
4323
4378
|
Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
|
|
4324
4379
|
item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
|
|
4325
4380
|
});
|
|
@@ -4349,7 +4404,7 @@ const MgMenuItem = class {
|
|
|
4349
4404
|
// has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
|
|
4350
4405
|
// we store only matching elements
|
|
4351
4406
|
this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
|
|
4352
|
-
this.badgeLabel =
|
|
4407
|
+
this.badgeLabel = mgMenu_conf.initLocales(this.element).messages.plusMenu.badgeLabel;
|
|
4353
4408
|
this.isItemMore = this.element.dataset.overflowMore !== undefined;
|
|
4354
4409
|
// Validate props
|
|
4355
4410
|
this.validateStatus(this.status);
|
|
@@ -4370,7 +4425,7 @@ const MgMenuItem = class {
|
|
|
4370
4425
|
return setTimeout(() => {
|
|
4371
4426
|
// define menu-item context states
|
|
4372
4427
|
const menu = this.element.closest('mg-menu');
|
|
4373
|
-
this.direction = this.isItemMore || menu === null ?
|
|
4428
|
+
this.direction = this.isItemMore || menu === null ? mgMenu_conf.Direction.HORIZONTAL : menu.direction;
|
|
4374
4429
|
this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;
|
|
4375
4430
|
if ((menu === null || menu === void 0 ? void 0 : menu.size) !== undefined)
|
|
4376
4431
|
this.size = menu.size;
|
|
@@ -4379,7 +4434,7 @@ const MgMenuItem = class {
|
|
|
4379
4434
|
// when main menu item contain an active item it will get the active style
|
|
4380
4435
|
// AND if item is in vertical menu it will be expanded
|
|
4381
4436
|
if (this.hasActiveChild() && this.isInMainMenu)
|
|
4382
|
-
this.expanded = this.isDirection(
|
|
4437
|
+
this.expanded = this.isDirection(mgMenu_conf.Direction.VERTICAL);
|
|
4383
4438
|
this.updateStatus([Status$1.ACTIVE]);
|
|
4384
4439
|
this.updateDisplayNotificationBadge();
|
|
4385
4440
|
this.updatePopoverGuard();
|
|
@@ -4414,7 +4469,7 @@ const MgMenuItem = class {
|
|
|
4414
4469
|
render() {
|
|
4415
4470
|
const getContainerClasses = () => ({
|
|
4416
4471
|
['mg-c-menu-item__collapse-container']: true,
|
|
4417
|
-
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(
|
|
4472
|
+
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(mgMenu_conf.Direction.HORIZONTAL),
|
|
4418
4473
|
});
|
|
4419
4474
|
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
4475
|
this.renderInteractiveElement(),
|
|
@@ -4430,7 +4485,7 @@ const MgMenuItem = class {
|
|
|
4430
4485
|
"hasChildren": ["validateHasChildren"]
|
|
4431
4486
|
}; }
|
|
4432
4487
|
};
|
|
4433
|
-
MgMenuItem.style =
|
|
4488
|
+
MgMenuItem.style = MgMenuItemStyle0;
|
|
4434
4489
|
|
|
4435
4490
|
/**
|
|
4436
4491
|
* List of all possibles message variants
|
|
@@ -4438,6 +4493,7 @@ MgMenuItem.style = mgMenuItemCss;
|
|
|
4438
4493
|
const variants$1 = ['info', 'warning', 'success', 'danger'];
|
|
4439
4494
|
|
|
4440
4495
|
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%}";
|
|
4496
|
+
const MgMessageStyle0 = mgMessageCss;
|
|
4441
4497
|
|
|
4442
4498
|
const MgMessage = class {
|
|
4443
4499
|
constructor(hostRef) {
|
|
@@ -4507,13 +4563,13 @@ const MgMessage = class {
|
|
|
4507
4563
|
return 'exclamation-circle';
|
|
4508
4564
|
}
|
|
4509
4565
|
};
|
|
4510
|
-
this.identifier =
|
|
4566
|
+
this.identifier = mgMenu_conf.je('mg-message');
|
|
4511
4567
|
this.delay = undefined;
|
|
4512
4568
|
this.variant = variants$1[0];
|
|
4513
4569
|
this.closeButton = false;
|
|
4514
4570
|
this.hide = false;
|
|
4515
4571
|
this.noAriaRole = undefined;
|
|
4516
|
-
this.classCollection = new
|
|
4572
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-message']);
|
|
4517
4573
|
this.hasActions = false;
|
|
4518
4574
|
}
|
|
4519
4575
|
validateDelay(newValue) {
|
|
@@ -4571,7 +4627,7 @@ const MgMessage = class {
|
|
|
4571
4627
|
*/
|
|
4572
4628
|
componentWillLoad() {
|
|
4573
4629
|
// Get locales
|
|
4574
|
-
this.messages =
|
|
4630
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
4575
4631
|
// Validate
|
|
4576
4632
|
this.validateVariant(this.variant);
|
|
4577
4633
|
// Check if close button is an can be activated
|
|
@@ -4602,7 +4658,7 @@ const MgMessage = class {
|
|
|
4602
4658
|
"hide": ["validateHide"]
|
|
4603
4659
|
}; }
|
|
4604
4660
|
};
|
|
4605
|
-
MgMessage.style =
|
|
4661
|
+
MgMessage.style = MgMessageStyle0;
|
|
4606
4662
|
|
|
4607
4663
|
/**
|
|
4608
4664
|
* List of all possibles dialog roles
|
|
@@ -4610,6 +4666,7 @@ MgMessage.style = mgMessageCss;
|
|
|
4610
4666
|
const dialogRoles = ['dialog', 'alertdialog'];
|
|
4611
4667
|
|
|
4612
4668
|
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}";
|
|
4669
|
+
const MgModalStyle0 = mgModalCss;
|
|
4613
4670
|
|
|
4614
4671
|
const MgModal = class {
|
|
4615
4672
|
constructor(hostRef) {
|
|
@@ -4655,11 +4712,12 @@ const MgModal = class {
|
|
|
4655
4712
|
*/
|
|
4656
4713
|
this.setFocus = () => {
|
|
4657
4714
|
// Get all focusable elements
|
|
4658
|
-
const
|
|
4659
|
-
// If at least one
|
|
4660
|
-
if (
|
|
4661
|
-
|
|
4662
|
-
|
|
4715
|
+
const slottedFocusableElements = Array.from(this.element.querySelectorAll(mgMenu_conf.Be));
|
|
4716
|
+
// If close button is enabled or at least one of the slotted element is focusable
|
|
4717
|
+
if (this.closeButton || slottedFocusableElements.length > 0) {
|
|
4718
|
+
// Check if slotted focusable elements have shadowDom with focusable elements
|
|
4719
|
+
this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
|
|
4720
|
+
acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(mgMenu_conf.Be) || focusableElement : focusableElement);
|
|
4663
4721
|
return acc;
|
|
4664
4722
|
}, []);
|
|
4665
4723
|
// When close button is enabled it's the first focusable element.
|
|
@@ -4681,21 +4739,21 @@ const MgModal = class {
|
|
|
4681
4739
|
this.handleClose = () => {
|
|
4682
4740
|
this.hide = true;
|
|
4683
4741
|
};
|
|
4684
|
-
this.identifier =
|
|
4742
|
+
this.identifier = mgMenu_conf.je('mg-modal');
|
|
4685
4743
|
this.dialogRole = dialogRoles[0];
|
|
4686
4744
|
this.modalTitle = undefined;
|
|
4687
4745
|
this.closeButton = false;
|
|
4688
4746
|
this.hide = undefined;
|
|
4689
4747
|
this.hasActions = false;
|
|
4690
4748
|
this.hasContent = false;
|
|
4691
|
-
this.classCollection = new
|
|
4749
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-modal']);
|
|
4692
4750
|
}
|
|
4693
4751
|
validateDialogRole(newValue) {
|
|
4694
4752
|
if (!dialogRoles.includes(newValue))
|
|
4695
4753
|
throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
|
|
4696
4754
|
}
|
|
4697
4755
|
validateModalTitle(newValue) {
|
|
4698
|
-
if (!
|
|
4756
|
+
if (!mgMenu_conf.He(newValue)) {
|
|
4699
4757
|
throw new Error('<mg-modal> prop "modalTitle" is required.');
|
|
4700
4758
|
}
|
|
4701
4759
|
}
|
|
@@ -4737,7 +4795,7 @@ const MgModal = class {
|
|
|
4737
4795
|
// Store body overflow
|
|
4738
4796
|
this.bodyOverflow = document.body.style.overflow;
|
|
4739
4797
|
// Get locales
|
|
4740
|
-
this.messages =
|
|
4798
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
4741
4799
|
// Validate
|
|
4742
4800
|
this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
|
|
4743
4801
|
this.hasContent = this.element.querySelector('[slot="content"]') !== null;
|
|
@@ -4779,7 +4837,7 @@ const MgModal = class {
|
|
|
4779
4837
|
"hide": ["validateHide"]
|
|
4780
4838
|
}; }
|
|
4781
4839
|
};
|
|
4782
|
-
MgModal.style =
|
|
4840
|
+
MgModal.style = MgModalStyle0;
|
|
4783
4841
|
|
|
4784
4842
|
var NavigationAction;
|
|
4785
4843
|
(function (NavigationAction) {
|
|
@@ -4788,6 +4846,7 @@ var NavigationAction;
|
|
|
4788
4846
|
})(NavigationAction || (NavigationAction = {}));
|
|
4789
4847
|
|
|
4790
4848
|
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}";
|
|
4849
|
+
const MgPaginationStyle0 = mgPaginationCss;
|
|
4791
4850
|
|
|
4792
4851
|
/**
|
|
4793
4852
|
* Range generator
|
|
@@ -4841,7 +4900,7 @@ const MgPagination = class {
|
|
|
4841
4900
|
this.handleGoToPage = (action, disabled) => {
|
|
4842
4901
|
!disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
|
|
4843
4902
|
};
|
|
4844
|
-
this.identifier =
|
|
4903
|
+
this.identifier = mgMenu_conf.je('mg-pagination');
|
|
4845
4904
|
this.label = undefined;
|
|
4846
4905
|
this.hideNavigationLabels = undefined;
|
|
4847
4906
|
this.hidePageCount = undefined;
|
|
@@ -4870,7 +4929,7 @@ const MgPagination = class {
|
|
|
4870
4929
|
*/
|
|
4871
4930
|
componentWillLoad() {
|
|
4872
4931
|
// Get locales
|
|
4873
|
-
this.messages =
|
|
4932
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
4874
4933
|
// Validate
|
|
4875
4934
|
this.validateTotalPages(this.totalPages);
|
|
4876
4935
|
this.validateCurrentPage(this.currentPage);
|
|
@@ -4895,7 +4954,7 @@ const MgPagination = class {
|
|
|
4895
4954
|
"currentPage": ["validateCurrentPage"]
|
|
4896
4955
|
}; }
|
|
4897
4956
|
};
|
|
4898
|
-
MgPagination.style =
|
|
4957
|
+
MgPagination.style = MgPaginationStyle0;
|
|
4899
4958
|
|
|
4900
4959
|
/**
|
|
4901
4960
|
* Available expand toggle display options
|
|
@@ -4907,6 +4966,7 @@ const expandToggleDisplays = ['text', 'icon'];
|
|
|
4907
4966
|
const titlePositions = ['left', 'right'];
|
|
4908
4967
|
|
|
4909
4968
|
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}";
|
|
4969
|
+
const MgPanelStyle0 = mgPanelCss;
|
|
4910
4970
|
|
|
4911
4971
|
const MgPanel = class {
|
|
4912
4972
|
constructor(hostRef) {
|
|
@@ -5005,7 +5065,7 @@ const MgPanel = class {
|
|
|
5005
5065
|
];
|
|
5006
5066
|
return this.titlePosition === 'right' ? children.reverse() : children;
|
|
5007
5067
|
};
|
|
5008
|
-
this.identifier =
|
|
5068
|
+
this.identifier = mgMenu_conf.je('mg-panel');
|
|
5009
5069
|
this.panelTitle = undefined;
|
|
5010
5070
|
this.titlePattern = undefined;
|
|
5011
5071
|
this.titlePatternErrorMessage = undefined;
|
|
@@ -5014,12 +5074,12 @@ const MgPanel = class {
|
|
|
5014
5074
|
this.expanded = false;
|
|
5015
5075
|
this.expandToggleDisplay = expandToggleDisplays[0];
|
|
5016
5076
|
this.expandToggleDisabled = undefined;
|
|
5017
|
-
this.classCollection = new
|
|
5077
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-panel']);
|
|
5018
5078
|
this.isEditing = false;
|
|
5019
5079
|
this.updatedPanelTitle = undefined;
|
|
5020
5080
|
}
|
|
5021
5081
|
validatePanelTitle(newValue) {
|
|
5022
|
-
if (!
|
|
5082
|
+
if (!mgMenu_conf.He(newValue))
|
|
5023
5083
|
throw new Error('<mg-panel> prop "panelTitle" is required.');
|
|
5024
5084
|
this.titleChange.emit(newValue);
|
|
5025
5085
|
}
|
|
@@ -5048,7 +5108,7 @@ const MgPanel = class {
|
|
|
5048
5108
|
*/
|
|
5049
5109
|
componentWillLoad() {
|
|
5050
5110
|
// Get locales
|
|
5051
|
-
this.messages =
|
|
5111
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
5052
5112
|
// Validate
|
|
5053
5113
|
this.validateTitlePattern(this.titlePattern);
|
|
5054
5114
|
this.validateTitlePattern(this.titlePatternErrorMessage);
|
|
@@ -5082,7 +5142,7 @@ const MgPanel = class {
|
|
|
5082
5142
|
"expandToggleDisplay": ["validateExpandToggleDisplay"]
|
|
5083
5143
|
}; }
|
|
5084
5144
|
};
|
|
5085
|
-
MgPanel.style =
|
|
5145
|
+
MgPanel.style = MgPanelStyle0;
|
|
5086
5146
|
|
|
5087
5147
|
var top = 'top';
|
|
5088
5148
|
var bottom = 'bottom';
|
|
@@ -6876,6 +6936,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
|
|
|
6876
6936
|
}); // eslint-disable-next-line import/no-unused-modules
|
|
6877
6937
|
|
|
6878
6938
|
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}";
|
|
6939
|
+
const MgPopoverStyle0 = mgPopoverCss;
|
|
6879
6940
|
|
|
6880
6941
|
const MgPopover = class {
|
|
6881
6942
|
constructor(hostRef) {
|
|
@@ -6969,7 +7030,7 @@ const MgPopover = class {
|
|
|
6969
7030
|
mgPopoverContent.setAttribute('id', this.identifier);
|
|
6970
7031
|
}
|
|
6971
7032
|
};
|
|
6972
|
-
this.identifier =
|
|
7033
|
+
this.identifier = mgMenu_conf.je('mg-popover');
|
|
6973
7034
|
this.placement = 'bottom';
|
|
6974
7035
|
this.arrowHide = false;
|
|
6975
7036
|
this.closeButton = false;
|
|
@@ -7012,7 +7073,7 @@ const MgPopover = class {
|
|
|
7012
7073
|
*/
|
|
7013
7074
|
componentWillLoad() {
|
|
7014
7075
|
// Get windows to attach events
|
|
7015
|
-
this.windows =
|
|
7076
|
+
this.windows = mgMenu_conf.Ne(window);
|
|
7016
7077
|
// render mg-popover-content slot
|
|
7017
7078
|
this.renderPopoverContent();
|
|
7018
7079
|
this.validateCloseButton(this.closeButton);
|
|
@@ -7084,9 +7145,10 @@ const MgPopover = class {
|
|
|
7084
7145
|
"display": ["handleDisplay"]
|
|
7085
7146
|
}; }
|
|
7086
7147
|
};
|
|
7087
|
-
MgPopover.style =
|
|
7148
|
+
MgPopover.style = MgPopoverStyle0;
|
|
7088
7149
|
|
|
7089
7150
|
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)}";
|
|
7151
|
+
const MgPopoverContentStyle0 = mgPopoverContentCss;
|
|
7090
7152
|
|
|
7091
7153
|
const MgPopoverContent = class {
|
|
7092
7154
|
constructor(hostRef) {
|
|
@@ -7099,7 +7161,7 @@ const MgPopoverContent = class {
|
|
|
7099
7161
|
this.hideContent.emit();
|
|
7100
7162
|
};
|
|
7101
7163
|
this.closeButton = false;
|
|
7102
|
-
this.classCollection = new
|
|
7164
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-popover-content']);
|
|
7103
7165
|
}
|
|
7104
7166
|
/*************
|
|
7105
7167
|
* Lifecycle *
|
|
@@ -7109,7 +7171,7 @@ const MgPopoverContent = class {
|
|
|
7109
7171
|
*/
|
|
7110
7172
|
componentWillLoad() {
|
|
7111
7173
|
// Get locales
|
|
7112
|
-
this.messages =
|
|
7174
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
7113
7175
|
}
|
|
7114
7176
|
/**
|
|
7115
7177
|
* Check if component slots are valide
|
|
@@ -7117,7 +7179,7 @@ const MgPopoverContent = class {
|
|
|
7117
7179
|
componentDidLoad() {
|
|
7118
7180
|
const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
7119
7181
|
const slottedTitleElement = this.element.querySelector('[slot="title"]');
|
|
7120
|
-
if (slottedTitleElement && !
|
|
7182
|
+
if (slottedTitleElement && !mgMenu_conf._e(slottedTitleElement, headingTags)) {
|
|
7121
7183
|
throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
|
|
7122
7184
|
}
|
|
7123
7185
|
}
|
|
@@ -7130,9 +7192,10 @@ const MgPopoverContent = class {
|
|
|
7130
7192
|
}
|
|
7131
7193
|
get element() { return index.getElement(this); }
|
|
7132
7194
|
};
|
|
7133
|
-
MgPopoverContent.style =
|
|
7195
|
+
MgPopoverContent.style = MgPopoverContentStyle0;
|
|
7134
7196
|
|
|
7135
7197
|
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%)}";
|
|
7198
|
+
const MgSkipLinksStyle0 = mgSkipLinksCss;
|
|
7136
7199
|
|
|
7137
7200
|
const MgSkipLinks = class {
|
|
7138
7201
|
constructor(hostRef) {
|
|
@@ -7152,7 +7215,7 @@ const MgSkipLinks = class {
|
|
|
7152
7215
|
this.links = undefined;
|
|
7153
7216
|
}
|
|
7154
7217
|
validateLinks(links) {
|
|
7155
|
-
if (links === undefined || links.length === 0 || links.some(link => !
|
|
7218
|
+
if (links === undefined || links.length === 0 || links.some(link => !mgMenu_conf.He(link.href) || !link.href.startsWith('#') || !mgMenu_conf.He(link.label))) {
|
|
7156
7219
|
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
7220
|
}
|
|
7158
7221
|
}
|
|
@@ -7164,7 +7227,7 @@ const MgSkipLinks = class {
|
|
|
7164
7227
|
*/
|
|
7165
7228
|
componentWillLoad() {
|
|
7166
7229
|
this.validateLinks(this.links);
|
|
7167
|
-
this.messages =
|
|
7230
|
+
this.messages = mgMenu_conf.initLocales(this.element).messages;
|
|
7168
7231
|
}
|
|
7169
7232
|
/**
|
|
7170
7233
|
* Render
|
|
@@ -7178,7 +7241,7 @@ const MgSkipLinks = class {
|
|
|
7178
7241
|
"links": ["validateLinks"]
|
|
7179
7242
|
}; }
|
|
7180
7243
|
};
|
|
7181
|
-
MgSkipLinks.style =
|
|
7244
|
+
MgSkipLinks.style = MgSkipLinksStyle0;
|
|
7182
7245
|
|
|
7183
7246
|
/**
|
|
7184
7247
|
* Available tabs items status
|
|
@@ -7196,6 +7259,7 @@ var Status;
|
|
|
7196
7259
|
const sizes = ['regular', 'large'];
|
|
7197
7260
|
|
|
7198
7261
|
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}";
|
|
7262
|
+
const MgTabsStyle0 = mgTabsCss;
|
|
7199
7263
|
|
|
7200
7264
|
/**
|
|
7201
7265
|
* type TabItem validation function
|
|
@@ -7303,7 +7367,7 @@ const MgTabs = class {
|
|
|
7303
7367
|
*/
|
|
7304
7368
|
this.resetFocus = () => {
|
|
7305
7369
|
// update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
|
|
7306
|
-
|
|
7370
|
+
mgMenu_conf.Pe(() => {
|
|
7307
7371
|
this.tabFocus = undefined;
|
|
7308
7372
|
Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
|
|
7309
7373
|
tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
|
|
@@ -7318,16 +7382,16 @@ const MgTabs = class {
|
|
|
7318
7382
|
if (slots.length !== this.tabs.length)
|
|
7319
7383
|
throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
|
|
7320
7384
|
};
|
|
7321
|
-
this.identifier =
|
|
7385
|
+
this.identifier = mgMenu_conf.je('mg-tabs');
|
|
7322
7386
|
this.label = undefined;
|
|
7323
7387
|
this.size = 'regular';
|
|
7324
7388
|
this.items = undefined;
|
|
7325
7389
|
this.activeTab = undefined;
|
|
7326
7390
|
this.tabs = [];
|
|
7327
|
-
this.classCollection = new
|
|
7391
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-tabs']);
|
|
7328
7392
|
}
|
|
7329
7393
|
validateLabel(newValue) {
|
|
7330
|
-
if (!
|
|
7394
|
+
if (!mgMenu_conf.He(newValue)) {
|
|
7331
7395
|
throw new Error('<mg-tabs> prop "label" is required.');
|
|
7332
7396
|
}
|
|
7333
7397
|
}
|
|
@@ -7339,7 +7403,7 @@ const MgTabs = class {
|
|
|
7339
7403
|
}
|
|
7340
7404
|
validateItems(newValue) {
|
|
7341
7405
|
// String array
|
|
7342
|
-
if (
|
|
7406
|
+
if (mgMenu_conf.De(newValue))
|
|
7343
7407
|
this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
|
|
7344
7408
|
// Object array
|
|
7345
7409
|
else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
|
|
@@ -7417,7 +7481,7 @@ const MgTabs = class {
|
|
|
7417
7481
|
"activeTab": ["validateActiveTab"]
|
|
7418
7482
|
}; }
|
|
7419
7483
|
};
|
|
7420
|
-
MgTabs.style =
|
|
7484
|
+
MgTabs.style = MgTabsStyle0;
|
|
7421
7485
|
|
|
7422
7486
|
/**
|
|
7423
7487
|
* List of all possibles variants
|
|
@@ -7425,6 +7489,7 @@ MgTabs.style = mgTabsCss;
|
|
|
7425
7489
|
const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
|
|
7426
7490
|
|
|
7427
7491
|
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}";
|
|
7492
|
+
const MgTagStyle0 = mgTagCss;
|
|
7428
7493
|
|
|
7429
7494
|
const MgTag = class {
|
|
7430
7495
|
constructor(hostRef) {
|
|
@@ -7438,7 +7503,7 @@ const MgTag = class {
|
|
|
7438
7503
|
this.variant = variants[0];
|
|
7439
7504
|
this.outline = undefined;
|
|
7440
7505
|
this.soft = undefined;
|
|
7441
|
-
this.classCollection = new
|
|
7506
|
+
this.classCollection = new mgMenu_conf.Fe(['mg-c-tag']);
|
|
7442
7507
|
}
|
|
7443
7508
|
validateVariant(newValue, oldValue) {
|
|
7444
7509
|
if (!variants.includes(newValue)) {
|
|
@@ -7475,7 +7540,7 @@ const MgTag = class {
|
|
|
7475
7540
|
* @param textContent - html element textContent property
|
|
7476
7541
|
*/
|
|
7477
7542
|
validateTextContent(textContent) {
|
|
7478
|
-
if (!
|
|
7543
|
+
if (!mgMenu_conf.He(textContent))
|
|
7479
7544
|
throw new Error('<mg-tag> slot must contain a text content.');
|
|
7480
7545
|
}
|
|
7481
7546
|
/*************
|
|
@@ -7504,7 +7569,7 @@ const MgTag = class {
|
|
|
7504
7569
|
"soft": ["validateSoft"]
|
|
7505
7570
|
}; }
|
|
7506
7571
|
};
|
|
7507
|
-
MgTag.style =
|
|
7572
|
+
MgTag.style = MgTagStyle0;
|
|
7508
7573
|
|
|
7509
7574
|
var Guard;
|
|
7510
7575
|
(function (Guard) {
|
|
@@ -7514,6 +7579,7 @@ var Guard;
|
|
|
7514
7579
|
})(Guard || (Guard = {}));
|
|
7515
7580
|
|
|
7516
7581
|
const mgTooltipCss = ":host{display:inline-block}";
|
|
7582
|
+
const MgTooltipStyle0 = mgTooltipCss;
|
|
7517
7583
|
|
|
7518
7584
|
/**
|
|
7519
7585
|
* HTMLMgButtonElement type guard
|
|
@@ -7533,7 +7599,7 @@ const MgTooltip = class {
|
|
|
7533
7599
|
// Enable the event listeners
|
|
7534
7600
|
this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
|
|
7535
7601
|
// hide when click outside on nextTick to prevent event to trigger after creation
|
|
7536
|
-
|
|
7602
|
+
mgMenu_conf.Pe(() => {
|
|
7537
7603
|
this.windows.forEach((localWindow) => {
|
|
7538
7604
|
localWindow.addEventListener('click', this.clickOutside, false);
|
|
7539
7605
|
localWindow.addEventListener('keydown', this.pressEscape, false);
|
|
@@ -7698,7 +7764,7 @@ const MgTooltip = class {
|
|
|
7698
7764
|
});
|
|
7699
7765
|
});
|
|
7700
7766
|
};
|
|
7701
|
-
this.identifier =
|
|
7767
|
+
this.identifier = mgMenu_conf.je('mg-tooltip');
|
|
7702
7768
|
this.message = undefined;
|
|
7703
7769
|
this.placement = 'bottom';
|
|
7704
7770
|
this.display = false;
|
|
@@ -7709,7 +7775,7 @@ const MgTooltip = class {
|
|
|
7709
7775
|
this.renderTooltipContent();
|
|
7710
7776
|
}
|
|
7711
7777
|
validateMessage(newValue) {
|
|
7712
|
-
if (!
|
|
7778
|
+
if (!mgMenu_conf.He(newValue)) {
|
|
7713
7779
|
throw new Error('<mg-tooltip> prop "message" is required.');
|
|
7714
7780
|
}
|
|
7715
7781
|
this.mgTooltipContent.message = newValue;
|
|
@@ -7758,7 +7824,7 @@ const MgTooltip = class {
|
|
|
7758
7824
|
*/
|
|
7759
7825
|
componentWillLoad() {
|
|
7760
7826
|
// Get windows to attach events
|
|
7761
|
-
this.windows =
|
|
7827
|
+
this.windows = mgMenu_conf.Ne(window);
|
|
7762
7828
|
// Get tooltip element
|
|
7763
7829
|
this.renderTooltipContent();
|
|
7764
7830
|
this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
|
|
@@ -7777,7 +7843,7 @@ const MgTooltip = class {
|
|
|
7777
7843
|
// get slotted element wich is not the tooltip
|
|
7778
7844
|
const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
|
|
7779
7845
|
// Get interactive element
|
|
7780
|
-
const interactiveElement = slotElement.matches(
|
|
7846
|
+
const interactiveElement = slotElement.matches(mgMenu_conf.Be) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(mgMenu_conf.Be);
|
|
7781
7847
|
// define selected element to become tooltip selector
|
|
7782
7848
|
this.tooltipedElement = interactiveElement || slotElement;
|
|
7783
7849
|
// Check if slotted element is a disabled mg-button
|
|
@@ -7819,9 +7885,10 @@ const MgTooltip = class {
|
|
|
7819
7885
|
"disabled": ["validateDisabled"]
|
|
7820
7886
|
}; }
|
|
7821
7887
|
};
|
|
7822
|
-
MgTooltip.style =
|
|
7888
|
+
MgTooltip.style = MgTooltipStyle0;
|
|
7823
7889
|
|
|
7824
7890
|
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}";
|
|
7891
|
+
const MgTooltipContentStyle0 = mgTooltipContentCss;
|
|
7825
7892
|
|
|
7826
7893
|
const MgTooltipContent = class {
|
|
7827
7894
|
constructor(hostRef) {
|
|
@@ -7839,7 +7906,7 @@ const MgTooltipContent = class {
|
|
|
7839
7906
|
return (index.h(index.Host, { role: "tooltip" }, index.h("span", { innerHTML: this.message, class: "mg-tooltip-content__message" }), index.h("slot", { name: "arrow" })));
|
|
7840
7907
|
}
|
|
7841
7908
|
};
|
|
7842
|
-
MgTooltipContent.style =
|
|
7909
|
+
MgTooltipContent.style = MgTooltipContentStyle0;
|
|
7843
7910
|
|
|
7844
7911
|
exports.mg_action_more = MgActionMore;
|
|
7845
7912
|
exports.mg_badge = MgBadge;
|