@mgdis/mg-components 5.23.2 → 5.24.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 (182) hide show
  1. package/dist/cjs/app-globals-3a1e7e63.js +7 -0
  2. package/dist/cjs/app-globals-3a1e7e63.js.map +1 -0
  3. package/dist/cjs/{index-775fad7b.js → index-3d4f1cfd.js} +29 -22
  4. package/dist/cjs/index-3d4f1cfd.js.map +1 -0
  5. package/dist/cjs/{mg-menu.conf-0229bb75.js → index-f699ee11.js} +14 -20
  6. package/dist/cjs/index-f699ee11.js.map +1 -0
  7. package/dist/cjs/loader.cjs.js +5 -3
  8. package/dist/cjs/loader.cjs.js.map +1 -1
  9. package/dist/cjs/mg-action-more_34.cjs.entry.js +260 -201
  10. package/dist/cjs/mg-action-more_34.cjs.entry.js.map +1 -1
  11. package/dist/cjs/mg-components.cjs.js +6 -4
  12. package/dist/cjs/mg-components.cjs.js.map +1 -1
  13. package/dist/cjs/mg-item-more.cjs.entry.js +5 -4
  14. package/dist/cjs/mg-item-more.cjs.entry.js.map +1 -1
  15. package/dist/cjs/mg-loader.cjs.entry.js +49 -0
  16. package/dist/cjs/mg-loader.cjs.entry.js.map +1 -0
  17. package/dist/cjs/mg-menu.conf-c291eee6.js +18 -0
  18. package/dist/cjs/mg-menu.conf-c291eee6.js.map +1 -0
  19. package/dist/collection/collection-manifest.json +3 -2
  20. package/dist/collection/components/atoms/mg-card/mg-card.js +1 -1
  21. package/dist/collection/components/atoms/mg-character-left/mg-character-left.js +1 -1
  22. package/dist/collection/components/atoms/mg-divider/mg-divider.js +1 -1
  23. package/dist/collection/components/atoms/mg-input-title/mg-input-title.js +1 -1
  24. package/dist/collection/components/molecules/inputs/MgInput.conf.js +1 -0
  25. package/dist/collection/components/molecules/inputs/MgInput.conf.js.map +1 -1
  26. package/dist/collection/components/molecules/inputs/MgInput.js +34 -27
  27. package/dist/collection/components/molecules/inputs/MgInput.js.map +1 -1
  28. package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js +4 -6
  29. package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js.map +1 -1
  30. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +1 -1
  31. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js.map +1 -1
  32. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.js.map +1 -1
  33. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +42 -5
  34. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js.map +1 -1
  35. package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +27 -5
  36. package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js.map +1 -1
  37. package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.js +1 -0
  38. package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.js.map +1 -1
  39. package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +86 -9
  40. package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js.map +1 -1
  41. package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +26 -1
  42. package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js.map +1 -1
  43. package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +26 -1
  44. package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js.map +1 -1
  45. package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +26 -1
  46. package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js.map +1 -1
  47. package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +29 -4
  48. package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js.map +1 -1
  49. package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +27 -2
  50. package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js.map +1 -1
  51. package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +28 -13
  52. package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js.map +1 -1
  53. package/dist/collection/components/molecules/mg-form/mg-form.js +45 -6
  54. package/dist/collection/components/molecules/mg-form/mg-form.js.map +1 -1
  55. package/dist/collection/components/molecules/mg-loader/mg-loader.js +90 -0
  56. package/dist/collection/components/molecules/mg-loader/mg-loader.js.map +1 -0
  57. package/dist/collection/components/molecules/mg-message/mg-message.js +1 -1
  58. package/dist/collection/components/molecules/mg-modal/mg-modal.js +2 -2
  59. package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +2 -2
  60. package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
  61. package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +1 -1
  62. package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
  63. package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +1 -1
  64. package/dist/collection/locales/en/messages.json +5 -2
  65. package/dist/collection/locales/fr/messages.json +4 -1
  66. package/dist/collection/styles/global.css +1 -1
  67. package/dist/components/MgInput.js +39 -30
  68. package/dist/components/MgInput.js.map +1 -1
  69. package/dist/components/index.es.js.map +1 -1
  70. package/dist/components/index2.js +13 -5
  71. package/dist/components/index2.js.map +1 -1
  72. package/dist/components/mg-card2.js +1 -1
  73. package/dist/components/mg-character-left2.js +1 -1
  74. package/dist/components/mg-divider.js +1 -1
  75. package/dist/components/mg-form.js +29 -7
  76. package/dist/components/mg-form.js.map +1 -1
  77. package/dist/components/mg-input-checkbox-paginated2.js +5 -7
  78. package/dist/components/mg-input-checkbox-paginated2.js.map +1 -1
  79. package/dist/components/mg-input-checkbox.js +20 -6
  80. package/dist/components/mg-input-checkbox.js.map +1 -1
  81. package/dist/components/mg-input-date.js +5 -6
  82. package/dist/components/mg-input-date.js.map +1 -1
  83. package/dist/components/mg-input-numeric.js +30 -5
  84. package/dist/components/mg-input-numeric.js.map +1 -1
  85. package/dist/components/mg-input-password.js +4 -2
  86. package/dist/components/mg-input-password.js.map +1 -1
  87. package/dist/components/mg-input-radio.js +4 -2
  88. package/dist/components/mg-input-radio.js.map +1 -1
  89. package/dist/components/mg-input-select2.js +4 -2
  90. package/dist/components/mg-input-select2.js.map +1 -1
  91. package/dist/components/mg-input-text2.js +6 -4
  92. package/dist/components/mg-input-text2.js.map +1 -1
  93. package/dist/components/mg-input-textarea.js +4 -2
  94. package/dist/components/mg-input-textarea.js.map +1 -1
  95. package/dist/components/mg-input-title2.js +2 -2
  96. package/dist/components/mg-input-title2.js.map +1 -1
  97. package/dist/components/mg-input-toggle.js +6 -13
  98. package/dist/components/mg-input-toggle.js.map +1 -1
  99. package/dist/components/mg-loader.d.ts +11 -0
  100. package/dist/components/mg-loader.js +76 -0
  101. package/dist/components/mg-loader.js.map +1 -0
  102. package/dist/components/mg-message.js +1 -1
  103. package/dist/components/mg-modal.js +2 -2
  104. package/dist/components/mg-pagination2.js +2 -2
  105. package/dist/components/mg-panel.js +1 -1
  106. package/dist/components/mg-popover-content2.js +1 -1
  107. package/dist/components/mg-skip-links.js +1 -1
  108. package/dist/components/mg-tabs.js +1 -1
  109. package/dist/components/mg-tooltip2.js +1 -1
  110. package/dist/components/mg-tooltip2.js.map +1 -1
  111. package/dist/esm/app-globals-0f993ce5.js +5 -0
  112. package/dist/esm/app-globals-0f993ce5.js.map +1 -0
  113. package/dist/esm/{index-9aa447a7.js → index-bcefebe3.js} +29 -22
  114. package/dist/esm/index-bcefebe3.js.map +1 -0
  115. package/dist/esm/{mg-menu.conf-4b2d2eab.js → index-d2fc6ec0.js} +15 -20
  116. package/dist/esm/index-d2fc6ec0.js.map +1 -0
  117. package/dist/esm/loader.js +6 -4
  118. package/dist/esm/loader.js.map +1 -1
  119. package/dist/esm/mg-action-more_34.entry.js +161 -102
  120. package/dist/esm/mg-action-more_34.entry.js.map +1 -1
  121. package/dist/esm/mg-components.js +7 -5
  122. package/dist/esm/mg-components.js.map +1 -1
  123. package/dist/esm/mg-item-more.entry.js +3 -2
  124. package/dist/esm/mg-item-more.entry.js.map +1 -1
  125. package/dist/esm/mg-loader.entry.js +45 -0
  126. package/dist/esm/mg-loader.entry.js.map +1 -0
  127. package/dist/esm/mg-menu.conf-9609bcb2.js +16 -0
  128. package/dist/esm/mg-menu.conf-9609bcb2.js.map +1 -0
  129. package/dist/mg-components/locales/en/messages.json +5 -2
  130. package/dist/mg-components/locales/fr/messages.json +4 -1
  131. package/dist/mg-components/mg-components.css +1 -1
  132. package/dist/mg-components/mg-components.esm.js +1 -1
  133. package/dist/mg-components/mg-components.esm.js.map +1 -1
  134. package/dist/mg-components/p-20a56a75.entry.js +2 -0
  135. package/dist/mg-components/{p-06715c36.entry.js.map → p-20a56a75.entry.js.map} +1 -1
  136. package/dist/mg-components/p-29b5a514.js +2 -0
  137. package/dist/mg-components/p-29b5a514.js.map +1 -0
  138. package/dist/mg-components/{p-4e7a7f68.js → p-878f8f0a.js} +2 -2
  139. package/dist/mg-components/p-878f8f0a.js.map +1 -0
  140. package/dist/mg-components/p-b3f35142.entry.js +2 -0
  141. package/dist/mg-components/p-b3f35142.entry.js.map +1 -0
  142. package/dist/mg-components/p-e1255160.js +2 -0
  143. package/dist/mg-components/p-e1255160.js.map +1 -0
  144. package/dist/mg-components/p-f85b5d14.entry.js +2 -0
  145. package/dist/mg-components/p-f85b5d14.entry.js.map +1 -0
  146. package/dist/mg-components/p-fe935e54.js +2 -0
  147. package/dist/mg-components/p-fe935e54.js.map +1 -0
  148. package/dist/mg-components/styles/global.css +1 -1
  149. package/dist/types/components/molecules/inputs/MgInput.conf.d.ts +26 -0
  150. package/dist/types/components/molecules/inputs/MgInput.d.ts +1 -22
  151. package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.d.ts +0 -1
  152. package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +10 -0
  153. package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts +5 -0
  154. package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.d.ts +4 -1
  155. package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts +14 -2
  156. package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts +5 -1
  157. package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts +5 -0
  158. package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts +5 -1
  159. package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +6 -1
  160. package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +6 -1
  161. package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +10 -7
  162. package/dist/types/components/molecules/mg-form/mg-form.d.ts +6 -0
  163. package/dist/types/components/molecules/mg-loader/mg-loader.d.ts +34 -0
  164. package/dist/types/components.d.ts +127 -8
  165. package/package.json +23 -23
  166. package/dist/cjs/index-775fad7b.js.map +0 -1
  167. package/dist/cjs/mg-menu.conf-0229bb75.js.map +0 -1
  168. package/dist/collection/locales/index.spec.js +0 -27
  169. package/dist/collection/locales/index.spec.js.map +0 -1
  170. package/dist/collection/stories/icon-gallery.js +0 -10
  171. package/dist/collection/stories/icon-gallery.js.map +0 -1
  172. package/dist/collection/utils/behaviors.utils.spec.js +0 -61
  173. package/dist/collection/utils/behaviors.utils.spec.js.map +0 -1
  174. package/dist/esm/index-9aa447a7.js.map +0 -1
  175. package/dist/esm/mg-menu.conf-4b2d2eab.js.map +0 -1
  176. package/dist/mg-components/p-06715c36.entry.js +0 -2
  177. package/dist/mg-components/p-1564df7a.js +0 -2
  178. package/dist/mg-components/p-1564df7a.js.map +0 -1
  179. package/dist/mg-components/p-4e7a7f68.js.map +0 -1
  180. package/dist/mg-components/p-fee35953.entry.js +0 -2
  181. package/dist/mg-components/p-fee35953.entry.js.map +0 -1
  182. package/dist/types/stories/icon-gallery.d.ts +0 -6
