@mgdis/mg-components 5.13.0 → 5.14.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 (60) hide show
  1. package/dist/cjs/{index-03d2557d.js → index-fede8ee2.js} +8 -33
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/mg-action-more_32.cjs.entry.js +289 -97
  4. package/dist/cjs/mg-components.cjs.js +2 -2
  5. package/dist/cjs/mg-item-more.cjs.entry.js +2 -2
  6. package/dist/cjs/{mg-menu.conf-857748e1.js → mg-menu.conf-f9d0ddec.js} +12 -6
  7. package/dist/collection/components/atoms/mg-icon/mg-icon.js +20 -6
  8. package/dist/collection/components/atoms/mg-input-title/mg-input-title.js +7 -4
  9. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +4 -4
  10. package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.css +2 -1
  11. package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +1 -1
  12. package/dist/collection/components/molecules/mg-details/mg-details.css +3 -0
  13. package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
  14. package/dist/collection/components/molecules/mg-form/mg-form.js +1 -1
  15. package/dist/collection/components/molecules/mg-message/mg-message.css +4 -0
  16. package/dist/collection/components/molecules/mg-modal/mg-modal.js +64 -36
  17. package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +2 -2
  18. package/dist/collection/components/molecules/mg-panel/mg-panel.css +3 -0
  19. package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
  20. package/dist/collection/locales/fr/messages.json +12 -6
  21. package/dist/collection/styles/global.scss +0 -7
  22. package/dist/collection/utils/unit.test.utils.js +27 -0
  23. package/dist/components/index2.js +12 -6
  24. package/dist/components/mg-details.js +2 -2
  25. package/dist/components/mg-form.js +1 -1
  26. package/dist/components/mg-icon2.js +207 -44
  27. package/dist/components/mg-input-checkbox-paginated2.js +4 -4
  28. package/dist/components/mg-input-select2.js +2 -2
  29. package/dist/components/mg-input-title2.js +6 -5
  30. package/dist/components/mg-message.js +1 -1
  31. package/dist/components/mg-modal.js +64 -36
  32. package/dist/components/mg-pagination2.js +2 -2
  33. package/dist/components/mg-panel.js +2 -2
  34. package/dist/esm/{index-407d5211.js → index-1d40b052.js} +8 -33
  35. package/dist/esm/loader.js +3 -3
  36. package/dist/esm/mg-action-more_32.entry.js +289 -97
  37. package/dist/esm/mg-components.js +3 -3
  38. package/dist/esm/mg-item-more.entry.js +2 -2
  39. package/dist/esm/{mg-menu.conf-c31828ca.js → mg-menu.conf-2cc079ae.js} +12 -6
  40. package/dist/mg-components/locales/fr/messages.json +12 -6
  41. package/dist/mg-components/mg-components.css +1 -1
  42. package/dist/mg-components/mg-components.esm.js +1 -1
  43. package/dist/mg-components/{p-622e2323.js → p-067080e4.js} +1 -1
  44. package/dist/mg-components/p-3bf1e2f0.js +2 -0
  45. package/dist/mg-components/{p-d37b29bb.entry.js → p-4ae1130f.entry.js} +1 -1
  46. package/dist/mg-components/p-aa298e17.entry.js +1 -0
  47. package/dist/mg-components/styles/global.scss +0 -7
  48. package/dist/types/components/atoms/mg-icon/mg-icon.d.ts +12 -3
  49. package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts +1 -1
  50. package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.d.ts +1 -1
  51. package/dist/types/components/molecules/mg-modal/mg-modal.d.ts +19 -1
  52. package/dist/types/locales/index.d.ts +12 -6
  53. package/dist/types/utils/components.utils.d.ts +3 -0
  54. package/dist/types/utils/unit.test.utils.d.ts +4 -4
  55. package/package.json +6 -5
  56. package/readme.md +20 -25
  57. package/dist/collection/styles/components.scss +0 -3
  58. package/dist/mg-components/p-3bf533f7.js +0 -2
  59. package/dist/mg-components/p-bda0b795.entry.js +0 -1
  60. package/dist/mg-components/styles/components.scss +0 -3
@@ -66,7 +66,7 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class extends
66
66
  * Toogle items button handler
67
67
  */
68
68
  this.handleToggleClick = () => {
69
- this.itemsExpanded = !this.itemsExpanded;
69
+ this.expanded = !this.expanded;
70
70
  };
