@mgdis/mg-components 6.25.0 → 6.26.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.
Files changed (37) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/mg-action-more_36.cjs.entry.js +77 -12
  3. package/dist/cjs/mg-components.cjs.js +1 -1
  4. package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +9 -11
  5. package/dist/collection/assets/jodit/jodit.css +5821 -0
  6. package/dist/collection/components/molecules/inputs/mg-input/mg-input.js +39 -4
  7. package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +3 -2
  8. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/custom-properties.css +50 -0
  9. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +3 -3
  10. package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.js +4 -0
  11. package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +51 -2
  12. package/dist/collection/components/molecules/mg-popover/mg-popover.js +4 -1
  13. package/dist/components/mg-button2.js +1 -1
  14. package/dist/components/mg-card2.js +1 -1
  15. package/dist/components/mg-illustrated-message.js +1 -1
  16. package/dist/components/mg-input-password.js +1 -1
  17. package/dist/components/mg-input-rich-text-editor.js +44 -44
  18. package/dist/components/mg-input2.js +1 -1
  19. package/dist/components/mg-message2.js +1 -1
  20. package/dist/components/mg-popover2.js +1 -1
  21. package/dist/custom-elements.json +19 -0
  22. package/dist/esm/loader.js +1 -1
  23. package/dist/esm/mg-action-more_36.entry.js +77 -12
  24. package/dist/esm/mg-components.js +1 -1
  25. package/dist/esm/mg-input-rich-text-editor.entry.js +9 -11
  26. package/dist/mg-components/mg-components.esm.js +1 -1
  27. package/dist/mg-components/{p-ec4bd337.entry.js → p-206505b5.entry.js} +51 -51
  28. package/dist/mg-components/p-bf2252c9.entry.js +1 -0
  29. package/dist/types/components/molecules/inputs/mg-input/mg-input.d.ts +2 -1
  30. package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.d.ts +8 -0
  31. package/dist/types/components/molecules/mg-illustrated-message/mg-illustrated-message.d.ts +9 -1
  32. package/dist/types/components.d.ts +13 -2
  33. package/ide/intellij/web-types.json +12 -2
  34. package/ide/vscode/html-custom-data.json +26 -1
  35. package/package.json +14 -14
  36. package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/custom-properties.scss +0 -212
  37. package/dist/mg-components/p-4693077a.entry.js +0 -1
@@ -14,7 +14,38 @@ export class MgInput {
14
14
  // helpText/errorMessage are injected via innerHTML and may contain HTML: when block content
15
15
  // is detected we fall back to <div> to keep the markup valid (RGAA 8.2), otherwise we use a
16
16
  // semantic <p> for the (textual) message (RGAA 8.9).
17
- this.blockLevelContentRegExp = /<(address|article|aside|blockquote|details|dialog|div|dl|fieldset|figure|figcaption|footer|form|h[1-6]|header|hr|main|nav|ol|p|pre|section|table|ul)[\s/>]/i;
17
+ this.blockLevelTags = new Set([
18
+ 'address',
19
+ 'article',
20
+ 'aside',
21
+ 'blockquote',
22
+ 'details',
23
+ 'dialog',
24
+ 'div',
25
+ 'dl',
26
+ 'fieldset',
27
+ 'figure',
28
+ 'figcaption',
29
+ 'footer',
30
+ 'form',
31
+ 'h1',
32
+ 'h2',
33
+ 'h3',
34
+ 'h4',
35
+ 'h5',
36
+ 'h6',
37
+ 'header',
38
+ 'hr',
39
+ 'main',
40
+ 'nav',
41
+ 'ol',
42
+ 'p',
43
+ 'pre',
44
+ 'section',
45
+ 'table',
46
+ 'ul',
47
+ ]);
48
+ this.openingTagRegExp = /<([a-z1-6]+)[\s/>]/gi;
18
49
  // style
19
50
  this.classInput = 'mg-c-input';
20
51
  this.classHasError = 'mg-c-input--has-error';
@@ -292,7 +323,11 @@ export class MgInput {
292
323
  * @returns the tag name to use
293
324
  */
294
325
  getSlotMessageTagName(content) {
295
- return this.blockLevelContentRegExp.test(content) ? 'div' : 'p';
326
+ for (const [, tagName] of content.matchAll(this.openingTagRegExp)) {
327
+ if (this.blockLevelTags.has(tagName.toLowerCase()))
328
+ return 'div';
329
+ }
330
+ return 'p';
296
331
  }
297
332
  /**
298
333
  * Get the existing slotted element or (re)create it with the expected tag.
@@ -366,10 +401,10 @@ export class MgInput {
366
401
  */
367
402
  render() {
368
403
  const isGroup = this.isFieldset && !this.isReadonly;
369
- return (h(Host, { key: 'e5803717999bac5e4a08910008176baeb426f634', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '32b04b05e8a4352536965fcd792f3c206dad9270', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '2bb360ff8b4a86facb0b7f97fdf7dbbb49b5f6c0', name: this.slotLabel }), this.tooltip &&
404
+ return (h(Host, { key: '5a321d04d50aa63f86237a1dd72d2ac508b8d4cf', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '5d247500c19370d6ee1de79e14ef0c016fe38f7a', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'cf56e42a0b56ab855a1b6089fbbd573ef5676b3d', name: this.slotLabel }), this.tooltip &&
370
405
  (this.tooltipPosition === 'label' || this.labelOnTop) &&
371
406
  !this.labelHide &&
372
- this.renderTooltip()), h("div", { key: '0c6751757d182029e1ac6ea4f8a4fcc7aeffb85e', class: "mg-c-input__input-container" }, this.inputContainerElements())));
407
+ this.renderTooltip()), h("div", { key: 'dfc9112bb933c1c536bdb4e9ef462e0f921a0b82', class: "mg-c-input__input-container" }, this.inputContainerElements())));
373
408
  }
374
409
  static get is() { return "mg-input"; }
375
410
  static get encapsulation() { return "shadow"; }
@@ -250,10 +250,11 @@ export class MgInputPassword {
250
250
  * @returns HTML Element
251
251
  */
252
252
  render() {
253
- return (h("mg-input", { key: '0a59c7177c65ccb255164e4ef45945b1ade5ad70', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
253
+ const displayPasswordIcon = this.displayPassword ? 'eye-slash' : 'eye';
254
+ return (h("mg-input", { key: '913d0653faad21f56cb930dfdc0947a0747f17ad', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
254
255
  if (el !== null)
255
256
  this.input = el;
256
- } }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: (this.displayPassword ? 'eye-slash' : 'eye') }))))));
257
+ } }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: displayPasswordIcon }))))));
257
258
  }
258
259
  static get is() { return "mg-input-password"; }
259
260
  static get encapsulation() { return "shadow"; }
