@mgdis/mg-components 6.9.0 → 6.10.1
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/events.utils-D5SAtkpQ.js +28 -0
- package/dist/cjs/events.utils-D5SAtkpQ.js.map +1 -0
- package/dist/cjs/index-CATFkm3O.js +4 -0
- package/dist/cjs/{index-CTU2m-sy.js → index-CL_COdxv.js} +20 -6
- package/dist/cjs/{index-CTU2m-sy.js.map → index-CL_COdxv.js.map} +1 -1
- package/dist/cjs/index.es-DaPqByCe.js +250 -0
- package/dist/cjs/index.es-DaPqByCe.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mg-action-more_37.cjs.entry.js +1929 -1913
- package/dist/cjs/mg-action-more_37.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-alert.cjs.entry.js +7 -7
- package/dist/cjs/mg-components.cjs.js +1 -1
- package/dist/cjs/mg-input-combobox.cjs.entry.js +774 -0
- package/dist/cjs/mg-input-combobox.cjs.entry.js.map +1 -0
- package/dist/cjs/mg-input-combobox.entry.cjs.js.map +1 -0
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js +16 -14
- package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js.map +1 -1
- package/dist/cjs/mg-input-rich-text-editor.entry.cjs.js.map +1 -1
- package/dist/cjs/mg-loader.cjs.entry.js +5 -5
- package/dist/cjs/mg-progress.cjs.entry.js +11 -11
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/atoms/mg-button/mg-button.js +3 -2
- package/dist/collection/components/atoms/mg-button/mg-button.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.conf.js +0 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.conf.js.map +1 -1
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +38 -68
- package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.js +2 -0
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.js.map +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js +1443 -0
- package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js.map +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +2 -2
- package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.scss +1 -0
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js +3 -3
- package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js.map +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +1 -1
- package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js +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-toggle/mg-input-toggle.js +1 -1
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js +2 -2
- package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js.map +1 -1
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js +3 -3
- package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js.map +1 -1
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +2 -2
- package/dist/collection/components/molecules/mg-action-more/mg-action-more.js.map +1 -1
- package/dist/collection/components/molecules/mg-alert/mg-alert.js +1 -1
- package/dist/collection/components/molecules/mg-details/mg-details.js +1 -1
- package/dist/collection/components/molecules/mg-form/mg-form.js +1 -1
- package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js +1 -1
- package/dist/collection/components/molecules/mg-loader/mg-loader.js +1 -1
- package/dist/collection/components/molecules/mg-message/mg-message.js +2 -2
- package/dist/collection/components/molecules/mg-modal/mg-modal.js +2 -2
- package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +3 -3
- package/dist/collection/components/molecules/mg-panel/mg-panel.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js +1 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.js +53 -129
- package/dist/collection/components/molecules/mg-popover/mg-popover.js.map +1 -1
- package/dist/collection/components/molecules/mg-progress/mg-progress.js +1 -1
- package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +1 -1
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +6 -5
- package/dist/collection/components/molecules/mg-tabs/mg-tabs.js.map +1 -1
- package/dist/collection/locales/en/messages.json +8 -1
- package/dist/collection/locales/fr/messages.json +8 -1
- package/dist/collection/utils/behaviors.utils.js +3 -3
- package/dist/collection/utils/behaviors.utils.js.map +1 -1
- package/dist/collection/utils/events.utils.js +22 -0
- package/dist/collection/utils/events.utils.js.map +1 -0
- package/dist/components/events.utils.js +26 -0
- package/dist/components/events.utils.js.map +1 -0
- package/dist/components/index.es.js +129 -36
- package/dist/components/index.es.js.map +1 -1
- package/dist/components/index2.js +18 -4
- package/dist/components/index2.js.map +1 -1
- package/dist/components/mg-action-more.js +8 -8
- package/dist/components/mg-action-more.js.map +1 -1
- package/dist/components/mg-alert.js +6 -6
- package/dist/components/mg-badge2.js +6 -6
- package/dist/components/mg-button2.js +9 -8
- package/dist/components/mg-button2.js.map +1 -1
- package/dist/components/mg-character-left2.js +4 -4
- package/dist/components/mg-details.js +4 -4
- package/dist/components/mg-details.js.map +1 -1
- package/dist/components/mg-form.js +8 -8
- package/dist/components/mg-icon2.js +6 -6
- package/dist/components/mg-illustrated-message.js +6 -6
- package/dist/components/mg-input-checkbox.js +9 -9
- package/dist/components/mg-input-combobox.d.ts +11 -0
- package/dist/components/mg-input-combobox.js +897 -0
- package/dist/components/mg-input-combobox.js.map +1 -0
- package/dist/components/mg-input-date.js +18 -18
- package/dist/components/mg-input-date.js.map +1 -1
- package/dist/components/mg-input-numeric.js +16 -16
- package/dist/components/mg-input-numeric.js.map +1 -1
- package/dist/components/mg-input-password.js +5 -5
- package/dist/components/mg-input-password.js.map +1 -1
- package/dist/components/mg-input-radio.js +8 -8
- package/dist/components/mg-input-rich-text-editor.js +15 -13
- package/dist/components/mg-input-rich-text-editor.js.map +1 -1
- package/dist/components/mg-input-select2.js +9 -9
- package/dist/components/mg-input-select2.js.map +1 -1
- package/dist/components/mg-input-text2.js +11 -11
- package/dist/components/mg-input-text2.js.map +1 -1
- package/dist/components/mg-input-textarea.js +9 -9
- package/dist/components/mg-input-textarea.js.map +1 -1
- package/dist/components/mg-input-title2.js +4 -4
- package/dist/components/mg-input-toggle.js +7 -7
- package/dist/components/mg-input2.js +8 -8
- package/dist/components/mg-item-more2.js +12 -12
- package/dist/components/mg-item-more2.js.map +1 -1
- package/dist/components/mg-loader.js +1 -70
- package/dist/components/mg-loader.js.map +1 -1
- package/dist/components/mg-loader2.js +75 -0
- package/dist/components/mg-loader2.js.map +1 -0
- package/dist/components/mg-menu-item2.js +13 -13
- package/dist/components/mg-menu-item2.js.map +1 -1
- package/dist/components/mg-message2.js +6 -6
- package/dist/components/mg-modal.js +10 -10
- package/dist/components/mg-pagination2.js +9 -9
- package/dist/components/mg-panel.js +10 -10
- package/dist/components/mg-popover-content2.js +5 -5
- package/dist/components/mg-popover-content2.js.map +1 -1
- package/dist/components/mg-popover2.js +54 -128
- package/dist/components/mg-popover2.js.map +1 -1
- package/dist/components/mg-progress.js +11 -11
- package/dist/components/mg-skip-links.js +3 -3
- package/dist/components/mg-table.js +6 -6
- package/dist/components/mg-tabs.js +18 -17
- package/dist/components/mg-tabs.js.map +1 -1
- package/dist/components/mg-tag.js +4 -4
- package/dist/components/mg-tooltip-content2.js +1 -1
- package/dist/components/mg-tooltip-content2.js.map +1 -1
- package/dist/components/mg-tooltip2.js +42 -71
- package/dist/components/mg-tooltip2.js.map +1 -1
- package/dist/components/popper.js +1793 -0
- package/dist/components/popper.js.map +1 -0
- package/dist/esm/events.utils-yMGqY8YG.js +26 -0
- package/dist/esm/events.utils-yMGqY8YG.js.map +1 -0
- package/dist/esm/index-CAuxALt5.js +4 -0
- package/dist/esm/{index-SQlkEaXW.js → index-DALWFL9i.js} +20 -6
- package/dist/esm/{index-SQlkEaXW.js.map → index-DALWFL9i.js.map} +1 -1
- package/dist/esm/index.es-hNwGkhG6.js +223 -0
- package/dist/esm/index.es-hNwGkhG6.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mg-action-more_37.entry.js +1930 -1914
- package/dist/esm/mg-action-more_37.entry.js.map +1 -1
- package/dist/esm/mg-alert.entry.js +7 -7
- package/dist/esm/mg-components.js +1 -1
- package/dist/esm/mg-input-combobox.entry.js +772 -0
- package/dist/esm/mg-input-combobox.entry.js.map +1 -0
- package/dist/esm/mg-input-rich-text-editor.entry.js +17 -15
- package/dist/esm/mg-input-rich-text-editor.entry.js.map +1 -1
- package/dist/esm/{mg-input.conf-BtkqaBXm.js → mg-input.conf-CNgv8hc5.js} +3 -3
- package/dist/esm/{mg-input.conf-BtkqaBXm.js.map → mg-input.conf-CNgv8hc5.js.map} +1 -1
- package/dist/esm/mg-loader.entry.js +5 -5
- package/dist/esm/mg-progress.entry.js +11 -11
- package/dist/mg-components/locales/en/messages.json +8 -1
- package/dist/mg-components/locales/fr/messages.json +8 -1
- package/dist/mg-components/mg-components.esm.js +1 -1
- package/dist/mg-components/mg-input-combobox.entry.esm.js.map +1 -0
- package/dist/mg-components/mg-input-rich-text-editor.entry.esm.js.map +1 -1
- package/dist/mg-components/p-352cfc01.entry.js +2 -0
- package/dist/mg-components/{p-680948e3.entry.js.map → p-352cfc01.entry.js.map} +1 -1
- package/dist/mg-components/p-68f7de47.entry.js +2 -0
- package/dist/mg-components/p-68f7de47.entry.js.map +1 -0
- package/dist/mg-components/p-CNgv8hc5.js +2 -0
- package/dist/mg-components/{p-BtkqaBXm.js.map → p-CNgv8hc5.js.map} +1 -1
- package/dist/mg-components/p-Cg3R_y_o.js +2 -0
- package/dist/mg-components/{p-CqGbLOnN.js.map → p-Cg3R_y_o.js.map} +1 -1
- package/dist/mg-components/p-a52a168c.entry.js +2 -0
- package/dist/mg-components/{p-9acc6504.entry.js.map → p-a52a168c.entry.js.map} +1 -1
- package/dist/mg-components/{p-583b3769.entry.js → p-bf5de898.entry.js} +2 -2
- package/dist/mg-components/p-dcefa0b0.entry.js +2 -0
- package/dist/mg-components/p-dcefa0b0.entry.js.map +1 -0
- package/dist/mg-components/{p-650d6986.entry.js → p-e33557f9.entry.js} +3 -3
- package/dist/mg-components/p-e33557f9.entry.js.map +1 -0
- package/dist/mg-components/p-hNwGkhG6.js +2 -0
- package/dist/mg-components/p-hNwGkhG6.js.map +1 -0
- package/dist/mg-components/p-yMGqY8YG.js +2 -0
- package/dist/mg-components/p-yMGqY8YG.js.map +1 -0
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.conf.d.ts +0 -6
- package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts +6 -7
- package/dist/types/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.d.ts +24 -0
- package/dist/types/components/molecules/inputs/mg-input-combobox/mg-input-combobox.d.ts +340 -0
- package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +9 -27
- package/dist/types/components.d.ts +253 -10
- package/dist/types/utils/events.utils.d.ts +4 -0
- package/ide/intellij/web-types.json +400 -1
- package/ide/vscode/html-custom-data.json +332 -0
- package/package.json +15 -15
- package/dist/cjs/index.es-jXqiN1uw.js +0 -152
- package/dist/cjs/index.es-jXqiN1uw.js.map +0 -1
- package/dist/collection/components/molecules/mg-popover/mg-popover.conf.js +0 -2
- package/dist/collection/components/molecules/mg-popover/mg-popover.conf.js.map +0 -1
- package/dist/collection/utils/floating-ui.utils.js +0 -30
- package/dist/collection/utils/floating-ui.utils.js.map +0 -1
- package/dist/components/floating-ui.utils.js +0 -1677
- package/dist/components/floating-ui.utils.js.map +0 -1
- package/dist/esm/index.es-DDBtzymI.js +0 -130
- package/dist/esm/index.es-DDBtzymI.js.map +0 -1
- package/dist/mg-components/p-650d6986.entry.js.map +0 -1
- package/dist/mg-components/p-680948e3.entry.js +0 -2
- package/dist/mg-components/p-9acc6504.entry.js +0 -2
- package/dist/mg-components/p-BtkqaBXm.js +0 -2
- package/dist/mg-components/p-CqGbLOnN.js +0 -2
- package/dist/mg-components/p-DDBtzymI.js +0 -2
- package/dist/mg-components/p-DDBtzymI.js.map +0 -1
- package/dist/mg-components/p-c0fb6f62.entry.js +0 -2
- package/dist/mg-components/p-c0fb6f62.entry.js.map +0 -1
- package/dist/types/components/molecules/mg-popover/mg-popover.conf.d.ts +0 -6
- package/dist/types/utils/floating-ui.utils.d.ts +0 -20
- /package/dist/mg-components/{p-583b3769.entry.js.map → p-bf5de898.entry.js.map} +0 -0
|
@@ -243,7 +243,7 @@ export class MgInputToggle {
|
|
|
243
243
|
*/
|
|
244
244
|
render() {
|
|
245
245
|
const checkedItem = this.getCheckedItem(this.checked);
|
|
246
|
-
return (h("mg-input", { key: '
|
|
246
|
+
return (h("mg-input", { key: '3886ea7cfdb32db9bbc2b7d38760c91aac30c004', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
|
|
247
247
|
}
|
|
248
248
|
static get is() { return "mg-input-toggle"; }
|
|
249
249
|
static get encapsulation() { return "shadow"; }
|
|
@@ -34,7 +34,7 @@ export class MgMenu {
|
|
|
34
34
|
var _a, _b;
|
|
35
35
|
const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
|
|
36
36
|
const itemMoreMenuItem = (_b = (_a = menu.querySelector('mg-item-more')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item');
|
|
37
|
-
if (itemMoreMenuItem) {
|
|
37
|
+
if (itemMoreMenuItem !== null && itemMoreMenuItem !== undefined) {
|
|
38
38
|
menuItems.push(itemMoreMenuItem);
|
|
39
39
|
}
|
|
40
40
|
return menuItems;
|
|
@@ -162,7 +162,7 @@ export class MgMenu {
|
|
|
162
162
|
* @returns HTML Element
|
|
163
163
|
*/
|
|
164
164
|
render() {
|
|
165
|
-
return (h(Host, { key: '
|
|
165
|
+
return (h(Host, { key: '027cd6b867d852c1d238ffedd9ea9c8d40eb82f0', role: "list", "aria-label": this.label }, h("slot", { key: 'cb6dfa4a26800f3dd3fc820954a45aad025cc4a3' })));
|
|
166
166
|
}
|
|
167
167
|
static get is() { return "mg-menu"; }
|
|
168
168
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-menu.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menus/mg-menu/mg-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Watch, Host, Listen } from '@stencil/core';\nimport { directions, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\nimport { toString } from '@mgdis/stencil-helpers';\nimport { Direction } from '../../../../types';\n\n/**\n * @slot - Menu content\n */\n@Component({\n tag: 'mg-menu',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n shadow: true,\n})\nexport class MgMenu {\n /************\n * Internal *\n ************/\n\n private readonly name = 'mg-menu';\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgMenuElement;\n\n /**\n * Menu label. Include short menu description.\n * Required to define accessibility required attribute `aria-label`\n */\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgMenu['label']): void {\n if (newValue === undefined && !this.element.hasAttribute('aria-label')) {\n throw new Error(`<${this.name}> prop \"label\" is required. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Component display direction.\n */\n @Prop({ reflect: true }) direction: Direction = 'horizontal';\n @Watch('direction')\n validateDirection(newValue: MgMenu['direction']): void {\n if (![directions.VERTICAL, directions.HORIZONTAL].includes(newValue)) {\n throw new Error(`<${this.name}> prop \"direction\" must be one of: ${directions.HORIZONTAL}, ${directions.VERTICAL}. Passed value: ${toString(newValue)}.`);\n } else {\n this.updateMenuItems();\n }\n }\n\n /**\n * Customize \"mg-item-more\" element\n * Used with direction: 'vertical' to manage overflow\n */\n @Prop() itemmore?: ItemMoreType;\n @Watch('itemmore')\n validateItemMore(newValue: MgMenu['itemmore']): void {\n if (newValue !== undefined && this.direction !== directions.HORIZONTAL) {\n throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${directions.HORIZONTAL}.`);\n } else if (newValue !== undefined) {\n this.renderMgItemMore();\n }\n }\n\n /**\n * Define mg-menu size\n */\n @Prop() size: MenuSizeType = 'medium';\n @Watch('size')\n validateSize(newValue: MgMenu['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define mg-menu-item listener when they are loaded\n * @param event - mg-item-loaded \"item-loaded\" custom event\n */\n @Listen('item-loaded')\n updateItemListener(event: CustomEvent & { target: HTMLMgMenuItemElement }): void {\n const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;\n\n ['click', 'focus'].forEach(trigger => {\n itemToWatch.addEventListener(trigger, (): void => {\n const focusedItem: HTMLMgMenuItemElement = event.target.closest('mg-menu').querySelector('[data-has-focus]');\n // exit process if new focused item in the current menu children\n if (focusedItem === itemToWatch) return;\n\n // reset expanded on previous active menu item\n if (focusedItem !== null) focusedItem.removeAttribute('data-has-focus');\n\n // update focusedMenuItem with new value\n itemToWatch.setAttribute('data-has-focus', 'true');\n });\n });\n }\n\n /*************\n * Methods *\n *************/\n\n /**\n * Test if menu is a child menu\n * @returns truthy if menu is a child menu\n */\n private isChildMenu = (): boolean => this.element.closest('mg-menu-item') !== null;\n\n /**\n * Get menu children items\n * @returns menu children mg-menu-item\n */\n private getMenuItems = (menu = this.element): HTMLMgMenuItemElement[] => {\n const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n const itemMoreMenuItem = menu.querySelector('mg-item-more')?.shadowRoot?.querySelector('mg-menu-item');\n if (itemMoreMenuItem) {\n menuItems.push(itemMoreMenuItem);\n }\n return menuItems;\n };\n\n /**\n * Update menu items\n */\n private updateMenuItems = (): void => {\n this.getMenuItems().forEach(item => {\n item.dataset.styleDirection = this.direction;\n });\n\n // render mg-item-more to manage OverflowBehavior\n this.renderMgItemMore();\n };\n\n /**\n * render mg-item-more\n */\n private renderMgItemMore = (): void => {\n if (this.direction === directions.VERTICAL || (this.direction === directions.HORIZONTAL && this.isChildMenu()) || this.element.children.length <= 1) {\n return;\n }\n\n // Insert mg-item-more outside the mg-menu shadowdom\n let itemMoreElement = this.element.querySelector('mg-item-more');\n if (itemMoreElement === null) {\n itemMoreElement = document.createElement('mg-item-more');\n this.element.appendChild(itemMoreElement);\n }\n\n // update mg-item-more props\n for (const propertie in this.itemmore) {\n itemMoreElement[propertie] = this.itemmore[propertie];\n }\n if (this.itemmore?.size === undefined) itemMoreElement.size = this.size;\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Validate props\n */\n componentWillLoad(): void {\n this.validateDirection(this.direction);\n this.validateLabel(this.label);\n this.validateItemMore(this.itemmore);\n this.validateSize(this.size);\n }\n\n /**\n * Check if component slots configuration\n */\n componentDidLoad(): void {\n // set menu-items\n this.updateMenuItems();\n\n // add listener to close main menu when focus leave it\n if (!this.isChildMenu() && this.direction === directions.HORIZONTAL) {\n document.addEventListener('focusin', (event: FocusEvent & { target: HTMLElement }): void => {\n const isElementChild = (element: HTMLElement): boolean => {\n if (element === this.element) return true;\n else if (element.parentElement === null) return false;\n else return isElementChild(element.parentElement);\n };\n\n if (event.target.closest('mg-menu') === null || !isElementChild(event.target)) {\n const focusedItem = this.element.querySelector('[data-has-focus]');\n // reset expanded on previous active menu item\n if (focusedItem !== null) focusedItem.removeAttribute('data-has-focus');\n }\n });\n }\n // add mutation observer to improve global reactivity\n new MutationObserver(this.updateMenuItems).observe(this.element, { childList: true });\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"list\" aria-label={this.label}>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"mg-menu.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menus/mg-menu/mg-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Watch, Host, Listen } from '@stencil/core';\nimport { directions, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\nimport { toString } from '@mgdis/stencil-helpers';\nimport { Direction } from '../../../../types';\n\n/**\n * @slot - Menu content\n */\n@Component({\n tag: 'mg-menu',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n shadow: true,\n})\nexport class MgMenu {\n /************\n * Internal *\n ************/\n\n private readonly name = 'mg-menu';\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgMenuElement;\n\n /**\n * Menu label. Include short menu description.\n * Required to define accessibility required attribute `aria-label`\n */\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgMenu['label']): void {\n if (newValue === undefined && !this.element.hasAttribute('aria-label')) {\n throw new Error(`<${this.name}> prop \"label\" is required. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Component display direction.\n */\n @Prop({ reflect: true }) direction: Direction = 'horizontal';\n @Watch('direction')\n validateDirection(newValue: MgMenu['direction']): void {\n if (![directions.VERTICAL, directions.HORIZONTAL].includes(newValue)) {\n throw new Error(`<${this.name}> prop \"direction\" must be one of: ${directions.HORIZONTAL}, ${directions.VERTICAL}. Passed value: ${toString(newValue)}.`);\n } else {\n this.updateMenuItems();\n }\n }\n\n /**\n * Customize \"mg-item-more\" element\n * Used with direction: 'vertical' to manage overflow\n */\n @Prop() itemmore?: ItemMoreType;\n @Watch('itemmore')\n validateItemMore(newValue: MgMenu['itemmore']): void {\n if (newValue !== undefined && this.direction !== directions.HORIZONTAL) {\n throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${directions.HORIZONTAL}.`);\n } else if (newValue !== undefined) {\n this.renderMgItemMore();\n }\n }\n\n /**\n * Define mg-menu size\n */\n @Prop() size: MenuSizeType = 'medium';\n @Watch('size')\n validateSize(newValue: MgMenu['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define mg-menu-item listener when they are loaded\n * @param event - mg-item-loaded \"item-loaded\" custom event\n */\n @Listen('item-loaded')\n updateItemListener(event: CustomEvent & { target: HTMLMgMenuItemElement }): void {\n const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;\n\n ['click', 'focus'].forEach(trigger => {\n itemToWatch.addEventListener(trigger, (): void => {\n const focusedItem: HTMLMgMenuItemElement = event.target.closest('mg-menu').querySelector('[data-has-focus]');\n // exit process if new focused item in the current menu children\n if (focusedItem === itemToWatch) return;\n\n // reset expanded on previous active menu item\n if (focusedItem !== null) focusedItem.removeAttribute('data-has-focus');\n\n // update focusedMenuItem with new value\n itemToWatch.setAttribute('data-has-focus', 'true');\n });\n });\n }\n\n /*************\n * Methods *\n *************/\n\n /**\n * Test if menu is a child menu\n * @returns truthy if menu is a child menu\n */\n private isChildMenu = (): boolean => this.element.closest('mg-menu-item') !== null;\n\n /**\n * Get menu children items\n * @returns menu children mg-menu-item\n */\n private getMenuItems = (menu = this.element): HTMLMgMenuItemElement[] => {\n const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n const itemMoreMenuItem = menu.querySelector('mg-item-more')?.shadowRoot?.querySelector('mg-menu-item');\n if (itemMoreMenuItem !== null && itemMoreMenuItem !== undefined) {\n menuItems.push(itemMoreMenuItem);\n }\n return menuItems;\n };\n\n /**\n * Update menu items\n */\n private updateMenuItems = (): void => {\n this.getMenuItems().forEach(item => {\n item.dataset.styleDirection = this.direction;\n });\n\n // render mg-item-more to manage OverflowBehavior\n this.renderMgItemMore();\n };\n\n /**\n * render mg-item-more\n */\n private renderMgItemMore = (): void => {\n if (this.direction === directions.VERTICAL || (this.direction === directions.HORIZONTAL && this.isChildMenu()) || this.element.children.length <= 1) {\n return;\n }\n\n // Insert mg-item-more outside the mg-menu shadowdom\n let itemMoreElement = this.element.querySelector('mg-item-more');\n if (itemMoreElement === null) {\n itemMoreElement = document.createElement('mg-item-more');\n this.element.appendChild(itemMoreElement);\n }\n\n // update mg-item-more props\n for (const propertie in this.itemmore) {\n itemMoreElement[propertie] = this.itemmore[propertie];\n }\n if (this.itemmore?.size === undefined) itemMoreElement.size = this.size;\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Validate props\n */\n componentWillLoad(): void {\n this.validateDirection(this.direction);\n this.validateLabel(this.label);\n this.validateItemMore(this.itemmore);\n this.validateSize(this.size);\n }\n\n /**\n * Check if component slots configuration\n */\n componentDidLoad(): void {\n // set menu-items\n this.updateMenuItems();\n\n // add listener to close main menu when focus leave it\n if (!this.isChildMenu() && this.direction === directions.HORIZONTAL) {\n document.addEventListener('focusin', (event: FocusEvent & { target: HTMLElement }): void => {\n const isElementChild = (element: HTMLElement): boolean => {\n if (element === this.element) return true;\n else if (element.parentElement === null) return false;\n else return isElementChild(element.parentElement);\n };\n\n if (event.target.closest('mg-menu') === null || !isElementChild(event.target)) {\n const focusedItem = this.element.querySelector('[data-has-focus]');\n // reset expanded on previous active menu item\n if (focusedItem !== null) focusedItem.removeAttribute('data-has-focus');\n }\n });\n }\n // add mutation observer to improve global reactivity\n new MutationObserver(this.updateMenuItems).observe(this.element, { childList: true });\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"list\" aria-label={this.label}>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -175,7 +175,7 @@ export class MgMenuItem {
|
|
|
175
175
|
// when item is the last clickable item we close the parent popover
|
|
176
176
|
if (!this.isInteractiveItem()) {
|
|
177
177
|
const closePopover = (element) => {
|
|
178
|
-
if (
|
|
178
|
+
if (element === null)
|
|
179
179
|
return;
|
|
180
180
|
else if (element !== this.element && element.expanded && element.shadowRoot.querySelector('mg-popover') !== null) {
|
|
181
181
|
element.expanded = false;
|
|
@@ -269,7 +269,7 @@ export class MgMenuItem {
|
|
|
269
269
|
*/
|
|
270
270
|
// eslint-disable-next-line @stencil-community/no-unused-watch
|
|
271
271
|
watchDataHasFocus(newValue) {
|
|
272
|
-
if (!newValue)
|
|
272
|
+
if (!isValidString(newValue))
|
|
273
273
|
this.updateExpanded(Boolean(newValue));
|
|
274
274
|
}
|
|
275
275
|
/**
|
|
@@ -362,7 +362,7 @@ export class MgMenuItem {
|
|
|
362
362
|
['mg-c-menu-item__collapse-container']: true,
|
|
363
363
|
['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions.HORIZONTAL),
|
|
364
364
|
});
|
|
365
|
-
return (h(Host, { key: '
|
|
365
|
+
return (h(Host, { key: 'caeeabd1d1c9f7de3c8ecda6a315b85215b9e656', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.popoverIdentifier, "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
|
|
366
366
|
}, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
|
|
367
367
|
this.renderInteractiveElement(),
|
|
368
368
|
h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-menu-item.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menus/mg-menu-item/mg-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID, isValideID, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { directions, type MenuSizeType } from '../mg-menu/mg-menu.conf';\nimport { type MgMenuStatusType, Status, targets, type TargetType } from './mg-menu-item.conf';\nimport type { MessageType } from '../../../../locales/index.conf';\nimport { Direction } from '../../../../types';\n\n/**\n * @slot - Menu item content\n * @slot image - Menu item image content\n * @slot label - Menu item label content\n * @slot information - Menu item information content\n * @slot metadata - Menu item metadata content\n */\n@Component({\n tag: 'mg-menu-item',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css',\n shadow: true,\n})\nexport class MgMenuItem {\n /************\n * Internal *\n ************/\n\n private readonly name = 'mg-menu-item';\n private readonly navigationButton = 'mg-c-menu-item__navigation-button';\n private messages: MessageType;\n private popoverIdentifier: string;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgMenuItemElement;\n\n /************\n * Props *\n ************/\n\n /**\n * Identifier is used to control mg-popover\n */\n @Prop({ reflect: true }) identifier = createID('mg-menu-item');\n @Watch('identifier')\n watchIdentifier(newValue: MgMenuItem['identifier']): void {\n if (!isValideID(newValue)) {\n console.error(`<mg-menu-item> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n } else {\n this.popoverIdentifier = `${this.identifier}-popover`;\n }\n }\n\n /**\n * Define menu-item href\n * when defined menu-item contain an anchor instead of button\n */\n @Prop() href?: string;\n\n /**\n * Define target type\n */\n @Prop() target?: TargetType;\n @Watch('target')\n watchTarget(newValue: MgMenuItem['target']): void {\n if (newValue && !targets.includes(newValue)) {\n throw new Error(`<mg-link> prop \"target\" must be one of: ${targets.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define menu-item status.\n */\n @Prop({ reflect: true, mutable: true }) status?: MgMenuStatusType = 'visible';\n @Watch('status')\n watchStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void {\n if (oldValue !== undefined) this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n }\n\n /**\n * Define menu-item content expanded.\n */\n @Prop({ mutable: true }) expanded? = false;\n @Watch('expanded')\n watchExpanded(newValue: MgMenuItem['expanded']): void {\n if (typeof newValue !== 'boolean') {\n throw new Error(`<${this.name}> prop \"expanded\" must be a boolean. Passed value: ${toString(newValue)}.`);\n } else {\n this.updateExpanded(newValue);\n // when expanded all actives sub-items need to be expanded and non active closed\n Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n if (item !== this.element) item.expanded = newValue ? this.hasStatus(item, Status.ACTIVE) : false;\n });\n }\n }\n\n /**********\n * Events *\n *********/\n\n /**\n * Emited event when item is loaded\n */\n @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n /**\n * Emited event when item is updated\n */\n @Event({ eventName: 'item-updated' }) itemUpdated: EventEmitter<void>;\n\n /**********\n * States *\n *********/\n\n /**\n * Define menu-item size.\n */\n @State() size: MenuSizeType = 'medium';\n @Watch('size')\n watchSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n if (oldValue !== undefined) this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n }\n\n /**\n * Component button classes\n */\n @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n /**\n * Parent menu direction\n */\n @State() direction: Direction;\n @Watch('direction')\n validateDirection(newValue: MgMenuItem['direction'], oldValue: MgMenuItem['direction']): void {\n if (oldValue !== undefined) this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n // manage all sub levels child menu-items level with data-level attribut\n Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n if (this.isDirection(directions.VERTICAL, newValue)) {\n item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;\n } else {\n delete item.dataset.level;\n }\n });\n }\n\n /**\n * Does element is item-more\n */\n @State() isItemMore: boolean;\n\n /**\n * Does component have children.\n */\n @State() hasChildren = false;\n @Watch('hasChildren')\n validateHasChildren(newValue: boolean): void {\n if (newValue && this.element.href !== undefined) {\n throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n }\n }\n\n /**\n * Does component should display notification badge.\n */\n @State() displayNotificationBadge: boolean;\n\n /**\n * direction value in dataset\n * @param newValue - new direction value\n */\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('data-style-direction')\n watchDataStyleDirection(newValue: Direction): void {\n this.direction = newValue;\n }\n\n /**\n * has focus value in dataset\n * @param newValue - new direction value\n */\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('data-has-focus')\n watchDataHasFocus(newValue: string): void {\n if (!newValue) this.updateExpanded(Boolean(newValue));\n }\n\n /***********\n * Methods *\n **********/\n\n /**\n * Get parent menu\n * @returns parent menu\n */\n private getParentMenu = (): HTMLMgMenuElement => this.element.closest('mg-menu');\n\n /**\n * Does an Element have given Status\n * @param mgMenuItemElement - to parse\n * @param status - to check\n * @returns true if element with status is found\n */\n private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n /**\n * Condition to know if component should display a mg-popover\n * @returns truthy if component display popover\n */\n private hasPopover = (): boolean =>\n this.isDirection(directions.HORIZONTAL) &&\n ((this.isInMainMenu() && Array.from(this.element.children).some(element => element.querySelector('[slot]') === null)) || this.isItemMore) &&\n this.href === undefined;\n\n /**\n * Method to control if one of component children have active status\n * @returns truthy if component has active child\n */\n private hasActiveChild = (): boolean =>\n Array.from(this.element.querySelector('mg-menu')?.children || []).some(\n (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && !element.hasAttribute('hidden'),\n );\n\n /**\n * Is component an interactive item\n * @returns truthy if element is clickable\n */\n private isInteractiveItem = (): boolean => this.hasChildren || !isValidString(this.href);\n\n /**\n * Is component contextual direction match the given direction\n * @param direction - in parent menu\n * @param compareWith - direction to compare with. Default: `this.direction`\n * @returns true is direction match the direction propertie\n */\n private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n /**\n * Does component is in main menu\n * @returns true if component is in main menu\n */\n private isInMainMenu = (): boolean => this.getParentMenu() !== null && this.element.parentElement.closest('mg-menu-item') === null;\n\n /**\n * Update displayNotificationBadge\n * current component notification badge have priority over the slot badge when submenu contain badge\n */\n private updateDisplayNotificationBadge = (): void => {\n const childMenu = this.element.querySelector('mg-menu');\n this.displayNotificationBadge =\n childMenu !== null && Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && !subItem.hasAttribute('hidden'));\n };\n\n /**\n * Update expanded prop\n * @param newValue - expanded new value\n */\n private updateExpanded = (newValue: MgMenuItem['expanded']): void => {\n if (this.isInteractiveItem()) {\n // item is always expanded in vertical menu when has active child\n this.expanded = (this.isDirection(directions.VERTICAL) && this.hasActiveChild()) || newValue;\n }\n };\n\n /**\n * Update status\n * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n */\n private updateStatus = (guard: MgMenuItem['status'][] = []): void => {\n if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n }\n };\n\n /**\n * Render popover clickoutside guard for content slot\n */\n private updatePopoverGuard(): void {\n const subItem: HTMLElement = this.element.querySelector('*:not([slot])');\n if (subItem === null) return;\n if (this.hasPopover()) subItem.dataset.mgPopoverGuard = this.popoverIdentifier;\n else delete subItem.dataset.mgPopoverGuard;\n }\n\n /**\n * Update slots\n * @param guard - prevent action with guard. Default: false.\n */\n private updateSlot = (guard = false): void => {\n // slot title AND metadata validation\n // add title on label AND metada slots due to text-overflow on these element\n if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) {\n throw new Error(`<${this.name}> slot \"label\" is required.`);\n }\n ['label', 'metadata'].forEach(slot => {\n Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n if (!isValidString(element.textContent)) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n if ((guard && !element.hasAttribute('title')) || !guard) element.setAttribute('title', element.textContent);\n });\n });\n };\n\n /**\n * Update menu item\n * @param guard - prevent action with guard\n */\n private updateItem = (guard?: MgMenuItem['status'][]): void => {\n const menu = this.getParentMenu();\n\n // define element size\n if (menu?.size !== undefined && !this.isItemMore) this.size = menu.size;\n else if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n // when vertical main menu item contain an active item we force expanded\n this.updateExpanded(this.expanded);\n this.updateStatus(guard);\n this.updatePopoverGuard();\n this.updateDisplayNotificationBadge();\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * Handle interacrtive element click\n * @param event - click on element\n */\n private handleElementCLick = (event: MouseEvent): void => {\n if (this.status === Status.DISABLED) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n // for non \"poperized\" menu-item we toggle expanded manualy\n this.updateExpanded(!this.expanded);\n\n // when item is the last clickable item we close the parent popover\n if (!this.isInteractiveItem()) {\n const closePopover = (element: HTMLMgMenuItemElement): void => {\n if (!element) return;\n else if (element !== this.element && element.expanded && element.shadowRoot.querySelector('mg-popover') !== null) {\n element.expanded = false;\n } else {\n closePopover(element.parentElement.closest('mg-menu-item'));\n }\n };\n closePopover(this.element);\n }\n };\n\n /**\n * Handle popover element display-change event\n * @param event - popover display event\n */\n private handlePopoverDisplay = (event: CustomEvent): void => {\n this.updateExpanded(event.detail);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Validate props\n */\n componentWillLoad(): void {\n // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element\n // we store only matching elements\n this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n this.messages = initLocales(this.element).messages.menuItem as MessageType;\n this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n // watchers\n this.watchStatus(this.status);\n this.watchExpanded(this.expanded);\n this.watchTarget(this.target);\n this.watchIdentifier(this.identifier);\n this.watchSize(this.size);\n }\n\n /**\n * Check if component slots configuration\n * @returns timeout\n */\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // validation\n this.updateSlot(true);\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.watchDataStyleDirection(this.element.dataset.styleDirection as Direction);\n this.watchDataHasFocus(this.element.dataset.hasFocus);\n this.updateItem([Status.ACTIVE]);\n\n // emit loaded event when component is fully loaded\n this.itemLoaded.emit();\n\n new MutationObserver(mutationsList => {\n if (mutationsList.some(mutation => ['hidden', 'status'].includes(mutation.attributeName))) this.updateStatus(this.hasChildren ? undefined : [Status.ACTIVE]);\n if (mutationsList.some(mutation => mutation.type === 'characterData')) this.updateSlot();\n if (mutationsList.some(mutation => mutation.type === 'childList')) this.updateItem();\n this.itemUpdated.emit();\n }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /**\n * Emit event when component is updated\n * @returns promise process wich emit the 'item-updated' event\n */\n componentShouldUpdate(): Promise<void> {\n return nextTick(() => {\n this.itemUpdated.emit();\n });\n }\n\n /**\n * Render ineractive element\n * @returns HTML Element\n */\n private renderInteractiveElement(): HTMLElement {\n const TagName: string = this.href !== undefined ? 'a' : 'button';\n return (\n <TagName\n href={this.href}\n class={this.navigationButtonClassList.join()}\n tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n disabled={this.status === Status.DISABLED}\n hidden={this.status === Status.HIDDEN}\n target={this.href !== undefined && this.target !== undefined ? this.target : undefined}\n aria-expanded={this.hasChildren && this.expanded.toString()}\n aria-current={this.status === Status.ACTIVE && 'page'}\n onClick={this.handleElementCLick}\n >\n <slot name=\"image\"></slot>\n <div class={`${this.navigationButton}-center`}>\n <div class={`${this.navigationButton}-text-content`}>\n <slot name=\"label\"></slot>\n {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n {this.displayNotificationBadge && (\n <span class={`${this.navigationButton}-text-content-notification`}>\n <mg-badge label={this.messages.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n </span>\n )}\n {this.target === '_blank' && [\n <mg-icon key=\"icon-new-tab\" class={`${this.navigationButton}-new-tab`} icon=\"arrow-up-right-square\"></mg-icon>,\n <span key=\"a11y-new-tab\" class=\"mg-u-visually-hidden\">\n {this.messages.openNewTab}\n </span>,\n ]}\n </div>\n {this.size !== 'medium' && <slot name=\"metadata\"></slot>}\n </div>\n {this.hasChildren && this.href === undefined && (\n <span\n class={{\n [`${this.navigationButton}-chevron`]: true,\n [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n }}\n >\n <mg-icon icon=\"chevron-down\"></mg-icon>\n </span>\n )}\n </TagName>\n );\n }\n\n /**\n * Render slot\n * @returns HTML Element\n */\n private renderSlot = (): HTMLElement => <slot></slot>;\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const getContainerClasses = () => ({\n ['mg-c-menu-item__collapse-container']: true,\n ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions.HORIZONTAL),\n });\n\n return (\n <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n {this.hasPopover() ? (\n <mg-popover\n display={this.expanded}\n placement=\"bottom-start\"\n arrowHide={true}\n onDisplay-change={this.handlePopoverDisplay}\n identifier={this.popoverIdentifier}\n data-fallback-placement=\"bottom-end\" // use for the last element of the menu if it is placed on the right side\n >\n {this.renderInteractiveElement()}\n <div class={getContainerClasses()} slot=\"content\">\n {this.renderSlot()}\n </div>\n </mg-popover>\n ) : (\n [\n this.renderInteractiveElement(),\n <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n {this.renderSlot()}\n </div>,\n ]\n )}\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"mg-menu-item.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menus/mg-menu-item/mg-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID, isValideID, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { directions, type MenuSizeType } from '../mg-menu/mg-menu.conf';\nimport { type MgMenuStatusType, Status, targets, type TargetType } from './mg-menu-item.conf';\nimport type { MessageType } from '../../../../locales/index.conf';\nimport { Direction } from '../../../../types';\n\n/**\n * @slot - Menu item content\n * @slot image - Menu item image content\n * @slot label - Menu item label content\n * @slot information - Menu item information content\n * @slot metadata - Menu item metadata content\n */\n@Component({\n tag: 'mg-menu-item',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css',\n shadow: true,\n})\nexport class MgMenuItem {\n /************\n * Internal *\n ************/\n\n private readonly name = 'mg-menu-item';\n private readonly navigationButton = 'mg-c-menu-item__navigation-button';\n private messages: MessageType;\n private popoverIdentifier: string;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgMenuItemElement;\n\n /************\n * Props *\n ************/\n\n /**\n * Identifier is used to control mg-popover\n */\n @Prop({ reflect: true }) identifier = createID('mg-menu-item');\n @Watch('identifier')\n watchIdentifier(newValue: MgMenuItem['identifier']): void {\n if (!isValideID(newValue)) {\n console.error(`<mg-menu-item> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n } else {\n this.popoverIdentifier = `${this.identifier}-popover`;\n }\n }\n\n /**\n * Define menu-item href\n * when defined menu-item contain an anchor instead of button\n */\n @Prop() href?: string;\n\n /**\n * Define target type\n */\n @Prop() target?: TargetType;\n @Watch('target')\n watchTarget(newValue: MgMenuItem['target']): void {\n if (newValue && !targets.includes(newValue)) {\n throw new Error(`<mg-link> prop \"target\" must be one of: ${targets.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define menu-item status.\n */\n @Prop({ reflect: true, mutable: true }) status?: MgMenuStatusType = 'visible';\n @Watch('status')\n watchStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void {\n if (oldValue !== undefined) this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n }\n\n /**\n * Define menu-item content expanded.\n */\n @Prop({ mutable: true }) expanded? = false;\n @Watch('expanded')\n watchExpanded(newValue: MgMenuItem['expanded']): void {\n if (typeof newValue !== 'boolean') {\n throw new Error(`<${this.name}> prop \"expanded\" must be a boolean. Passed value: ${toString(newValue)}.`);\n } else {\n this.updateExpanded(newValue);\n // when expanded all actives sub-items need to be expanded and non active closed\n Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n if (item !== this.element) item.expanded = newValue ? this.hasStatus(item, Status.ACTIVE) : false;\n });\n }\n }\n\n /**********\n * Events *\n *********/\n\n /**\n * Emited event when item is loaded\n */\n @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n /**\n * Emited event when item is updated\n */\n @Event({ eventName: 'item-updated' }) itemUpdated: EventEmitter<void>;\n\n /**********\n * States *\n *********/\n\n /**\n * Define menu-item size.\n */\n @State() size: MenuSizeType = 'medium';\n @Watch('size')\n watchSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n if (oldValue !== undefined) this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n }\n\n /**\n * Component button classes\n */\n @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n /**\n * Parent menu direction\n */\n @State() direction: Direction;\n @Watch('direction')\n validateDirection(newValue: MgMenuItem['direction'], oldValue: MgMenuItem['direction']): void {\n if (oldValue !== undefined) this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n // manage all sub levels child menu-items level with data-level attribut\n Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n if (this.isDirection(directions.VERTICAL, newValue)) {\n item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;\n } else {\n delete item.dataset.level;\n }\n });\n }\n\n /**\n * Does element is item-more\n */\n @State() isItemMore: boolean;\n\n /**\n * Does component have children.\n */\n @State() hasChildren = false;\n @Watch('hasChildren')\n validateHasChildren(newValue: boolean): void {\n if (newValue && this.element.href !== undefined) {\n throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n }\n }\n\n /**\n * Does component should display notification badge.\n */\n @State() displayNotificationBadge: boolean;\n\n /**\n * direction value in dataset\n * @param newValue - new direction value\n */\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('data-style-direction')\n watchDataStyleDirection(newValue: Direction): void {\n this.direction = newValue;\n }\n\n /**\n * has focus value in dataset\n * @param newValue - new direction value\n */\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('data-has-focus')\n watchDataHasFocus(newValue: string): void {\n if (!isValidString(newValue)) this.updateExpanded(Boolean(newValue));\n }\n\n /***********\n * Methods *\n **********/\n\n /**\n * Get parent menu\n * @returns parent menu\n */\n private getParentMenu = (): HTMLMgMenuElement => this.element.closest('mg-menu');\n\n /**\n * Does an Element have given Status\n * @param mgMenuItemElement - to parse\n * @param status - to check\n * @returns true if element with status is found\n */\n private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n /**\n * Condition to know if component should display a mg-popover\n * @returns truthy if component display popover\n */\n private hasPopover = (): boolean =>\n this.isDirection(directions.HORIZONTAL) &&\n ((this.isInMainMenu() && Array.from(this.element.children).some(element => element.querySelector('[slot]') === null)) || this.isItemMore) &&\n this.href === undefined;\n\n /**\n * Method to control if one of component children have active status\n * @returns truthy if component has active child\n */\n private hasActiveChild = (): boolean =>\n Array.from(this.element.querySelector('mg-menu')?.children || []).some(\n (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && !element.hasAttribute('hidden'),\n );\n\n /**\n * Is component an interactive item\n * @returns truthy if element is clickable\n */\n private isInteractiveItem = (): boolean => this.hasChildren || !isValidString(this.href);\n\n /**\n * Is component contextual direction match the given direction\n * @param direction - in parent menu\n * @param compareWith - direction to compare with. Default: `this.direction`\n * @returns true is direction match the direction propertie\n */\n private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n /**\n * Does component is in main menu\n * @returns true if component is in main menu\n */\n private isInMainMenu = (): boolean => this.getParentMenu() !== null && this.element.parentElement.closest('mg-menu-item') === null;\n\n /**\n * Update displayNotificationBadge\n * current component notification badge have priority over the slot badge when submenu contain badge\n */\n private updateDisplayNotificationBadge = (): void => {\n const childMenu = this.element.querySelector('mg-menu');\n this.displayNotificationBadge =\n childMenu !== null && Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && !subItem.hasAttribute('hidden'));\n };\n\n /**\n * Update expanded prop\n * @param newValue - expanded new value\n */\n private updateExpanded = (newValue: MgMenuItem['expanded']): void => {\n if (this.isInteractiveItem()) {\n // item is always expanded in vertical menu when has active child\n this.expanded = (this.isDirection(directions.VERTICAL) && this.hasActiveChild()) || newValue;\n }\n };\n\n /**\n * Update status\n * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n */\n private updateStatus = (guard: MgMenuItem['status'][] = []): void => {\n if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n }\n };\n\n /**\n * Render popover clickoutside guard for content slot\n */\n private updatePopoverGuard(): void {\n const subItem: HTMLElement = this.element.querySelector('*:not([slot])');\n if (subItem === null) return;\n if (this.hasPopover()) subItem.dataset.mgPopoverGuard = this.popoverIdentifier;\n else delete subItem.dataset.mgPopoverGuard;\n }\n\n /**\n * Update slots\n * @param guard - prevent action with guard. Default: false.\n */\n private updateSlot = (guard = false): void => {\n // slot title AND metadata validation\n // add title on label AND metada slots due to text-overflow on these element\n if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) {\n throw new Error(`<${this.name}> slot \"label\" is required.`);\n }\n ['label', 'metadata'].forEach(slot => {\n Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n if (!isValidString(element.textContent)) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n if ((guard && !element.hasAttribute('title')) || !guard) element.setAttribute('title', element.textContent);\n });\n });\n };\n\n /**\n * Update menu item\n * @param guard - prevent action with guard\n */\n private updateItem = (guard?: MgMenuItem['status'][]): void => {\n const menu = this.getParentMenu();\n\n // define element size\n if (menu?.size !== undefined && !this.isItemMore) this.size = menu.size;\n else if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n // when vertical main menu item contain an active item we force expanded\n this.updateExpanded(this.expanded);\n this.updateStatus(guard);\n this.updatePopoverGuard();\n this.updateDisplayNotificationBadge();\n };\n\n /************\n * Handlers *\n ************/\n\n /**\n * Handle interacrtive element click\n * @param event - click on element\n */\n private handleElementCLick = (event: MouseEvent): void => {\n if (this.status === Status.DISABLED) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n // for non \"poperized\" menu-item we toggle expanded manualy\n this.updateExpanded(!this.expanded);\n\n // when item is the last clickable item we close the parent popover\n if (!this.isInteractiveItem()) {\n const closePopover = (element: HTMLMgMenuItemElement): void => {\n if (element === null) return;\n else if (element !== this.element && element.expanded && element.shadowRoot.querySelector('mg-popover') !== null) {\n element.expanded = false;\n } else {\n closePopover(element.parentElement.closest('mg-menu-item'));\n }\n };\n closePopover(this.element);\n }\n };\n\n /**\n * Handle popover element display-change event\n * @param event - popover display event\n */\n private handlePopoverDisplay = (event: CustomEvent): void => {\n this.updateExpanded(event.detail);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Validate props\n */\n componentWillLoad(): void {\n // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element\n // we store only matching elements\n this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n this.messages = initLocales(this.element).messages.menuItem as MessageType;\n this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n // watchers\n this.watchStatus(this.status);\n this.watchExpanded(this.expanded);\n this.watchTarget(this.target);\n this.watchIdentifier(this.identifier);\n this.watchSize(this.size);\n }\n\n /**\n * Check if component slots configuration\n * @returns timeout\n */\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // validation\n this.updateSlot(true);\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.watchDataStyleDirection(this.element.dataset.styleDirection as Direction);\n this.watchDataHasFocus(this.element.dataset.hasFocus);\n this.updateItem([Status.ACTIVE]);\n\n // emit loaded event when component is fully loaded\n this.itemLoaded.emit();\n\n new MutationObserver(mutationsList => {\n if (mutationsList.some(mutation => ['hidden', 'status'].includes(mutation.attributeName))) this.updateStatus(this.hasChildren ? undefined : [Status.ACTIVE]);\n if (mutationsList.some(mutation => mutation.type === 'characterData')) this.updateSlot();\n if (mutationsList.some(mutation => mutation.type === 'childList')) this.updateItem();\n this.itemUpdated.emit();\n }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /**\n * Emit event when component is updated\n * @returns promise process wich emit the 'item-updated' event\n */\n componentShouldUpdate(): Promise<void> {\n return nextTick(() => {\n this.itemUpdated.emit();\n });\n }\n\n /**\n * Render ineractive element\n * @returns HTML Element\n */\n private renderInteractiveElement(): HTMLElement {\n const TagName: string = this.href !== undefined ? 'a' : 'button';\n return (\n <TagName\n href={this.href}\n class={this.navigationButtonClassList.join()}\n tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n disabled={this.status === Status.DISABLED}\n hidden={this.status === Status.HIDDEN}\n target={this.href !== undefined && this.target !== undefined ? this.target : undefined}\n aria-expanded={this.hasChildren && this.expanded.toString()}\n aria-current={this.status === Status.ACTIVE && 'page'}\n onClick={this.handleElementCLick}\n >\n <slot name=\"image\"></slot>\n <div class={`${this.navigationButton}-center`}>\n <div class={`${this.navigationButton}-text-content`}>\n <slot name=\"label\"></slot>\n {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n {this.displayNotificationBadge && (\n <span class={`${this.navigationButton}-text-content-notification`}>\n <mg-badge label={this.messages.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n </span>\n )}\n {this.target === '_blank' && [\n <mg-icon key=\"icon-new-tab\" class={`${this.navigationButton}-new-tab`} icon=\"arrow-up-right-square\"></mg-icon>,\n <span key=\"a11y-new-tab\" class=\"mg-u-visually-hidden\">\n {this.messages.openNewTab}\n </span>,\n ]}\n </div>\n {this.size !== 'medium' && <slot name=\"metadata\"></slot>}\n </div>\n {this.hasChildren && this.href === undefined && (\n <span\n class={{\n [`${this.navigationButton}-chevron`]: true,\n [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n }}\n >\n <mg-icon icon=\"chevron-down\"></mg-icon>\n </span>\n )}\n </TagName>\n );\n }\n\n /**\n * Render slot\n * @returns HTML Element\n */\n private renderSlot = (): HTMLElement => <slot></slot>;\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const getContainerClasses = () => ({\n ['mg-c-menu-item__collapse-container']: true,\n ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions.HORIZONTAL),\n });\n\n return (\n <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n {this.hasPopover() ? (\n <mg-popover\n display={this.expanded}\n placement=\"bottom-start\"\n arrowHide={true}\n onDisplay-change={this.handlePopoverDisplay}\n identifier={this.popoverIdentifier}\n data-fallback-placement=\"bottom-end\" // use for the last element of the menu if it is placed on the right side\n >\n {this.renderInteractiveElement()}\n <div class={getContainerClasses()} slot=\"content\">\n {this.renderSlot()}\n </div>\n </mg-popover>\n ) : (\n [\n this.renderInteractiveElement(),\n <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n {this.renderSlot()}\n </div>,\n ]\n )}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -141,9 +141,9 @@ export class MgActionMore {
|
|
|
141
141
|
[`${this.classBase}__chevron--rotate`]: this.expanded === true,
|
|
142
142
|
} }, h("mg-icon", { icon: "chevron-down" })));
|
|
143
143
|
}
|
|
144
|
-
return (h(Host, { key: '
|
|
144
|
+
return (h(Host, { key: '655b4be7b0b17db8ad6e2d688f59c18f2750dfe4', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: '19f5763f7732fb156803fb6a24f776f182d230f4', class: this.classBase }, h("mg-popover", { key: '617fefddd54794e3f3da60e700e1c60e0758c66b', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: 'c9ef1d8f771b015ddb5b8f280c3657e74606ef22', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: 'ded976da4cd3a457a232aee9613dc9e108c35358' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: 'e3308c1e0ae198f204c283408f9c3afc154ddf21', slot: "content" }, h("mg-menu", { key: '70c222a09f42b938f56a5bb02fa4193ca8f47788', direction: directions.VERTICAL, label: this.messages.label }, this.items.map(item => {
|
|
145
145
|
var _a, _b;
|
|
146
|
-
return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider" })) : (h("mg-menu-item", { key: item.label, status: item.status || Status.VISIBLE, target: item.target, href: item.href,
|
|
146
|
+
return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (h("mg-menu-item", { key: item.label, status: item.status || Status.VISIBLE, target: item.target, href: item.href,
|
|
147
147
|
// eslint-disable-next-line react/jsx-no-bind
|
|
148
148
|
onClick: e => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" }), h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" })));
|
|
149
149
|
})))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mg-action-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-action-more/mg-action-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, Watch, State, Host } from '@stencil/core';\nimport { createID, toString } from '@mgdis/stencil-helpers';\nimport { Status } from '../menus/mg-menu-item/mg-menu-item.conf';\nimport { directions } from '../menus/mg-menu/mg-menu.conf';\nimport { initLocales } from '../../../locales';\nimport type { MessageType } from '../../../locales/index.conf';\nimport type { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreDividerType } from './mg-action-more.conf';\n\n/**\n * MgActionMore['items'] type guard\n * @param prop - commponent items prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreItems = (prop: unknown): prop is MgActionMoreItemType[] => {\n const items = prop as MgActionMoreItemType[];\n return (\n typeof items === 'object' &&\n items.every(item => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') || isMgActionMoreDivider(item))\n );\n};\n\n/**\n * MgActionMoreDividerType type guard\n * @param item - component item\n * @returns return true if type is valid\n */\nconst isMgActionMoreDivider = (item: unknown): item is MgActionMoreDividerType => typeof item === 'object' && (item as MgActionMoreDividerType).isDivider;\n\n/**\n * MgActionMore['button'] type guard\n * @param prop - commponent button prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreButton = (prop: unknown): prop is MgActionMoreButtonType => {\n const button = prop as MgActionMoreButtonType;\n return typeof button === 'object' && typeof button.variant === 'string' && typeof button.isIcon === 'boolean';\n};\n\n/**\n * MgActionMore['icon'] type guard\n * @param prop - commponent icon prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreIcon = (prop: unknown): prop is MgActionMoreIconType => {\n const icon = prop as MgActionMoreIconType;\n return typeof icon === 'object' && typeof icon.icon === 'string';\n};\n\n@Component({\n tag: 'mg-action-more',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-action-more.css',\n shadow: true,\n})\nexport class MgActionMore {\n /************\n * Internal *\n ************/\n\n private readonly name = 'mg-action-more';\n private readonly classBase = 'mg-c-action-more';\n private readonly mgPopoverIdentifier = createID(this.name);\n private messages: MessageType;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgActionMoreElement;\n\n /**\n * Define the menu-items elements\n */\n @Prop() items!: (MgActionMoreItemType | MgActionMoreDividerType)[];\n @Watch('items')\n validateItems(newValue: MgActionMore['items']): void {\n if (!isMgActionMoreItems(newValue)) {\n throw new Error(\n `<${this.name}> prop \"items\" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${toString(newValue)}.`,\n );\n } else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {\n throw new Error(`<${this.name}> prop \"items\" can’t have a divider at the beginning or the end of the array. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define displayed icon\n */\n @Prop({ mutable: true }) icon?: MgActionMoreIconType;\n @Watch('icon')\n validateIcon(newValue: MgActionMore['icon']): void {\n if (newValue && !isMgActionMoreIcon(newValue)) {\n throw new Error(`<${this.name}> prop \"icon\" must match MgActionMoreIconType. Passed value: ${toString(newValue)}.`);\n } else if (newValue?.icon === undefined && Boolean(this.button.isIcon)) {\n this.icon = { icon: 'ellipsis' };\n }\n }\n\n /**\n * Define button properties\n */\n @Prop() button?: MgActionMoreButtonType = { variant: 'flat', isIcon: true };\n @Watch('button')\n validateButton(newValue: MgActionMore['button']): void {\n if (newValue && !isMgActionMoreButton(newValue)) {\n throw new Error(`<${this.name}> prop \"button\" must match MgActionMoreButtonType. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define if chevron is display\n */\n @Prop() displayChevron = false;\n @Watch('displayChevron')\n validateDisplayChevron(newValue: MgActionMore['displayChevron']): void {\n if (newValue && this.button.isIcon === true) {\n throw new Error(`<${this.name}> prop \"displayChevron\" can't be used with a 'button\" prop \"isIcon\" attribute.`);\n }\n }\n /**\n * Menu expanded state\n */\n @State() expanded = false;\n\n /************\n * Methods *\n ***********/\n\n /**\n * Toggle expanded props\n */\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n /**\n * Handle popover display change value\n * @param event - display change updated value\n */\n private handleDisplayChange = (event: CustomEvent): void => {\n this.expanded = event.detail;\n };\n\n /**\n * Button click handler\n */\n private handleButton = (): void => {\n this.toggleExpanded();\n };\n\n /**\n * Item click handler\n * @param event - click event\n * @param customHandler - item['mouseEventHandler']\n */\n private handleItemClick = (event: MouseEvent, customHandler: MgActionMoreItemType['mouseEventHandler']) => {\n this.expanded = false;\n customHandler(event);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Validate props\n */\n componentWillLoad(): void {\n this.messages = initLocales(this.element).messages.actionMore as MessageType;\n this.validateItems(this.items);\n this.validateButton(this.button);\n this.validateIcon(this.icon);\n this.validateDisplayChevron(this.displayChevron);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const buttonLabel = this.button.label || this.messages.label;\n const buttonContent = [buttonLabel];\n\n if (!this.button.isIcon && this.displayChevron) {\n buttonContent.push(\n <span\n class={{\n [`${this.classBase}__chevron`]: true,\n [`${this.classBase}__chevron--rotate`]: this.expanded === true,\n }}\n >\n <mg-icon icon=\"chevron-down\"></mg-icon>\n </span>,\n );\n }\n\n return (\n <Host data-mg-popover-guard={this.mgPopoverIdentifier}>\n <span class={this.classBase}>\n <mg-popover identifier={this.mgPopoverIdentifier} display={this.expanded} onDisplay-change={this.handleDisplayChange}>\n <mg-button variant={this.button.variant} isIcon={this.button.isIcon} disabled={this.button.disabled} type=\"button\" label={buttonLabel} onClick={this.handleButton}>\n {this.icon && <mg-icon {...this.icon}></mg-icon>}\n {!this.button.isIcon && buttonContent}\n </mg-button>\n <div slot=\"content\">\n <mg-menu direction={directions.VERTICAL} label={this.messages.label}>\n {this.items.map(item =>\n isMgActionMoreDivider(item) ? (\n <mg-divider class=\"mg-c-action-more__divider\" key=\"divider\"></mg-divider>\n ) : (\n <mg-menu-item\n key={item.label}\n status={item.status || Status.VISIBLE}\n target={item.target}\n href={item.href}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={e => this.handleItemClick(e, item.mouseEventHandler)}\n >\n {item.icon?.icon && <mg-icon icon={item.icon.icon} variant={item.icon.variant} variantStyle={item.icon.variantStyle} slot=\"image\"></mg-icon>}\n <span slot=\"label\">{item.label}</span>\n {item.badge?.label && <mg-badge label={item.badge.label} value={item.badge.value} slot=\"information\" variant=\"text-color\"></mg-badge>}\n </mg-menu-item>\n ),\n )}\n </mg-menu>\n </div>\n </mg-popover>\n </span>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"mg-action-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-action-more/mg-action-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, Watch, State, Host } from '@stencil/core';\nimport { createID, toString } from '@mgdis/stencil-helpers';\nimport { Status } from '../menus/mg-menu-item/mg-menu-item.conf';\nimport { directions } from '../menus/mg-menu/mg-menu.conf';\nimport { initLocales } from '../../../locales';\nimport type { MessageType } from '../../../locales/index.conf';\nimport type { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreDividerType } from './mg-action-more.conf';\n\n/**\n * MgActionMore['items'] type guard\n * @param prop - commponent items prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreItems = (prop: unknown): prop is MgActionMoreItemType[] => {\n const items = prop as MgActionMoreItemType[];\n return (\n typeof items === 'object' &&\n items.every(item => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') || isMgActionMoreDivider(item))\n );\n};\n\n/**\n * MgActionMoreDividerType type guard\n * @param item - component item\n * @returns return true if type is valid\n */\nconst isMgActionMoreDivider = (item: unknown): item is MgActionMoreDividerType => typeof item === 'object' && (item as MgActionMoreDividerType).isDivider;\n\n/**\n * MgActionMore['button'] type guard\n * @param prop - commponent button prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreButton = (prop: unknown): prop is MgActionMoreButtonType => {\n const button = prop as MgActionMoreButtonType;\n return typeof button === 'object' && typeof button.variant === 'string' && typeof button.isIcon === 'boolean';\n};\n\n/**\n * MgActionMore['icon'] type guard\n * @param prop - commponent icon prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreIcon = (prop: unknown): prop is MgActionMoreIconType => {\n const icon = prop as MgActionMoreIconType;\n return typeof icon === 'object' && typeof icon.icon === 'string';\n};\n\n@Component({\n tag: 'mg-action-more',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-action-more.css',\n shadow: true,\n})\nexport class MgActionMore {\n /************\n * Internal *\n ************/\n\n private readonly name = 'mg-action-more';\n private readonly classBase = 'mg-c-action-more';\n private readonly mgPopoverIdentifier = createID(this.name);\n private messages: MessageType;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgActionMoreElement;\n\n /**\n * Define the menu-items elements\n */\n @Prop() items!: (MgActionMoreItemType | MgActionMoreDividerType)[];\n @Watch('items')\n validateItems(newValue: MgActionMore['items']): void {\n if (!isMgActionMoreItems(newValue)) {\n throw new Error(\n `<${this.name}> prop \"items\" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${toString(newValue)}.`,\n );\n } else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {\n throw new Error(`<${this.name}> prop \"items\" can’t have a divider at the beginning or the end of the array. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define displayed icon\n */\n @Prop({ mutable: true }) icon?: MgActionMoreIconType;\n @Watch('icon')\n validateIcon(newValue: MgActionMore['icon']): void {\n if (newValue && !isMgActionMoreIcon(newValue)) {\n throw new Error(`<${this.name}> prop \"icon\" must match MgActionMoreIconType. Passed value: ${toString(newValue)}.`);\n } else if (newValue?.icon === undefined && Boolean(this.button.isIcon)) {\n this.icon = { icon: 'ellipsis' };\n }\n }\n\n /**\n * Define button properties\n */\n @Prop() button?: MgActionMoreButtonType = { variant: 'flat', isIcon: true };\n @Watch('button')\n validateButton(newValue: MgActionMore['button']): void {\n if (newValue && !isMgActionMoreButton(newValue)) {\n throw new Error(`<${this.name}> prop \"button\" must match MgActionMoreButtonType. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /**\n * Define if chevron is display\n */\n @Prop() displayChevron = false;\n @Watch('displayChevron')\n validateDisplayChevron(newValue: MgActionMore['displayChevron']): void {\n if (newValue && this.button.isIcon === true) {\n throw new Error(`<${this.name}> prop \"displayChevron\" can't be used with a 'button\" prop \"isIcon\" attribute.`);\n }\n }\n /**\n * Menu expanded state\n */\n @State() expanded = false;\n\n /************\n * Methods *\n ***********/\n\n /**\n * Toggle expanded props\n */\n private toggleExpanded = (): void => {\n this.expanded = !this.expanded;\n };\n\n /**\n * Handle popover display change value\n * @param event - display change updated value\n */\n private handleDisplayChange = (event: CustomEvent): void => {\n this.expanded = event.detail;\n };\n\n /**\n * Button click handler\n */\n private handleButton = (): void => {\n this.toggleExpanded();\n };\n\n /**\n * Item click handler\n * @param event - click event\n * @param customHandler - item['mouseEventHandler']\n */\n private handleItemClick = (event: MouseEvent, customHandler: MgActionMoreItemType['mouseEventHandler']) => {\n this.expanded = false;\n customHandler(event);\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Validate props\n */\n componentWillLoad(): void {\n this.messages = initLocales(this.element).messages.actionMore as MessageType;\n this.validateItems(this.items);\n this.validateButton(this.button);\n this.validateIcon(this.icon);\n this.validateDisplayChevron(this.displayChevron);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const buttonLabel = this.button.label || this.messages.label;\n const buttonContent = [buttonLabel];\n\n if (!this.button.isIcon && this.displayChevron) {\n buttonContent.push(\n <span\n class={{\n [`${this.classBase}__chevron`]: true,\n [`${this.classBase}__chevron--rotate`]: this.expanded === true,\n }}\n >\n <mg-icon icon=\"chevron-down\"></mg-icon>\n </span>,\n );\n }\n\n return (\n <Host data-mg-popover-guard={this.mgPopoverIdentifier}>\n <span class={this.classBase}>\n <mg-popover identifier={this.mgPopoverIdentifier} display={this.expanded} onDisplay-change={this.handleDisplayChange}>\n <mg-button variant={this.button.variant} isIcon={this.button.isIcon} disabled={this.button.disabled} type=\"button\" label={buttonLabel} onClick={this.handleButton}>\n {this.icon && <mg-icon {...this.icon}></mg-icon>}\n {!this.button.isIcon && buttonContent}\n </mg-button>\n <div slot=\"content\">\n <mg-menu direction={directions.VERTICAL} label={this.messages.label}>\n {this.items.map(item =>\n isMgActionMoreDivider(item) ? (\n <mg-divider class=\"mg-c-action-more__divider\" key=\"divider\" full-width></mg-divider>\n ) : (\n <mg-menu-item\n key={item.label}\n status={item.status || Status.VISIBLE}\n target={item.target}\n href={item.href}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={e => this.handleItemClick(e, item.mouseEventHandler)}\n >\n {item.icon?.icon && <mg-icon icon={item.icon.icon} variant={item.icon.variant} variantStyle={item.icon.variantStyle} slot=\"image\"></mg-icon>}\n <span slot=\"label\">{item.label}</span>\n {item.badge?.label && <mg-badge label={item.badge.label} value={item.badge.value} slot=\"information\" variant=\"text-color\"></mg-badge>}\n </mg-menu-item>\n ),\n )}\n </mg-menu>\n </div>\n </mg-popover>\n </span>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -142,7 +142,7 @@ export class MgAlert {
|
|
|
142
142
|
* @returns HTML Element
|
|
143
143
|
*/
|
|
144
144
|
render() {
|
|
145
|
-
return (h("mg-message", { key: '
|
|
145
|
+
return (h("mg-message", { key: '25a886be17d690dfcbffea51dca06a8a102a4926', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: 'ddf8c61b96ee376384c28b81b0a16ff72c0e6dd1' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
|
|
146
146
|
}
|
|
147
147
|
static get is() { return "mg-alert"; }
|
|
148
148
|
static get encapsulation() { return "shadow"; }
|
|
@@ -49,7 +49,7 @@ export class MgDetails {
|
|
|
49
49
|
* @returns HTML Element
|
|
50
50
|
*/
|
|
51
51
|
render() {
|
|
52
|
-
return (h("details", { key: '
|
|
52
|
+
return (h("details", { key: 'e43aa4f4262d7006b9fdd0e75666649498081d55', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '050d5c0a645a017aaa784a4034201122b27238f0' }, h("slot", { key: 'e0d7ed83952bdd74a23ecabe93c4d0c922cda286', name: "summary" }), h("span", { key: '27238089072f0f0ca8f3263ec39e41291ab89907', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'f1702911d70e2a95ecaac17a7a0c43a075ea8c18', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '6854f4ecd77d04e297b807060a0d064401d6537f', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '85e57b346ff8327d31f92a1e86c42fd8f131f6dc', class: "mg-c-details__details" }, h("slot", { key: 'bd016ab29d695bb1ccd99b9fd402ed23bbdc19ea', name: "details" }))));
|
|
53
53
|
}
|
|
54
54
|
static get is() { return "mg-details"; }
|
|
55
55
|
static get encapsulation() { return "shadow"; }
|
|
@@ -224,7 +224,7 @@ export class MgForm {
|
|
|
224
224
|
* @returns HTML Element
|
|
225
225
|
*/
|
|
226
226
|
render() {
|
|
227
|
-
return (h("form", { key: '
|
|
227
|
+
return (h("form", { key: '444703cae8a5374a86adc1dcaf048665f06e795f', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '1a936dfeb41a257be7b44afada7bd435f9a357f0', innerHTML: this.requiredMessageText }), h("slot", { key: 'a446094e8658b02c5a9baf7b19d77ca11b1432e9' }), !this.readonly && !this.disabled && h("slot", { key: '41f4e1c80a0f78b112eaac1d5bc53a219eee926e', name: "actions" })));
|
|
228
228
|
}
|
|
229
229
|
static get is() { return "mg-form"; }
|
|
230
230
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js
CHANGED
|
@@ -81,7 +81,7 @@ export class MgIllustratedMessage {
|
|
|
81
81
|
* @returns HTML Element
|
|
82
82
|
*/
|
|
83
83
|
render() {
|
|
84
|
-
return (h("div", { key: '
|
|
84
|
+
return (h("div", { key: '60c53ef4294aa36a8c354b42f47f5c7d9fc409f6', class: this.classCollection.join() }, h("div", { key: '254673ae5b7183a1adfa53c18d9e632bcdd67607', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '16b9bbe8abaae4d0f7b713fbe345e54b5b966ac0', name: "illustration" })), h("div", { key: 'c272c168ea520f8c71261e8f84297fb1bd44c044', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '7ba11d5f5fe293175a01768619bc43b0632ba0a5', name: "title" }), h("slot", { key: 'f03540939af486bb44134298b12eaf9de32f814a', name: "details" }))));
|
|
85
85
|
}
|
|
86
86
|
static get is() { return "mg-illustrated-message"; }
|
|
87
87
|
static get encapsulation() { return "shadow"; }
|
|
@@ -29,7 +29,7 @@ export class MgLoader {
|
|
|
29
29
|
* @returns HTML Element
|
|
30
30
|
*/
|
|
31
31
|
render() {
|
|
32
|
-
return (h("div", { key: '
|
|
32
|
+
return (h("div", { key: 'cd791f239c0ca655ed2470d606068dd361d9f019', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '450b1d79e33bb1f67a3e5243c3fb5f7855165848', icon: "loader", spin: true }), h("span", { key: 'e0f3e296fa631b1a2d44a7067b52dd0991cb43c6', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
|
|
33
33
|
}
|
|
34
34
|
static get is() { return "mg-loader"; }
|
|
35
35
|
static get encapsulation() { return "shadow"; }
|
|
@@ -86,9 +86,9 @@ export class MgMessage {
|
|
|
86
86
|
* @returns HTML Element
|
|
87
87
|
*/
|
|
88
88
|
render() {
|
|
89
|
-
return (h("div", { key: '
|
|
89
|
+
return (h("div", { key: '851d97fde6f05799e1420f8825fcff986d9af1d6', class: this.classCollection.join() }, h("mg-card", { key: '40f85f1fb3240ab709b1ab46286e9a953f2d5dc8' }, this.variantStyle === 'bar-left' && h("span", { key: '50b078ec379c7774d2f409c64b56108041bf3053', class: "mg-c-message__bar" }), h("span", { key: 'bc6b1019e1103fc8cd5e4e92f95b62374207be2b', class: "mg-c-message__icon" }, h("mg-icon", { key: 'e461ddc1eb1ddcb7ecc673f59dc59f400efbe916', icon: this.getIcon() })), h("div", { key: 'edf836b375d7f1fd413b53711b99acbe2bef3e92', class: "mg-c-message__content" }, h("span", { key: 'c6ce4628e450b7e89ef3715126b3a2dee081224e', class: "mg-c-message__content-slot" }, h("slot", { key: '36ecf7417e61ab84695078e2fd4ebe829bd769a7' })), this.hasActions && [
|
|
90
90
|
h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
|
|
91
|
-
h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '
|
|
91
|
+
h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '43be5769165cac1ab702b2ba80fb885c2ec1834f', name: "actions" })),
|
|
92
92
|
]))));
|
|
93
93
|
}
|
|
94
94
|
static get is() { return "mg-message"; }
|
|
@@ -106,11 +106,11 @@ export class MgModal {
|
|
|
106
106
|
* @returns HTML Element
|
|
107
107
|
*/
|
|
108
108
|
render() {
|
|
109
|
-
return (h("dialog", { key: '
|
|
109
|
+
return (h("dialog", { key: '4b7346b707b895a8a110bb7553f0db32d1c5778c', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
|
|
110
110
|
if (el !== null) {
|
|
111
111
|
this.dialog = el;
|
|
112
112
|
}
|
|
113
|
-
} }, h("mg-card", { key: '
|
|
113
|
+
} }, h("mg-card", { key: '2aaabab2e1be14013bcae66d100ac56c1a9bbf4d' }, h("div", { key: '56a03d6cbda094d7ae4444ca3fab924982f73e2a', class: "mg-c-modal__dialog" }, h("header", { key: 'e7eb70e614a9e6c6b3f14f9e165bf801b780b031', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'c57ccc8f049893c5e46d769b527cc2e2c5ff14c0', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'b1b4357af8c875aab9f1104895de3cc228d12feb', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: 'cfe5fba2577ece682368332d3836cf709bb1b0e1', icon: "cross" })))), h("h1", { key: '718527902ea4814d55bf4d1c89d111a965233f0a', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '78603fdb8fffa93e5caa6cf0ece9c6dbdbdfefde', class: "mg-c-modal__content" }, h("slot", { key: '1cd5a0415e53cb836428f8b9c4fc02dac11447a9' })), this.hasActions && (h("footer", { key: 'da72e5c2f43308d0f94d4e2eb36e317a13b5b16e', class: "mg-c-modal__footer" }, h("slot", { key: '49467ef13123cb4f4e2b315d293379d857ca3245', name: "actions" })))))));
|
|
114
114
|
}
|
|
115
115
|
static get is() { return "mg-modal"; }
|
|
116
116
|
static get encapsulation() { return "shadow"; }
|
|
@@ -116,10 +116,10 @@ export class MgPagination {
|
|
|
116
116
|
* @returns HTML Element
|
|
117
117
|
*/
|
|
118
118
|
render() {
|
|
119
|
-
const navigationActionButton = (disabled, action) => (h("mg-button", { key: '
|
|
119
|
+
const navigationActionButton = (disabled, action) => (h("mg-button", { key: 'b6983bde889955b35b1e580ffd5ece96a2919eca', label: this.messages.pagination[`${action}Page`],
|
|
120
120
|
// eslint-disable-next-line react/jsx-no-bind
|
|
121
|
-
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '
|
|
122
|
-
return (h(Host, { key: '
|
|
121
|
+
onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '64316742287d7cb9adf0c4bb3cb902a3c1cea6b5', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: '2c405c1530509f3e6938e7c1d754b7aff216a6f7', icon: "chevron-right" })));
|
|
122
|
+
return (h(Host, { key: 'a341519e24868b594c1bb91c12549c0338fc0f49', hidden: this.totalPages < 2 }, h("nav", { key: '1102f256da9b8c25e8dbe6be64b934267d58f4b8', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("div", { key: '32498b13867e363f6f51ffbaff6f18623cbd698d', class: "mg-c-pagination__page-count" }, h("mg-input-select", { key: 'ff80a43e9fa1bf7cc13c7104e41730df0c044c3e', identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { key: 'c3e331768f997740ed95cde7dc7433df7d065122', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page)), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
|
|
123
123
|
}
|
|
124
124
|
static get is() { return "mg-pagination"; }
|
|
125
125
|
static get encapsulation() { return "shadow"; }
|
|
@@ -192,7 +192,7 @@ export class MgPanel {
|
|
|
192
192
|
*/
|
|
193
193
|
render() {
|
|
194
194
|
const headerId = `${this.identifier}-header`;
|
|
195
|
-
return (h("section", { key: '
|
|
195
|
+
return (h("section", { key: '73b9b1ab03307718bc7085799675da7447787c73', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '91702feab4cde0548c276f3d32fa193ff1093cae' }, h("header", { key: '442a17d42f86e73648ffa33124a1745fef3b07e3', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '0df72fb9e53f0a8307c062d506e8c744fd6780f3', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '44fa7501182e1c671d229929ebc12031c3048fdb' })))));
|
|
196
196
|
}
|
|
197
197
|
static get is() { return "mg-panel"; }
|
|
198
198
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js
CHANGED
|
@@ -46,7 +46,7 @@ export class MgPopoverContent {
|
|
|
46
46
|
* @returns HTML Element
|
|
47
47
|
*/
|
|
48
48
|
render() {
|
|
49
|
-
return (h(Host, { key: '
|
|
49
|
+
return (h(Host, { key: '8d2dd7d21518de744c18f0280b7b418f3a76acca' }, h("mg-card", { key: '8beab7c9fb692c1983515709a1ee888dc7e5157a', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { key: 'e636569be26b0c741e0b03e806787d91b47ded5c', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '3edc717cbe542494d892566c182883e20b1ca4cb', icon: "cross" }))), h("div", { key: 'd18525218972d92b6932984edb50844658e12970', class: "mg-c-popover-content__title" }, h("slot", { key: '2cceb41fd4ebb00b889e71cab211431e5894d04c', name: "title" })), h("slot", { key: 'a6615d9d7c85b32fb63d3d89db02fae2f8d5c1b2', name: "content" })), h("slot", { key: '0ff4bf72de19a3d56aafb64391cfc276d70e2f18', name: "arrow" })));
|
|
50
50
|
}
|
|
51
51
|
static get is() { return "mg-popover-content"; }
|
|
52
52
|
static get encapsulation() { return "shadow"; }
|