71
71
  /**
72
72
  * Method to get a array range
@@ -96,7 +96,7 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class extends
96
96
  this.messages = undefined;
97
97
  this.titleKind = undefined;
98
98
  this.currentPage = 1;
99
- this.itemsExpanded = true;
99
+ this.expanded = true;
100
100
  }
101
101
  validateCheckboxes(newValue, oldValue) {
102
102
  // after each array.length update we reset pagination
@@ -140,7 +140,7 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class extends
140
140
  const [checkboxItemsFromIndex, checkboxItemsToIndex] = this.getFromToIndexes();
141
141
  const itemsContainerId = `items-${this.sectionKind}-container`;
142
142
  const getText = (checkboxes) => h("em", null, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`);
143
- return (h(Host, { hidden: this.checkboxes.length < 1 }, h("div", { class: "mg-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.itemsExpanded.toString() }, h("mg-icon", { icon: this.itemsExpanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: "mg-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.itemsExpanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-button", { variant: "link", onClick: this.massActionHandler }, this.messages.action)), this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage > 1 ? this.currentPage : 1, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { hidden: !this.itemsExpanded, id: itemsContainerId, class: "mg-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { checkboxes: this.getArrayRange(this.checkboxes, checkboxItemsFromIndex, checkboxItemsToIndex), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name }))));
143
+ return (h(Host, { hidden: this.checkboxes.length < 1 }, h("div", { class: "mg-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: "mg-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-button", { variant: "link", onClick: this.massActionHandler }, this.messages.action)), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage > 1 ? this.currentPage : 1, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { hidden: !this.expanded, id: itemsContainerId, class: "mg-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { checkboxes: this.getArrayRange(this.checkboxes, checkboxItemsFromIndex, checkboxItemsToIndex), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name }))));
144
144
  }
145
145
  static get watchers() { return {
146
146
  "checkboxes": ["validateCheckboxes"],
@@ -155,7 +155,7 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class extends
155
155
  "messages": [16],
156
156
  "titleKind": [32],
157
157
  "currentPage": [32],
158
- "itemsExpanded": [32]
158
+ "expanded": [32]
159
159
  }]);
160
160
  function defineCustomElement() {
161
161
  if (typeof customElements === "undefined") {
@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './mg-icon2.js';
6
6
  import { d as defineCustomElement$2 } from './mg-input-title2.js';
7
7
  import { d as defineCustomElement$1 } from './mg-tooltip2.js';
8
8
 
9
- const mgInputSelectCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);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-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-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-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;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));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-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-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-input__box{width:100%;padding-top:0;padding-bottom:0;padding-right:1rem}.mg-input.mg-input--select:not(.mg-input--label-on-top) .mg-input__box{max-width:unset}";
9
+ const mgInputSelectCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);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-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-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-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;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));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-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-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-input__box{width:100%;padding-top:0;padding-bottom:0;padding-right:1rem}:host(:not([mg-width])) .mg-input--select:not(.mg-input--label-on-top) .mg-input__box{max-width:unset}";
10
10
 
11
11
  /**
12
12
  * Check if item is a well configured option
@@ -277,7 +277,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
277
277
  "required": [4],
278
278
  "readonly": [4],
279
279
  "disabled": [4],
280
- "mgWidth": [8, "mg-width"],
280
+ "mgWidth": [520, "mg-width"],
281
281
  "tooltip": [1],
282
282
  "helpText": [1, "help-text"],
283
283
  "valid": [1028],
@@ -6,9 +6,6 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
6
6
  constructor() {
7
7
  super();
8
8
  this.__registerHost();
9
- this.getTagName = () => {
10
- this.tagName = this.isLegend ? 'legend' : 'label';
11
- };
12
9
  this.identifier = undefined;
13
10
  this.required = undefined;
14
11
  this.isLegend = false;
@@ -19,6 +16,9 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
19
16
  throw new Error('<mg-input-title> prop "identifier" is required.');
20
17
  }
21
18
  }
19
+ validateIsLegend(newValue) {
20
+ this.tagName = newValue ? 'legend' : 'label';
21
+ }
22
22
  /*************
23
23
  * Lifecycle *
24
24
  *************/
@@ -27,7 +27,7 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
27
27
  */
28
28
  componentWillLoad() {
29
29
  this.validateIdentifier(this.identifier);
30
- this.getTagName();
30
+ this.validateIsLegend(this.isLegend);
31
31
  }