@@ -0,0 +1,50 @@
1
+ /* Jodit theming overrides
2
+ *
3
+ * Jodit's own defaults are provided by jodit.css (loaded with :root rewritten to :host).
4
+ * This layer only holds the values the design system intentionally overrides — mainly px
5
+ * sizes converted to rem for scalable UI, plus a few color adjustments. It must load after
6
+ * jodit.css so these win.
7
+ */
8
+ :host {
9
+ --jd-color-background-button-hover-opacity30: rgb(234 234 234 / 30%);
10
+ --jd-color-background-filebrowser-folders: rgb(248 249 250);
11
+ --jd-color-button-background-hover-opacity40: rgb(219 219 219 / 40%);
12
+ --jd-color-button-background-hover-opacity60: rgb(219 219 219 / 60%);
13
+ --jd-color-table-cell-background-hover: rgb(0 0 0 / 5%);
14
+ --jd-dark-text-color-opacity50: rgb(206 206 206 / 50%);
15
+ --jd-dark-text-color-opacity80: rgb(206 206 206 / 80%);
16
+ --jd-dark-toolbar-seperator-color3: rgb(105 105 105 / 75%);
17
+ --jd-dark-toolbar-seperator-color-opacity80: rgb(105 105 105 / 80%);
18
+ --jd-color-picker-cell-size: 2.4rem;
19
+ --jd-button-icon-size: 1.4rem;
20
+ --jd-button-trigger-size: 1.4rem;
21
+ --jd-button-df-size: calc((var(--jd-button-icon-size) - 0.4rem) * 2);
22
+ --jd-icon-size: 1.2rem;
23
+ --jd-icon-loader-size: 4.8rem;
24
+ --jd-height: 1.8rem;
25
+ --jd-height-element-default: 1.8rem;
26
+ --jd-height-search: 3rem;
27
+ --jd-input-height: 3.2rem;
28
+ --jd-switche-height: 3.2rem;
29
+ --jd-viewer-height: 2.4rem;
30
+ --jd-width-default: 18rem;
31
+ --jd-width-element-default: 1.8rem;
32
+ --jd-width-search: 32rem;
33
+ --jd-viewer-width: 7rem;
34
+ --jd-switche-width: 6rem;
35
+ --jd-col-size: 15rem;
36
+ --jd-padding-default: 0.8rem;
37
+ --jd-margin-v: 0.2rem;
38
+ --jd-switche-slider-margin: 0.4rem;
39
+ --jd-resizer-handle-size: 1rem;
40
+ --jd-border-radius-default: 0.3rem;
41
+ --jd-font-size-default: 1.4rem;
42
+ --jd-font-size-small: 1.1rem;
43
+ --jd-box-shadow-1: 0 0.8rem 1.6rem rgb(0 0 0 / 19%);
44
+ --jd-box-shadow-blur: 1.6rem;
45
+ --jd-box-shadow-tabs: 0 0.2rem 0.4rem rgb(0 0 0 / 10%);
46
+ --jd-popup-box-shadow: 0 0.4rem 0.1rem -0.2rem rgb(76 76 76 / 20%), 0 0.3rem 0.3rem 0 rgb(76 76 76 / 15%), 0 0.1rem 0.4rem 0 rgb(76 76 76 / 13%);
47
+ --jd-popup-max-height: max(50vh, 35rem);
48
+ --jd-focus-input-box-shadow: 0 0 0 0.05rem rgb(0 123 255 / 25%);
49
+ --jd-anl-handle-size: 2rem;
50
+ }
@@ -502,7 +502,7 @@ export class MgInputRichTextEditor {
502
502
  * @returns HTML mg-input Element
503
503
  */
504
504
  render() {
505
- return (h("mg-input", { key: '9197857a6c004416b96632c9009d110958c8eb15', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { id: this.identifier, class: "mg-c-input__wrapper" }, h("textarea", { name: this.name, ref: (el) => {
505
+ return (h("mg-input", { key: 'c42ba3eb1eafa645fa0774d65090c7819168ffd7', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { id: this.identifier, class: "mg-c-input__wrapper" }, h("textarea", { name: this.name, ref: (el) => {
506
506
  if (el !== null)
507
507
  this.editorElement = el;
508
508
  } })))));
@@ -511,12 +511,12 @@ export class MgInputRichTextEditor {
511
511
  static get encapsulation() { return "shadow"; }
512
512
  static get originalStyleUrls() {
513
513
  return {
514
- "$": ["./editor/custom-properties.scss", "../../../../../node_modules/jodit/es2021/jodit.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
514
+ "$": ["../../../../assets/jodit/jodit.css", "./editor/custom-properties.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
515
515
  };
516
516
  }
517
517
  static get styleUrls() {
518
518
  return {
519
- "$": ["editor/custom-properties.css", "../../../../../node_modules/jodit/es2021/jodit.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
519
+ "$": ["../../../../assets/jodit/jodit.css", "editor/custom-properties.css", "../../../../../node_modules/@mgdis/styles/dist/components/mg-input-rich-text-editor.css"]
520
520
  };
521
521
  }
522
522
  static get properties() {
@@ -6,3 +6,7 @@ export const sizes = ['small', 'medium', 'large'];
6
6
  * List of all possibles directions
7
7
  */
8
8
  export const directions = ['vertical', 'horizontal'];
9
+ /**
10
+ * List of all possibles horizontal alignments
11
+ */
12
+ export const aligns = ['left', 'center', 'right'];
@@ -1,6 +1,6 @@
1
1
  import { h } from "@stencil/core";
2
2
  import { ClassList, isTagName, toString } from "@mgdis/core-ui-helpers/dist/utils";
3
- import { directions, sizes, } from "./mg-illustrated-message.conf";
3
+ import { aligns, directions, sizes, } from "./mg-illustrated-message.conf";
4
4
  /**
5
5
  * @slot illustration - Illustration content
6
6
  * @slot title - Title content
@@ -16,6 +16,13 @@ export class MgIllustratedMessage {
16
16
  * Define component orientation
17
17
  */
18
18
  this.direction = 'vertical';
19
+ /**
20
+ * Define the horizontal alignment of the message inside its container.
21
+ * The message is sized to its content, so `align` positions it in both the vertical and
22
+ * horizontal directions. When the content is wide enough to fill the container there is
23
+ * no room left, so `align` has no visible effect.
24
+ */
25
+ this.align = 'center';
19
26
  /**
20
27
  * Component classes
21
28
  */
@@ -43,6 +50,17 @@ export class MgIllustratedMessage {
43
50
  this.classCollection.delete('mg-c-illustrated-message--direction-horizontal');
44
51
  }
45
52
  }
53
+ watchAlign(newValue, oldValue) {
54
+ if (!aligns.includes(newValue)) {
55
+ throw new Error(`<mg-illustrated-message> prop "align" must be one of: ${aligns.join(', ')}. Passed value: ${toString(newValue)}.`);
56
+ }
57
+ else {
58
+ if (oldValue !== undefined) {
59
+ this.classCollection.delete(`mg-c-illustrated-message--align-${oldValue}`);
60
+ }
61
+ this.classCollection.add(`mg-c-illustrated-message--align-${newValue}`);
62
+ }
63
+ }
46
64
  /***********
47
65
  * Methods *
48
66
  ***********/
@@ -74,6 +92,7 @@ export class MgIllustratedMessage {
74
92
  componentWillLoad() {
75
93
  this.watchDirection(this.direction);
76
94
  this.watchSize(this.size);
95
+ this.watchAlign(this.align);
77
96
  this.validateSlots();
78
97
  }
79
98
  /**
@@ -81,7 +100,7 @@ export class MgIllustratedMessage {
81
100
  * @returns HTML Element
82
101
  */
83
102
  render() {
84
- return (h("div", { key: '87fb97f2eff23d0793e1829a2ac533be7c670f59', class: this.classCollection.join() }, h("div", { key: 'c3395aefc56c00f625a7510ce73204097abbfc06', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '2505490d95166f2490e75cac403a90c693507502', name: "illustration" })), h("div", { key: '12b89745d353f0a31575f48c15d864459eb2d77e', class: "mg-c-illustrated-message__slots" }, h("slot", { key: 'c56b865f24c818ef40e3e0adb7efb698e509fba9', name: "title" }), h("slot", { key: '018faf36cfd88e1ac38b13636e7c7da7b44c9b40', name: "details" }))));
103
+ return (h("div", { key: 'daffbfe09d4ccae7b2380d2dcd0f6157acf7a849', class: this.classCollection.join() }, h("div", { key: '503631e106a43186d1031ebfd8bb5fa9e7aaa568', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '6291af5e6155e38e3cfb63acf3ca774e22d385f6', name: "illustration" })), h("div", { key: '7c7518be3413c7e9cadb149a255505d20525b6c7', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '742dc8a06f3f7ab06e4e67b370a750100585c384', name: "title" }), h("slot", { key: '3da2b7d35d1076d4cb87337f9a21e149c72f9141', name: "details" }))));
85
104
  }
86
105
  static get is() { return "mg-illustrated-message"; }
87
106
  static get encapsulation() { return "shadow"; }
@@ -150,6 +169,33 @@ export class MgIllustratedMessage {
150
169
  "reflect": false,
151
170
  "attribute": "direction",
152
171
  "defaultValue": "'vertical'"
172
+ },
173
+ "align": {
174
+ "type": "string",
175
+ "mutable": false,
176
+ "complexType": {
177
+ "original": "IllustratedMessageAlignType",
178
+ "resolved": "\"center\" | \"left\" | \"right\"",
179
+ "references": {
180
+ "IllustratedMessageAlignType": {
181
+ "location": "import",
182
+ "path": "./mg-illustrated-message.conf",
183
+ "id": "src/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.ts::IllustratedMessageAlignType",
184
+ "referenceLocation": "IllustratedMessageAlignType"
185
+ }
186
+ }
187
+ },
188
+ "required": false,
189
+ "optional": false,
190
+ "docs": {
191
+ "tags": [],
192
+ "text": "Define the horizontal alignment of the message inside its container.\nThe message is sized to its content, so `align` positions it in both the vertical and\nhorizontal directions. When the content is wide enough to fill the container there is\nno room left, so `align` has no visible effect."
193
+ },
194
+ "getter": false,
195
+ "setter": false,
196
+ "reflect": false,
197
+ "attribute": "align",
198
+ "defaultValue": "'center'"
153
199
  }
154
200
  };
155
201
  }
@@ -166,6 +212,9 @@ export class MgIllustratedMessage {
166
212
  }, {
167
213
  "propName": "direction",
168
214
  "methodName": "watchDirection"
215
+ }, {
216
+ "propName": "align",
217
+ "methodName": "watchAlign"
169
218
  }];
170
219
  }
171
220
  }
@@ -181,6 +181,9 @@ export class MgPopover {
181
181
  // Add aria attributes
182
182
  this.interactiveElement.setAttribute('aria-controls', this.identifier);
183
183
  this.interactiveElement.setAttribute('aria-expanded', `${this.display}`);
184
+ // Mark the trigger so the button stays visually active while the popover is open,
185
+ // without styling every generic aria-expanded (e.g. mg-panel disclosure toggle)
186
+ this.interactiveElement.setAttribute('data-mg-popover-trigger', '');
184
187
  const fallbackPlacements = [];
185
188
  if (this.element.dataset.fallbackPlacement !== undefined) {
186
189
  fallbackPlacements.push(this.element.dataset.fallbackPlacement);
@@ -237,7 +240,7 @@ export class MgPopover {
237
240
  * @returns HTML Element
238
241
  */
239
242
  render() {
240
- return (h(Host, { key: '9e62e60ba76045222b9c69b34245c3825004f8d6' }, h("slot", { key: '4be1a5c1221e1985cd0c0b4f7b19435d097bee4e' }), h("slot", { key: '07c2003dc3ad0bb7059e75e95e0de2862a64fd22', name: "content" })));
243
+ return (h(Host, { key: '431539cd450da49af5587372a12cbe33956ec5b1' }, h("slot", { key: '30e66567cc00667665b70306b3c9ba2fa541fa1e' }), h("slot", { key: '7fcfcd55904128ef4f7a66e16a31a957e5b7af75', name: "content" })));
241
244
  }
242
245
  static get is() { return "mg-popover"; }
243
246
  static get encapsulation() { return "shadow"; }
@@ -1 +1 @@
1
- import{transformTag as t,proxyCustomElement as o,HTMLElement as n,createEvent as r,h as i,Host as e}from"@stencil/core/internal/client";import{C as a,t as c,i as b,n as d}from"./index2.js";import{n as s}from"./index3.js";import{K as g}from"./events.utils.js";import{d as u}from"./mg-icon2.js";const m=["medium","large"],l=["primary","secondary","danger","danger-alt","info","flat","success","link"],h=o(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.disabledChange=r(this,"disabled-change",7),this.onClickElementFn=null,this.classDisabled="mg-c-button--disabled",this.classLoading="mg-c-button--loading",this.classFullWidth="mg-c-button--full-width",this.variant="primary",this.size="medium",this.fullWidth=!1,this.isIcon=!1,this.disableOnClick=!1,this.loading=!1,this.classCollection=new a(["mg-c-button"]),this.handleClick=t=>{this.disabled?t.stopPropagation():this.disableOnClick&&(this.loading=!0,this.disabled=!0)},this.handleKeydown=t=>{this.disabled||" "!==t.key?!this.disabled&&[g.ENTER,g.NUMPADENTER,g.SPACE].includes(t.key)&&(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0}))):t.preventDefault()},this.handleKeyup=t=>{this.disabled||" "!==t.key||(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0})))},this.setIconSize=()=>{var t,o;"medium"===this.size?null===(t=this.element.querySelector("mg-icon[size]"))||void 0===t||t.removeAttribute("size"):this.isIcon&&(null===(o=this.element.querySelector("mg-icon"))||void 0===o||o.setAttribute("size",this.size))}}validateVariant(t,o){if(!l.includes(t)){if(""===t)return void(this.variant=l[0]);throw new Error(`<mg-button> prop "variant" must be one of: ${l.join(", ")}. Passed value: ${c(t)}.`)}void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`)}validateSize(t,o){if(!m.includes(t))throw new Error(`<mg-button> prop "size" must be one of: ${m.join(", ")}. Passed value: ${c(t)}.`);void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`),this.setIconSize()}validateFullWidth(t){if(t&&this.isIcon)throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');t?this.classCollection.add(this.classFullWidth):this.classCollection.delete(this.classFullWidth)}disabledHandler(t){!t&&this.disableOnClick&&(this.loading=!1),this.element.onclick=t?void 0:this.onClickElementFn,t?this.classCollection.add(this.classDisabled):this.classCollection.delete(this.classDisabled),this.disabledChange.emit(t)}watchIsIcon(t){if(t){if(this.classCollection.add("mg-c-button--icon"),!b(this.label))throw new Error('<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.')}else this.classCollection.delete("mg-c-button--icon");this.setIconSize()}loadingHandler(t){t?this.classCollection.add(this.classLoading):this.classCollection.delete(this.classLoading)}componentWillLoad(){s(this),this.validateVariant(this.variant),this.validateFullWidth(this.fullWidth),this.validateSize(this.size),this.watchIsIcon(this.isIcon),this.onClickElementFn=this.element.onclick,this.disabledHandler(this.disabled)}componentDidLoad(){d((()=>{var t;const o=this.element.closest("form")||(null===(t=this.element.closest("mg-form"))||void 0===t?void 0:t.shadowRoot.querySelector("form"));o&&["submit",void 0].includes(this.type)&&this.element.addEventListener("click",(()=>{o.dispatchEvent(new SubmitEvent("submit",{bubbles:!0,cancelable:!0}))}))}))}render(){var t;return i(e,{key:"9efa9dbbcdb2965cb8fd301c86988d0b0d97b474",role:"button",tabIndex:this.element.getAttribute("tabindex")||0,type:this.type,form:this.form,"full-width":this.fullWidth,"aria-label":this.label,"aria-disabled":null===(t=this.disabled)||void 0===t?void 0:t.toString(),onClick:this.handleClick,onKeyup:this.handleKeyup,onKeydown:this.handleKeydown},i("div",{key:"36918b5b208a9e0a9650107f4418cac35ade1ed2",class:this.classCollection.join()},this.loading&&i("mg-icon",{key:"8ad3e911d273f69441f2a405f8040cc685a0a486",icon:"loader",spin:!0}),i("div",{key:"a6b199c669ef6b15bfc345c98192290ce11e65cb",class:"mg-c-button__content"},i("slot",{key:"b13d317001dbf66c945cdf9e97c06338ce073c12"}))))}get element(){return this}static get watchers(){return{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}}static get style(){return":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--primary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--secondary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--info:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--success:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--warning:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),:host([aria-expanded=true]) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger-alt:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.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--disabled,.mg-c-button[aria-disabled=true],.mg-c-button:disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.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--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;width:100%;justify-content:center}.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),:host([data-focus-visible]){outline:0}:host(:focus-visible) .mg-c-button,:host([data-focus-visible]) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:var(--mg-b-size-2)}"}},[257,"mg-button",{variant:[1025],label:[1],type:[1],size:[1],fullWidth:[4,"full-width"],form:[1],disabled:[1028],isIcon:[4,"is-icon"],disableOnClick:[4,"disable-on-click"],loading:[32],classCollection:[32]},void 0,{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}]);function v(){"undefined"!=typeof customElements&&["mg-button","mg-icon"].forEach((o=>{switch(o){case"mg-button":customElements.get(t(o))||customElements.define(t(o),h);break;case"mg-icon":customElements.get(t(o))||u()}}))}v();export{h as M,v as d}
1
+ import{transformTag as t,proxyCustomElement as o,HTMLElement as n,createEvent as r,h as i,Host as e}from"@stencil/core/internal/client";import{C as a,t as c,i as b,n as d}from"./index2.js";import{n as g}from"./index3.js";import{K as s}from"./events.utils.js";import{d as u}from"./mg-icon2.js";const m=["medium","large"],l=["primary","secondary","danger","danger-alt","info","flat","success","link"],h=o(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.disabledChange=r(this,"disabled-change",7),this.onClickElementFn=null,this.classDisabled="mg-c-button--disabled",this.classLoading="mg-c-button--loading",this.classFullWidth="mg-c-button--full-width",this.variant="primary",this.size="medium",this.fullWidth=!1,this.isIcon=!1,this.disableOnClick=!1,this.loading=!1,this.classCollection=new a(["mg-c-button"]),this.handleClick=t=>{this.disabled?t.stopPropagation():this.disableOnClick&&(this.loading=!0,this.disabled=!0)},this.handleKeydown=t=>{this.disabled||" "!==t.key?!this.disabled&&[s.ENTER,s.NUMPADENTER,s.SPACE].includes(t.key)&&(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0}))):t.preventDefault()},this.handleKeyup=t=>{this.disabled||" "!==t.key||(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0})))},this.setIconSize=()=>{var t,o;"medium"===this.size?null===(t=this.element.querySelector("mg-icon[size]"))||void 0===t||t.removeAttribute("size"):this.isIcon&&(null===(o=this.element.querySelector("mg-icon"))||void 0===o||o.setAttribute("size",this.size))}}validateVariant(t,o){if(!l.includes(t)){if(""===t)return void(this.variant=l[0]);throw new Error(`<mg-button> prop "variant" must be one of: ${l.join(", ")}. Passed value: ${c(t)}.`)}void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`)}validateSize(t,o){if(!m.includes(t))throw new Error(`<mg-button> prop "size" must be one of: ${m.join(", ")}. Passed value: ${c(t)}.`);void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`),this.setIconSize()}validateFullWidth(t){if(t&&this.isIcon)throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');t?this.classCollection.add(this.classFullWidth):this.classCollection.delete(this.classFullWidth)}disabledHandler(t){!t&&this.disableOnClick&&(this.loading=!1),this.element.onclick=t?void 0:this.onClickElementFn,t?this.classCollection.add(this.classDisabled):this.classCollection.delete(this.classDisabled),this.disabledChange.emit(t)}watchIsIcon(t){if(t){if(this.classCollection.add("mg-c-button--icon"),!b(this.label))throw new Error('<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.')}else this.classCollection.delete("mg-c-button--icon");this.setIconSize()}loadingHandler(t){t?this.classCollection.add(this.classLoading):this.classCollection.delete(this.classLoading)}componentWillLoad(){g(this),this.validateVariant(this.variant),this.validateFullWidth(this.fullWidth),this.validateSize(this.size),this.watchIsIcon(this.isIcon),this.onClickElementFn=this.element.onclick,this.disabledHandler(this.disabled)}componentDidLoad(){d((()=>{var t;const o=this.element.closest("form")||(null===(t=this.element.closest("mg-form"))||void 0===t?void 0:t.shadowRoot.querySelector("form"));o&&["submit",void 0].includes(this.type)&&this.element.addEventListener("click",(()=>{o.dispatchEvent(new SubmitEvent("submit",{bubbles:!0,cancelable:!0}))}))}))}render(){var t;return i(e,{key:"9efa9dbbcdb2965cb8fd301c86988d0b0d97b474",role:"button",tabIndex:this.element.getAttribute("tabindex")||0,type:this.type,form:this.form,"full-width":this.fullWidth,"aria-label":this.label,"aria-disabled":null===(t=this.disabled)||void 0===t?void 0:t.toString(),onClick:this.handleClick,onKeyup:this.handleKeyup,onKeydown:this.handleKeydown},i("div",{key:"36918b5b208a9e0a9650107f4418cac35ade1ed2",class:this.classCollection.join()},this.loading&&i("mg-icon",{key:"8ad3e911d273f69441f2a405f8040cc685a0a486",icon:"loader",spin:!0}),i("div",{key:"a6b199c669ef6b15bfc345c98192290ce11e65cb",class:"mg-c-button__content"},i("slot",{key:"b13d317001dbf66c945cdf9e97c06338ce073c12"}))))}get element(){return this}static get watchers(){return{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}}static get style(){return":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--primary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--secondary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--info:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--success:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--warning:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger-alt:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.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--disabled,.mg-c-button[aria-disabled=true],.mg-c-button:disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.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--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;width:100%;justify-content:center}.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),:host([data-focus-visible]){outline:0}:host(:focus-visible) .mg-c-button,:host([data-focus-visible]) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:var(--mg-b-size-2)}"}},[257,"mg-button",{variant:[1025],label:[1],type:[1],size:[1],fullWidth:[4,"full-width"],form:[1],disabled:[1028],isIcon:[4,"is-icon"],disableOnClick:[4,"disable-on-click"],loading:[32],classCollection:[32]},void 0,{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}]);function v(){"undefined"!=typeof customElements&&["mg-button","mg-icon"].forEach((o=>{switch(o){case"mg-button":customElements.get(t(o))||customElements.define(t(o),h);break;case"mg-icon":customElements.get(t(o))||u()}}))}v();export{h as M,v as d}
@@ -1 +1 @@
1
- import{transformTag as a,proxyCustomElement as r,HTMLElement as d,h as c}from"@stencil/core/internal/client";import{C as e,t as s}from"./index2.js";const i=["xsmall","small","medium"],o=r(class extends d{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.shadow=!1,this.radiusSize="medium",this.classCollection=new e(["mg-c-card"])}watchShadow(a){a?this.classCollection.add("mg-c-card--shadow"):this.classCollection.delete("mg-c-card--shadow")}watchRadiusSize(a,r){if(!i.includes(a)){if(""===String(a))return void(this.radiusSize="medium");throw new Error(`<mg-card> prop "radiusSize" must be one of: ${i.join(", ")}. Passed value: ${s(a)}.`)}void 0!==r&&this.classCollection.delete(`mg-c-card--radius-${r}`),this.classCollection.add(`mg-c-card--radius-${a}`)}componentWillLoad(){this.watchShadow(this.shadow),this.watchRadiusSize(this.radiusSize)}render(){return c("div",{key:"8fb6d9aa655b838e219a077670ce6296640d0854",class:this.classCollection.join()},c("slot",{key:"9413035054408e44b8c8bb3f2033ff970931c347"}))}static get watchers(){return{shadow:[{watchShadow:0}],radiusSize:[{watchRadiusSize:0}]}}static get style(){return".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);max-height:var(--mg-c-card-max-height);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-radius-medium)}.mg-c-card.mg-c-card--radius-small{--mg-c-card-border-radius:var(--mg-b-size-radius-large)}::slotted(h2){margin:0 0 var(--mg-b-size-16)}"}},[257,"mg-card",{shadow:[4],radiusSize:[1025,"radius-size"],classCollection:[32]},void 0,{shadow:[{watchShadow:0}],radiusSize:[{watchRadiusSize:0}]}]);function m(){"undefined"!=typeof customElements&&["mg-card"].forEach((r=>{"mg-card"===r&&(customElements.get(a(r))||customElements.define(a(r),o))}))}m();export{o as M,m as d}
1
+ import{transformTag as a,proxyCustomElement as r,HTMLElement as d,h as c}from"@stencil/core/internal/client";import{C as e,t as i}from"./index2.js";const t=["xsmall","small","medium"],s=r(class extends d{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.shadow=!1,this.radiusSize="medium",this.classCollection=new e(["mg-c-card"])}watchShadow(a){a?this.classCollection.add("mg-c-card--shadow"):this.classCollection.delete("mg-c-card--shadow")}watchRadiusSize(a,r){if(!t.includes(a)){if(""===String(a))return void(this.radiusSize="medium");throw new Error(`<mg-card> prop "radiusSize" must be one of: ${t.join(", ")}. Passed value: ${i(a)}.`)}void 0!==r&&this.classCollection.delete(`mg-c-card--radius-${r}`),this.classCollection.add(`mg-c-card--radius-${a}`)}componentWillLoad(){this.watchShadow(this.shadow),this.watchRadiusSize(this.radiusSize)}render(){return c("div",{key:"8fb6d9aa655b838e219a077670ce6296640d0854",class:this.classCollection.join()},c("slot",{key:"9413035054408e44b8c8bb3f2033ff970931c347"}))}static get watchers(){return{shadow:[{watchShadow:0}],radiusSize:[{watchRadiusSize:0}]}}static get style(){return".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);max-height:var(--mg-c-card-max-height);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-radius-medium)}.mg-c-card.mg-c-card--radius-small{--mg-c-card-border-radius:var(--mg-b-size-radius-large)}::slotted(:first-child){margin-block-start:0 !important}::slotted(:last-child){margin-block-end:0 !important}"}},[257,"mg-card",{shadow:[4],radiusSize:[1025,"radius-size"],classCollection:[32]},void 0,{shadow:[{watchShadow:0}],radiusSize:[{watchRadiusSize:0}]}]);function o(){"undefined"!=typeof customElements&&["mg-card"].forEach((r=>{"mg-card"===r&&(customElements.get(a(r))||customElements.define(a(r),s))}))}o();export{s as M,o as d}
@@ -1 +1 @@
1
- import{transformTag as e,proxyCustomElement as s,HTMLElement as t,h as i}from"@stencil/core/internal/client";import{C as l,t as a,b as m}from"./index2.js";const r=["small","medium","large"],g=["vertical","horizontal"],o=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.size="medium",this.direction="vertical",this.classCollection=new l(["mg-c-illustrated-message"])}watchSize(e,s){if(!r.includes(e))throw Error(`<mg-illustrated-message> prop "size" must be one of: ${r.join(", ")}. Passed value: ${a(e)}.`);void 0!==s&&this.classCollection.delete("mg-c-illustrated-message--size-"+s),this.classCollection.add("mg-c-illustrated-message--size-"+e)}watchDirection(e,s){if(void 0!==e&&!g.includes(e))throw Error(`<mg-illustrated-message> prop "direction" must be one of: ${g.join(", ")}. Passed value: ${a(e)}.`);"horizontal"===e?this.classCollection.add("mg-c-illustrated-message--direction-horizontal"):"horizontal"===s&&this.classCollection.delete("mg-c-illustrated-message--direction-horizontal")}validateSlots(){const e=["h1","h2","h3","h4","h5","h6"],s=this.element.querySelector('[slot="title"]'),t=this.element.querySelectorAll('[slot="illustration"]');if(0===this.element.querySelectorAll('[slot="details"]').length&&null===s)throw Error('<mg-illustrated-message> Slot "title" or "details" must be present.');if(null!==s&&!m(s,e))throw Error(`<mg-illustrated-message> Slotted title must be a heading: ${e.join(", ")}.`);if(1!==t.length)throw Error("<mg-illustrated-message> Slotted illustration must be present and unique.");t[0].setAttribute("aria-hidden","true")}componentWillLoad(){this.watchDirection(this.direction),this.watchSize(this.size),this.validateSlots()}render(){return i("div",{key:"87fb97f2eff23d0793e1829a2ac533be7c670f59",class:this.classCollection.join()},i("div",{key:"c3395aefc56c00f625a7510ce73204097abbfc06",class:"mg-c-illustrated-message__illustration"},i("slot",{key:"2505490d95166f2490e75cac403a90c693507502",name:"illustration"})),i("div",{key:"12b89745d353f0a31575f48c15d864459eb2d77e",class:"mg-c-illustrated-message__slots"},i("slot",{key:"c56b865f24c818ef40e3e0adb7efb698e509fba9",name:"title"}),i("slot",{key:"018faf36cfd88e1ac38b13636e7c7da7b44c9b40",name:"details"})))}get element(){return this}static get watchers(){return{size:[{watchSize:0}],direction:[{watchDirection:0}]}}static get style(){return".mg-c-illustrated-message{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);margin:auto;gap:var(--mg-b-size-16) var(--mg-b-size-64);max-inline-size:calc(60*var(--mg-b-size-8));text-align:center}.mg-c-illustrated-message__illustration{max-block-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){block-size:auto;inline-size:100%;margin-inline:auto;max-block-size:calc(15*var(--mg-b-size-8));max-inline-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__slots{display:flex;flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-illustrated-message__slots ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family-heading) !important;font-size:var(--mg-b-font-size-h2) !important}.mg-c-illustrated-message__slots ::slotted([slot=details]){margin:0}.mg-c-illustrated-message.mg-c-illustrated-message--size-small{--mg-c-illustrated-message-spacing-vertical:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__slots{gap:var(--mg-b-size-2)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration{max-block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:var(--mg-b-size-64);max-inline-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration{max-block-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:calc(23*var(--mg-b-size-8));max-inline-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(15*var(--mg-b-size-8));inline-size:auto}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(23*var(--mg-b-size-8))}@container (width > 52.8rem){.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{flex-direction:row;align-items:center;column-gap:var(--mg-b-size-48);text-align:left}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration{flex:1 0 auto;max-inline-size:fit-content}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small{column-gap:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large{column-gap:var(--mg-b-size-64)}}:host{display:block;container-type:inline-size;inline-size:100%}"}},[257,"mg-illustrated-message",{size:[1],direction:[1],classCollection:[32]},void 0,{size:[{watchSize:0}],direction:[{watchDirection:0}]}]);function c(){"undefined"!=typeof customElements&&["mg-illustrated-message"].forEach((s=>{"mg-illustrated-message"===s&&(customElements.get(e(s))||customElements.define(e(s),o))}))}c();const n=o,d=c;export{n as MgIllustratedMessage,d as defineCustomElement}
1
+ import{transformTag as e,proxyCustomElement as s,HTMLElement as t,h as i}from"@stencil/core/internal/client";import{C as l,t as a,b as m}from"./index2.js";const r=["small","medium","large"],g=["vertical","horizontal"],c=["left","center","right"],o=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.size="medium",this.direction="vertical",this.align="center",this.classCollection=new l(["mg-c-illustrated-message"])}watchSize(e,s){if(!r.includes(e))throw Error(`<mg-illustrated-message> prop "size" must be one of: ${r.join(", ")}. Passed value: ${a(e)}.`);void 0!==s&&this.classCollection.delete("mg-c-illustrated-message--size-"+s),this.classCollection.add("mg-c-illustrated-message--size-"+e)}watchDirection(e,s){if(void 0!==e&&!g.includes(e))throw Error(`<mg-illustrated-message> prop "direction" must be one of: ${g.join(", ")}. Passed value: ${a(e)}.`);"horizontal"===e?this.classCollection.add("mg-c-illustrated-message--direction-horizontal"):"horizontal"===s&&this.classCollection.delete("mg-c-illustrated-message--direction-horizontal")}watchAlign(e,s){if(!c.includes(e))throw Error(`<mg-illustrated-message> prop "align" must be one of: ${c.join(", ")}. Passed value: ${a(e)}.`);void 0!==s&&this.classCollection.delete("mg-c-illustrated-message--align-"+s),this.classCollection.add("mg-c-illustrated-message--align-"+e)}validateSlots(){const e=["h1","h2","h3","h4","h5","h6"],s=this.element.querySelector('[slot="title"]'),t=this.element.querySelectorAll('[slot="illustration"]');if(0===this.element.querySelectorAll('[slot="details"]').length&&null===s)throw Error('<mg-illustrated-message> Slot "title" or "details" must be present.');if(null!==s&&!m(s,e))throw Error(`<mg-illustrated-message> Slotted title must be a heading: ${e.join(", ")}.`);if(1!==t.length)throw Error("<mg-illustrated-message> Slotted illustration must be present and unique.");t[0].setAttribute("aria-hidden","true")}componentWillLoad(){this.watchDirection(this.direction),this.watchSize(this.size),this.watchAlign(this.align),this.validateSlots()}render(){return i("div",{key:"daffbfe09d4ccae7b2380d2dcd0f6157acf7a849",class:this.classCollection.join()},i("div",{key:"503631e106a43186d1031ebfd8bb5fa9e7aaa568",class:"mg-c-illustrated-message__illustration"},i("slot",{key:"6291af5e6155e38e3cfb63acf3ca774e22d385f6",name:"illustration"})),i("div",{key:"7c7518be3413c7e9cadb149a255505d20525b6c7",class:"mg-c-illustrated-message__slots"},i("slot",{key:"742dc8a06f3f7ab06e4e67b370a750100585c384",name:"title"}),i("slot",{key:"3da2b7d35d1076d4cb87337f9a21e149c72f9141",name:"details"})))}get element(){return this}static get watchers(){return{size:[{watchSize:0}],direction:[{watchDirection:0}],align:[{watchAlign:0}]}}static get style(){return".mg-c-illustrated-message{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);gap:var(--mg-b-size-16) var(--mg-b-size-64);max-inline-size:calc(60*var(--mg-b-size-8));text-align:center}.mg-c-illustrated-message__illustration{max-block-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){block-size:auto;inline-size:100%;margin-inline:auto;max-block-size:calc(15*var(--mg-b-size-8));max-inline-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__slots{display:flex;flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-illustrated-message__slots ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family-heading) !important;font-size:var(--mg-b-font-size-h2) !important}.mg-c-illustrated-message__slots ::slotted([slot=details]){margin:0}.mg-c-illustrated-message.mg-c-illustrated-message--size-small{--mg-c-illustrated-message-spacing-vertical:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__slots{gap:var(--mg-b-size-2)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration{max-block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:var(--mg-b-size-64);max-inline-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration{max-block-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:calc(23*var(--mg-b-size-8));max-inline-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{inline-size:fit-content;max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(15*var(--mg-b-size-8));inline-size:auto}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--align-left{margin-inline:0 auto}.mg-c-illustrated-message.mg-c-illustrated-message--align-center{margin-inline:auto}.mg-c-illustrated-message.mg-c-illustrated-message--align-right{margin-inline:auto 0}@container (width > 52.8rem){.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{flex-direction:row;align-items:center;column-gap:var(--mg-b-size-48);text-align:left}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration{flex:1 0 auto;max-inline-size:fit-content}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small{column-gap:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large{column-gap:var(--mg-b-size-64)}}:host{display:block;container-type:inline-size;inline-size:100%}"}},[257,"mg-illustrated-message",{size:[1],direction:[1],align:[1],classCollection:[32]},void 0,{size:[{watchSize:0}],direction:[{watchDirection:0}],align:[{watchAlign:0}]}]);function n(){"undefined"!=typeof customElements&&["mg-illustrated-message"].forEach((s=>{"mg-illustrated-message"===s&&(customElements.get(e(s))||customElements.define(e(s),o))}))}n();const d=o,u=n;export{d as MgIllustratedMessage,u as defineCustomElement}
@@ -1 +1 @@
1
- import{transformTag as t,proxyCustomElement as i,HTMLElement as n,createEvent as e,h as s}from"@stencil/core/internal/client";import{C as o,i as a}from"./index2.js";import{n as r}from"./index3.js";import{c as p,b as c,w as m}from"./mg-input.conf.js";import{i as h}from"./index4.js";import{d as g}from"./mg-button2.js";import{d as u}from"./mg-icon2.js";import{d as l}from"./mg-input2.js";import{d}from"./mg-input-title2.js";import{d as b}from"./mg-tooltip2.js";import{d as v}from"./mg-tooltip-content2.js";const f=i(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=e(this,"value-change",7),this.inputValid=e(this,"input-valid",7),this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.mgWidth="full",this.tooltipPosition="input",this.classCollection=new o(["mg-c-input--password"]),this.displayPassword=!1,this.handleInput=()=>{this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage(),this.value=this.input.value},this.handleBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0}))},this.toggleDisplayPassword=()=>{this.displayPassword=!this.displayPassword},this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||this.input.checkValidity())},this.setErrorMessage=(t=!1)=>{this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.input.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))}}handleValue(t){this.valueChange.emit(t)}watchReadonly(t){t?this.classCollection.add(p):this.classCollection.delete(p)}handleValidityChange(t,i,n){void 0!==this.input&&(this.input[n]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}watchDisabled(t){t?this.classCollection.add(c):this.classCollection.delete(c)}watchMgWidth(t){m.forEach((t=>{this.classCollection.delete("mg-c-input--width-"+t)})),void 0!==t&&this.classCollection.add("mg-c-input--width-"+this.mgWidth)}async setFocus(){var t;null===(t=this.input)||void 0===t||t.focus()}displayError(){return new Promise((t=>{requestAnimationFrame((()=>{this.checkValidity(),this.setErrorMessage(),this.hasDisplayedError=this.invalid,t()}))}))}async setError(t,i,n=!1){if("boolean"!=typeof t)throw Error('<mg-input-password> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!a(i))throw Error('<mg-input-password> method "setError()" param "errorMessage" must be a string.');this.customErrorMessage={lock:!t&&n,message:t?void 0:i},this.setValidity(t),this.setErrorMessage(!0),this.hasDisplayedError=this.invalid}async reset(){if(!this.readonly)return this.value="",new Promise((t=>{requestAnimationFrame((()=>{this.customErrorMessage={lock:!1},this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1,t()}))}))}setValidity(t){const i=this.valid;this.customErrorMessage.lock&&(void 0===this.customErrorMessage.message||t)||(this.valid=t),this.invalid=!this.valid,(void 0===this.handlerInProgress||"blur"===this.handlerInProgress&&this.valid!==i)&&this.inputValid.emit(this.valid)}componentWillLoad(){return this.messages=h(this.element).messages,r(this),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),this.watchMgWidth(this.mgWidth),setTimeout((()=>{this.checkValidity()}),0)}render(){return s("mg-input",{key:"0a59c7177c65ccb255164e4ef45945b1ade5ad70",label:this.label,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&void 0===this.value?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?void 0!==this.value&&s("b",{class:"mg-c-input__readonly-value"},"•".repeat(this.value.length)):s("span",{class:"mg-c-input__input-group"},s("input",{type:this.displayPassword?"text":"password",class:"mg-c-input__box mg-c-input__box--width",value:this.value,id:this.identifier,name:this.name,placeholder:this.placeholder,title:this.placeholder,disabled:this.disabled,required:this.required,maxlength:this.maxlength,"aria-invalid":""+(!0===this.invalid),onInput:this.handleInput,onBlur:this.handleBlur,ref:t=>{null!==t&&(this.input=t)}}),s("mg-button",{label:this.messages.input.password[this.displayPassword?"hide":"display"],disabled:this.disabled,variant:"flat",class:"mg-c-input__append-button","is-icon":!0,onClick:this.toggleDisplayPassword,"aria-controls":this.identifier},s("mg-icon",{class:"mg-c-input__input-icon",icon:this.displayPassword?"eye-slash":"eye"}))))}get element(){return this}static get watchers(){return{value:[{handleValue:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}]}}static get style(){return".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));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:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-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-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--password .mg-c-input__input-icon{color:var(--mg-b-color-dark)}.mg-c-input.mg-c-input--password .mg-c-input__input-group{position:relative;flex-grow:1}.mg-c-input.mg-c-input--password .mg-c-input__append-button{position:absolute;right:0}.mg-c-input.mg-c-input--password .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-8))}.mg-c-input.mg-c-input--password .mg-c-input__box::-ms-reveal{display:none}"}},[1,"mg-input-password",{value:[1537],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],placeholder:[1],maxlength:[2],required:[4],readonly:[4],disabled:[4],mgWidth:[8,"mg-width"],tooltip:[1],tooltipPosition:[1,"tooltip-position"],helpText:[1,"help-text"],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],displayPassword:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{handleValue:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}]}]);function w(){"undefined"!=typeof customElements&&["mg-input-password","mg-button","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-password":customElements.get(t(i))||customElements.define(t(i),f);break;case"mg-button":customElements.get(t(i))||g();break;case"mg-icon":customElements.get(t(i))||u();break;case"mg-input":customElements.get(t(i))||l();break;case"mg-input-title":customElements.get(t(i))||d();break;case"mg-tooltip":customElements.get(t(i))||b();break;case"mg-tooltip-content":customElements.get(t(i))||v()}}))}w();const _=f,y=w;export{_ as MgInputPassword,y as defineCustomElement}
1
+ import{transformTag as t,proxyCustomElement as i,HTMLElement as n,createEvent as e,h as s}from"@stencil/core/internal/client";import{C as o,i as a}from"./index2.js";import{n as r}from"./index3.js";import{c as p,b as c,w as m}from"./mg-input.conf.js";import{i as h}from"./index4.js";import{d as g}from"./mg-button2.js";import{d as u}from"./mg-icon2.js";import{d as l}from"./mg-input2.js";import{d}from"./mg-input-title2.js";import{d as b}from"./mg-tooltip2.js";import{d as v}from"./mg-tooltip-content2.js";const f=i(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=e(this,"value-change",7),this.inputValid=e(this,"input-valid",7),this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.mgWidth="full",this.tooltipPosition="input",this.classCollection=new o(["mg-c-input--password"]),this.displayPassword=!1,this.handleInput=()=>{this.checkValidity(),this.hasDisplayedError&&this.setErrorMessage(),this.value=this.input.value},this.handleBlur=()=>{this.handlerInProgress="blur",this.displayError().finally((()=>{this.handlerInProgress=void 0}))},this.toggleDisplayPassword=()=>{this.displayPassword=!this.displayPassword},this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||this.input.checkValidity())},this.setErrorMessage=(t=!1)=>{this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:this.input.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))}}handleValue(t){this.valueChange.emit(t)}watchReadonly(t){t?this.classCollection.add(p):this.classCollection.delete(p)}handleValidityChange(t,i,n){void 0!==this.input&&(this.input[n]=t,this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1))}watchDisabled(t){t?this.classCollection.add(c):this.classCollection.delete(c)}watchMgWidth(t){m.forEach((t=>{this.classCollection.delete("mg-c-input--width-"+t)})),void 0!==t&&this.classCollection.add("mg-c-input--width-"+this.mgWidth)}async setFocus(){var t;null===(t=this.input)||void 0===t||t.focus()}displayError(){return new Promise((t=>{requestAnimationFrame((()=>{this.checkValidity(),this.setErrorMessage(),this.hasDisplayedError=this.invalid,t()}))}))}async setError(t,i,n=!1){if("boolean"!=typeof t)throw Error('<mg-input-password> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!a(i))throw Error('<mg-input-password> method "setError()" param "errorMessage" must be a string.');this.customErrorMessage={lock:!t&&n,message:t?void 0:i},this.setValidity(t),this.setErrorMessage(!0),this.hasDisplayedError=this.invalid}async reset(){if(!this.readonly)return this.value="",new Promise((t=>{requestAnimationFrame((()=>{this.customErrorMessage={lock:!1},this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1,t()}))}))}setValidity(t){const i=this.valid;this.customErrorMessage.lock&&(void 0===this.customErrorMessage.message||t)||(this.valid=t),this.invalid=!this.valid,(void 0===this.handlerInProgress||"blur"===this.handlerInProgress&&this.valid!==i)&&this.inputValid.emit(this.valid)}componentWillLoad(){return this.messages=h(this.element).messages,r(this),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),this.watchMgWidth(this.mgWidth),setTimeout((()=>{this.checkValidity()}),0)}render(){const t=this.displayPassword?"eye-slash":"eye";return s("mg-input",{key:"913d0653faad21f56cb930dfdc0947a0747f17ad",label:this.label,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&void 0===this.value?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?void 0!==this.value&&s("b",{class:"mg-c-input__readonly-value"},"•".repeat(this.value.length)):s("span",{class:"mg-c-input__input-group"},s("input",{type:this.displayPassword?"text":"password",class:"mg-c-input__box mg-c-input__box--width",value:this.value,id:this.identifier,name:this.name,placeholder:this.placeholder,title:this.placeholder,disabled:this.disabled,required:this.required,maxlength:this.maxlength,"aria-invalid":""+(!0===this.invalid),onInput:this.handleInput,onBlur:this.handleBlur,ref:t=>{null!==t&&(this.input=t)}}),s("mg-button",{label:this.messages.input.password[this.displayPassword?"hide":"display"],disabled:this.disabled,variant:"flat",class:"mg-c-input__append-button","is-icon":!0,onClick:this.toggleDisplayPassword,"aria-controls":this.identifier},s("mg-icon",{class:"mg-c-input__input-icon",icon:t}))))}get element(){return this}static get watchers(){return{value:[{handleValue:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}]}}static get style(){return".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));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:calc(-1*var(--mg-b-size-2));outline-style:solid;outline-width:var(--mg-b-size-2)}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-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-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container{position:relative}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-group-container{width:100%;flex-grow:1}.mg-c-input.mg-c-input--width-2.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-4.mg-c-input--display-character-left .mg-c-input__input-group-container,.mg-c-input.mg-c-input--width-16.mg-c-input--display-character-left .mg-c-input__input-group-container{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16.mg-c-input--text.mg-c-input--display-character-left .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:has(mg-icon){display:inline-flex;align-items:center;gap:var(--mg-b-size-4)}a:hover,a:focus,a:active{text-decoration:none}.mg-c-input.mg-c-input--password .mg-c-input__input-icon{color:var(--mg-b-color-dark)}.mg-c-input.mg-c-input--password .mg-c-input__input-group{position:relative;flex-grow:1}.mg-c-input.mg-c-input--password .mg-c-input__append-button{position:absolute;right:0}.mg-c-input.mg-c-input--password .mg-c-input__box{padding-right:calc(var(--mg-b-size-min-height) + var(--mg-b-size-8))}.mg-c-input.mg-c-input--password .mg-c-input__box::-ms-reveal{display:none}"}},[1,"mg-input-password",{value:[1537],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],placeholder:[1],maxlength:[2],required:[4],readonly:[4],disabled:[4],mgWidth:[8,"mg-width"],tooltip:[1],tooltipPosition:[1,"tooltip-position"],helpText:[1,"help-text"],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],displayPassword:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{handleValue:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}],mgWidth:[{watchMgWidth:0}]}]);function w(){"undefined"!=typeof customElements&&["mg-input-password","mg-button","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-password":customElements.get(t(i))||customElements.define(t(i),f);break;case"mg-button":customElements.get(t(i))||g();break;case"mg-icon":customElements.get(t(i))||u();break;case"mg-input":customElements.get(t(i))||l();break;case"mg-input-title":customElements.get(t(i))||d();break;case"mg-tooltip":customElements.get(t(i))||b();break;case"mg-tooltip-content":customElements.get(t(i))||v()}}))}w();const _=f,y=w;export{_ as MgInputPassword,y as defineCustomElement}