@@ -1 +1 @@
1
- {"file":"mg-input-title2.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,yOAAyO,CAAC;AAClQ,2BAAe,eAAe;;MCOjB,YAAY;;;;;;;wBAyBJ,KAAK;uBASL,OAAO;;IA5B1B,kBAAkB,CAAC,QAAoC;QACrD,IAAI,CAACA,EAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;SACpE;KACF;IAiBD,gBAAgB,CAAC,QAAkC;QACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;KAC9C;;;;;;;IAcD,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACtC;;;;;IAMD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;;QAEtD,QACE,EAAC,OAAO,qDAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,IACpF,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,YAAM,KAAK,EAAC,4BAA4B,cAChC,YAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isValidString"],"sources":["../styles/dist/components/mg-input-title.css?tag=mg-input-title&encapsulation=scoped","src/components/atoms/mg-input-title/mg-input-title.tsx"],"sourcesContent":[".mg-u-is-asterisk{color:hsl(var(--color-danger))}legend.mg-c-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required{display:var(--mg-input-title-display, unset)}/*# sourceMappingURL=mg-input-title.css.map */\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-input-title',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css',\n scoped: true,\n})\nexport class MgInputTitle {\n /**\n * Label input id\n */\n @Prop() identifier!: string;\n @Watch('identifier')\n validateIdentifier(newValue: MgInputTitle['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-input-title> prop \"identifier\" is required.');\n }\n }\n\n /**\n * If input is required an asterisk is added at the end of the label\n */\n @Prop() required: boolean;\n\n /**\n * If input is required an asterisk is added at the end of the label\n */\n @Prop() readonly: boolean;\n\n /**\n * Switch from label to fieldset sementic\n */\n @Prop() isLegend = false;\n @Watch('isLegend')\n validateIsLegend(newValue: MgInputTitle['isLegend']) {\n this.tagName = newValue ? 'legend' : 'label';\n }\n\n /**\n * Component parent tagname\n */\n @State() tagName = 'label';\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Init tag name\n */\n componentWillLoad(): void {\n this.validateIdentifier(this.identifier);\n this.validateIsLegend(this.isLegend);\n }\n\n /**\n * Render\n * @returns HTML element\n */\n render(): HTMLElement {\n const TagName = this.readonly ? 'span' : this.tagName;\n // \\u00A0 represent a &nbsp;\n return (\n <TagName class=\"mg-c-input-title\" htmlFor={this.isLegend ? undefined : this.identifier}>\n <slot></slot>\n {this.required && (\n <span class=\"mg-c-input-title__required\">\n &nbsp;<span class=\"mg-u-is-asterisk\">*</span>\n </span>\n )}\n </TagName>\n );\n }\n}\n"],"version":3}
1
+ {"file":"mg-input-title2.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,gUAAgU,CAAC;AACzV,2BAAe,eAAe;;MCOjB,YAAY;;;;;;;wBAyBJ,KAAK;uBASL,OAAO;;IA5B1B,kBAAkB,CAAC,QAAoC;QACrD,IAAI,CAACA,EAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;SACpE;KACF;IAiBD,gBAAgB,CAAC,QAAkC;QACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;KAC9C;;;;;;;IAcD,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACtC;;;;;IAMD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;;QAEtD,QACE,EAAC,OAAO,qDAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,IACpF,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,YAAM,KAAK,EAAC,4BAA4B,cAChC,YAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isValidString"],"sources":["../styles/dist/components/mg-input-title.css?tag=mg-input-title&encapsulation=scoped","src/components/atoms/mg-input-title/mg-input-title.tsx"],"sourcesContent":[".mg-u-form-legacy{--mg-form-inputs-title-width: calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:hsl(var(--color-danger))}legend.mg-c-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required{display:var(--mg-input-title-display, unset)}/*# sourceMappingURL=mg-input-title.css.map */\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-input-title',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css',\n scoped: true,\n})\nexport class MgInputTitle {\n /**\n * Label input id\n */\n @Prop() identifier!: string;\n @Watch('identifier')\n validateIdentifier(newValue: MgInputTitle['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-input-title> prop \"identifier\" is required.');\n }\n }\n\n /**\n * If input is required an asterisk is added at the end of the label\n */\n @Prop() required: boolean;\n\n /**\n * If input is required an asterisk is added at the end of the label\n */\n @Prop() readonly: boolean;\n\n /**\n * Switch from label to fieldset sementic\n */\n @Prop() isLegend = false;\n @Watch('isLegend')\n validateIsLegend(newValue: MgInputTitle['isLegend']) {\n this.tagName = newValue ? 'legend' : 'label';\n }\n\n /**\n * Component parent tagname\n */\n @State() tagName = 'label';\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Init tag name\n */\n componentWillLoad(): void {\n this.validateIdentifier(this.identifier);\n this.validateIsLegend(this.isLegend);\n }\n\n /**\n * Render\n * @returns HTML element\n */\n render(): HTMLElement {\n const TagName = this.readonly ? 'span' : this.tagName;\n // \\u00A0 represent a &nbsp;\n return (\n <TagName class=\"mg-c-input-title\" htmlFor={this.isLegend ? undefined : this.identifier}>\n <slot></slot>\n {this.required && (\n <span class=\"mg-c-input-title__required\">\n &nbsp;<span class=\"mg-u-is-asterisk\">*</span>\n </span>\n )}\n </TagName>\n );\n }\n}\n"],"version":3}
@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './mg-input-title2.js';
6
6
  import { d as defineCustomElement$3 } from './mg-tooltip2.js';
7
7
  import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
8
8
 
9
- const mgInputToggleCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.5rem .9rem;border:0;border-radius:calc((var(--font-size)*var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)*var(--line-height) + 2*(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)*var(--line-height) + 1rem);height:calc(var(--font-size)*var(--line-height) + 1rem);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__button-toggle{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);cursor:initial}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__toggle-item-container:last-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{display:flex}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--color-dark));font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}";
9
+ const mgInputToggleCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title mg-input-title+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__title{width:auto;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}.mg-c-input.mg-c-input--label-on-top .mg-c-input__title mg-input-title{width:100%;flex-shrink:1}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}@media screen and (max-width: 767px){.mg-c-input{flex-direction:column}.mg-c-input .mg-c-input__title{width:auto;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}.mg-c-input .mg-c-input__title mg-input-title{width:100%;flex-shrink:1}.mg-c-input .mg-c-input__input-container{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:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.5rem .9rem;border:0;border-radius:calc((var(--font-size)*var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)*var(--line-height) + 2*(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)*var(--line-height) + 1rem);height:calc(var(--font-size)*var(--line-height) + 1rem);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--color-dark));font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}";
10
10
  const MgInputToggleStyle0 = mgInputToggleCss;
11
11
 
12
12
  /**
@@ -26,7 +26,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
26
26
  * Internal *
27
27
  ************/
28
28
  // Classes
29
- this.classReadonly = 'mg-c-input--toggle-readonly';
30
29
  this.classDisabled = 'mg-c-input--toggle-disabled';
31
30
  this.classIsActive = 'mg-c-input--toggle-is-active';
32
31
  this.classOnOff = 'mg-c-input--toggle-on-off';
@@ -75,6 +74,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
75
74
  this.readonly = false;
76
75
  this.disabled = false;
77
76
  this.tooltip = undefined;
77
+ this.tooltipPosition = 'input';
78
78
  this.helpText = undefined;
79
79
  this.classCollection = new Fe(['mg-c-input--toggle']);
80
80
  this.options = undefined;
@@ -97,7 +97,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
97
97
  this.options = newValue.map(item => ({ title: item, value: item }));
98
98
  }
99
99
  // Object array