32
32
  /**
33
33
  * Render
@@ -39,7 +39,8 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
39
39
  return (h(TagName, { class: "mg-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", null), this.required && (h("span", { class: "mg-input-title__required" }, "\u00A0", h("span", { class: "is-asterisk" }, "*")))));
40
40
  }
41
41
  static get watchers() { return {
42
- "identifier": ["validateIdentifier"]
42
+ "identifier": ["validateIdentifier"],
43
+ "isLegend": ["validateIsLegend"]
43
44
  }; }
44
45
  static get style() { return mgInputTitleCss; }
45
46
  }, [6, "mg-input-title", {
@@ -10,7 +10,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
10
10
  */
11
11
  const variants = ['info', 'warning', 'success', 'danger'];
12
12
 
13
- const mgMessageCss = ":host{--mg-card-padding:0;--mg-card-border-radius:var(--mg-message-border-radius);--mg-card-border:none;--mg-card-overflow:hidden}.mg-message{display:inline-block;min-height:var(--default-size)}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{--mg-card-padding:0 3.4rem 0 0}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-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-message,mg-message{max-width:100%}";
13
+ 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-message{display:inline-block;min-height:var(--default-size)}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{--mg-card-padding:0 3.4rem 0 0}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-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-message,mg-message{max-width:100%}";
14
14
 
15
15
  const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
16
16
  constructor() {
@@ -14,40 +14,60 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
14
14
  this.__attachShadow();
15
15
  this.componentShow = createEvent(this, "component-show", 7);
16
16
  this.componentHide = createEvent(this, "component-hide", 7);
17
+ /************
18
+ * Internal *
19
+ ************/
20
+ // Modal focusable elements
21
+ this.modalFocusableElements = [];
17
22
  // Classes
18
23
  this.classHide = 'mg-modal--hide';
19
24
  // IDs
20
- this.closeButtonId = '';
21
25
  this.titleId = '';
26
+ /**
27
+ * Handle last focusable element
28
+ * @param event - keyboard event
29
+ */
30
+ this.handleLastFocusableElement = (event) => {
31
+ if (event.key === 'Tab' && !event.shiftKey) {
32
+ event.preventDefault();
33
+ this.modalFocusableElements[0].focus();
34
+ }
35
+ };
36
+ /**
37
+ * Handle first focusable element
38
+ * @param event - keyboard event
39
+ */
40
+ this.handleFirstFocusableElement = (event) => {
41
+ if (event.key === 'Tab' && event.shiftKey) {
42
+ event.preventDefault();
43
+ this.getLastFocusableElement().focus();
44
+ }
45
+ };
46
+ /**
47
+ * Get last focusablmeElement
48
+ * @returns last modal focusable element
49
+ */
50
+ this.getLastFocusableElement = () => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);
51
+ /**
52
+ * Method to manage focus on modal focusable elements
53
+ */
22
54
  this.setFocus = () => {
23
55
  // Get all focusable elements
24
- this.modalFocusableElements = Array.from(this.element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {
25
- acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);
26
- return acc;
27
- }, []);
28
- // When close button is enabled it's the first focusable element.
29
- if (this.closeButton) {
30
- this.modalFocusableElements.unshift(this.element.shadowRoot.querySelector(`.mg-modal__close-button mg-button`));
31
- }
32
- // It at least one
33
- if (this.modalFocusableElements.length >= 1) {
34
- // Set focus on first element
35
- this.modalFocusableElements[0].focus();
56
+ const allFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));
57
+ // If at least one
58
+ if (allFocusableElements.length > 0) {
59
+ this.modalFocusableElements = allFocusableElements.reduce((acc, focusableElement) => {
60
+ acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);
61
+ return acc;
62
+ }, []);
63
+ // When close button is enabled it's the first focusable element.
64
+ if (this.closeButton && this.closeButtonElement !== undefined) {
65
+ this.modalFocusableElements.unshift(this.closeButtonElement);
66
+ }
36
67
  // Add event listener on last element
37
- const lastFocusableElement = this.modalFocusableElements[this.modalFocusableElements.length - 1];
38
- lastFocusableElement.addEventListener('keydown', event => {
39
- if (event.key === 'Tab' && !event.shiftKey) {
40
- event.preventDefault();
41
- this.modalFocusableElements[0].focus();
42
- }
43
- });
68
+ this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);
44
69
  // Add event listener on first element (case shift + tab)
