@mgdis/mg-components 5.19.0 → 5.19.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mg-action-more_34.cjs.entry.js +84 -40
- package/dist/cjs/mg-action-more_34.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-components.cjs.js +1 -1
- package/dist/cjs/mg-item-more.cjs.entry.js +2 -1
- package/dist/cjs/mg-item-more.cjs.entry.js.map +1 -1
- package/dist/collection/components/atoms/mg-badge/mg-badge.js +1 -1
- package/dist/collection/components/atoms/mg-badge/mg-badge.js.map +1 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js +2 -1
- package/dist/collection/components/atoms/mg-button/mg-button.js.map +1 -1
- package/dist/collection/components/atoms/mg-card/mg-card.js +4 -4
- package/dist/collection/components/atoms/mg-card/mg-card.js.map +1 -1
- package/dist/collection/components/atoms/mg-icon/mg-icon.js +2 -2
- package/dist/collection/components/atoms/mg-icon/mg-icon.js.map +1 -1
- package/dist/collection/components/atoms/mg-input-title/mg-input-title.js +19 -1
- package/dist/collection/components/atoms/mg-input-title/mg-input-title.js.map +1 -1
- package/dist/collection/components/atoms/mg-input-title/test/mg-input-title.e2e.playwright.js +12 -0
- package/dist/collection/components/atoms/mg-input-title/test/mg-input-title.e2e.playwright.js.map +1 -0
- package/dist/collection/components/atoms/mg-input-title/test/mg-input-title.spec.js +1 -5
- package/dist/collection/components/atoms/mg-input-title/test/mg-input-title.spec.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js.map +1 -1
- package/dist/collection/components/molecules/inputs/MgInput.js +3 -3
- package/dist/collection/components/molecules/inputs/MgInput.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js +4 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js +19 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +6 -5
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/test/mg-input-checkbox.spec.js +5 -2
- package/dist/collection/components/molecules/inputs/mg-input-checkbox/test/mg-input-checkbox.spec.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +5 -4
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +3 -3
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.conf.js +3 -2
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.conf.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +4 -10
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/test/mg-input-text.spec.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/test/mg-input-text.spec.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js +78 -2
- package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.e2e.playwright.js +108 -0
- package/dist/collection/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.e2e.playwright.js.map +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.spec.js +44 -0
- package/dist/collection/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.spec.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +1 -1
- package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js.map +1 -1
- package/dist/collection/components/molecules/menu/mg-menu/test/{mg-menu.e2e.js → mg-menu.e2e.playwright.js} +67 -96
- package/dist/collection/components/molecules/menu/mg-menu/test/mg-menu.e2e.playwright.js.map +1 -0
- package/dist/collection/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.playwright.js +100 -0
- package/dist/collection/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.playwright.js.map +1 -0
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.conf.js.map +1 -1
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +1 -1
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +2 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js.map +1 -1
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +1 -1
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js.map +1 -1
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
- package/dist/collection/components/molecules/mg-panel/mg-panel.js.map +1 -1
- package/dist/collection/utils/behaviors.utils.js +2 -1
- package/dist/collection/utils/behaviors.utils.js.map +1 -1
- package/dist/collection/utils/playwright.e2e.test.utils.js +3 -3
- package/dist/collection/utils/playwright.e2e.test.utils.js.map +1 -1
- package/dist/collection/utils/unit.test.utils.js +0 -3
- package/dist/collection/utils/unit.test.utils.js.map +1 -1
- package/dist/components/MgInput.js +3 -3
- package/dist/components/MgInput.js.map +1 -1
- package/dist/components/mg-action-more.js +1 -1
- package/dist/components/mg-action-more.js.map +1 -1
- package/dist/components/mg-badge2.js +1 -1
- package/dist/components/mg-badge2.js.map +1 -1
- package/dist/components/mg-button2.js +2 -1
- package/dist/components/mg-button2.js.map +1 -1
- package/dist/components/mg-card2.js +4 -4
- package/dist/components/mg-card2.js.map +1 -1
- package/dist/components/mg-form.js +2 -1
- package/dist/components/mg-form.js.map +1 -1
- package/dist/components/mg-icon2.js +2 -2
- package/dist/components/mg-icon2.js.map +1 -1
- package/dist/components/mg-input-checkbox-paginated2.js +9 -4
- package/dist/components/mg-input-checkbox-paginated2.js.map +1 -1
- package/dist/components/mg-input-checkbox.js +6 -5
- package/dist/components/mg-input-checkbox.js.map +1 -1
- package/dist/components/mg-input-date.js +1 -1
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +5 -4
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +1 -1
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-select2.js +3 -3
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text2.js +2 -2
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +1 -1
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-input-title2.js +3 -1
- package/dist/components/mg-input-title2.js.map +1 -1
- package/dist/components/mg-input-toggle.js +41 -3
- package/dist/components/mg-input-toggle.js.map +1 -1
- package/dist/components/mg-item-more.js +2 -1
- package/dist/components/mg-item-more.js.map +1 -1
- package/dist/components/mg-menu2.js +1 -1
- package/dist/components/mg-menu2.js.map +1 -1
- package/dist/components/mg-pagination2.js +1 -1
- package/dist/components/mg-pagination2.js.map +1 -1
- package/dist/components/mg-panel.js +1 -1
- package/dist/components/mg-panel.js.map +1 -1
- package/dist/components/mg-tooltip2.js +1 -1
- package/dist/components/mg-tooltip2.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mg-action-more_34.entry.js +84 -40
- package/dist/esm/mg-action-more_34.entry.js.map +1 -1
- package/dist/esm/mg-components.js +1 -1
- package/dist/esm/mg-item-more.entry.js +2 -1
- package/dist/esm/mg-item-more.entry.js.map +1 -1
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/mg-components.esm.js.map +1 -1
- package/dist/mg-components/p-01ebc95a.entry.js +2 -0
- package/dist/mg-components/p-01ebc95a.entry.js.map +1 -0
- package/dist/mg-components/p-71a5a848.entry.js +2 -0
- package/dist/mg-components/p-71a5a848.entry.js.map +1 -0
- package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts +4 -0
- package/dist/types/components/atoms/mg-input-title/test/mg-input-title.e2e.playwright.d.ts +1 -0
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.d.ts +4 -0
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.d.ts +1 -4
- package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.conf.d.ts +3 -6
- package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts +2 -2
- package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts +22 -0
- package/dist/types/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.e2e.playwright.d.ts +1 -0
- package/dist/types/components/molecules/menu/mg-menu/test/mg-menu.e2e.playwright.d.ts +1 -0
- package/dist/types/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.playwright.d.ts +1 -0
- package/dist/types/components/molecules/mg-action-more/mg-action-more.conf.d.ts +1 -3
- package/dist/types/components.d.ts +26 -4
- package/package.json +6 -6
- package/dist/collection/components/atoms/mg-input-title/test/mg-input-title.e2e.js +0 -18
- package/dist/collection/components/atoms/mg-input-title/test/mg-input-title.e2e.js.map +0 -1
- package/dist/collection/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.e2e.js +0 -125
- package/dist/collection/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.e2e.js.map +0 -1
- package/dist/collection/components/molecules/menu/mg-menu/test/mg-menu.e2e.js.map +0 -1
- package/dist/collection/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.js +0 -119
- package/dist/collection/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.js.map +0 -1
- package/dist/mg-components/p-768fc594.entry.js +0 -2
- package/dist/mg-components/p-768fc594.entry.js.map +0 -1
- package/dist/mg-components/p-d2d6afec.entry.js +0 -2
- package/dist/mg-components/p-d2d6afec.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-pagination2.js","mappings":"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","names":[],"sources":["src/components/molecules/mg-pagination/mg-pagination.conf.ts","../styles/dist/components/mg-pagination.css?tag=mg-pagination&encapsulation=shadow","src/components/molecules/mg-pagination/mg-pagination.tsx"],"sourcesContent":["export enum NavigationAction {\n NEXT = 'next',\n PREVIOUS = 'previous',\n}\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;flex-direction:row;align-items:center}.mg-c-pagination mg-input-select{margin-right:.5rem}.mg-c-pagination mg-button{display:flex}.mg-c-pagination mg-button:first-of-type{margin-right:1rem}.mg-c-pagination mg-button:last-of-type{margin-left:1rem}.mg-c-pagination.mg-c-pagination--hide-page-count mg-button{margin:0}/*# sourceMappingURL=mg-pagination.css.map */\n","import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '../../../utils/components.utils';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/**\n * Range generator\n *\n * ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n *\n * range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n */\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);\n\n@Component({\n tag: 'mg-pagination',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css',\n shadow: true,\n})\nexport class MgPagination {\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: HTMLMgPaginationElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-pagination');\n\n /**\n * Panignation label. Is a short description.\n * Customize default value can be usefull to improve accessibility\n */\n @Prop({ mutable: true }) label: string;\n\n /**\n * Hide navigation label\n */\n @Prop() hideNavigationLabels: boolean;\n\n /**\n * Hide select input\n */\n @Prop() hidePageCount: boolean;\n\n /**\n * Component total pages\n */\n @Prop() totalPages = 1;\n @Watch('totalPages')\n validateTotalPages(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n }\n }\n\n /**\n * Component current page\n */\n @Prop({ reflect: true, mutable: true }) currentPage = 1;\n @Watch('currentPage')\n validateCurrentPage(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n } else if (newValue > this.totalPages) {\n throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n }\n\n this.currentPageChange.emit(newValue);\n }\n\n /**\n * Emmited event when current page change\n */\n @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n /**\n * Change current page from target\n * @param target - target page\n */\n private goToPage = (target: number): void => {\n this.currentPage = target;\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * select handler\n * @param event - value change event\n */\n private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n const to = Number(event.target.value);\n this.goToPage(to > 0 ? to : 1);\n };\n\n /**\n * Go to 'previous/next' page button handler\n * @param action - navigation action\n * @param disabled - button disable state\n */\n private handleGoToPage = (action: string, disabled: boolean): void => {\n !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTotalPages(this.totalPages);\n this.validateCurrentPage(this.currentPage);\n // Set default label\n if (this.label === undefined || this.label === '') {\n this.label = this.messages.pagination.label;\n }\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const navigationActionButton = (disabled: boolean, action: string) => (\n <mg-button\n identifier={`${this.identifier}-button-${action}`}\n label={this.messages.pagination[`${action}Page`]}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.handleGoToPage(action, disabled)}\n disabled={disabled}\n variant=\"flat\"\n isIcon={this.hideNavigationLabels}\n >\n {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n {!this.hideNavigationLabels && this.messages.general[action]}\n {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n </mg-button>\n );\n\n return (\n <Host hidden={this.totalPages < 2}>\n <nav aria-label={this.label} id={this.identifier} class={{ 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount }}>\n {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n {!this.hidePageCount && (\n <mg-input-select\n identifier={`${this.identifier}-select`}\n items={range(1, this.totalPages).map(page => page.toString())}\n label={this.messages.pagination.selectPage}\n label-hide={true}\n on-value-change={this.handleSelect}\n value={this.currentPage.toString()}\n placeholder-hide\n ></mg-input-select>\n )}\n <span class=\"mg-u-visually-hidden\">\n {this.messages.pagination.page} {this.currentPage}\n </span>\n <span class={{ 'mg-u-visually-hidden': this.hidePageCount }}>\n / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n </span>\n {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"mg-pagination2.js","mappings":"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","names":[],"sources":["src/components/molecules/mg-pagination/mg-pagination.conf.ts","../styles/dist/components/mg-pagination.css?tag=mg-pagination&encapsulation=shadow","src/components/molecules/mg-pagination/mg-pagination.tsx"],"sourcesContent":["export enum NavigationAction {\n NEXT = 'next',\n PREVIOUS = 'previous',\n}\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;flex-direction:row;align-items:center}.mg-c-pagination mg-input-select{margin-right:.5rem}.mg-c-pagination mg-button{display:flex}.mg-c-pagination mg-button:first-of-type{margin-right:1rem}.mg-c-pagination mg-button:last-of-type{margin-left:1rem}.mg-c-pagination.mg-c-pagination--hide-page-count mg-button{margin:0}/*# sourceMappingURL=mg-pagination.css.map */\n","import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '../../../utils/components.utils';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/**\n * Range generator\n *\n * ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n *\n * range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n */\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);\n\n@Component({\n tag: 'mg-pagination',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css',\n shadow: true,\n})\nexport class MgPagination {\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: HTMLMgPaginationElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-pagination');\n\n /**\n * Panignation label. Is a short description.\n * Customize default value can be usefull to improve accessibility\n */\n @Prop({ mutable: true }) label: string;\n\n /**\n * Hide navigation label\n */\n @Prop() hideNavigationLabels: boolean;\n\n /**\n * Hide select input\n */\n @Prop() hidePageCount: boolean;\n\n /**\n * Component total pages\n */\n @Prop() totalPages = 1;\n @Watch('totalPages')\n validateTotalPages(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n }\n }\n\n /**\n * Component current page\n */\n @Prop({ reflect: true, mutable: true }) currentPage = 1;\n @Watch('currentPage')\n validateCurrentPage(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n } else if (newValue > this.totalPages) {\n throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n }\n\n this.currentPageChange.emit(newValue);\n }\n\n /**\n * Emmited event when current page change\n */\n @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n /**\n * Change current page from target\n * @param target - target page\n */\n private goToPage = (target: number): void => {\n this.currentPage = target;\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * select handler\n * @param event - value change event\n */\n private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n const to = Number(event.target.value);\n this.goToPage(to > 0 ? to : 1);\n };\n\n /**\n * Go to 'previous/next' page button handler\n * @param action - navigation action\n * @param disabled - button disable state\n */\n private handleGoToPage = (action: string, disabled: boolean): void => {\n !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTotalPages(this.totalPages);\n this.validateCurrentPage(this.currentPage);\n // Set default label\n if (this.label === undefined || this.label === '') {\n this.label = this.messages.pagination.label;\n }\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const navigationActionButton = (disabled: boolean, action: string) => (\n <mg-button\n identifier={`${this.identifier}-button-${action}`}\n label={this.messages.pagination[`${action}Page`]}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.handleGoToPage(action, disabled)}\n disabled={disabled}\n variant=\"flat\"\n isIcon={this.hideNavigationLabels}\n >\n {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n {!this.hideNavigationLabels && this.messages.general[action]}\n {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n </mg-button>\n );\n\n return (\n <Host hidden={this.totalPages < 2}>\n <nav role=\"navigation\" aria-label={this.label} id={this.identifier} class={{ 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount }}>\n {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n {!this.hidePageCount && (\n <mg-input-select\n identifier={`${this.identifier}-select`}\n items={range(1, this.totalPages).map(page => page.toString())}\n label={this.messages.pagination.selectPage}\n label-hide={true}\n on-value-change={this.handleSelect}\n value={this.currentPage.toString()}\n placeholder-hide\n ></mg-input-select>\n )}\n <span class=\"mg-u-visually-hidden\">\n {this.messages.pagination.page} {this.currentPage}\n </span>\n <span class={{ 'mg-u-visually-hidden': this.hidePageCount }}>\n / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n </span>\n {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -84,7 +84,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
|
|
|
84
84
|
* Render collapse button
|
|
85
85
|
* @returns collpase button
|
|
86
86
|
*/
|
|
87
|
-
this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded
|
|
87
|
+
this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
|
|
88
88
|
/**
|
|
89
89
|
* Render edit button
|
|
90
90
|
* @returns edit Button
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-panel.js","mappings":";;;;;;;;;;;;AAAA;;;AAGO,MAAM,oBAAoB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAU,CAAC;AAO9D;;;AAGO,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,OAAO,CAAU;;ACbxD,MAAM,UAAU,GAAG,m/CAAm/C;;MCUz/CA,SAAO;;;;;;;;;;;;;IAyHV,oBAAe,GAAG;MACxB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;KAClC,CAAC;;;;;;;IASM,yBAAoB,GAAG;MAC7B,IAAI,CAAC,IAAI,CAAC,oBAAoB;QAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KAChE,CAAC;;;;IAKM,qBAAgB,GAAG;MACzB,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB,CAAC;;;;;IAMM,sBAAiB,GAAG,CAAC,KAA0B;MACrD,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC;KACvC,CAAC;;;;IAKM,2BAAsB,GAAG;MAC/B,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;MACnC,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB,CAAC;;;;IAKM,6BAAwB,GAAG;MACjC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK;QAAE,OAAO;MACzC,IAAI,IAAI,CAAC,iBAAiB,KAAK,SAAS;QAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC;MACnF,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB,CAAC;;;;;;;;IAoCM,yBAAoB,GAAG,OAC7B,iBACE,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,OAAO,EAAC,MAAM,EACd,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,kBAAkB,mBACjC,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,mBACvD,GAAG,IAAI,CAAC,UAAU,UAAU,EAC3C,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,MAAM,EAAE,IAAI,CAAC,mBAAmB,KAAK,MAAM,EAC3C,KAAK,EAAE,IAAI,CAAC,UAAU,IAEtB,YAAM,KAAK,EAAC,qCAAqC,IAC/C,eAAS,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,kCAAkC,EAAE,IAAI,EAAE,2CAA2C,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY,EACtJ,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,mBAAmB,KAAK,MAAM,IAAI,IAAI,CAAC,UAAU,CACrE,CACG,CACb,CAAC;;;;;IAMM,qBAAgB,GAAG,OACzB,iBAAW,GAAG,EAAC,aAAa,mBAAS,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,cAAc,IACpK,eAAS,IAAI,EAAC,KAAK,GAAW,CACpB,CACb,CAAC;;;;;IAMM,oBAAe,GAAG,OACxB,qBACE,GAAG,EAAC,eAAe,EACnB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,sBAEpC,KAAK,EAAE,IAAI,CAAC,UAAU,oBACN,IAAI,CAAC,iBAAiB,EACtC,oBAAoB,EAAE,KAAK,EAC3B,OAAO,EAAE,IAAI,CAAC,YAAY,2BACH,IAAI,CAAC,wBAAwB,EACpD,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,gBAAgB,EAC9C,GAAG,EAAE,CAAC,EAA0B,MAAM,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,IAEjE,iBACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,mBAEnC,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,wBAAwB,IAEtD,eAAS,IAAI,EAAC,OAAO,GAAW,CACtB,EACZ,iBACE,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,mBAEpC,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,IAAI,CAAC,wBAAwB,EACtC,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,0BAA0B,IAExD,eAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACE,CACjB,CAAC;;;;;IAMM,gBAAW,GAAG;MACpB,MAAM,gBAAgB,GAAkB,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;MACtE,IAAI,IAAI,CAAC,aAAa,EAAE;QACtB,IAAI,CAAC,IAAI,CAAC,SAAS;UAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;;UAC/D,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;OACpD;MAED,OAAO,IAAI,CAAC,aAAa,KAAK,OAAO,GAAG,gBAAgB,CAAC,OAAO,EAAE,GAAG,gBAAgB,CAAC;KACvF,CAAC;;;;;IAMM,yBAAoB,GAAG;MAC7B,MAAM,QAAQ,GAAG;QACf,WACE,KAAK,EAAE,EAAE,0BAA0B,EAAE,IAAI,EAAE,gCAAgC,EAAE,IAAI,CAAC,SAAS,EAAE,mCAAmC,EAAE,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE,EAClK,GAAG,EAAE,IAAI,CAAC,UAAU,IAEnB,IAAI,CAAC,WAAW,EAAE,CACf;QACN,WAAK,KAAK,EAAC,4BAA4B,EAAC,GAAG,EAAC,aAAa,IACvD,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;OACP,CAAC;MACF,OAAO,IAAI,CAAC,aAAa,KAAK,OAAO,GAAG,QAAQ,CAAC,OAAO,EAAE,GAAG,QAAQ,CAAC;KACvE,CAAC;sBArR2B,QAAQ,CAAC,UAAU,CAAC;;;;yBA8BR,KAAK;yBAKH,cAAc,CAAC,CAAC,CAAC;oBASxB,KAAK;+BASc,oBAAoB,CAAC,CAAC,CAAC;;2BAexC,IAAI,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;qBAK9C,KAAK;;;EAlE1B,kBAAkB,CAAC,QAA+B;IAChD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC3F,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACjC;EAaD,oBAAoB,CAAC,QAAgB;IACnC,IAAI,QAAQ,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa;MAAE,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;GAC9H;EAYD,qBAAqB,CAAC,QAAkC;IACtD,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,mDAAmD,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC1I;EAOD,cAAc,CAAC,QAA6B;IAC1C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;EAOD,2BAA2B,CAAC,QAAwC;IAClE,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,yDAAyD,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3J,IAAI,QAAQ,KAAK,MAAM,IAAI,IAAI,CAAC,aAAa;MAAE,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;GAC3E;;;;;;;EA6FD,iBAAiB;;IAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;;IAEnD,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;IACzD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC3D,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAChD;;;;EAKD,kBAAkB;;IAEhB,IAAI,IAAI,CAAC,SAAS;MAAE,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC;GACtD;;;;;EAmHD,MAAM;IACJ,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,UAAU,SAAS,CAAC;IAC7C,QACE,eAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,IAC9D,mBACE,cAAQ,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE,EAAE,EAAE,EAAE,QAAQ,IACvH,IAAI,CAAC,oBAAoB,EAAE,CACrB,EACT,eAAS,KAAK,EAAC,qBAAqB,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,UAAU,UAAU,qBAAmB,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACtH,eAAa,CACL,CACF,CACF,EACV;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgPanel"],"sources":["src/components/molecules/mg-panel/mg-panel.conf.ts","../styles/dist/components/mg-panel.css?tag=mg-panel&encapsulation=shadow","src/components/molecules/mg-panel/mg-panel.tsx"],"sourcesContent":["/**\n * Available expand toggle display options\n */\nexport const expandToggleDisplays = ['text', 'icon'] as const;\n\n/**\n * Generated expand toggle display type from available expand toggle display options\n */\nexport type ExpandToggleDisplayType = (typeof expandToggleDisplays)[number];\n\n/**\n * Available title positions\n */\nexport const titlePositions = ['left', 'right'] as const;\n\n/**\n * Generated title positions type from available title positions\n */\nexport type TitlePositionType = (typeof titlePositions)[number];\n",":host{--mg-card-border: none;--mg-card-padding: 0;--mg-card-border-radius: var(--mg-panel-border-radius);--mg-card-background: hsl(var(--mg-panel-background));--mg-card-box-shadow: var(--mg-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 1rem 0 .3rem}.mg-c-panel__header.mg-c-panel__header--reverse{padding-right:.3rem;padding-left:1rem}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:.3rem 0}.mg-c-panel__header-content{min-height:var(--default-size);flex:1 auto;align-items:center;padding-left:.3rem}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:.3rem}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:.3rem}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--font-size: 1.4rem;--mg-button-font-weight: 600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-panel-content-padding)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:1rem}.mg-c-panel ::slotted(*){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}/*# sourceMappingURL=mg-panel.css.map */\n","import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList, isValidString } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n@Component({\n tag: 'mg-panel',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css',\n shadow: true,\n})\nexport class MgPanel {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private editInputElement: HTMLMgInputTextElement;\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPanelElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-panel');\n\n /**\n * Panel title\n */\n @Prop({ mutable: true }) panelTitle!: string;\n @Watch('panelTitle')\n validatePanelTitle(newValue: MgPanel['panelTitle']): void {\n if (!isValidString(newValue)) throw new Error('<mg-panel> prop \"panelTitle\" is required.');\n this.titleChange.emit(newValue);\n }\n\n /**\n * Panel title pattern\n */\n @Prop() titlePattern: string;\n\n /**\n * Panel title pattern error message\n */\n @Prop() titlePatternErrorMessage: string;\n @Watch('titlePattern')\n @Watch('titlePatternErrorMessage')\n validateTitlePattern(newValue: string): void {\n if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n }\n\n /**\n * Define if panel title is editable\n */\n @Prop({ mutable: true }) titleEditable = false;\n\n /**\n * Define title position\n */\n @Prop() titlePosition: TitlePositionType = titlePositions[0];\n @Watch('titlePosition')\n validateTitlePosition(newValue: MgPanel['titlePosition']) {\n if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n }\n\n /**\n * Panel is opened\n */\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: MgPanel['expanded']): void {\n this.expandedChange.emit(newValue);\n }\n\n /**\n * Define expand toggle button display\n */\n @Prop() expandToggleDisplay: ExpandToggleDisplayType = expandToggleDisplays[0];\n @Watch('expandToggleDisplay')\n validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n if (!expandToggleDisplays.includes(newValue)) throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n }\n\n /**\n * Disable possibility to toggle expand\n */\n @Prop() expandToggleDisabled: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-panel']);\n\n /**\n * Title is in edition mode\n */\n @State() isEditing = false;\n\n /**\n * Cache for updated panel title before validation\n */\n @State() updatedPanelTitle: string;\n\n /**\n * Emmited event when title change\n */\n @Event({ eventName: 'title-change' }) titleChange: EventEmitter<string>;\n\n /**\n * Emmited event when expanded change\n */\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<boolean>;\n\n /************\n * Methods *\n ************/\n\n /**\n * Toggle is editing state\n */\n private toggleIsEditing = (): void => {\n this.isEditing = !this.isEditing;\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * Collapse button click handler\n */\n private handleCollapseButton = (): void => {\n if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n };\n\n /**\n * Edit button click handler\n */\n private handleEditButton = (): void => {\n this.toggleIsEditing();\n };\n\n /**\n * Update title handler\n * @param event - input value change event\n */\n private handleUpdateTitle = (event: CustomEvent<string>): void => {\n this.updatedPanelTitle = event.detail;\n };\n\n /**\n * Cancel edition button handler\n */\n private handleCancelEditButton = (): void => {\n this.updatedPanelTitle = undefined;\n this.toggleIsEditing();\n };\n\n /**\n * Validate edition button handler\n */\n private handleValidateEditButton = (): void => {\n if (!this.editInputElement.valid) return;\n if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n this.toggleIsEditing();\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTitlePattern(this.titlePattern);\n this.validateTitlePattern(this.titlePatternErrorMessage);\n this.validatePanelTitle(this.panelTitle);\n this.validateExpandToggleDisplay(this.expandToggleDisplay);\n this.validateTitlePosition(this.titlePosition);\n }\n\n /**\n * Edit DOM after render\n */\n componentDidRender(): void {\n // when we are editing we get focus on edition input\n if (this.isEditing) this.editInputElement.setFocus();\n }\n\n /*************\n * Render *\n *************/\n\n /**\n * Render collapse button\n * @returns collpase button\n */\n private renderCollapseButton = (): HTMLMgButtonElement => (\n <mg-button\n onClick={this.handleCollapseButton}\n variant=\"flat\"\n identifier={`${this.identifier}-collapse-button`}\n aria-expanded={this.expanded !== undefined && this.expanded.toString()}\n aria-controls={`${this.identifier}-content`}\n disabled={this.expandToggleDisabled}\n isIcon={this.expandToggleDisplay === 'icon'}\n label={this.panelTitle}\n >\n <span class=\"mg-c-panel__collapse-button-content\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n </span>\n </mg-button>\n );\n\n /**\n * Render edit button\n * @returns edit Button\n */\n private renderEditButton = (): HTMLMgButtonElement => (\n <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton} identifier={`${this.identifier}-edit-button`}>\n <mg-icon icon=\"pen\"></mg-icon>\n </mg-button>\n );\n\n /**\n * Render input button\n * @returns edit title input\n */\n private renderEditInput = (): HTMLMgInputTextElement => (\n <mg-input-text\n key=\"edition-input\"\n label={this.messages.panel.editLabel}\n label-hide\n value={this.panelTitle}\n onValue-change={this.handleUpdateTitle}\n displayCharacterLeft={false}\n pattern={this.titlePattern}\n pattern-error-message={this.titlePatternErrorMessage}\n identifier={`${this.identifier}-edition-input`}\n ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n >\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.cancel}\n is-icon\n variant=\"secondary\"\n onClick={this.handleCancelEditButton}\n identifier={`${this.identifier}-edition-button-cancel`}\n >\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.confirm}\n is-icon\n variant=\"secondary\"\n onClick={this.handleValidateEditButton}\n identifier={`${this.identifier}-edition-button-validate`}\n >\n <mg-icon icon=\"check\"></mg-icon>\n </mg-button>\n </mg-input-text>\n );\n\n /**\n * Render title\n * @returns title element\n */\n private renderTitle = (): HTMLElement[] => {\n const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n if (this.titleEditable) {\n if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n else elementsToRender.push(this.renderEditInput());\n }\n\n return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n };\n\n /**\n * Render header children\n * @returns header child\n */\n private renderHeaderChildren = (): HTMLElement[] => {\n const children = [\n <div\n class={{ 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }}\n key={this.panelTitle}\n >\n {this.renderTitle()}\n </div>,\n <div class=\"mg-c-panel__header-content\" key=\"slot-header\">\n <slot name=\"header-right\"></slot>\n </div>,\n ];\n return this.titlePosition === 'right' ? children.reverse() : children;\n };\n\n /**\n * Render component\n * @returns rendered component\n */\n render(): HTMLElement {\n const headerId = `${this.identifier}-header`;\n return (\n <section class={this.classCollection.join()} id={this.identifier}>\n <mg-card>\n <header class={{ 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n {this.renderHeaderChildren()}\n </header>\n <article class=\"mg-c-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n <slot></slot>\n </article>\n </mg-card>\n </section>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"mg-panel.js","mappings":"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","names":["MgPanel"],"sources":["src/components/molecules/mg-panel/mg-panel.conf.ts","../styles/dist/components/mg-panel.css?tag=mg-panel&encapsulation=shadow","src/components/molecules/mg-panel/mg-panel.tsx"],"sourcesContent":["/**\n * Available expand toggle display options\n */\nexport const expandToggleDisplays = ['text', 'icon'] as const;\n\n/**\n * Generated expand toggle display type from available expand toggle display options\n */\nexport type ExpandToggleDisplayType = (typeof expandToggleDisplays)[number];\n\n/**\n * Available title positions\n */\nexport const titlePositions = ['left', 'right'] as const;\n\n/**\n * Generated title positions type from available title positions\n */\nexport type TitlePositionType = (typeof titlePositions)[number];\n",":host{--mg-card-border: none;--mg-card-padding: 0;--mg-card-border-radius: var(--mg-panel-border-radius);--mg-card-background: hsl(var(--mg-panel-background));--mg-card-box-shadow: var(--mg-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 1rem 0 .3rem}.mg-c-panel__header.mg-c-panel__header--reverse{padding-right:.3rem;padding-left:1rem}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:.3rem 0}.mg-c-panel__header-content{min-height:var(--default-size);flex:1 auto;align-items:center;padding-left:.3rem}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:.3rem}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:.3rem}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--font-size: 1.4rem;--mg-button-font-weight: 600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-panel-content-padding)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:1rem}.mg-c-panel ::slotted(*){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}/*# sourceMappingURL=mg-panel.css.map */\n","import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList, isValidString } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n@Component({\n tag: 'mg-panel',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css',\n shadow: true,\n})\nexport class MgPanel {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private editInputElement: HTMLMgInputTextElement;\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgPanelElement;\n\n /**\n * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n */\n @Prop() identifier: string = createID('mg-panel');\n\n /**\n * Panel title\n */\n @Prop({ mutable: true }) panelTitle!: string;\n @Watch('panelTitle')\n validatePanelTitle(newValue: MgPanel['panelTitle']): void {\n if (!isValidString(newValue)) throw new Error('<mg-panel> prop \"panelTitle\" is required.');\n this.titleChange.emit(newValue);\n }\n\n /**\n * Panel title pattern\n */\n @Prop() titlePattern: string;\n\n /**\n * Panel title pattern error message\n */\n @Prop() titlePatternErrorMessage: string;\n @Watch('titlePattern')\n @Watch('titlePatternErrorMessage')\n validateTitlePattern(newValue: string): void {\n if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n }\n\n /**\n * Define if panel title is editable\n */\n @Prop({ mutable: true }) titleEditable = false;\n\n /**\n * Define title position\n */\n @Prop() titlePosition: TitlePositionType = titlePositions[0];\n @Watch('titlePosition')\n validateTitlePosition(newValue: MgPanel['titlePosition']) {\n if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n }\n\n /**\n * Panel is opened\n */\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: MgPanel['expanded']): void {\n this.expandedChange.emit(newValue);\n }\n\n /**\n * Define expand toggle button display\n */\n @Prop() expandToggleDisplay: ExpandToggleDisplayType = expandToggleDisplays[0];\n @Watch('expandToggleDisplay')\n validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n if (!expandToggleDisplays.includes(newValue)) throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n }\n\n /**\n * Disable possibility to toggle expand\n */\n @Prop() expandToggleDisabled: boolean;\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-c-panel']);\n\n /**\n * Title is in edition mode\n */\n @State() isEditing = false;\n\n /**\n * Cache for updated panel title before validation\n */\n @State() updatedPanelTitle: string;\n\n /**\n * Emmited event when title change\n */\n @Event({ eventName: 'title-change' }) titleChange: EventEmitter<string>;\n\n /**\n * Emmited event when expanded change\n */\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<boolean>;\n\n /************\n * Methods *\n ************/\n\n /**\n * Toggle is editing state\n */\n private toggleIsEditing = (): void => {\n this.isEditing = !this.isEditing;\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * Collapse button click handler\n */\n private handleCollapseButton = (): void => {\n if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n };\n\n /**\n * Edit button click handler\n */\n private handleEditButton = (): void => {\n this.toggleIsEditing();\n };\n\n /**\n * Update title handler\n * @param event - input value change event\n */\n private handleUpdateTitle = (event: CustomEvent<string>): void => {\n this.updatedPanelTitle = event.detail;\n };\n\n /**\n * Cancel edition button handler\n */\n private handleCancelEditButton = (): void => {\n this.updatedPanelTitle = undefined;\n this.toggleIsEditing();\n };\n\n /**\n * Validate edition button handler\n */\n private handleValidateEditButton = (): void => {\n if (!this.editInputElement.valid) return;\n if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n this.toggleIsEditing();\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTitlePattern(this.titlePattern);\n this.validateTitlePattern(this.titlePatternErrorMessage);\n this.validatePanelTitle(this.panelTitle);\n this.validateExpandToggleDisplay(this.expandToggleDisplay);\n this.validateTitlePosition(this.titlePosition);\n }\n\n /**\n * Edit DOM after render\n */\n componentDidRender(): void {\n // when we are editing we get focus on edition input\n if (this.isEditing) this.editInputElement.setFocus();\n }\n\n /*************\n * Render *\n *************/\n\n /**\n * Render collapse button\n * @returns collpase button\n */\n private renderCollapseButton = (): HTMLMgButtonElement => (\n <mg-button\n onClick={this.handleCollapseButton}\n variant=\"flat\"\n identifier={`${this.identifier}-collapse-button`}\n aria-expanded={this.expanded.toString()}\n aria-controls={`${this.identifier}-content`}\n disabled={this.expandToggleDisabled}\n isIcon={this.expandToggleDisplay === 'icon'}\n label={this.panelTitle}\n >\n <span class=\"mg-c-panel__collapse-button-content\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n </span>\n </mg-button>\n );\n\n /**\n * Render edit button\n * @returns edit Button\n */\n private renderEditButton = (): HTMLMgButtonElement => (\n <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton} identifier={`${this.identifier}-edit-button`}>\n <mg-icon icon=\"pen\"></mg-icon>\n </mg-button>\n );\n\n /**\n * Render input button\n * @returns edit title input\n */\n private renderEditInput = (): HTMLMgInputTextElement => (\n <mg-input-text\n key=\"edition-input\"\n label={this.messages.panel.editLabel}\n label-hide\n value={this.panelTitle}\n onValue-change={this.handleUpdateTitle}\n displayCharacterLeft={false}\n pattern={this.titlePattern}\n pattern-error-message={this.titlePatternErrorMessage}\n identifier={`${this.identifier}-edition-input`}\n ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n >\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.cancel}\n is-icon\n variant=\"secondary\"\n onClick={this.handleCancelEditButton}\n identifier={`${this.identifier}-edition-button-cancel`}\n >\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.confirm}\n is-icon\n variant=\"secondary\"\n onClick={this.handleValidateEditButton}\n identifier={`${this.identifier}-edition-button-validate`}\n >\n <mg-icon icon=\"check\"></mg-icon>\n </mg-button>\n </mg-input-text>\n );\n\n /**\n * Render title\n * @returns title element\n */\n private renderTitle = (): HTMLElement[] => {\n const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n if (this.titleEditable) {\n if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n else elementsToRender.push(this.renderEditInput());\n }\n\n return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n };\n\n /**\n * Render header children\n * @returns header child\n */\n private renderHeaderChildren = (): HTMLElement[] => {\n const children = [\n <div\n class={{ 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }}\n key={this.panelTitle}\n >\n {this.renderTitle()}\n </div>,\n <div class=\"mg-c-panel__header-content\" key=\"slot-header\">\n <slot name=\"header-right\"></slot>\n </div>,\n ];\n return this.titlePosition === 'right' ? children.reverse() : children;\n };\n\n /**\n * Render component\n * @returns rendered component\n */\n render(): HTMLElement {\n const headerId = `${this.identifier}-header`;\n return (\n <section class={this.classCollection.join()} id={this.identifier}>\n <mg-card>\n <header class={{ 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n {this.renderHeaderChildren()}\n </header>\n <article class=\"mg-c-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n <slot></slot>\n </article>\n </mg-card>\n </section>\n );\n }\n}\n"],"version":3}
|
|
@@ -132,7 +132,7 @@ const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLE
|
|
|
132
132
|
*/
|
|
133
133
|
this.initTooltip = (slotElement, interactiveElement) => {
|
|
134
134
|
// Add tabindex to slotted element if we can't find any interactive element
|
|
135
|
-
if (!this.disabled && !
|
|
135
|
+
if (!this.disabled && !interactiveElement) {
|
|
136
136
|
this.hasCustomTabIndex = true;
|
|
137
137
|
slotElement.tabIndex = 0;
|
|
138
138
|
// Add role on non-interactive element to work with "aria-describedby" for screen readers
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"mg-tooltip2.js","mappings":"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","names":[],"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 } from '../../../utils/components.utils';\nimport { Instance as PopperInstance, createPopper, Placement } 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\n // setTimeout is used to prevent event to trigger after creation\n setTimeout(() => {\n this.windows.forEach((localWindow: Window) => {\n localWindow.addEventListener('click', this.clickOutside, false);\n localWindow.addEventListener('keydown', this.pressEscape, false);\n });\n }, 0);\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 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 && !Boolean(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 // Create popperjs tooltip\n this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {\n placement: this.placement,\n strategy: 'fixed',\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":[],"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 } from '../../../utils/components.utils';\nimport { Instance as PopperInstance, createPopper, Placement } 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\n // setTimeout is used to prevent event to trigger after creation\n setTimeout(() => {\n this.windows.forEach((localWindow: Window) => {\n localWindow.addEventListener('click', this.clickOutside, false);\n localWindow.addEventListener('keydown', this.pressEscape, false);\n });\n }, 0);\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 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 // Create popperjs tooltip\n this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {\n placement: this.placement,\n strategy: 'fixed',\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}
|
package/dist/esm/loader.js
CHANGED
|
@@ -3,7 +3,7 @@ export { s as setNonce } from './index-ce01e63b.js';
|
|
|
3
3
|
|
|
4
4
|
const defineCustomElements = (win, options) => {
|
|
5
5
|
if (typeof window === 'undefined') return undefined;
|
|
6
|
-
return bootstrapLazy(JSON.parse("[[\"mg-action-more_34\",[[1,\"mg-input-checkbox\",{\"value\":[1040],\"type\":[1025],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"inputVerticalList\":[4,\"input-vertical-list\"],\"required\":[4],\"readonly\":[4],\"displaySelectedValues\":[4,\"display-selected-values\"],\"disabled\":[4],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"errorMessage\":[32],\"checkboxItems\":[32],\"displaySearchInput\":[32],\"searchValue\":[32],\"searchResults\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"validateValue\"],\"type\":[\"validateType\"],\"displaySelectedValues\":[\"validateDisplaySelectedValues\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\",\"validateDisabled\"],\"checkboxItems\":[\"validateCheckboxItems\"],\"searchValue\":[\"validateSearchValue\"]}],[1,\"mg-action-more\",{\"icon\":[1040],\"button\":[16],\"items\":[16],\"displayChevron\":[4,\"display-chevron\"],\"expanded\":[32]},null,{\"icon\":[\"validateIcon\"],\"button\":[\"validateButton\"],\"items\":[\"validateItems\"],\"displayChevron\":[\"validateDisplayChevron\"]}],[1,\"mg-panel\",{\"identifier\":[1],\"panelTitle\":[1025,\"panel-title\"],\"titlePattern\":[1,\"title-pattern\"],\"titlePatternErrorMessage\":[1,\"title-pattern-error-message\"],\"titleEditable\":[1028,\"title-editable\"],\"titlePosition\":[1,\"title-position\"],\"expanded\":[1028],\"expandToggleDisplay\":[1,\"expand-toggle-display\"],\"expandToggleDisabled\":[4,\"expand-toggle-disabled\"],\"classCollection\":[32],\"isEditing\":[32],\"updatedPanelTitle\":[32]},null,{\"panelTitle\":[\"validatePanelTitle\"],\"titlePattern\":[\"validateTitlePattern\"],\"titlePatternErrorMessage\":[\"validateTitlePattern\"],\"titlePosition\":[\"validateTitlePosition\"],\"expanded\":[\"handleExpanded\"],\"expandToggleDisplay\":[\"validateExpandToggleDisplay\"]}],[1,\"mg-input-textarea\",{\"value\":[1537],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"placeholder\":[1],\"maxlength\":[2],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"mgWidth\":[8,\"mg-width\"],\"pattern\":[1],\"patternErrorMessage\":[1,\"pattern-error-message\"],\"rows\":[2],\"tooltip\":[1],\"displayCharacterLeft\":[4,\"display-character-left\"],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"resizable\":[1],\"classCollection\":[32],\"errorMessage\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"handleValue\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"],\"pattern\":[\"validatePattern\"],\"patternErrorMessage\":[\"validatePattern\"],\"displayCharacterLeft\":[\"validateDisplayCharacterLeft\"]}],[1,\"mg-input-date\",{\"value\":[1537],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"min\":[1],\"max\":[1],\"classCollection\":[32],\"errorMessage\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"validateValue\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"],\"min\":[\"validateMinMax\"],\"max\":[\"validateMinMax\"]}],[1,\"mg-input-numeric\",{\"value\":[1537],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"placeholder\":[1],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"mgWidth\":[8,\"mg-width\"],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"type\":[1],\"currency\":[1],\"max\":[2],\"min\":[2],\"integerLength\":[2,\"integer-length\"],\"decimalLength\":[2,\"decimal-length\"],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"errorMessage\":[32],\"hasFocus\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"validateValue\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"],\"type\":[\"validateType\"],\"integerLength\":[\"validateIntegerLength\"],\"decimalLength\":[\"validateDecimalLength\"]}],[1,\"mg-input-password\",{\"value\":[1537],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"placeholder\":[1],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"mgWidth\":[8,\"mg-width\"],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"errorMessage\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"handleValue\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"]}],[1,\"mg-input-radio\",{\"value\":[1032],\"items\":[16],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"inputVerticalList\":[4,\"input-vertical-list\"],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"errorMessage\":[32],\"options\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"handleValue\"],\"items\":[\"validateItems\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"]}],[1,\"mg-input-toggle\",{\"value\":[1032],\"items\":[16],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"isOnOff\":[4,\"is-on-off\"],\"isIcon\":[4,\"is-icon\"],\"readonly\":[4],\"disabled\":[4],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"classCollection\":[32],\"options\":[32],\"checked\":[32]},null,{\"value\":[\"handleValue\"],\"items\":[\"validateItems\"],\"isOnOff\":[\"handleIsOnOff\"],\"isIcon\":[\"handleIsIcon\"],\"readonly\":[\"handleReadonly\"],\"disabled\":[\"handleDisabled\"],\"checked\":[\"handleChecked\"]}],[1,\"mg-message\",{\"identifier\":[1],\"delay\":[2],\"variant\":[1],\"closeButton\":[1028,\"close-button\"],\"hide\":[1028],\"classCollection\":[32],\"hasActions\":[32]},null,{\"delay\":[\"validateDelay\"],\"variant\":[\"validateVariant\"],\"closeButton\":[\"validateCloseButton\"],\"hide\":[\"validateHide\"]}],[1,\"mg-modal\",{\"identifier\":[1],\"dialogRole\":[1,\"dialog-role\"],\"modalTitle\":[1,\"modal-title\"],\"closeButton\":[4,\"close-button\"],\"hide\":[1028],\"hasActions\":[32],\"hasContent\":[32],\"classCollection\":[32]},[[8,\"keydown\",\"handleKeyDown\"]],{\"dialogRole\":[\"validateDialogRole\"],\"modalTitle\":[\"validateModalTitle\"],\"hide\":[\"validateHide\"]}],[1,\"mg-tabs\",{\"identifier\":[1],\"label\":[1],\"size\":[1],\"items\":[16],\"activeTab\":[1538,\"active-tab\"],\"tabs\":[32],\"classCollection\":[32]},null,{\"label\":[\"validateLabel\"],\"size\":[\"validateSize\"],\"items\":[\"validateItems\"],\"activeTab\":[\"validateActiveTab\"]}],[1,\"mg-details\",{\"toggleClosed\":[1,\"toggle-closed\"],\"toggleOpened\":[1,\"toggle-opened\"],\"hideSummary\":[4,\"hide-summary\"],\"expanded\":[1028]},null,{\"toggleClosed\":[\"validateTitles\"],\"toggleOpened\":[\"validateTitles\"],\"expanded\":[\"handleExpanded\"]}],[1,\"mg-divider\",{\"size\":[1]}],[1,\"mg-form\",{\"identifier\":[1],\"name\":[1],\"readonly\":[4],\"disabled\":[4],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"requiredMessage\":[32],\"displayError\":[64]},null,{\"readonly\":[\"handleAttributeChange\"],\"disabled\":[\"handleAttributeChange\"]}],[1,\"mg-illustrated-message\",{\"size\":[1],\"direction\":[1]}],[1,\"mg-skip-links\",{\"links\":[16]},null,{\"links\":[\"validateLinks\"]}],[1,\"mg-tag\",{\"variant\":[1],\"outline\":[4],\"soft\":[4],\"classCollection\":[32]},null,{\"variant\":[\"validateVariant\"],\"outline\":[\"validateOutline\"],\"soft\":[\"validateSoft\"]}],[2,\"mg-input-checkbox-paginated\",{\"readonly\":[4],\"disabled\":[4],\"name\":[1],\"checkboxes\":[16],\"sectionKind\":[1,\"section-kind\"],\"messages\":[16],\"titleKind\":[32],\"currentPage\":[32],\"expanded\":[32]},null,{\"checkboxes\":[\"validateCheckboxes\"],\"sectionKind\":[\"validateSectionKind\"]}],[1,\"mg-menu-item\",{\"identifier\":[1],\"href\":[1],\"status\":[1537],\"expanded\":[1028],\"size\":[32],\"navigationButtonClassList\":[32],\"direction\":[32],\"isInMainMenu\":[32],\"isItemMore\":[32],\"hasChildren\":[32],\"displayNotificationBadge\":[32]},null,{\"status\":[\"validateStatus\"],\"expanded\":[\"validateExpanded\"],\"size\":[\"validateSize\"],\"direction\":[\"validateDirection\"],\"hasChildren\":[\"validateHasChildren\"]}],[1,\"mg-pagination\",{\"identifier\":[1],\"label\":[1025],\"hideNavigationLabels\":[4,\"hide-navigation-labels\"],\"hidePageCount\":[4,\"hide-page-count\"],\"totalPages\":[2,\"total-pages\"],\"currentPage\":[1538,\"current-page\"]},null,{\"totalPages\":[\"validateTotalPages\"],\"currentPage\":[\"validateCurrentPage\"]}],[1,\"mg-input-text\",{\"value\":[1537],\"identifier\":[1],\"name\":[1],\"label\":[1],\"type\":[1],\"icon\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"placeholder\":[1],\"datalistoptions\":[16],\"maxlength\":[2],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"mgWidth\":[8,\"mg-width\"],\"pattern\":[1],\"patternErrorMessage\":[1,\"pattern-error-message\"],\"tooltip\":[1],\"displayCharacterLeft\":[4,\"display-character-left\"],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"errorMessage\":[32],\"setFocus\":[64],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"handleValue\"],\"icon\":[\"validateIcon\"],\"datalistoptions\":[\"validateDatalistoptions\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"],\"pattern\":[\"validatePattern\"],\"patternErrorMessage\":[\"validatePattern\"]}],[1,\"mg-menu\",{\"label\":[1],\"direction\":[513],\"itemmore\":[16],\"size\":[1],\"isChildMenu\":[32]},null,{\"label\":[\"validateLabel\"],\"direction\":[\"validateDirection\"],\"itemmore\":[\"validateItemMore\"],\"size\":[\"validateSize\"]}],[1,\"mg-input-select\",{\"value\":[1032],\"items\":[16],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"placeholder\":[1025],\"placeholderHide\":[4,\"placeholder-hide\"],\"placeholderDisabled\":[4,\"placeholder-disabled\"],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"mgWidth\":[520,\"mg-width\"],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"errorMessage\":[32],\"options\":[32],\"valueExist\":[32],\"readonlyValue\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"validateValue\"],\"items\":[\"validateItems\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"]}],[1,\"mg-popover\",{\"identifier\":[1],\"placement\":[1],\"arrowHide\":[4,\"arrow-hide\"],\"closeButton\":[4,\"close-button\"],\"display\":[1028],\"disabled\":[4]},null,{\"identifier\":[\"validateIdentifier\"],\"arrowHide\":[\"validateArrowHide\"],\"closeButton\":[\"validateCloseButton\"],\"display\":[\"handleDisplay\"]}],[1,\"mg-badge\",{\"value\":[8],\"label\":[1],\"variant\":[1],\"outline\":[4],\"classCollection\":[32]},null,{\"value\":[\"validateValue\"],\"label\":[\"validateLabel\"],\"variant\":[\"validateVariant\"],\"outline\":[\"validateOutline\"]}],[2,\"mg-character-left\",{\"identifier\":[1],\"characters\":[1],\"maxlength\":[2]},null,{\"maxlength\":[\"validateMaxlength\"]}],[1,\"mg-popover-content\",{\"closeButton\":[4,\"close-button\"],\"classCollection\":[32]}],[1,\"mg-card\",{\"variant\":[1],\"variantStyle\":[1025,\"variant-style\"],\"classCollection\":[32]},null,{\"variant\":[\"validateVariant\"],\"variantStyle\":[\"validateVariantStyle\"]}],[1,\"mg-button\",{\"variant\":[1],\"identifier\":[1],\"label\":[1],\"type\":[1],\"fullWidth\":[4,\"full-width\"],\"form\":[1],\"disabled\":[1028],\"isIcon\":[4,\"is-icon\"],\"disableOnClick\":[4,\"disable-on-click\"],\"loading\":[32],\"classCollection\":[32]},null,{\"variant\":[\"validateVariant\"],\"fullWidth\":[\"validateFullWidth\"],\"disabled\":[\"disabledHandler\"],\"loading\":[\"loadingHandler\"]}],[1,\"mg-tooltip\",{\"identifier\":[1],\"message\":[1],\"placement\":[1],\"display\":[1028],\"disabled\":[4]},null,{\"identifier\":[\"validateIdentifier\"],\"message\":[\"validateMessage\"],\"display\":[\"handleDisplay\"],\"disabled\":[\"validateDisabled\"]}],[6,\"mg-input-title\",{\"identifier\":[1],\"required\":[4],\"isLegend\":[4,\"is-legend\"],\"tagName\":[32]},null,{\"identifier\":[\"validateIdentifier\"],\"isLegend\":[\"validateIsLegend\"]}],[1,\"mg-tooltip-content\",{\"message\":[1]}],[1,\"mg-icon\",{\"icon\":[1],\"size\":[1],\"variant\":[1],\"variantStyle\":[1025,\"variant-style\"],\"spin\":[4],\"classCollection\":[32]},null,{\"icon\":[\"validateIcon\"],\"size\":[\"validateSize\"],\"variant\":[\"validateVariant\"],\"variantStyle\":[\"validateVariantStyle\"],\"spin\":[\"handleSpin\"]}]]],[\"mg-item-more\",[[1,\"mg-item-more\",{\"icon\":[16],\"slotlabel\":[16],\"size\":[1],\"parentMenu\":[32]},null,{\"icon\":[\"validateIcon\"],\"slotlabel\":[\"validateSlotLabel\"],\"size\":[\"validateSize\"]}]]]]"), options);
|
|
6
|
+
return bootstrapLazy(JSON.parse("[[\"mg-action-more_34\",[[1,\"mg-input-checkbox\",{\"value\":[1040],\"type\":[1025],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"inputVerticalList\":[4,\"input-vertical-list\"],\"required\":[4],\"readonly\":[4],\"displaySelectedValues\":[4,\"display-selected-values\"],\"disabled\":[4],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"errorMessage\":[32],\"checkboxItems\":[32],\"displaySearchInput\":[32],\"searchValue\":[32],\"searchResults\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"validateValue\"],\"type\":[\"validateType\"],\"displaySelectedValues\":[\"validateDisplaySelectedValues\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\",\"validateDisabled\"],\"checkboxItems\":[\"validateCheckboxItems\"],\"searchValue\":[\"validateSearchValue\"]}],[1,\"mg-action-more\",{\"icon\":[1040],\"button\":[16],\"items\":[16],\"displayChevron\":[4,\"display-chevron\"],\"expanded\":[32]},null,{\"icon\":[\"validateIcon\"],\"button\":[\"validateButton\"],\"items\":[\"validateItems\"],\"displayChevron\":[\"validateDisplayChevron\"]}],[1,\"mg-panel\",{\"identifier\":[1],\"panelTitle\":[1025,\"panel-title\"],\"titlePattern\":[1,\"title-pattern\"],\"titlePatternErrorMessage\":[1,\"title-pattern-error-message\"],\"titleEditable\":[1028,\"title-editable\"],\"titlePosition\":[1,\"title-position\"],\"expanded\":[1028],\"expandToggleDisplay\":[1,\"expand-toggle-display\"],\"expandToggleDisabled\":[4,\"expand-toggle-disabled\"],\"classCollection\":[32],\"isEditing\":[32],\"updatedPanelTitle\":[32]},null,{\"panelTitle\":[\"validatePanelTitle\"],\"titlePattern\":[\"validateTitlePattern\"],\"titlePatternErrorMessage\":[\"validateTitlePattern\"],\"titlePosition\":[\"validateTitlePosition\"],\"expanded\":[\"handleExpanded\"],\"expandToggleDisplay\":[\"validateExpandToggleDisplay\"]}],[1,\"mg-input-textarea\",{\"value\":[1537],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"placeholder\":[1],\"maxlength\":[2],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"mgWidth\":[8,\"mg-width\"],\"pattern\":[1],\"patternErrorMessage\":[1,\"pattern-error-message\"],\"rows\":[2],\"tooltip\":[1],\"displayCharacterLeft\":[4,\"display-character-left\"],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"resizable\":[1],\"classCollection\":[32],\"errorMessage\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"handleValue\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"],\"pattern\":[\"validatePattern\"],\"patternErrorMessage\":[\"validatePattern\"],\"displayCharacterLeft\":[\"validateDisplayCharacterLeft\"]}],[1,\"mg-input-date\",{\"value\":[1537],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"min\":[1],\"max\":[1],\"classCollection\":[32],\"errorMessage\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"validateValue\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"],\"min\":[\"validateMinMax\"],\"max\":[\"validateMinMax\"]}],[1,\"mg-input-numeric\",{\"value\":[1537],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"placeholder\":[1],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"mgWidth\":[8,\"mg-width\"],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"type\":[1],\"currency\":[1],\"max\":[2],\"min\":[2],\"integerLength\":[2,\"integer-length\"],\"decimalLength\":[2,\"decimal-length\"],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"errorMessage\":[32],\"hasFocus\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"validateValue\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"],\"type\":[\"validateType\"],\"integerLength\":[\"validateIntegerLength\"],\"decimalLength\":[\"validateDecimalLength\"]}],[1,\"mg-input-password\",{\"value\":[1537],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"placeholder\":[1],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"mgWidth\":[8,\"mg-width\"],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"errorMessage\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"handleValue\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"]}],[1,\"mg-input-radio\",{\"value\":[1032],\"items\":[16],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"inputVerticalList\":[4,\"input-vertical-list\"],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"errorMessage\":[32],\"options\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"handleValue\"],\"items\":[\"validateItems\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"]}],[1,\"mg-input-toggle\",{\"value\":[1032],\"items\":[16],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"isOnOff\":[4,\"is-on-off\"],\"isIcon\":[4,\"is-icon\"],\"readonly\":[4],\"disabled\":[4],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"classCollection\":[32],\"options\":[32],\"errorMessage\":[32],\"valid\":[32],\"checked\":[32],\"setError\":[64]},null,{\"value\":[\"handleValue\"],\"items\":[\"validateItems\"],\"isOnOff\":[\"handleIsOnOff\"],\"isIcon\":[\"handleIsIcon\"],\"readonly\":[\"handleReadonly\"],\"disabled\":[\"handleDisabled\"],\"checked\":[\"handleChecked\"]}],[1,\"mg-message\",{\"identifier\":[1],\"delay\":[2],\"variant\":[1],\"closeButton\":[1028,\"close-button\"],\"hide\":[1028],\"classCollection\":[32],\"hasActions\":[32]},null,{\"delay\":[\"validateDelay\"],\"variant\":[\"validateVariant\"],\"closeButton\":[\"validateCloseButton\"],\"hide\":[\"validateHide\"]}],[1,\"mg-modal\",{\"identifier\":[1],\"dialogRole\":[1,\"dialog-role\"],\"modalTitle\":[1,\"modal-title\"],\"closeButton\":[4,\"close-button\"],\"hide\":[1028],\"hasActions\":[32],\"hasContent\":[32],\"classCollection\":[32]},[[8,\"keydown\",\"handleKeyDown\"]],{\"dialogRole\":[\"validateDialogRole\"],\"modalTitle\":[\"validateModalTitle\"],\"hide\":[\"validateHide\"]}],[1,\"mg-tabs\",{\"identifier\":[1],\"label\":[1],\"size\":[1],\"items\":[16],\"activeTab\":[1538,\"active-tab\"],\"tabs\":[32],\"classCollection\":[32]},null,{\"label\":[\"validateLabel\"],\"size\":[\"validateSize\"],\"items\":[\"validateItems\"],\"activeTab\":[\"validateActiveTab\"]}],[1,\"mg-details\",{\"toggleClosed\":[1,\"toggle-closed\"],\"toggleOpened\":[1,\"toggle-opened\"],\"hideSummary\":[4,\"hide-summary\"],\"expanded\":[1028]},null,{\"toggleClosed\":[\"validateTitles\"],\"toggleOpened\":[\"validateTitles\"],\"expanded\":[\"handleExpanded\"]}],[1,\"mg-divider\",{\"size\":[1]}],[1,\"mg-form\",{\"identifier\":[1],\"name\":[1],\"readonly\":[4],\"disabled\":[4],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"requiredMessage\":[32],\"displayError\":[64]},null,{\"readonly\":[\"handleAttributeChange\"],\"disabled\":[\"handleAttributeChange\"]}],[1,\"mg-illustrated-message\",{\"size\":[1],\"direction\":[1]}],[1,\"mg-skip-links\",{\"links\":[16]},null,{\"links\":[\"validateLinks\"]}],[1,\"mg-tag\",{\"variant\":[1],\"outline\":[4],\"soft\":[4],\"classCollection\":[32]},null,{\"variant\":[\"validateVariant\"],\"outline\":[\"validateOutline\"],\"soft\":[\"validateSoft\"]}],[2,\"mg-input-checkbox-paginated\",{\"readonly\":[4],\"disabled\":[4],\"name\":[1],\"invalid\":[4],\"checkboxes\":[16],\"sectionKind\":[1,\"section-kind\"],\"messages\":[16],\"titleKind\":[32],\"currentPage\":[32],\"expanded\":[32]},null,{\"checkboxes\":[\"validateCheckboxes\"],\"sectionKind\":[\"validateSectionKind\"]}],[1,\"mg-menu-item\",{\"identifier\":[1],\"href\":[1],\"status\":[1537],\"expanded\":[1028],\"size\":[32],\"navigationButtonClassList\":[32],\"direction\":[32],\"isInMainMenu\":[32],\"isItemMore\":[32],\"hasChildren\":[32],\"displayNotificationBadge\":[32]},null,{\"status\":[\"validateStatus\"],\"expanded\":[\"validateExpanded\"],\"size\":[\"validateSize\"],\"direction\":[\"validateDirection\"],\"hasChildren\":[\"validateHasChildren\"]}],[1,\"mg-pagination\",{\"identifier\":[1],\"label\":[1025],\"hideNavigationLabels\":[4,\"hide-navigation-labels\"],\"hidePageCount\":[4,\"hide-page-count\"],\"totalPages\":[2,\"total-pages\"],\"currentPage\":[1538,\"current-page\"]},null,{\"totalPages\":[\"validateTotalPages\"],\"currentPage\":[\"validateCurrentPage\"]}],[1,\"mg-input-text\",{\"value\":[1537],\"identifier\":[1],\"name\":[1],\"label\":[1],\"type\":[1],\"icon\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"placeholder\":[1],\"datalistoptions\":[16],\"maxlength\":[2],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"mgWidth\":[8,\"mg-width\"],\"pattern\":[1],\"patternErrorMessage\":[1,\"pattern-error-message\"],\"tooltip\":[1],\"displayCharacterLeft\":[4,\"display-character-left\"],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"errorMessage\":[32],\"setFocus\":[64],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"handleValue\"],\"icon\":[\"validateIcon\"],\"datalistoptions\":[\"validateDatalistoptions\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"],\"pattern\":[\"validatePattern\"],\"patternErrorMessage\":[\"validatePattern\"]}],[1,\"mg-menu\",{\"label\":[1],\"direction\":[513],\"itemmore\":[16],\"size\":[1],\"isChildMenu\":[32]},null,{\"label\":[\"validateLabel\"],\"direction\":[\"validateDirection\"],\"itemmore\":[\"validateItemMore\"],\"size\":[\"validateSize\"]}],[1,\"mg-input-select\",{\"value\":[1032],\"items\":[16],\"identifier\":[1],\"name\":[1],\"label\":[1],\"labelOnTop\":[4,\"label-on-top\"],\"labelHide\":[4,\"label-hide\"],\"placeholder\":[1025],\"placeholderHide\":[4,\"placeholder-hide\"],\"placeholderDisabled\":[4,\"placeholder-disabled\"],\"required\":[4],\"readonly\":[4],\"disabled\":[4],\"mgWidth\":[520,\"mg-width\"],\"tooltip\":[1],\"helpText\":[1,\"help-text\"],\"valid\":[1028],\"invalid\":[1028],\"classCollection\":[32],\"errorMessage\":[32],\"options\":[32],\"valueExist\":[32],\"readonlyValue\":[32],\"displayError\":[64],\"setError\":[64]},null,{\"value\":[\"validateValue\"],\"items\":[\"validateItems\"],\"required\":[\"handleValidityChange\"],\"readonly\":[\"handleValidityChange\"],\"disabled\":[\"handleValidityChange\"]}],[1,\"mg-popover\",{\"identifier\":[1],\"placement\":[1],\"arrowHide\":[4,\"arrow-hide\"],\"closeButton\":[4,\"close-button\"],\"display\":[1028],\"disabled\":[4]},null,{\"identifier\":[\"validateIdentifier\"],\"arrowHide\":[\"validateArrowHide\"],\"closeButton\":[\"validateCloseButton\"],\"display\":[\"handleDisplay\"]}],[1,\"mg-badge\",{\"value\":[8],\"label\":[1],\"variant\":[1],\"outline\":[4],\"classCollection\":[32]},null,{\"value\":[\"validateValue\"],\"label\":[\"validateLabel\"],\"variant\":[\"validateVariant\"],\"outline\":[\"validateOutline\"]}],[2,\"mg-character-left\",{\"identifier\":[1],\"characters\":[1],\"maxlength\":[2]},null,{\"maxlength\":[\"validateMaxlength\"]}],[1,\"mg-popover-content\",{\"closeButton\":[4,\"close-button\"],\"classCollection\":[32]}],[1,\"mg-card\",{\"variant\":[1],\"variantStyle\":[1025,\"variant-style\"],\"classCollection\":[32]},null,{\"variant\":[\"validateVariant\"],\"variantStyle\":[\"validateVariantStyle\"]}],[1,\"mg-button\",{\"variant\":[1],\"identifier\":[1],\"label\":[1],\"type\":[1],\"fullWidth\":[4,\"full-width\"],\"form\":[1],\"disabled\":[1028],\"isIcon\":[4,\"is-icon\"],\"disableOnClick\":[4,\"disable-on-click\"],\"loading\":[32],\"classCollection\":[32]},null,{\"variant\":[\"validateVariant\"],\"fullWidth\":[\"validateFullWidth\"],\"disabled\":[\"disabledHandler\"],\"loading\":[\"loadingHandler\"]}],[1,\"mg-tooltip\",{\"identifier\":[1],\"message\":[1],\"placement\":[1],\"display\":[1028],\"disabled\":[4]},null,{\"identifier\":[\"validateIdentifier\"],\"message\":[\"validateMessage\"],\"display\":[\"handleDisplay\"],\"disabled\":[\"validateDisabled\"]}],[6,\"mg-input-title\",{\"identifier\":[1],\"required\":[4],\"readonly\":[4],\"isLegend\":[4,\"is-legend\"],\"tagName\":[32]},null,{\"identifier\":[\"validateIdentifier\"],\"isLegend\":[\"validateIsLegend\"]}],[1,\"mg-tooltip-content\",{\"message\":[1]}],[1,\"mg-icon\",{\"icon\":[1],\"size\":[1],\"variant\":[1],\"variantStyle\":[1025,\"variant-style\"],\"spin\":[4],\"classCollection\":[32]},null,{\"icon\":[\"validateIcon\"],\"size\":[\"validateSize\"],\"variant\":[\"validateVariant\"],\"variantStyle\":[\"validateVariantStyle\"],\"spin\":[\"handleSpin\"]}]]],[\"mg-item-more\",[[1,\"mg-item-more\",{\"icon\":[16],\"slotlabel\":[16],\"size\":[1],\"parentMenu\":[32]},null,{\"icon\":[\"validateIcon\"],\"slotlabel\":[\"validateSlotLabel\"],\"size\":[\"validateSize\"]}]]]]"), options);
|
|
7
7
|
};
|
|
8
8
|
|
|
9
9
|
export { defineCustomElements };
|