100
- else if (newValue && newValue.every(item => isOption(item))) {
100
+ else if (newValue === null || newValue === void 0 ? void 0 : newValue.every(item => isOption(item))) {
101
101
  this.options = newValue;
102
102
  }
103
103
  else {
@@ -116,12 +116,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
116
116
  else
117
117
  this.classCollection.delete(this.classIcon);
118
118
  }
119
- handleReadonly(newValue) {
120
- if (newValue)
121
- this.classCollection.add(this.classReadonly);
122
- else
123
- this.classCollection.delete(this.classReadonly);
124
- }
125
119
  handleDisabled(newValue) {
126
120
  if (newValue)
127
121
  this.classCollection.add(this.classDisabled);
@@ -196,7 +190,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
196
190
  // apply handler
197
191
  this.handleIsOnOff(this.isOnOff);
198
192
  this.handleIsIcon(this.isIcon);
199
- this.handleReadonly(this.readonly);
200
193
  this.handleDisabled(this.disabled);
201
194
  }
202
195
  /**
@@ -204,7 +197,8 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
204
197
  * @returns HTML Element
205
198
  */
206
199
  render() {
207
- return (h(MgInput, { key: '2637550cb5e98dc92cba8c362610a246e537473d', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("button", { key: '63e4399d445ce876c767a045c6bab8d4f20da1be', type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { key: 'b38f16ddaaa4c0ce8f32a46d5ca22fe0b0656ad5', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'dd910979d5043a56f98358b2443507440cec8a93', name: "item-1" })), h("span", { key: 'acc65197a4f30f7b65c070f9f9299e7a5e913040', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'dee4de86838005833bfa1a613b21f065354ca2f4', name: "item-2" })))));
200
+ var _a;
201
+ return (h(MgInput, { key: '003966a67f60157bcabfd072fca622446859a57d', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), readonlyValue: this.options[this.checked ? 1 : 0].title, tooltip: !this.readonly && this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("button", { key: '938f53b06216e53cb8fc7deef890cd3934fa3d4c', type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { key: '5a78ecc67f07570eef67095b7ab135619eadabb9', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'e941286364df7540ab97b64995346650ca45038a', name: "item-1" })), h("span", { key: '55d499a0fdfcc57b389fbaa45f9ce492375a30dc', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: '2e10b8a60de54fa9826e69f95191773e7de878ec', name: "item-2" })))));
208
202
  }
209
203
  get element() { return this; }
210
204
  static get watchers() { return {
@@ -212,7 +206,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
212
206
  "items": ["validateItems"],
213
207
  "isOnOff": ["handleIsOnOff"],
214
208
  "isIcon": ["handleIsIcon"],
215
- "readonly": ["handleReadonly"],
216
209
  "disabled": ["handleDisabled"],
217
210
  "checked": ["handleChecked"]
218
211
  }; }
@@ -230,6 +223,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
230
223
  "readonly": [4],
231
224
  "disabled": [4],
232
225
  "tooltip": [1],
226
+ "tooltipPosition": [1, "tooltip-position"],
233
227
  "helpText": [1, "help-text"],
234
228
  "classCollection": [32],
235
229
  "options": [32],
@@ -242,7 +236,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
242
236
  "items": ["validateItems"],
243
237
  "isOnOff": ["handleIsOnOff"],
244
238
  "isIcon": ["handleIsIcon"],
245
- "readonly": ["handleReadonly"],
246
239
  "disabled": ["handleDisabled"],
247
240
  "checked": ["handleChecked"]
248
241
  }]);