45
- this.modalFocusableElements[0].addEventListener('keydown', event => {
46
- if (event.key === 'Tab' && event.shiftKey) {
47
- event.preventDefault();
48
- lastFocusableElement.focus();
49
- }
50
- });
70
+ this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);
51
71
  }
52
72
  };
53
73
  /*************
@@ -73,15 +93,21 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
73
93
  }
74
94
  }
75
95
  validateHide(newValue) {
96
+ var _a;
76
97
  if (newValue) {
77
98
  this.componentHide.emit();
78
99
  this.classCollection.add(this.classHide);
79
100
  document.body.style.overflow = this.bodyOverflow;
101
+ // reset focus handlers
102
+ (_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleLastFocusableElement);
103
+ if (this.modalFocusableElements.length > 0)
104
+ this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
80
105
  }
81
106
  else {
82
107
  this.componentShow.emit();
83
108
  this.classCollection.delete(this.classHide);
84
109
  document.body.style.overflow = 'hidden';
110
+ this.setFocus();
85
111
  }
86
112
  }
87
113
  /**
@@ -108,9 +134,6 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
108
134
  // Validate
109
135
  this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
110
136
  this.hasContent = this.element.querySelector('[slot="content"]') !== null;
111
- if (this.closeButton) {
112
- this.closeButtonId = `${this.identifier}-close-button`;
113
- }
114
137
  this.titleId = `${this.identifier}-title`;
115
138
  this.validateModalTitle(this.modalTitle);
116
139
  this.validateHide(this.hide);
@@ -120,21 +143,26 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
120
143
  */
121
144
  componentDidLoad() {
122
145
  new MutationObserver(mutationList => {
123
- if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && mutation.target.ariaHidden === null)) {
124
- this.setFocus();
146
+ // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation
147
+ if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes(mutation.target.ariaHidden))) {
148
+ // Set focus on first element
149
+ this.modalFocusableElements[0].focus();
125
150
  }
126
151
  }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });
127
- // Set focus if display on load
128
- if (!this.hide) {
129
- this.setFocus();
130
- }
131
152
  }
132
153
  /**
133
154
  * Render
134
155
  * @returns HTML Element
135
156
  */
136
157
  render() {
137
- return (h("div", { role: "alertdialog", id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
158
+ return (h("div", { role: "alertdialog", id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: el => {
159
+ if (el !== null) {
160
+ // store closeButton Element
161
+ this.closeButtonElement = el;
162
+ // add close button element to modalFocusableElements when it is render
163
+ this.modalFocusableElements.unshift(this.closeButtonElement);
164
+ }
165
+ } }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
138
166
  }
139
167
  get element() { return this; }
140
168
  static get watchers() { return {
@@ -1,4 +1,4 @@
1
- import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
1
+ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
2
  import { c as createID } from './components.utils.js';
3
3
  import { i as initLocales } from './index2.js';
4
4
  import { d as defineCustomElement$5 } from './mg-button2.js';
@@ -115,7 +115,7 @@ const MgPagination = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
115
115
  const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
116
116
  // eslint-disable-next-line react/jsx-no-bind
117
117
  onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
118
- return (h("nav", { "aria-label": this.label, id: this.identifier, class: { 'mg-pagination': true, 'mg-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), h("span", { class: { 'sr-only': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
118
+ return (h(Host, { hidden: this.totalPages < 2 }, h("nav", { "aria-label": this.label, id: this.identifier, class: { 'mg-pagination': true, 'mg-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), h("span", { class: { 'sr-only': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
119
119
  }
120
120
  get element() { return this; }
121
121
  static get watchers() { return {
@@ -18,7 +18,7 @@ const expandToggleDisplays = ['text', 'icon'];
18
18
  */
19
19
  const titlePositions = ['left', 'right'];
20
20
 
21
- 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-panel__header{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 1rem 0 0.3rem;align-items:flex-start}.mg-panel__header.mg-panel__header--reverse{padding-right:0.3rem;padding-left:1rem}.mg-panel__header-title,.mg-panel__header-content{display:flex;margin:0.3rem 0}.mg-panel__header-content{padding-left:0.3rem;flex:1 auto;min-height:var(--default-size);align-items:center}.mg-panel__header-title mg-input-text{flex-grow:1;margin-left:0.3rem}.mg-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:0.3rem}.mg-panel__header-title.mg-panel__header-title--full{flex:1 1 auto}.mg-panel__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-panel__content{padding:var(--mg-panel-content-padding)}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}.mg-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}";
21
+ 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-panel__header{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 1rem 0 0.3rem;align-items:flex-start}.mg-panel__header.mg-panel__header--reverse{padding-right:0.3rem;padding-left:1rem}.mg-panel__header-title,.mg-panel__header-content{display:flex;margin:0.3rem 0}.mg-panel__header-content{padding-left:0.3rem;flex:1 auto;min-height:var(--default-size);align-items:center}.mg-panel__header-title mg-input-text{flex-grow:1;margin-left:0.3rem}.mg-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:0.3rem}.mg-panel__header-title.mg-panel__header-title--full{flex:1 1 auto}.mg-panel__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-panel__collapse-button-icon.mg-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-panel__content{padding:var(--mg-panel-content-padding)}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}.mg-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}";
22
22
 
23
23
  const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
24
24
  constructor() {
@@ -83,7 +83,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
83
83
  * Render collapse button
84
84
  * @returns collpase button
85
85
  */
86
- this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-panel__collapse-button-content" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
86
+ this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-panel__collapse-button-icon': true, 'mg-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
87
87
  /**
88
88
  * Render edit button
89
89
  * @returns edit Button
@@ -40,11 +40,6 @@ const XLINK_NS = 'http://www.w3.org/1999/xlink';
40
40
  * Don't add values to these!!
41
41
  */
42
42
  const EMPTY_OBJ = {};
43
- /**
44
- * Namespaces
45
- */
46
- const SVG_NS = 'http://www.w3.org/2000/svg';
47
- const HTML_NS = 'http://www.w3.org/1999/xhtml';
48
43
  const isDef = (v) => v != null;
49
44
  const isComplexType = (o) => {
50
45
  // https://jsperf.com/typeof-fn-object/5
@@ -564,17 +559,10 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
564
559
  doc.createTextNode('');
565
560
  }
566
561
  else {
567
- if (!isSvgMode) {
568
- isSvgMode = newVNode.$tag$ === 'svg';
569
- }
570
562
  // create element
571
- elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */
563
+ elm = newVNode.$elm$ = (doc.createElement(newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */
572
564
  ? 'slot-fb'
573
- : newVNode.$tag$)
574
- );
575
- if (isSvgMode && newVNode.$tag$ === 'foreignObject') {
576
- isSvgMode = false;
577
- }
565
+ : newVNode.$tag$));
578
566
  // add css classes, attrs, props, listeners, etc.
579
567
  {
580
568
  updateElement(null, newVNode, isSvgMode);
@@ -595,16 +583,6 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
595
583
  }
596
584
  }
597
585
  }
598
- {
599
- if (newVNode.$tag$ === 'svg') {
600
- // Only reset the SVG context when we're exiting <svg> element
601
- isSvgMode = false;
602
- }
603
- else if (elm.tagName === 'foreignObject') {
604
- // Reenter SVG context when we're exiting <foreignObject> element
605
- isSvgMode = true;
606
- }
607
- }
608
586
  }
609
587
  {
610
588
  elm['s-hn'] = hostTagName;
@@ -988,11 +966,6 @@ const patch = (oldVNode, newVNode) => {
988
966
  const text = newVNode.$text$;
989
967
  let defaultHolder;
990
968
  if (text === null) {
991
- {
992
- // test if we're rendering an svg element, or still rendering nodes inside of one
993
- // only add this to the when the compiler sees we're using an svg somewhere
994
- isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
995
- }
996
969
  {
997
970
  if (tag === 'slot')
998
971
  ;
@@ -1021,9 +994,6 @@ const patch = (oldVNode, newVNode) => {
1021
994
  // no new child vnodes, but there are old child vnodes to remove
1022
995
  removeVnodes(oldChildren, 0, oldChildren.length - 1);
1023
996
  }
1024
- if (isSvgMode && tag === 'svg') {
1025
- isSvgMode = false;
1026
- }
1027
997
  }
1028
998
  else if ((defaultHolder = elm['s-cr'])) {
1029
999
  // this element has slotted content
@@ -1310,6 +1280,11 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
1310
1280
  promise = safeCall(instance, 'componentWillLoad');
1311
1281
  }
1312
1282
  }
1283
+ else {
1284
+ {
1285
+ promise = safeCall(instance, 'componentWillUpdate');
1286
+ }
1287
+ }
1313
1288
  endSchedule();
1314
1289
  return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
1315
1290
  };
@@ -1350,7 +1325,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
1350
1325
  };
1351
1326
  const callRender = (hostRef, instance, elm) => {
1352
1327
  try {
1353
- instance = instance.render() ;
1328
+ instance = instance.render && instance.render();
1354
1329
  {
1355
1330
  hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
1356
1331
  }
@@ -1,5 +1,5 @@
1
- import { p as promiseResolve, b as bootstrapLazy } from './index-407d5211.js';
2
- export { s as setNonce } from './index-407d5211.js';
1
+ import { p as promiseResolve, b as bootstrapLazy } from './index-1d40b052.js';
2
+ export { s as setNonce } from './index-1d40b052.js';
3
3
 
4
4
  /*
5
5
  Stencil Client Patch Esm v2.22.1 | MIT Licensed | https://stenciljs.com
@@ -11,7 +11,7 @@ const patchEsm = () => {
11
11
  const defineCustomElements = (win, options) => {
12
12
  if (typeof window === 'undefined') return Promise.resolve();
13
13
  return patchEsm().then(() => {
14
- return bootstrapLazy([["mg-action-more_32",[[1,"mg-input-checkbox",{"value":[1040],"type":[1025],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"displaySelectedValues":[4,"display-selected-values"],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"checkboxItems":[32],"displaySearchInput":[32],"searchValue":[32],"searchResults":[32],"displayError":[64]}],[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1,"title-pattern"],"titlePatternErrorMessage":[1,"title-pattern-error-message"],"titleEditable":[1028,"title-editable"],"titlePosition":[1,"title-position"],"expanded":[1028],"expandToggleDisplay":[1,"expand-toggle-display"],"expandToggleDisabled":[4,"expand-toggle-disabled"],"classCollection":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-input-textarea",{"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"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classCollection":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classCollection":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[4,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classCollection":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classCollection":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classCollection":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[16]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classCollection":[32]}],[2,"mg-input-checkbox-paginated",{"readonly":[4],"disabled":[4],"name":[1],"checkboxes":[16],"sectionKind":[1,"section-kind"],"messages":[16],"titleKind":[32],"currentPage":[32],"itemsExpanded":[32]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"hidePageCount":[4,"hide-page-count"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[4],"classCollection":[32]}],[1,"mg-badge",{"value":[8],"label":[1],"variant":[1],"outline":[4],"classCollection":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-card",{"variant":[1],"variantStyle":[1025,"variant-style"],"classCollection":[32]}],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[4,"full-width"],"form":[1],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classCollection":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[4]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"variantStyle":[1025,"variant-style"],"spin":[4],"classCollection":[32]}]]],["mg-item-more",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
14
+ return bootstrapLazy([["mg-action-more_32",[[1,"mg-input-checkbox",{"value":[1040],"type":[1025],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"displaySelectedValues":[4,"display-selected-values"],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"checkboxItems":[32],"displaySearchInput":[32],"searchValue":[32],"searchResults":[32],"displayError":[64]}],[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1,"title-pattern"],"titlePatternErrorMessage":[1,"title-pattern-error-message"],"titleEditable":[1028,"title-editable"],"titlePosition":[1,"title-position"],"expanded":[1028],"expandToggleDisplay":[1,"expand-toggle-display"],"expandToggleDisabled":[4,"expand-toggle-disabled"],"classCollection":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-input-textarea",{"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"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classCollection":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classCollection":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[4,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classCollection":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classCollection":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classCollection":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[16]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classCollection":[32]}],[2,"mg-input-checkbox-paginated",{"readonly":[4],"disabled":[4],"name":[1],"checkboxes":[16],"sectionKind":[1,"section-kind"],"messages":[16],"titleKind":[32],"currentPage":[32],"expanded":[32]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"hidePageCount":[4,"hide-page-count"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[520,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[4],"classCollection":[32]}],[1,"mg-badge",{"value":[8],"label":[1],"variant":[1],"outline":[4],"classCollection":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-card",{"variant":[1],"variantStyle":[1025,"variant-style"],"classCollection":[32]}],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[4,"full-width"],"form":[1],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classCollection":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[4]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"variantStyle":[1025,"variant-style"],"spin":[4],"classCollection":[32]}]]],["mg-item-more",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
15
15
  });
16
16
  };
17
17