@@ -1 +1 @@
1
- {"file":"mg-input-toggle.js","mappings":"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","names":["MgInputToggle","ClassList","allItemsAreString","isValidString"],"sources":["../styles/dist/components/mg-input-toggle.css?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.5rem .9rem;border:0;border-radius:calc((var(--font-size)*var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)*var(--line-height) + 2*(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)*var(--line-height) + 1rem);height:calc(var(--font-size)*var(--line-height) + 1rem);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__button-toggle{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);cursor:initial}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__toggle-item-container:last-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{display:flex}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--color-dark));font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}/*# sourceMappingURL=mg-input-toggle.css.map */\n","/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n */\nconst isOption = (option: ToggleValue): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\n\n@Component({\n tag: 'mg-input-toggle',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n shadow: true,\n})\nexport class MgInputToggle {\n /************\n * Internal *\n ************/\n\n // Classes\n private classReadonly = 'mg-c-input--toggle-readonly';\n private classDisabled = 'mg-c-input--toggle-disabled';\n private classIsActive = 'mg-c-input--toggle-is-active';\n private classOnOff = 'mg-c-input--toggle-on-off';\n private classIcon = 'mg-c-input--toggle-icon';\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputToggleElement;\n\n /**\n * Component value\n */\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n handleValue(newValue: any): void {\n // Swich to the right option\n this.setChecked();\n // Emit value-change event\n this.valueChange.emit(newValue);\n }\n\n /**\n * Items are the possible options to select\n */\n @Prop() items!: string[] | ToggleValue[];\n @Watch('items')\n validateItems(newValue: string[] | ToggleValue[]): void {\n if (typeof newValue === 'object' && this.items.length !== 2) {\n throw new Error('<mg-input-toggle> prop \"items\" require 2 items.');\n }\n // String array\n else if (allItemsAreString(newValue as string[])) {\n this.options = (newValue as string[]).map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (newValue && (newValue as ToggleValue[]).every(item => isOption(item))) {\n this.options = newValue as ToggleValue[];\n } else {\n throw new Error('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n }\n }\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n\n /**\n * Input name\n * If not set the value equals the identifier\n */\n @Prop() name: string = this.identifier;\n\n /**\n * Input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop: boolean;\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide = false;\n\n /**\n * Define if toggle have on/off style\n */\n @Prop() isOnOff = false;\n @Watch('isOnOff')\n handleIsOnOff(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classOnOff);\n else this.classCollection.delete(this.classOnOff);\n }\n\n /**\n * Define if toggle display icon\n */\n @Prop() isIcon = false;\n @Watch('isIcon')\n handleIsIcon(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classIcon);\n else this.classCollection.delete(this.classIcon);\n }\n\n /**\n * Define if input is readonly\n */\n @Prop() readonly = false;\n @Watch('readonly')\n handleReadonly(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classReadonly);\n else this.classCollection.delete(this.classReadonly);\n }\n\n /**\n * Define if input is disabled\n */\n @Prop() disabled = false;\n @Watch('disabled')\n handleDisabled(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classDisabled);\n else this.classCollection.delete(this.classDisabled);\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip: string;\n\n /**\n * Add a help text under the input, usually expected data format and example\n */\n @Prop() helpText: string;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n /**\n * Formated items for display\n */\n @State() options: ToggleValue[];\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Define input valid state\n */\n @State() valid: boolean;\n\n /**\n * Checked internal value\n */\n @State() checked = false;\n @Watch('checked')\n handleChecked(newValue: boolean): void {\n // style\n if (newValue) this.classCollection.add(this.classIsActive);\n else this.classCollection.delete(this.classIsActive);\n\n // update value\n this.value = this.options[newValue ? 1 : 0].value;\n }\n\n /**\n * Emited event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /**\n * Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n */\n @Method()\n async setError(valid: boolean, errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.valid = valid;\n this.inputValid.emit(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n }\n }\n\n /**\n * Set input error message\n * @param errorMessage - errorMessage override\n */\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does have a custom error message\n if (!this.valid && errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n };\n\n /**\n * Change checked value\n */\n private toggleChecked = (): void => {\n this.checked = !this.checked;\n };\n\n /**\n * Slots validation\n */\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children);\n if (slots.length !== 2) {\n throw new Error('<mg-input-toggle> 2 slots are required.');\n } else if (!this.isIcon) {\n // Due to text-overflow set to ellipsis\n // we need to ensure that slot element have title to display value on mouse over\n slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n }\n };\n\n /**\n * set checked state\n */\n private setChecked(): void {\n const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n if ([0, 1].includes(optionTrueValueIndex)) {\n // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n // true props will be represent by \"true\" string so we convert it has boolean\n // true attribute will be represent by \"\" string so we convert it has boolean\n // https://stenciljs.com/docs/properties\n if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n this.value = true;\n }\n\n // when options are boolean values and ordered as [true,false] instead [false,true]\n // we need to reversed the checked value logic\n const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n } else {\n this.checked = this.value === this.options[1].value;\n }\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Check items format\n this.validateItems(this.items);\n // Check slots\n this.validateSlots();\n // init checked value\n this.setChecked();\n // apply handler\n this.handleIsOnOff(this.isOnOff);\n this.handleIsIcon(this.isIcon);\n this.handleReadonly(this.readonly);\n this.handleDisabled(this.disabled);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n readonly={undefined}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value as string}\n readonlyValue={undefined}\n tooltip={!this.readonly && this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={this.checked.toString()}\n aria-readonly={this.disabled || this.readonly}\n id={this.identifier}\n class=\"mg-c-input__button-toggle\"\n disabled={this.disabled || this.readonly}\n onClick={this.toggleChecked}\n >\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-1\"></slot>\n </span>\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-2\"></slot>\n </span>\n </button>\n </MgInput>\n );\n }\n}\n"],"version":3}
1
+ {"file":"mg-input-toggle.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,61LAA61L,CAAC;AACv3L,4BAAe,gBAAgB;;ACO/B;;;;;AAKA,MAAM,QAAQ,GAAG,CAAC,MAAe,KAC/B,OAAO,MAAM,KAAK,QAAQ,IAAI,OAAQ,MAAsB,CAAC,KAAK,KAAK,QAAQ,IAAK,MAAsB,CAAC,KAAK,KAAK,SAAS,CAAC;MAOpHA,eAAa;;;;;;;;;;;QAMhB,kBAAa,GAAG,6BAA6B,CAAC;QAC9C,kBAAa,GAAG,8BAA8B,CAAC;QAC/C,eAAU,GAAG,2BAA2B,CAAC;QACzC,cAAS,GAAG,yBAAyB,CAAC;;;;;QA6LtC,oBAAe,GAAG,CAAC,YAAqB;;YAE9C,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;;YAE9B,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,YAAY,KAAK,SAAS,EAAE;gBAC7C,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;aAClC;SACF,CAAC;;;;QAKM,kBAAa,GAAG;YACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B,CAAC;;;;QAKM,kBAAa,GAAG;YACtB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAChD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;gBACtB,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;aAC5D;iBAAM,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;;;gBAGvB,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;aACrE;SACF,CAAC;;;;oBApKqB,IAAI,CAAC,UAAU;;;yBAelB,KAAK;uBAKP,KAAK;sBAUN,KAAK;wBAUH,KAAK;wBAKL,KAAK;;+BAemB,OAAO;;+BAUZ,IAAIC,EAAS,CAAC,CAAC,oBAAoB,CAAC,CAAC;;;;uBAoBxD,KAAK;;IA/HxB,WAAW,CAAC,QAAa;;QAEvB,IAAI,CAAC,UAAU,EAAE,CAAC;;QAElB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjC;IAOD,aAAa,CAAC,QAAgC;QAC5C,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YAC3D,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;SACpE;;aAEI,IAAIC,EAAiB,CAAC,QAAQ,CAAC,EAAE;YACpC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;SACrE;;aAEI,IAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE;YAChD,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;SACzB;aAAM;YACL,MAAM,IAAI,KAAK,CAAC,8FAA8F,CAAC,CAAC;SACjH;KACF;IAiCD,aAAa,CAAC,QAAkC;QAC9C,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;;YACnD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACnD;IAOD,YAAY,CAAC,QAAiC;QAC5C,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;YAClD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAClD;IAYD,cAAc,CAAC,QAAmC;QAChD,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;YACtD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACtD;IA0CD,aAAa,CAAC,QAAkC;;QAE9C,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;YACtD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;QAGrD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;KACnD;;;;;;;;;IAqBD,MAAM,QAAQ,CAAC,KAAc,EAAE,YAAoB;QACjD,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;YAC9B,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC,CAAC;SAC1F;aAAM,IAAI,CAACC,EAAa,CAAC,YAAY,CAAC,EAAE;YACvC,MAAM,IAAI,KAAK,CAAC,6EAA6E,CAAC,CAAC;SAChG;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC5B,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,SAAS,GAAG,YAAY,CAAC,CAAC;SACxD;KACF;;;;IAuCO,UAAU;QAChB,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC;QAEzG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE;;;;;YAKzC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAe,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,SAAS,EAAE;gBAC1G,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;aACnB;;;YAID,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,KAAK,CAAC;YAC9E,IAAI,CAAC,OAAO,GAAG,oBAAoB,KAAK,CAAC,GAAG,CAAC,aAAa,GAAG,aAAa,CAAC;SAC5E;aAAM;YACL,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;SACrD;KACF;;;;;;;IASD,iBAAiB;;QAEf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;QAE/B,IAAI,CAAC,aAAa,EAAE,CAAC;;QAErB,IAAI,CAAC,UAAU,EAAE,CAAC;;QAElB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;;;;;IAMD,MAAM;;QACJ,QACE,EAAC,OAAO,qDACN,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,kBAAkB,EAAE,EAAE,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,EAC7B,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EACvD,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EACvC,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,KAAK,IAEjB,+DACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,mBACtB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAC7C,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAC,2BAA2B,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,OAAO,EAAE,IAAI,CAAC,aAAa,IAE3B,4EAAkB,MAAM,EAAC,KAAK,EAAC,mCAAmC,IAChE,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,EACP,4EAAkB,MAAM,EAAC,KAAK,EAAC,mCAAmC,IAChE,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,CACA,CACD,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgInputToggle","ClassList","allItemsAreString","isValidString"],"sources":["../styles/dist/components/mg-input-toggle.css?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title mg-input-title+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__title{width:auto;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}.mg-c-input.mg-c-input--label-on-top .mg-c-input__title mg-input-title{width:100%;flex-shrink:1}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}@media screen and (max-width: 767px){.mg-c-input{flex-direction:column}.mg-c-input .mg-c-input__title{width:auto;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}.mg-c-input .mg-c-input__title mg-input-title{width:100%;flex-shrink:1}.mg-c-input .mg-c-input__input-container{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:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.5rem .9rem;border:0;border-radius:calc((var(--font-size)*var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)*var(--line-height) + 2*(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)*var(--line-height) + 1rem);height:calc(var(--font-size)*var(--line-height) + 1rem);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--color-dark));font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}/*# sourceMappingURL=mg-input-toggle.css.map */\n","/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\nimport { type TooltipPosition } from '../MgInput.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n */\nconst isOption = (option: unknown): option is ToggleValue =>\n typeof option === 'object' && typeof (option as ToggleValue).title === 'string' && (option as ToggleValue).value !== undefined;\n\n@Component({\n tag: 'mg-input-toggle',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n shadow: true,\n})\nexport class MgInputToggle {\n /************\n * Internal *\n ************/\n\n // Classes\n private classDisabled = 'mg-c-input--toggle-disabled';\n private classIsActive = 'mg-c-input--toggle-is-active';\n private classOnOff = 'mg-c-input--toggle-on-off';\n private classIcon = 'mg-c-input--toggle-icon';\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgInputToggleElement;\n\n /**\n * Component value\n */\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n handleValue(newValue: any): void {\n // Swich to the right option\n this.setChecked();\n // Emit value-change event\n this.valueChange.emit(newValue);\n }\n\n /**\n * Items are the possible options to select\n */\n @Prop() items!: string[] | ToggleValue[];\n @Watch('items')\n validateItems(newValue: MgInputToggle['items']): void {\n if (typeof newValue === 'object' && this.items.length !== 2) {\n throw new Error('<mg-input-toggle> prop \"items\" require 2 items.');\n }\n // String array\n else if (allItemsAreString(newValue)) {\n this.options = newValue.map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (newValue?.every(item => isOption(item))) {\n this.options = newValue;\n } else {\n throw new Error('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n }\n }\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n */\n @Prop() identifier!: string;\n\n /**\n * Input name\n * If not set the value equals the identifier\n */\n @Prop() name: string = this.identifier;\n\n /**\n * Input label\n */\n @Prop() label!: string;\n\n /**\n * Define if label is displayed on top\n */\n @Prop() labelOnTop: boolean;\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide = false;\n\n /**\n * Define if toggle have on/off style\n */\n @Prop() isOnOff = false;\n @Watch('isOnOff')\n handleIsOnOff(newValue: MgInputToggle['isOnOff']): void {\n if (newValue) this.classCollection.add(this.classOnOff);\n else this.classCollection.delete(this.classOnOff);\n }\n\n /**\n * Define if toggle display icon\n */\n @Prop() isIcon = false;\n @Watch('isIcon')\n handleIsIcon(newValue: MgInputToggle['isIcon']): void {\n if (newValue) this.classCollection.add(this.classIcon);\n else this.classCollection.delete(this.classIcon);\n }\n\n /**\n * Define if input is readonly\n */\n @Prop() readonly = false;\n\n /**\n * Define if input is disabled\n */\n @Prop() disabled = false;\n @Watch('disabled')\n handleDisabled(newValue: MgInputToggle['disabled']): void {\n if (newValue) this.classCollection.add(this.classDisabled);\n else this.classCollection.delete(this.classDisabled);\n }\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip: string;\n\n /**\n * Define tooltip position\n */\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /**\n * Add a help text under the input, usually expected data format and example\n */\n @Prop() helpText: string;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n /**\n * Formated items for display\n */\n @State() options: ToggleValue[];\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Define input valid state\n */\n @State() valid: boolean;\n\n /**\n * Checked internal value\n */\n @State() checked = false;\n @Watch('checked')\n handleChecked(newValue: MgInputToggle['checked']): void {\n // style\n if (newValue) this.classCollection.add(this.classIsActive);\n else this.classCollection.delete(this.classIsActive);\n\n // update value\n this.value = this.options[newValue ? 1 : 0].value;\n }\n\n /**\n * Emited event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /**\n * Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n */\n @Method()\n async setError(valid: boolean, errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.valid = valid;\n this.inputValid.emit(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n }\n }\n\n /**\n * Set input error message\n * @param errorMessage - errorMessage override\n */\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does have a custom error message\n if (!this.valid && errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n };\n\n /**\n * Change checked value\n */\n private toggleChecked = (): void => {\n this.checked = !this.checked;\n };\n\n /**\n * Slots validation\n */\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children);\n if (slots.length !== 2) {\n throw new Error('<mg-input-toggle> 2 slots are required.');\n } else if (!this.isIcon) {\n // Due to text-overflow set to ellipsis\n // we need to ensure that slot element have title to display value on mouse over\n slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n }\n };\n\n /**\n * set checked state\n */\n private setChecked(): void {\n const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n if ([0, 1].includes(optionTrueValueIndex)) {\n // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n // true props will be represent by \"true\" string so we convert it has boolean\n // true attribute will be represent by \"\" string so we convert it has boolean\n // https://stenciljs.com/docs/properties\n if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n this.value = true;\n }\n\n // when options are boolean values and ordered as [true,false] instead [false,true]\n // we need to reversed the checked value logic\n const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n } else {\n this.checked = this.value === this.options[1].value;\n }\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Check items format\n this.validateItems(this.items);\n // Check slots\n this.validateSlots();\n // init checked value\n this.setChecked();\n // apply handler\n this.handleIsOnOff(this.isOnOff);\n this.handleIsIcon(this.isIcon);\n this.handleDisabled(this.disabled);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n readonly={this.readonly}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value?.toString()}\n readonlyValue={this.options[this.checked ? 1 : 0].title}\n tooltip={!this.readonly && this.tooltip}\n tooltipPosition={this.tooltipPosition}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={this.checked.toString()}\n aria-readonly={this.disabled || this.readonly}\n id={this.identifier}\n class=\"mg-c-input__button-toggle\"\n disabled={this.disabled || this.readonly}\n onClick={this.toggleChecked}\n >\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-1\"></slot>\n </span>\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-2\"></slot>\n </span>\n </button>\n </MgInput>\n );\n }\n}\n"],"version":3}
@@ -0,0 +1,11 @@
1
+ import type { Components, JSX } from "../types/components";
2
+
3
+ interface MgLoader extends Components.MgLoader, HTMLElement {}
4
+ export const MgLoader: {
5
+ prototype: MgLoader;
6
+ new (): MgLoader;
7
+ };
8
+ /**
9
+ * Used to define this component and all nested components recursively.
10
+ */
11
+ export const defineCustomElement: () => void;
@@ -0,0 +1,76 @@
1
+ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
+ import { i as initLocales } from './index2.js';
3
+ import { H as He } from './index.es.js';
4
+ import { d as defineCustomElement$2 } from './mg-icon2.js';
5
+
6
+ const mgLoaderCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;text-align:center}";
7
+ const MgLoaderStyle0 = mgLoaderCss;
8
+
9
+ const MgLoader$1 = /*@__PURE__*/ proxyCustomElement(class MgLoader extends HTMLElement {
10
+ constructor() {
11
+ super();
12
+ this.__registerHost();
13
+ this.__attachShadow();
14
+ this.message = undefined;
15
+ this.messageHide = undefined;
16
+ }
17
+ watchMessage(newValue) {
18
+ if (newValue && !He(newValue))
19
+ throw new Error('<mg-loader> prop "message" must be a valid string.');
20
+ }
21
+ /*************
22
+ * Lifecycle *
23
+ *************/
24
+ /**
25
+ * Check if component props are well configured on init
26
+ */
27
+ componentWillLoad() {
28
+ // Get locales
29
+ this.messages = initLocales(this.element).messages;
30
+ // validate props
31
+ this.watchMessage(this.message);
32
+ }
33
+ /**
34
+ * Render
35
+ * @returns HTML Element
36
+ */
37
+ render() {
38
+ return (h("div", { key: 'f308fffd47bf8ef4ca08364bc55f2966ed626a9f', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '3d99e25ed45daed36673314dee7f9d2f1672ef99', icon: "loader", spin: true }), h("span", { key: 'bcdbaa246385817265f386df86cb29b848c9797b', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgess)));
39
+ }
40
+ get element() { return this; }
41
+ static get watchers() { return {
42
+ "message": ["watchMessage"]
43
+ }; }
44
+ static get style() { return MgLoaderStyle0; }
45
+ }, [1, "mg-loader", {
46
+ "message": [1],
47
+ "messageHide": [4, "message-hide"]
48
+ }, undefined, {
49
+ "message": ["watchMessage"]
50
+ }]);
51
+ function defineCustomElement$1() {
52
+ if (typeof customElements === "undefined") {
53
+ return;
54
+ }
55
+ const components = ["mg-loader", "mg-icon"];
56
+ components.forEach(tagName => { switch (tagName) {
57
+ case "mg-loader":
58
+ if (!customElements.get(tagName)) {
59
+ customElements.define(tagName, MgLoader$1);
60
+ }
61
+ break;
62
+ case "mg-icon":
63
+ if (!customElements.get(tagName)) {
64
+ defineCustomElement$2();
65
+ }
66
+ break;
67
+ } });
68
+ }
69
+ defineCustomElement$1();
70
+
71
+ const MgLoader = MgLoader$1;
72
+ const defineCustomElement = defineCustomElement$1;
73
+
74
+ export { MgLoader, defineCustomElement };
75
+
76
+ //# sourceMappingURL=mg-loader.js.map
@@ -0,0 +1 @@
1
+ {"file":"mg-loader.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,yjBAAyjB,CAAC;AAC9kB,uBAAe,WAAW;;MCQbA,UAAQ;;;;;;;;IAsBnB,YAAY,CAAC,QAA6B;QACxC,IAAI,QAAQ,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;KACjH;;;;;;;IAcD,iBAAiB;;QAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;;QAGnD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACjC;;;;;IAMD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,aAAa,eAAW,QAAQ,IACzC,gEAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,SAAW,EACtC,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAQ,CAC9G,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgLoader","isValidString"],"sources":["../styles/dist/components/mg-loader.css?tag=mg-loader&encapsulation=shadow","src/components/molecules/mg-loader/mg-loader.tsx"],"sourcesContent":[".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;text-align:center}/*# sourceMappingURL=mg-loader.css.map */\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-loader',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-loader.css',\n shadow: true,\n})\nexport class MgLoader {\n /************\n * Internal *\n ************/\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgLoaderElement;\n\n /**\n * Override loader message\n */\n @Prop() message: string;\n @Watch('message')\n watchMessage(newValue: MgLoader['message']): void {\n if (newValue && !isValidString(newValue)) throw new Error('<mg-loader> prop \"message\" must be a valid string.');\n }\n\n /**\n * Hide message\n */\n @Prop() messageHide: boolean;\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n\n // validate props\n this.watchMessage(this.message);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class=\"mg-c-loader\" aria-live=\"polite\">\n <mg-icon icon=\"loader\" spin></mg-icon>\n <span class={{ 'mg-u-visually-hidden': this.messageHide }}>{this.message || this.messages.loader.inProgess}</span>\n </div>\n );\n }\n}\n"],"version":3}
@@ -168,7 +168,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
168
168
  let role;
169
169
  if (!this.noAriaRole)
170
170
  role = this.variant === 'info' ? 'status' : 'alert';
171
- return (h("div", { key: 'e322f37d30825ef3a35487c0073d88690468a3c5', id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { key: 'fde621ad12803042b0521f663e046fa9e8554123', variant: this.variant, "variant-style": "bar-left" }, h("span", { key: '7b58b099e831bd6c21c9d2e5227f348982164e56', class: "mg-c-message__icon" }, h("mg-icon", { key: '213105901e4bbd702464a458dab131824a70904b', icon: this.getIcon() })), h("div", { key: '0084693dfc77abb64296ce4d85e1e30b24122623', class: "mg-c-message__content" }, h("span", { key: '8b17d62709ebde902e2ca52764ed7d053cbd0c51', class: "mg-c-message__content-slot" }, h("slot", { key: '0f63025c6b86b318b60b6a32bc75af366d439536' })), this.hasActions && h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { class: "mg-c-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-c-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
171
+ return (h("div", { key: 'fb10ca559b2039f9d7842e4b2ce88e25a1999c96', id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { key: 'c0afc8ad8c56f9e5fb5041aaa201de208f3fc6fd', variant: this.variant, "variant-style": "bar-left" }, h("span", { key: '949f48302c8feb721f1b9acb663bf21acfc166e1', class: "mg-c-message__icon" }, h("mg-icon", { key: 'a3daa1da6d312c6b6b921cc01edae9763a81225f', icon: this.getIcon() })), h("div", { key: 'c53239107f094fe341f6abb1441096767b648796', class: "mg-c-message__content" }, h("span", { key: 'fb4da55da5853179204771cf9f5d01a02ed8a9ce', class: "mg-c-message__content-slot" }, h("slot", { key: 'e7339501b750d02a3e433e40903d460588dd4b33' })), this.hasActions && h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { class: "mg-c-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-c-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
172
172
  }
173
173
  get element() { return this; }
174
174
  static get watchers() { return {
@@ -168,14 +168,14 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
168
168
  * @returns HTML Element
169
169
  */
170
170
  render() {
171
- return (h("div", { key: '0175582c259397c75a0c859db678e59318be9f64', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", { key: '6ba0b633bed3c94e0931ea9123b891f3439bf5db' }, h("div", { key: '111e1557f32cbe74868254a91684d4df302b4724', class: "mg-c-modal__dialog" }, h("header", { key: '0f5c843e91f2f5d9ccffe5235c799517edd71f08', class: "mg-c-modal__header" }, this.closeButton && (h("span", { class: "mg-c-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) => {
171
+ return (h("div", { key: '5cf37ab3cd51af984852f3ef6dfeb9e9adf851aa', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", { key: 'e9246015018d985cb28396f1f3ab01466e763f0c' }, h("div", { key: '3b94fd3d16a8f54e63fd75ef7fb13c7c17ff16b6', class: "mg-c-modal__dialog" }, h("header", { key: '5f6cd3f002c135c62e0b4851f483a5581bcf50d2', class: "mg-c-modal__header" }, this.closeButton && (h("span", { class: "mg-c-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) => {
172
172
  if (el !== null) {
173
173
  // store closeButton Element
174
174
  this.closeButtonElement = el;
175
175
  // add close button element to modalFocusableElements when it is render
176
176
  this.modalFocusableElements.unshift(this.closeButtonElement);
177
177
  }
178
- } }, h("mg-icon", { icon: "cross" })))), h("h1", { key: 'a53e0fbf3aa30611f1713b7a54f7fb30a6a3efe2', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-c-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-c-modal__footer" }, h("slot", { name: "actions" })))))));
178
+ } }, h("mg-icon", { icon: "cross" })))), h("h1", { key: '2bbb2a19e3936bc5487bfdb90d8d952ba49844be', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-c-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-c-modal__footer" }, h("slot", { name: "actions" })))))));
179
179
  }
180
180
  get element() { return this; }
181
181
  static get watchers() { return {
@@ -114,10 +114,10 @@ const MgPagination = /*@__PURE__*/ proxyCustomElement(class MgPagination extends
114
114
  * @returns HTML Element
115
115
  */
116
116
  render() {
117
- const navigationActionButton = (disabled, action) => (h("mg-button", { key: 'fae66f3fc39b3f567b3b6ae53afac3c135fdd9a6', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
117
+ const navigationActionButton = (disabled, action) => (h("mg-button", { key: '117897c3594d7b6322e85c659020083a78710979', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
118
118
  // eslint-disable-next-line react/jsx-no-bind
119
119
  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" })));
120
- return (h(Host, { key: '912c267aae01f5a47c974ec022989fb419d8d5f5', hidden: this.totalPages < 2 }, h("nav", { key: 'e35ec4da6ca6b3bc873b7f4e0652c0f8f58f7e67', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (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", { key: '9ab8adf0d144ac80dda6115817bed6542a7a0b75', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { key: 'fb0ff50457a99efd3e4663e798b92379bc4a7328', class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
120
+ return (h(Host, { key: '83d52cfe35e330057417a26bdb7ae528255e3e5e', hidden: this.totalPages < 2 }, h("nav", { key: 'cdd2ab05092bfea927719b354c12629f90e44472', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (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", { key: '501099379d9ca210abed5bb10726c56383b15c6f', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { key: 'e3ce99fb7aaf68322176c6135d70e90f910f6bdd', class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
121
121
  }
122
122
  get element() { return this; }
123
123
  static get watchers() { return {
@@ -186,7 +186,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
186
186
  */
187
187
  render() {
188
188
  const headerId = `${this.identifier}-header`;
189
- return (h("section", { key: '99eacbda239db3efc037c733b4f075df90ebf640', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '7ac8b66fdbdefb7c95fbb9624b5355c774387590' }, h("header", { key: 'd91141917f84c9170fe4df928239d7bfcf13007f', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'f5b321a6ea10d27bb418fd44069de156e9b8fda2', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '73fe045e630f46d950496af0aa28a88778a4f7b4' })))));
189
+ return (h("section", { key: '75410a66bcf5910175605ee2e4c7a56efb2d5d21', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '208cdc102ba7874b90f2eecd91026b5ed0c609af' }, h("header", { key: '2beb22b8e9e8e985db5a169207b13e10ed63fa8e', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '06cf2f69238065eb7388c9dc4c836eb033336a31', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '0b64911842875cb212136ffde476136d925dde01' })))));
190
190
  }
191
191
  get element() { return this; }
192
192
  static get watchers() { return {
@@ -48,7 +48,7 @@ const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent
48
48
  * @returns HTML Element
49
49
  */
50
50
  render() {
51
- return (h(Host, { key: 'fed1eed9b8f3523f811db3e79513b96b1b4087c7' }, h("mg-card", { key: '4ab3bc4772afd16ec2ba0aec416870d37da034c9', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { key: '05b96b09f510092abe5b49666eabd595f4afbcae', class: "mg-c-popover-content__title" }, h("slot", { key: 'cbefee4aa0785437bdcf19ae60eb83cca210953f', name: "title" })), h("slot", { key: 'cdcfa55e9277cff737eccc3930d9ee6e6f5d56fc', name: "content" })), h("slot", { key: '29d748fdb01335b11ae6c3ff08e45966675ca8d9', name: "arrow" })));
51
+ return (h(Host, { key: '571f8154dbfa075c6fedcff3e2b8f5e9daf374fe' }, h("mg-card", { key: '4c173845a5baa5afd18464789c281e6d2663a754', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { key: '89d60fc8aecfe7b743331354f13b4c0222046f84', class: "mg-c-popover-content__title" }, h("slot", { key: '0547a80a3b8dfd76eaafbc252b2473de1c997c02', name: "title" })), h("slot", { key: '3c0a7a30ea07b17d33dc54f91b9eb53079f8f720', name: "content" })), h("slot", { key: 'b75f725bcc46602e0159f1bc2c699f253ad36be9', name: "arrow" })));
52
52
  }
53
53
  get element() { return this; }
54
54
  static get style() { return MgPopoverContentStyle0; }
@@ -44,7 +44,7 @@ const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class MgSkipLinks extends
44
44
  * @returns HTML Element
45
45
  */
46
46
  render() {
47
- return (h("nav", { key: '07531692764bd78b31166f7a1ed28ae2c51a5519', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '2faca0734ba02eaed7c7c2e22510d5e00cbe3e42', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
47
+ return (h("nav", { key: '8fcbba136f23c73d6bc500eae107ac7d72caf9e3', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '003daec99013a9274ed48f11d0afbeb6cd3a5dc0', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
48
48
  }
49
49
  get element() { return this; }
50
50
  static get watchers() { return {
@@ -227,7 +227,7 @@ const MgTabs$1 = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLEleme
227
227
  * @returns HTML Element
228
228
  */
229
229
  render() {
230
- return (h("div", { key: 'a48c7591210f5d2a4e4ba9f56ea3b72797fe3c92', class: this.classCollection.join() }, h("header", { key: '74f35071efd4edaa25c9d92faa45e89bd89a1c27', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
230
+ return (h("div", { key: '20e5f42bd37175f245a7169f58f1eabc37c13e01', class: this.classCollection.join() }, h("header", { key: 'f4bbc2c7818e1eb3f5e1878f392e7ad683a7e2f1', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
231
231
  [`${this.buttonTabBaseClass}`]: true,
232
232
  [`${this.buttonTabBaseClass}--horizontal`]: true,
233
233
  [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
@@ -10,7 +10,7 @@ var Guard;
10
10
  Guard["HOVER_TOOLTIPED_ELEMENT"] = "hoverTooltipedGuard";
11
11
  })(Guard || (Guard = {}));
12
12
 
13
- const mgTooltipCss = ":host{display:inline-block}";
13
+ const mgTooltipCss = ":host{display:inline-block}mg-tooltip-content{font-family:var(--font-family);font-size:var(--font-size);font-weight:200}";
14
14
  const MgTooltipStyle0 = mgTooltipCss;
15
15
 
16
16
  /**
@@ -1 +1 @@
1
- {"file":"mg-tooltip2.js","mappings":"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","names":["nextTick","createID","isValidString","getWindows","focusableElements"],"sources":["src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx","../styles/dist/components/mg-tooltip.css?tag=mg-tooltip&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip.tsx"],"sourcesContent":["export enum Guard {\n FOCUS = 'focus',\n HOVER_TOOLTIP_ELEMENT = 'hoverTooltipGuard',\n HOVER_TOOLTIPED_ELEMENT = 'hoverTooltipedGuard',\n}\n",":host{display:inline-block}/*# sourceMappingURL=mg-tooltip.css.map */\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createID, focusableElements, getWindows, isValidString, nextTick } from '@mgdis/stencil-helpers';\nimport { Instance as PopperInstance, createPopper, Placement, PositioningStrategy } from '@popperjs/core';\nimport { Guard } from './mg-tooltip.conf';\n\n/**\n * HTMLMgButtonElement type guard\n * @param element - element to check\n * @returns return true if type is HTMLMgButtonElement\n */\nconst isButton = (element: unknown): element is HTMLMgButtonElement => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes((element as Element).tagName);\n\n@Component({\n tag: 'mg-tooltip',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip.css',\n shadow: true,\n})\nexport class MgTooltip {\n /************\n * Internal *\n ************/\n\n private popper: PopperInstance;\n private mgTooltipContent: HTMLMgTooltipContentElement;\n private tooltipedElement: HTMLElement;\n private windows: Window[];\n private hasCustomTabIndex: boolean;\n\n // tooltip actions guards\n private guard: Guard;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTooltipElement;\n\n /**\n * Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n */\n @Prop() identifier: string = createID('mg-tooltip');\n @Watch('identifier')\n validateIdentifier(): void {\n // use renderTooltipContent to update tooltip-content id\n this.renderTooltipContent();\n }\n\n /**\n * Displayed message in the tooltip\n */\n @Prop() message!: string;\n @Watch('message')\n validateMessage(newValue: MgTooltip['message']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-tooltip> prop \"message\" is required.');\n }\n this.mgTooltipContent.message = newValue;\n }\n\n /**\n * Tooltip placement\n */\n @Prop() placement: Placement = 'bottom';\n\n /**\n * Display tooltip\n */\n @Prop({ mutable: true }) display = false;\n @Watch('display')\n handleDisplay(newValue: MgTooltip['display']): void {\n if (newValue) {\n this.show();\n } else {\n this.hide();\n }\n }\n\n /**\n * Disable tooltip\n */\n @Prop() disabled = false;\n @Watch('disabled')\n validateDisabled(newValue: MgTooltip['disabled']): void {\n if (this.hasCustomTabIndex) {\n if (newValue) this.tooltipedElement.removeAttribute('tabindex');\n else if (this.tooltipedElement.getAttribute('tabindex') === null) this.tooltipedElement.setAttribute('tabindex', '0');\n }\n }\n\n /**\n * Show tooltip\n */\n private show = (): void => {\n // Make the tooltip visible\n this.mgTooltipContent.dataset.show = '';\n // Enable the event listeners\n this.popper.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],\n }));\n // hide when click outside on nextTick to prevent event to trigger after creation\n nextTick(() => {\n this.windows.forEach((localWindow: Window) => {\n localWindow.addEventListener('click', this.clickOutside, false);\n localWindow.addEventListener('keydown', this.pressEscape, false);\n });\n });\n };\n\n /**\n * Hide tooltip\n */\n private hide = (): void => {\n // Hide the tooltip\n this.mgTooltipContent.removeAttribute('data-show');\n // Disable the event listeners\n this.popper.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],\n }));\n // Remove event listener\n this.windows.forEach((localWindow: Window) => {\n localWindow.removeEventListener('click', this.clickOutside, false);\n localWindow.removeEventListener('keyboard', this.pressEscape, false);\n });\n };\n\n /**\n * Check if clicked outside of component and hidde tooltip\n * @param event - mouse event\n */\n private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n if (event.target.closest('mg-tooltip') !== this.element) this.setDisplay(false);\n };\n\n /**\n * Check if 'Escape' key is pressed of component and hidde tooltip\n * @param event - keyboard event\n */\n private pressEscape = (event: KeyboardEvent): void => {\n if (event.code === 'Escape') {\n this.setDisplay(false);\n this.resetGuard();\n }\n };\n\n /**\n * Method to set display prop\n * @param newValue - display prop new value\n * @param condition - additionnal condition to apply display prop newValue\n */\n private setDisplay = (newValue: MgTooltip['display'], condition = true): void => {\n if (!this.disabled && condition) this.display = newValue;\n };\n\n /**\n * Action for tooltip element and tooltiped element mouse listener\n * @param elementGuard - tooltip element guard\n * @param isMouseenter - mouseenter validation\n * @param conditionalGuard - guard condition\n */\n private tooltipMouseListenerAction = (elementGuard: Guard, isMouseenter: boolean, conditionalGuard: Guard): void => {\n // we mutate elementGuard\n if (this.guard !== Guard.FOCUS) {\n this.guard = elementGuard;\n if (!isMouseenter) {\n // process action in the next event loop macro task\n setTimeout(() => {\n this.setDisplay(isMouseenter, this.guard !== conditionalGuard);\n this.resetGuard();\n }, 100);\n } else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {\n this.setDisplay(isMouseenter);\n }\n }\n };\n\n /**\n * Method to reset guard value\n */\n private resetGuard = (): void => {\n this.guard = undefined;\n };\n\n /**\n * Update slot content when it is a mg-button\n * @param mgButton - slotted mg-button\n */\n private setMgButtonWrapper = (mgButton: HTMLMgButtonElement): void => {\n if (mgButton.disabled) {\n const div = document.createElement('div');\n div.classList.add('mg-c-tooltip__mg-button-wrapper');\n mgButton.parentNode.insertBefore(div, mgButton);\n div.appendChild(mgButton);\n this.tooltipedElement = div;\n } else if (mgButton.parentElement.classList.contains('mg-c-tooltip__mg-button-wrapper')) {\n this.element.firstElementChild.replaceWith(mgButton);\n this.tooltipedElement = mgButton;\n }\n };\n\n /**\n * Init tooltip\n * @param slotElement - slotted element\n * @param interactiveElement - interactive element\n */\n private initTooltip = (slotElement: HTMLElement, interactiveElement: HTMLElement): void => {\n // Add tabindex to slotted element if we can't find any interactive element\n if (!this.disabled && !interactiveElement) {\n this.hasCustomTabIndex = true;\n slotElement.tabIndex = 0;\n // Add role on non-interactive element to work with \"aria-describedby\" for screen readers\n slotElement.setAttribute('role', 'button');\n }\n // Set aria-describedby\n const ariaDescribedby = slotElement.getAttribute('aria-describedby');\n\n if (ariaDescribedby === null) {\n this.tooltipedElement.setAttribute('aria-describedby', this.identifier);\n } else {\n // We ensure to have uniq ids\n slotElement.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);\n }\n\n // use element data attribute: `data-popper-strategy`, in order to get popper strategy configuration\n const strategy = (this.element.dataset.popperStrategy || 'fixed') as PositioningStrategy;\n\n // Create popperjs tooltip\n this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {\n placement: this.placement,\n strategy,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['auto'],\n },\n },\n ],\n });\n\n // Manage tooltipedElement focus/blur events\n this.tooltipedElement.addEventListener('focus', () => {\n this.guard = Guard.FOCUS;\n this.setDisplay(true);\n });\n\n // as `click` event is the composition of `mousedown` and `mouseup` event,\n // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`\n // we reset the guard on `mouseup` event to unlock tooltip\n this.tooltipedElement.addEventListener('mouseup', () => {\n this.resetGuard();\n });\n\n this.tooltipedElement.addEventListener('blur', () => {\n this.resetGuard();\n this.setDisplay(false);\n });\n\n document.addEventListener('keydown', this.pressEscape);\n\n // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n ['mouseenter', 'mouseleave'].forEach(eventType => {\n const isMouseenter = eventType === 'mouseenter';\n [\n { element: this.mgTooltipContent, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },\n { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },\n ].forEach(({ element, action }) => {\n element.addEventListener(eventType, () => {\n action();\n });\n });\n });\n };\n\n /**\n * Render tooltip content element\n */\n private renderTooltipContent(): void {\n const mgTooltipContent = this.element.querySelector('mg-tooltip-content');\n if (mgTooltipContent === null) {\n const mgTooltipContent = document.createElement('mg-tooltip-content');\n mgTooltipContent.setAttribute('slot', 'content');\n mgTooltipContent.setAttribute('id', this.identifier);\n\n const arrow = document.createElement('div');\n arrow.setAttribute('slot', 'arrow');\n arrow.dataset.popperArrow = '';\n mgTooltipContent.appendChild(arrow);\n\n // append tooltip element to component\n this.element.appendChild(mgTooltipContent);\n } else {\n mgTooltipContent.setAttribute('id', this.identifier);\n }\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * set variables\n */\n componentWillLoad(): void {\n // Get windows to attach events\n this.windows = getWindows(window);\n\n // Get tooltip element\n this.renderTooltipContent();\n this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);\n\n //validate properties\n this.validateDisabled(this.disabled);\n this.validateMessage(this.message);\n this.validateIdentifier();\n }\n\n /**\n * Get slotted element\n * Check if it already contain an interactive element, if not we need to add a tabIndex attribute\n * We need to attach the focused element to the tooltip (aria-describedby)\n */\n componentDidLoad(): void {\n // get slotted element wich is not the tooltip\n const slotElement: HTMLElement = this.element.querySelector(`*:not(#${this.identifier})`);\n\n // Get interactive element\n const interactiveElement: HTMLElement = slotElement.matches(focusableElements) ? slotElement : slotElement.shadowRoot?.querySelector(focusableElements);\n\n // define selected element to become tooltip selector\n this.tooltipedElement = interactiveElement || slotElement;\n\n // Check if slotted element is a disabled mg-button\n // In this case we wrap the mg-button into a div to enable the tooltip\n if (isButton(slotElement)) {\n new MutationObserver(mutationList => {\n if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {\n this.setMgButtonWrapper(slotElement);\n // Since Firefox doesn't trigger a \"blur\" event when the \"disabled\" attribute is added or removed from a button\n // we have to manually unlock the guard because the \"blur\" handler of the tooltipedElement won't do it.\n this.resetGuard();\n this.initTooltip(slotElement, interactiveElement);\n }\n }).observe(slotElement, { attributes: true });\n this.setMgButtonWrapper(slotElement);\n }\n\n // Init Tooltip\n this.initTooltip(slotElement, interactiveElement);\n\n this.handleDisplay(this.display);\n }\n\n /**\n * update popper position after props change on component did update hook to benefit from render ended\n */\n componentDidUpdate(): void {\n this.popper.update();\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host>\n <slot></slot>\n <slot name=\"content\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"mg-tooltip2.js","mappings":"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","names":["nextTick","createID","isValidString","getWindows","focusableElements"],"sources":["src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx","../styles/dist/components/mg-tooltip.css?tag=mg-tooltip&encapsulation=shadow","src/components/atoms/mg-tooltip/mg-tooltip.tsx"],"sourcesContent":["export enum Guard {\n FOCUS = 'focus',\n HOVER_TOOLTIP_ELEMENT = 'hoverTooltipGuard',\n HOVER_TOOLTIPED_ELEMENT = 'hoverTooltipedGuard',\n}\n",":host{display:inline-block}mg-tooltip-content{font-family:var(--font-family);font-size:var(--font-size);font-weight:200}/*# sourceMappingURL=mg-tooltip.css.map */\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createID, focusableElements, getWindows, isValidString, nextTick } from '@mgdis/stencil-helpers';\nimport { Instance as PopperInstance, createPopper, Placement, PositioningStrategy } from '@popperjs/core';\nimport { Guard } from './mg-tooltip.conf';\n\n/**\n * HTMLMgButtonElement type guard\n * @param element - element to check\n * @returns return true if type is HTMLMgButtonElement\n */\nconst isButton = (element: unknown): element is HTMLMgButtonElement => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes((element as Element).tagName);\n\n@Component({\n tag: 'mg-tooltip',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tooltip.css',\n shadow: true,\n})\nexport class MgTooltip {\n /************\n * Internal *\n ************/\n\n private popper: PopperInstance;\n private mgTooltipContent: HTMLMgTooltipContentElement;\n private tooltipedElement: HTMLElement;\n private windows: Window[];\n private hasCustomTabIndex: boolean;\n\n // tooltip actions guards\n private guard: Guard;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgTooltipElement;\n\n /**\n * Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n */\n @Prop() identifier: string = createID('mg-tooltip');\n @Watch('identifier')\n validateIdentifier(): void {\n // use renderTooltipContent to update tooltip-content id\n this.renderTooltipContent();\n }\n\n /**\n * Displayed message in the tooltip\n */\n @Prop() message!: string;\n @Watch('message')\n validateMessage(newValue: MgTooltip['message']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-tooltip> prop \"message\" is required.');\n }\n this.mgTooltipContent.message = newValue;\n }\n\n /**\n * Tooltip placement\n */\n @Prop() placement: Placement = 'bottom';\n\n /**\n * Display tooltip\n */\n @Prop({ mutable: true }) display = false;\n @Watch('display')\n handleDisplay(newValue: MgTooltip['display']): void {\n if (newValue) {\n this.show();\n } else {\n this.hide();\n }\n }\n\n /**\n * Disable tooltip\n */\n @Prop() disabled = false;\n @Watch('disabled')\n validateDisabled(newValue: MgTooltip['disabled']): void {\n if (this.hasCustomTabIndex) {\n if (newValue) this.tooltipedElement.removeAttribute('tabindex');\n else if (this.tooltipedElement.getAttribute('tabindex') === null) this.tooltipedElement.setAttribute('tabindex', '0');\n }\n }\n\n /**\n * Show tooltip\n */\n private show = (): void => {\n // Make the tooltip visible\n this.mgTooltipContent.dataset.show = '';\n // Enable the event listeners\n this.popper.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],\n }));\n // hide when click outside on nextTick to prevent event to trigger after creation\n nextTick(() => {\n this.windows.forEach((localWindow: Window) => {\n localWindow.addEventListener('click', this.clickOutside, false);\n localWindow.addEventListener('keydown', this.pressEscape, false);\n });\n });\n };\n\n /**\n * Hide tooltip\n */\n private hide = (): void => {\n // Hide the tooltip\n this.mgTooltipContent.removeAttribute('data-show');\n // Disable the event listeners\n this.popper.setOptions(options => ({\n ...options,\n modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],\n }));\n // Remove event listener\n this.windows.forEach((localWindow: Window) => {\n localWindow.removeEventListener('click', this.clickOutside, false);\n localWindow.removeEventListener('keyboard', this.pressEscape, false);\n });\n };\n\n /**\n * Check if clicked outside of component and hidde tooltip\n * @param event - mouse event\n */\n private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n if (event.target.closest('mg-tooltip') !== this.element) this.setDisplay(false);\n };\n\n /**\n * Check if 'Escape' key is pressed of component and hidde tooltip\n * @param event - keyboard event\n */\n private pressEscape = (event: KeyboardEvent): void => {\n if (event.code === 'Escape') {\n this.setDisplay(false);\n this.resetGuard();\n }\n };\n\n /**\n * Method to set display prop\n * @param newValue - display prop new value\n * @param condition - additionnal condition to apply display prop newValue\n */\n private setDisplay = (newValue: MgTooltip['display'], condition = true): void => {\n if (!this.disabled && condition) this.display = newValue;\n };\n\n /**\n * Action for tooltip element and tooltiped element mouse listener\n * @param elementGuard - tooltip element guard\n * @param isMouseenter - mouseenter validation\n * @param conditionalGuard - guard condition\n */\n private tooltipMouseListenerAction = (elementGuard: Guard, isMouseenter: boolean, conditionalGuard: Guard): void => {\n // we mutate elementGuard\n if (this.guard !== Guard.FOCUS) {\n this.guard = elementGuard;\n if (!isMouseenter) {\n // process action in the next event loop macro task\n setTimeout(() => {\n this.setDisplay(isMouseenter, this.guard !== conditionalGuard);\n this.resetGuard();\n }, 100);\n } else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {\n this.setDisplay(isMouseenter);\n }\n }\n };\n\n /**\n * Method to reset guard value\n */\n private resetGuard = (): void => {\n this.guard = undefined;\n };\n\n /**\n * Update slot content when it is a mg-button\n * @param mgButton - slotted mg-button\n */\n private setMgButtonWrapper = (mgButton: HTMLMgButtonElement): void => {\n if (mgButton.disabled) {\n const div = document.createElement('div');\n div.classList.add('mg-c-tooltip__mg-button-wrapper');\n mgButton.parentNode.insertBefore(div, mgButton);\n div.appendChild(mgButton);\n this.tooltipedElement = div;\n } else if (mgButton.parentElement.classList.contains('mg-c-tooltip__mg-button-wrapper')) {\n this.element.firstElementChild.replaceWith(mgButton);\n this.tooltipedElement = mgButton;\n }\n };\n\n /**\n * Init tooltip\n * @param slotElement - slotted element\n * @param interactiveElement - interactive element\n */\n private initTooltip = (slotElement: HTMLElement, interactiveElement: HTMLElement): void => {\n // Add tabindex to slotted element if we can't find any interactive element\n if (!this.disabled && !interactiveElement) {\n this.hasCustomTabIndex = true;\n slotElement.tabIndex = 0;\n // Add role on non-interactive element to work with \"aria-describedby\" for screen readers\n slotElement.setAttribute('role', 'button');\n }\n // Set aria-describedby\n const ariaDescribedby = slotElement.getAttribute('aria-describedby');\n\n if (ariaDescribedby === null) {\n this.tooltipedElement.setAttribute('aria-describedby', this.identifier);\n } else {\n // We ensure to have uniq ids\n slotElement.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);\n }\n\n // use element data attribute: `data-popper-strategy`, in order to get popper strategy configuration\n const strategy = (this.element.dataset.popperStrategy || 'fixed') as PositioningStrategy;\n\n // Create popperjs tooltip\n this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {\n placement: this.placement,\n strategy,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['auto'],\n },\n },\n ],\n });\n\n // Manage tooltipedElement focus/blur events\n this.tooltipedElement.addEventListener('focus', () => {\n this.guard = Guard.FOCUS;\n this.setDisplay(true);\n });\n\n // as `click` event is the composition of `mousedown` and `mouseup` event,\n // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`\n // we reset the guard on `mouseup` event to unlock tooltip\n this.tooltipedElement.addEventListener('mouseup', () => {\n this.resetGuard();\n });\n\n this.tooltipedElement.addEventListener('blur', () => {\n this.resetGuard();\n this.setDisplay(false);\n });\n\n document.addEventListener('keydown', this.pressEscape);\n\n // manage tooltipElement & tooltipedElement mouseenter/mouseleave events\n ['mouseenter', 'mouseleave'].forEach(eventType => {\n const isMouseenter = eventType === 'mouseenter';\n [\n { element: this.mgTooltipContent, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },\n { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },\n ].forEach(({ element, action }) => {\n element.addEventListener(eventType, () => {\n action();\n });\n });\n });\n };\n\n /**\n * Render tooltip content element\n */\n private renderTooltipContent(): void {\n const mgTooltipContent = this.element.querySelector('mg-tooltip-content');\n if (mgTooltipContent === null) {\n const mgTooltipContent = document.createElement('mg-tooltip-content');\n mgTooltipContent.setAttribute('slot', 'content');\n mgTooltipContent.setAttribute('id', this.identifier);\n\n const arrow = document.createElement('div');\n arrow.setAttribute('slot', 'arrow');\n arrow.dataset.popperArrow = '';\n mgTooltipContent.appendChild(arrow);\n\n // append tooltip element to component\n this.element.appendChild(mgTooltipContent);\n } else {\n mgTooltipContent.setAttribute('id', this.identifier);\n }\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * set variables\n */\n componentWillLoad(): void {\n // Get windows to attach events\n this.windows = getWindows(window);\n\n // Get tooltip element\n this.renderTooltipContent();\n this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);\n\n //validate properties\n this.validateDisabled(this.disabled);\n this.validateMessage(this.message);\n this.validateIdentifier();\n }\n\n /**\n * Get slotted element\n * Check if it already contain an interactive element, if not we need to add a tabIndex attribute\n * We need to attach the focused element to the tooltip (aria-describedby)\n */\n componentDidLoad(): void {\n // get slotted element wich is not the tooltip\n const slotElement: HTMLElement = this.element.querySelector(`*:not(#${this.identifier})`);\n\n // Get interactive element\n const interactiveElement: HTMLElement = slotElement.matches(focusableElements) ? slotElement : slotElement.shadowRoot?.querySelector(focusableElements);\n\n // define selected element to become tooltip selector\n this.tooltipedElement = interactiveElement || slotElement;\n\n // Check if slotted element is a disabled mg-button\n // In this case we wrap the mg-button into a div to enable the tooltip\n if (isButton(slotElement)) {\n new MutationObserver(mutationList => {\n if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {\n this.setMgButtonWrapper(slotElement);\n // Since Firefox doesn't trigger a \"blur\" event when the \"disabled\" attribute is added or removed from a button\n // we have to manually unlock the guard because the \"blur\" handler of the tooltipedElement won't do it.\n this.resetGuard();\n this.initTooltip(slotElement, interactiveElement);\n }\n }).observe(slotElement, { attributes: true });\n this.setMgButtonWrapper(slotElement);\n }\n\n // Init Tooltip\n this.initTooltip(slotElement, interactiveElement);\n\n this.handleDisplay(this.display);\n }\n\n /**\n * update popper position after props change on component did update hook to benefit from render ended\n */\n componentDidUpdate(): void {\n this.popper.update();\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host>\n <slot></slot>\n <slot name=\"content\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -0,0 +1,5 @@
1
+ const globalScripts = () => {};
2
+
3
+ export { globalScripts as g };
4
+
5
+ //# sourceMappingURL=app-globals-0f993ce5.js.map
@@ -0,0 +1 @@
1
+ {"file":"app-globals-0f993ce5.js","mappings":"AAAY,MAAC,aAAa,GAAG,MAAM;;;;","names":[],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"version":3}