npm - @mgdis/mg-components - Versions diffs - 5.25.2 → 5.27.0 - Mend

@mgdis/mg-components 5.25.2 → 5.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (256) hide show

package/dist/components/mg-message.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { j as je, F as Fe } from './index.es.js';
+import { R as Re, M as Me } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-button2.js';
 import { d as defineCustomElement$3 } from './mg-card2.js';
@@ -83,13 +83,13 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
                     return 'exclamation-circle';
             }
         };
-        this.identifier = je('mg-message');
+        this.identifier = Re('mg-message');
         this.delay = undefined;
         this.variant = variants[0];
         this.closeButton = false;
         this.hide = false;
         this.noAriaRole = undefined;
-        this.classCollection = new Fe(['mg-c-message']);
+        this.classCollection = new Me(['mg-c-message']);
         this.hasActions = false;
     }
     validateDelay(newValue) {
@@ -168,7 +168,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
         let role;
         if (!this.noAriaRole)
             role = this.variant === 'info' ? 'status' : 'alert';
-        return (h("div", { key: 'fb10ca559b2039f9d7842e4b2ce88e25a1999c96', id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { key: 'c0afc8ad8c56f9e5fb5041aaa201de208f3fc6fd', variant: this.variant, "variant-style": "bar-left" }, h("span", { key: '949f48302c8feb721f1b9acb663bf21acfc166e1', class: "mg-c-message__icon" }, h("mg-icon", { key: 'a3daa1da6d312c6b6b921cc01edae9763a81225f', icon: this.getIcon() })), h("div", { key: 'c53239107f094fe341f6abb1441096767b648796', class: "mg-c-message__content" }, h("span", { key: 'fb4da55da5853179204771cf9f5d01a02ed8a9ce', class: "mg-c-message__content-slot" }, h("slot", { key: 'e7339501b750d02a3e433e40903d460588dd4b33' })), this.hasActions && h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { class: "mg-c-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-c-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
+        return (h("div", { key: '426c30a149e1d0aef99c9b34ef8b09384b876e7f', id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { key: 'f8e00eaf99b8fcc828bbade2745293931da76619', variant: this.variant, "variant-style": "bar-left" }, h("span", { key: '94f7c67946985fafacfba078237926823315362f', class: "mg-c-message__icon" }, h("mg-icon", { key: '8e9b5c24bcb20ade8bb2a160a886973b9e9575fe', icon: this.getIcon() })), h("div", { key: '2104ace2484f87109c5dfa76cd3423216412fe28', class: "mg-c-message__content" }, h("span", { key: 'e1af1bc257beb682e9ad44627b4208e1ce52b28c', class: "mg-c-message__content-slot" }, h("slot", { key: '7688aed5413d37855f7704c625f4669400bdaaff' })), this.hasActions && h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { class: "mg-c-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-c-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-message.js","mappings":"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","names":["MgMessage","createID","ClassList"],"sources":["src/components/molecules/mg-message/mg-message.conf.ts","../styles/dist/components/mg-message.css?tag=mg-message&encapsulation=shadow","src/components/molecules/mg-message/mg-message.tsx"],"sourcesContent":["/*\n List of all possibles message variants\n /\nexport const variants = ['info', 'warning', 'success', 'danger'] as const;\n\n/\n Variant type\n /\nexport type VariantType = (typeof variants)[number];\n",":host{--mg-card-padding: 0;--mg-card-border-radius: var(--mg-message-border-radius);--mg-card-border: none;--mg-card-overflow: hidden}:host([hide]){display:none}.mg-c-message{display:inline-block;min-height:var(--default-size)}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:hsl(var(--color-info))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:hsl(var(--color-warning))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:hsl(var(--color-success))}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:hsl(var(--color-danger))}.mg-c-message.mg-c-message--close-button{--mg-card-padding: 0 3.4rem 0 0}.mg-c-message.mg-c-message--hide{display:none}.mg-c-message ::slotted(){padding:0;margin:0}.mg-c-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size))/2);left:1.3rem;line-height:1}.mg-c-message__content{display:flex;flex-wrap:wrap;padding:0 1rem 0 3.8rem;place-content:stretch flex-end}.mg-c-message__content-slot{flex-grow:1;margin:.84rem 0}.mg-c-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-c-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-c-message__close-button{position:absolute;top:0;right:0}.mg-c-message ::slotted(){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}.mg-c-message,.mg-c-message mg-message{max-width:100%}/# sourceMappingURL=mg-message.css.map /\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '@mgdis/stencil-helpers';\nimport { variants, VariantType } from './mg-message.conf';\nimport { initLocales } from '../../../locales';\nimport { type MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n@Component({\n tag: 'mg-message',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-message.css',\n shadow: true,\n})\nexport class MgMessage {\n /**********\n Internal \n *********/\n\n // Classes\n private readonly classHide = 'mg-c-message--hide';\n\n // IDs\n private closeButtonId = '';\n\n // Stored timer setted when hide action is run from setTimeOut\n private storedTimer: ReturnType<typeof setTimeout> = null;\n\n // Manage hover\n private isFocused = false;\n private isHovered = false;\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMessageElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n /\n @Prop() identifier: string = createID('mg-message');\n\n /\n Add a delay to hide/close message when it passed\n * Value is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)\n /\n @Prop() delay: number;\n @Watch('delay')\n validateDelay(newValue: MgMessage['delay']): void {\n if (newValue !== undefined && newValue < 2) {\n throw new Error(`<mg-message> prop \"delay\" must be greater than 2 seconds.`);\n }\n }\n\n /\n Message variant\n /\n @Prop() variant: VariantType = variants[0]; // info\n @Watch('variant')\n validateVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-message> prop \"variant\" must be one of: ${variants.join(', ')}`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-message--${oldValue}`);\n }\n this.classCollection.add(`mg-c-message--${newValue}`);\n }\n }\n\n /\n Define if message has a cross button\n * RG 01: https://jira.mgdis.fr/browse/PDA9-140\n /\n @Prop({ mutable: true }) closeButton = false;\n @Watch('closeButton')\n validateCloseButton(newValue: MgMessage['closeButton']): void {\n if (newValue && this.hasActions) {\n this.closeButton = false;\n throw new Error('<mg-message> prop \"close-button\" can\\'t be used with the actions slot.');\n }\n }\n\n /\n Define if message is hidden\n /\n @Prop({ mutable: true }) hide = false;\n @Watch('hide')\n validateHide(newValue: MgMessage['hide']): void {\n if (newValue) {\n this.componentHide.emit();\n this.classCollection.add(this.classHide);\n // Remove event Listener\n ['focusin', 'mouseenter'].forEach(event => {\n this.element.removeEventListener(event, this.timerEvents);\n });\n // Clear Timer\n this.clearTimer();\n } else {\n this.componentShow.emit();\n this.classCollection.delete(this.classHide);\n // If delay is set\n if (this.delay > 1) {\n // Start timer\n this.setTimer();\n // Stop timer when get focus or mouse enter\n ['focusin', 'mouseenter'].forEach(event => {\n this.element.addEventListener(event, this.timerEvents);\n });\n }\n }\n }\n\n /\n Define if aria role is unset\n * For a11y reasons, `<mg-message />` was design for `alert` needs with attached semantic role: `status`, `alert`.\n * By toggle this props to `true`, you can unset the role to benefit from the template without any semantic role.\n * Be careful to set the mode according to the context needs.\n /\n @Prop() noAriaRole: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-message']);\n\n /\n Define if component is using actions slot\n /\n @State() hasActions = false;\n\n /\n Emited event when message is diplayed\n /\n @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n /\n Emited event when message is hidden\n /\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n /\n Set timer\n /\n private setTimer = (): void => {\n this.storedTimer = setTimeout(() => (this.hide = true), this.delay 1000);\n };\n\n /*\n Clear timer\n /\n private clearTimer = (): void => {\n clearTimeout(this.storedTimer);\n };\n\n /\n Event to add on element\n * @param event - event\n /\n private timerEvents = (event: MouseEvent \| FocusEvent): void => {\n this.clearTimer();\n const isMouseEvent: boolean = event.type === 'mouseenter';\n // Needed to ensure we don't start the timer\n this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;\n\n // Restart timer when loose focus AND mouse leave\n this.element.addEventListener(\n isMouseEvent ? 'mouseleave' : 'focusout',\n eventOut => {\n this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;\n // Start timer if needed\n if (!this.isFocused && !this.isHovered) this.setTimer();\n },\n { once: true },\n );\n };\n\n /\n Handle close button\n /\n private handleClose = (): void => {\n this.hide = true;\n };\n\n /\n Get icon corresponding to variant\n * @returns icon\n /\n private getIcon = (): MgIcon['icon'] => {\n switch (this.variant) {\n case 'info':\n return 'info-circle';\n case 'warning':\n return 'exclamation-triangle';\n case 'success':\n return 'check-circle';\n case 'danger':\n return 'exclamation-circle';\n default:\n break;\n }\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateVariant(this.variant);\n // Check if close button is an can be activated\n this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n this.validateCloseButton(this.closeButton);\n if (this.closeButton) {\n this.classCollection.add('mg-c-message--close-button');\n this.closeButtonId = `${this.identifier}-close-button`;\n }\n this.validateDelay(this.delay);\n this.validateHide(this.hide);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n let role;\n\n if (!this.noAriaRole) role = this.variant === 'info' ? 'status' : 'alert';\n\n return (\n <div id={this.identifier} class={this.classCollection.join()} role={role}>\n <mg-card variant={this.variant} variant-style=\"bar-left\">\n <span class=\"mg-c-message__icon\">\n <mg-icon icon={this.getIcon()}></mg-icon>\n </span>\n <div class=\"mg-c-message__content\">\n <span class=\"mg-c-message__content-slot\">\n <slot></slot>\n </span>\n {this.hasActions && <span class=\"mg-c-message__content-separator\"></span>}\n {this.hasActions && (\n <span class=\"mg-c-message__content-actions-slot\">\n <slot name=\"actions\"></slot>\n </span>\n )}\n </div>\n {this.closeButton && (\n <span class=\"mg-c-message__close-button\">\n <mg-button identifier={this.closeButtonId} is-icon variant=\"flat\" label={this.messages.message.closeButton} onClick={this.handleClose}>\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n </span>\n )}\n </mg-card>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-message.js","mappings":"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","names":["MgMessage","createID","ClassList"],"sources":["src/components/molecules/mg-message/mg-message.conf.ts","../styles/dist/components/mg-message.css?tag=mg-message&encapsulation=shadow","src/components/molecules/mg-message/mg-message.tsx"],"sourcesContent":["/*\n List of all possibles message variants\n /\nexport const variants = ['info', 'warning', 'success', 'danger'] as const;\n\n/\n Variant type\n /\nexport type VariantType = (typeof variants)[number];\n",":host{--mg-card-padding: 0;--mg-card-border-radius: var(--mg-message-border-radius);--mg-card-border: none;--mg-card-overflow: hidden}:host([hide]){display:none}.mg-c-message{display:inline-block;min-height:var(--default-size)}.mg-c-message.mg-c-message--info .mg-c-message__icon{color:hsl(var(--color-info))}.mg-c-message.mg-c-message--warning .mg-c-message__icon{color:hsl(var(--color-warning))}.mg-c-message.mg-c-message--success .mg-c-message__icon{color:hsl(var(--color-success))}.mg-c-message.mg-c-message--danger .mg-c-message__icon{color:hsl(var(--color-danger))}.mg-c-message.mg-c-message--close-button{--mg-card-padding: 0 3.4rem 0 0}.mg-c-message.mg-c-message--hide{display:none}.mg-c-message ::slotted(){padding:0;margin:0}.mg-c-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size))/2);left:1.3rem;line-height:1}.mg-c-message__content{display:flex;flex-wrap:wrap;padding:0 1rem 0 3.8rem;place-content:stretch flex-end}.mg-c-message__content-slot{flex-grow:1;margin:.84rem 0}.mg-c-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-c-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-c-message__close-button{position:absolute;top:0;right:0}.mg-c-message ::slotted(){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}.mg-c-message,.mg-c-message mg-message{max-width:100%}/# sourceMappingURL=mg-message.css.map /\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '@mgdis/stencil-helpers';\nimport { variants, VariantType } from './mg-message.conf';\nimport { initLocales } from '../../../locales';\nimport { type MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n@Component({\n tag: 'mg-message',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-message.css',\n shadow: true,\n})\nexport class MgMessage {\n /**********\n Internal \n *********/\n\n // Classes\n private readonly classHide = 'mg-c-message--hide';\n\n // IDs\n private closeButtonId = '';\n\n // Stored timer setted when hide action is run from setTimeOut\n private storedTimer: ReturnType<typeof setTimeout> = null;\n\n // Manage hover\n private isFocused = false;\n private isHovered = false;\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMessageElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n /\n @Prop() identifier: string = createID('mg-message');\n\n /\n Add a delay to hide/close message when it passed\n * Value is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)\n /\n @Prop() delay?: number;\n @Watch('delay')\n validateDelay(newValue: MgMessage['delay']): void {\n if (newValue !== undefined && newValue < 2) {\n throw new Error(`<mg-message> prop \"delay\" must be greater than 2 seconds.`);\n }\n }\n\n /\n Message variant\n /\n @Prop() variant: VariantType = variants[0]; // info\n @Watch('variant')\n validateVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-message> prop \"variant\" must be one of: ${variants.join(', ')}`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-message--${oldValue}`);\n }\n this.classCollection.add(`mg-c-message--${newValue}`);\n }\n }\n\n /\n Define if message has a cross button\n * RG 01: https://jira.mgdis.fr/browse/PDA9-140\n /\n @Prop({ mutable: true }) closeButton = false;\n @Watch('closeButton')\n validateCloseButton(newValue: MgMessage['closeButton']): void {\n if (newValue && this.hasActions) {\n this.closeButton = false;\n throw new Error('<mg-message> prop \"close-button\" can\\'t be used with the actions slot.');\n }\n }\n\n /\n Define if message is hidden\n /\n @Prop({ mutable: true }) hide = false;\n @Watch('hide')\n validateHide(newValue: MgMessage['hide']): void {\n if (newValue) {\n this.componentHide.emit();\n this.classCollection.add(this.classHide);\n // Remove event Listener\n ['focusin', 'mouseenter'].forEach(event => {\n this.element.removeEventListener(event, this.timerEvents);\n });\n // Clear Timer\n this.clearTimer();\n } else {\n this.componentShow.emit();\n this.classCollection.delete(this.classHide);\n // If delay is set\n if (this.delay > 1) {\n // Start timer\n this.setTimer();\n // Stop timer when get focus or mouse enter\n ['focusin', 'mouseenter'].forEach(event => {\n this.element.addEventListener(event, this.timerEvents);\n });\n }\n }\n }\n\n /\n Define if aria role is unset\n * For a11y reasons, `<mg-message />` was design for `alert` needs with attached semantic role: `status`, `alert`.\n * By toggle this props to `true`, you can unset the role to benefit from the template without any semantic role.\n * Be careful to set the mode according to the context needs.\n /\n @Prop() noAriaRole?: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-message']);\n\n /\n Define if component is using actions slot\n /\n @State() hasActions = false;\n\n /\n Emited event when message is diplayed\n /\n @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n /\n Emited event when message is hidden\n /\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n /\n Set timer\n /\n private setTimer = (): void => {\n this.storedTimer = setTimeout(() => (this.hide = true), this.delay 1000);\n };\n\n /*\n Clear timer\n /\n private clearTimer = (): void => {\n clearTimeout(this.storedTimer);\n };\n\n /\n Event to add on element\n * @param event - event\n /\n private timerEvents = (event: MouseEvent \| FocusEvent): void => {\n this.clearTimer();\n const isMouseEvent: boolean = event.type === 'mouseenter';\n // Needed to ensure we don't start the timer\n this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;\n\n // Restart timer when loose focus AND mouse leave\n this.element.addEventListener(\n isMouseEvent ? 'mouseleave' : 'focusout',\n eventOut => {\n this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;\n // Start timer if needed\n if (!this.isFocused && !this.isHovered) this.setTimer();\n },\n { once: true },\n );\n };\n\n /\n Handle close button\n /\n private handleClose = (): void => {\n this.hide = true;\n };\n\n /\n Get icon corresponding to variant\n * @returns icon\n /\n private getIcon = (): MgIcon['icon'] => {\n switch (this.variant) {\n case 'info':\n return 'info-circle';\n case 'warning':\n return 'exclamation-triangle';\n case 'success':\n return 'check-circle';\n case 'danger':\n return 'exclamation-circle';\n default:\n break;\n }\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateVariant(this.variant);\n // Check if close button is an can be activated\n this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n this.validateCloseButton(this.closeButton);\n if (this.closeButton) {\n this.classCollection.add('mg-c-message--close-button');\n this.closeButtonId = `${this.identifier}-close-button`;\n }\n this.validateDelay(this.delay);\n this.validateHide(this.hide);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n let role;\n\n if (!this.noAriaRole) role = this.variant === 'info' ? 'status' : 'alert';\n\n return (\n <div id={this.identifier} class={this.classCollection.join()} role={role}>\n <mg-card variant={this.variant} variant-style=\"bar-left\">\n <span class=\"mg-c-message__icon\">\n <mg-icon icon={this.getIcon()}></mg-icon>\n </span>\n <div class=\"mg-c-message__content\">\n <span class=\"mg-c-message__content-slot\">\n <slot></slot>\n </span>\n {this.hasActions && <span class=\"mg-c-message__content-separator\"></span>}\n {this.hasActions && (\n <span class=\"mg-c-message__content-actions-slot\">\n <slot name=\"actions\"></slot>\n </span>\n )}\n </div>\n {this.closeButton && (\n <span class=\"mg-c-message__close-button\">\n <mg-button identifier={this.closeButtonId} is-icon variant=\"flat\" label={this.messages.message.closeButton} onClick={this.handleClose}>\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n </span>\n )}\n </mg-card>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-modal.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { B as Be, j as je, F as Fe, H as He } from './index.es.js';
+import { D as De, R as Re, M as Me, B as Be } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-button2.js';
 import { d as defineCustomElement$3 } from './mg-card2.js';
@@ -10,7 +10,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
  */
 const dialogRoles = ['dialog', 'alertdialog'];
-const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-padding:1.5rem 2.5rem;--mg-card-border:none}.mg-c-modal{position:fixed;z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem 0;background-color:hsl(var(--color-light)/85%);inset:0}.mg-c-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:3rem}.mg-c-modal__header{margin-bottom:.5rem}.mg-c-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size)*var(--line-height))/2*-1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size))/2*-1);float:right}.mg-c-modal__content{overflow-y:auto}.mg-c-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-c-modal.mg-c-modal--hide{display:none}.mg-c-modal ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}";
+const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-padding:1.5rem 2.5rem;--mg-card-border:none}.mg-c-modal{position:fixed;z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem 0;background-color:hsl(var(--color-light)/85%);inset:0}.mg-c-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:3rem}.mg-c-modal__header{margin-bottom:.5rem}.mg-c-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size)*var(--line-height))/2*-1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size))/2*-1);float:right}.mg-c-modal__content{padding:1rem;margin:-1rem;overflow-y:auto}.mg-c-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-c-modal.mg-c-modal--hide{display:none}.mg-c-modal ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}";
 const MgModalStyle0 = mgModalCss;
 const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLElement {
@@ -59,12 +59,12 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
          */
         this.setFocus = () => {
             // Get all focusable elements
-            const slottedFocusableElements = Array.from(this.element.querySelectorAll(Be));
+            const slottedFocusableElements = Array.from(this.element.querySelectorAll(De));
             // If close button is enabled or at least one of the slotted element is focusable
             if (this.closeButton || slottedFocusableElements.length > 0) {
                 // Check if slotted focusable elements have shadowDom with focusable elements
                 this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
-                    acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(Be) || focusableElement : focusableElement);
+                    acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(De) || focusableElement : focusableElement);
                     return acc;
                 }, []);
                 // When close button is enabled it's the first focusable element.
@@ -86,21 +86,21 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
         this.handleClose = () => {
             this.hide = true;
         };
-        this.identifier = je('mg-modal');
+        this.identifier = Re('mg-modal');
         this.dialogRole = dialogRoles[0];
         this.modalTitle = undefined;
         this.closeButton = false;
         this.hide = undefined;
         this.hasActions = false;
         this.hasContent = false;
-        this.classCollection = new Fe(['mg-c-modal']);
+        this.classCollection = new Me(['mg-c-modal']);
     }
     validateDialogRole(newValue) {
         if (!dialogRoles.includes(newValue))
             throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
     }
     validateModalTitle(newValue) {
-        if (!He(newValue)) {
+        if (!Be(newValue)) {
             throw new Error('<mg-modal> prop "modalTitle" is required.');
         }
     }
@@ -168,14 +168,14 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '5cf37ab3cd51af984852f3ef6dfeb9e9adf851aa', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", { key: 'e9246015018d985cb28396f1f3ab01466e763f0c' }, h("div", { key: '3b94fd3d16a8f54e63fd75ef7fb13c7c17ff16b6', class: "mg-c-modal__dialog" }, h("header", { key: '5f6cd3f002c135c62e0b4851f483a5581bcf50d2', class: "mg-c-modal__header" }, this.closeButton && (h("span", { class: "mg-c-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
+        return (h("div", { key: 'cc3a33438dcf5ec90831f5bb39ddb0de558063ab', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", { key: '18a6cf3cd69c667573489b051de9f15aa853784d' }, h("div", { key: '5e856e4a0ed625ffa1879d35efa27b5292ea3f11', class: "mg-c-modal__dialog" }, h("header", { key: 'fb701088cdd08194f68cf22920cd1d30ef24db0b', class: "mg-c-modal__header" }, this.closeButton && (h("span", { class: "mg-c-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
                 if (el !== null) {
                     // store closeButton Element
                     this.closeButtonElement = el;
                     // add close button element to modalFocusableElements when it is render
                     this.modalFocusableElements.unshift(this.closeButtonElement);
                 }
-            } }, h("mg-icon", { icon: "cross" })))), h("h1", { key: '2bbb2a19e3936bc5487bfdb90d8d952ba49844be', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-c-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-c-modal__footer" }, h("slot", { name: "actions" })))))));
+            } }, h("mg-icon", { icon: "cross" })))), h("h1", { key: '2b99fc7fc7440a3c9899a88f1bd138a36500df94', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-c-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-c-modal__footer" }, h("slot", { name: "actions" })))))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-modal.js","mappings":"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","names":["MgModal","focusableElements","createID","ClassList","isValidString"],"sources":["src/components/molecules/mg-modal/mg-modal.conf.ts","../styles/dist/components/mg-modal.css?tag=mg-modal&encapsulation=shadow","src/components/molecules/mg-modal/mg-modal.tsx"],"sourcesContent":["/*\n List of all possibles dialog roles\n /\nexport const dialogRoles = ['dialog', 'alertdialog'] as const;\n\n/\n DialogRole type from dialog roles\n /\nexport type DialogRoleType = (typeof dialogRoles)[number];\n",":host{--mg-card-border-radius: var(--mg-modal-border-radius);--mg-card-padding: 1.5rem 2.5rem;--mg-card-border: none}.mg-c-modal{position:fixed;z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem 0;background-color:hsl(var(--color-light)/85%);inset:0}.mg-c-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:3rem}.mg-c-modal__header{margin-bottom:.5rem}.mg-c-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size)var(--line-height))/2-1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size))/2-1);float:right}.mg-c-modal__content{overflow-y:auto}.mg-c-modal__content::slotted(){font-size:var(--mg-modal-content-font-size)}.mg-c-modal.mg-c-modal--hide{display:none}.mg-c-modal ::slotted(){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}/# sourceMappingURL=mg-modal.css.map /\n","import { Component, h, Prop, State, Watch, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { createID, ClassList, focusableElements, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n@Component({\n tag: 'mg-modal',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-modal.css',\n shadow: true,\n})\nexport class MgModal {\n /***********\n Internal \n *********/\n\n // Modal focusable elements\n private modalFocusableElements: HTMLElement[] = [];\n private closeButtonElement: HTMLMgButtonElement;\n\n // Classes\n private readonly classHide = 'mg-c-modal--hide';\n\n // IDs\n private titleId = '';\n\n // Locales\n private messages;\n\n // body overflow default\n private bodyOverflow: string;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgModalElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n /\n @Prop() identifier: string = createID('mg-modal');\n\n /\n Modal dialog role.\n /\n @Prop() dialogRole: DialogRoleType = dialogRoles[0];\n @Watch('dialogRole')\n validateDialogRole(newValue: MgModal['dialogRole']): void {\n if (!dialogRoles.includes(newValue)) throw new Error(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n }\n\n /\n Displayed modal title\n /\n @Prop() modalTitle!: string;\n @Watch('modalTitle')\n validateModalTitle(newValue: MgModal['modalTitle']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-modal> prop \"modalTitle\" is required.');\n }\n }\n\n /\n Define if modal has a cross button\n /\n @Prop() closeButton = false;\n\n /\n Define if modal is hidden\n /\n @Prop({ mutable: true }) hide: boolean;\n @Watch('hide')\n validateHide(newValue: MgModal['hide']): void {\n if (newValue) {\n this.componentHide.emit();\n this.classCollection.add(this.classHide);\n document.body.style.overflow = this.bodyOverflow;\n // reset focus handlers\n this.getLastFocusableElement()?.removeEventListener('keydown', this.handleLastFocusableElement);\n if (this.modalFocusableElements.length > 0) this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);\n } else if (newValue === false) {\n this.componentShow.emit();\n this.classCollection.delete(this.classHide);\n document.body.style.overflow = 'hidden';\n this.setFocus();\n }\n }\n\n /\n Define if component is using actions slot\n /\n @State() hasActions = false;\n\n /\n Define if component is using content slot\n /\n @State() hasContent = false;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-modal']);\n\n /\n Emmited event when modal is diplayed\n /\n @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n /\n Emmited event when modal is hidden\n /\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n /\n Handle 'escape' key down\n * @param event - keydown event\n /\n @Listen('keydown', {\n target: 'window',\n })\n handleKeyDown(event: KeyboardEvent): void {\n // we can use 'Escape button\" when this not a blocking modal, induced by closeButton value.\n if (this.closeButton && event.key === 'Escape') {\n this.hide = true;\n }\n }\n\n /\n Handle last focusable element\n * @param event - keyboard event\n /\n private handleLastFocusableElement = (event): void => {\n if (event.key === 'Tab' && !event.shiftKey) {\n event.preventDefault();\n this.modalFocusableElements[0].focus();\n }\n };\n\n /\n Handle first focusable element\n * @param event - keyboard event\n /\n private handleFirstFocusableElement = (event): void => {\n if (event.key === 'Tab' && event.shiftKey) {\n event.preventDefault();\n this.getLastFocusableElement().focus();\n }\n };\n\n /\n Get last focusablmeElement\n * @returns last modal focusable element\n /\n private getLastFocusableElement = (): HTMLElement \| null => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);\n\n /\n Method to manage focus on modal focusable elements\n /\n private setFocus = (): void => {\n // Get all focusable elements\n const slottedFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n // If close button is enabled or at least one of the slotted element is focusable\n if (this.closeButton \|\| slottedFocusableElements.length > 0) {\n // Check if slotted focusable elements have shadowDom with focusable elements\n this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {\n acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) \|\| focusableElement : focusableElement);\n return acc;\n }, []);\n // When close button is enabled it's the first focusable element.\n if (this.closeButton && this.closeButtonElement !== undefined) {\n this.modalFocusableElements.unshift(this.closeButtonElement);\n }\n // Add event listener on last element\n this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);\n // Add event listener on first element (case shift + tab)\n this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);\n }\n };\n\n /***********\n Handlers \n **********/\n\n /\n * Handle close button\n /\n private handleClose = (): void => {\n this.hide = true;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Store body overflow\n this.bodyOverflow = document.body.style.overflow;\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n this.hasContent = this.element.querySelector('[slot=\"content\"]') !== null;\n this.titleId = `${this.identifier}-title`;\n this.validateModalTitle(this.modalTitle);\n this.validateHide(this.hide);\n this.validateDialogRole(this.dialogRole);\n }\n\n /\n Add observer on component to set focus when displayed\n /\n componentDidLoad(): void {\n new MutationObserver(mutationList => {\n // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation\n if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes((mutation.target as HTMLElement).ariaHidden))) {\n // Set focus on first element\n this.modalFocusableElements[0].focus();\n }\n }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div role={this.dialogRole} id={this.identifier} class={this.classCollection.join()} tabindex=\"-1\" aria-labelledby={this.titleId} aria-modal=\"true\" aria-hidden={this.hide}>\n <mg-card>\n <div class=\"mg-c-modal__dialog\">\n <header class=\"mg-c-modal__header\">\n {this.closeButton && (\n <span class=\"mg-c-modal__close-button\">\n <mg-button\n identifier={`${this.identifier}-close-button`}\n is-icon\n variant=\"flat\"\n label={this.messages.modal.closeButton}\n onClick={this.handleClose}\n ref={(el: HTMLMgButtonElement) => {\n if (el !== null) {\n // store closeButton Element\n this.closeButtonElement = el;\n // add close button element to modalFocusableElements when it is render\n this.modalFocusableElements.unshift(this.closeButtonElement);\n }\n }}\n >\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n </span>\n )}\n <h1 class=\"mg-c-modal__title\" id={this.titleId}>\n {this.modalTitle}\n </h1>\n </header>\n\n {this.hasContent && (\n <article class=\"mg-c-modal__content\">\n <slot name=\"content\"></slot>\n </article>\n )}\n\n {this.hasActions && (\n <footer class=\"mg-c-modal__footer\">\n <slot name=\"actions\"></slot>\n </footer>\n )}\n </div>\n </mg-card>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-modal.js","mappings":";;;;;;;AAAA;;;AAGO,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,aAAa,CAAU;;ACH7D,MAAM,UAAU,GAAG,25CAA25C,CAAC;AAC/6C,sBAAe,UAAU;;MCSZA,SAAO;;;;;;;;;;;QAMV,2BAAsB,GAAkB,EAAE,CAAC;;QAIlC,cAAS,GAAG,kBAAkB,CAAC;;QAGxC,YAAO,GAAG,EAAE,CAAC;;;;;QAgHb,+BAA0B,GAAG,CAAC,KAAK;YACzC,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxC;SACF,CAAC;;;;;QAMM,gCAA2B,GAAG,CAAC,KAAK;YAC1C,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE;gBACzC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,uBAAuB,EAAE,CAAC,KAAK,EAAE,CAAC;aACxC;SACF,CAAC;;;;;QAMM,4BAAuB,GAAG,OAA2B,IAAI,CAAC,sBAAsB,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;;;;QAK1K,aAAQ,GAAG;;YAEjB,MAAM,wBAAwB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAACC,EAAiB,CAAC,CAAC,CAAC;;YAE9F,IAAI,IAAI,CAAC,WAAW,IAAI,wBAAwB,CAAC,MAAM,GAAG,CAAC,EAAE;;gBAE3D,IAAI,CAAC,sBAAsB,GAAG,wBAAwB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,gBAAgB;oBAClF,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,KAAK,IAAI,GAAG,gBAAgB,CAAC,UAAU,CAAC,aAAa,CAACA,EAAiB,CAAC,IAAI,gBAAgB,GAAG,gBAAgB,CAAC,CAAC;oBACrJ,OAAO,GAAG,CAAC;iBACZ,EAAE,EAAE,CAAC,CAAC;;gBAEP,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,KAAK,SAAS,EAAE;oBAC7D,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;iBAC9D;;gBAED,IAAI,CAAC,uBAAuB,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;;gBAE5F,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;aAC9F;SACF,CAAC;;;;;;;QASM,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB,CAAC;0BApJ2BC,EAAQ,CAAC,UAAU,CAAC;0BAKZ,WAAW,CAAC,CAAC,CAAC;;2BAoB7B,KAAK;;0BA0BL,KAAK;0BAKL,KAAK;+BAKW,IAAIC,EAAS,CAAC,CAAC,YAAY,CAAC,CAAC;;IAtDnE,kBAAkB,CAAC,QAA+B;QAChD,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,gDAAgD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACjI;IAOD,kBAAkB,CAAC,QAA+B;QAChD,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;SAC9D;KACF;IAYD,YAAY,CAAC,QAAyB;;QACpC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YAC1B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC;;YAEjD,MAAA,IAAI,CAAC,uBAAuB,EAAE,0CAAE,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;YAChG,IAAI,IAAI,CAAC,sBAAsB,CAAC,MAAM,GAAG,CAAC;gBAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;SAC7I;aAAM,IAAI,QAAQ,KAAK,KAAK,EAAE;YAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC5C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACxC,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;;;;;IAkCD,aAAa,CAAC,KAAoB;;QAEhC,IAAI,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC9C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB;KACF;;;;;;;IAwED,iBAAiB;;QAEf,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;;QAEjD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;;QAEnD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;QAC1E,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;QAC1E,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,UAAU,QAAQ,CAAC;QAC1C,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC1C;;;;IAKD,gBAAgB;QACd,IAAI,gBAAgB,CAAC,YAAY;;YAE/B,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,KAAK,aAAa,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAE,QAAQ,CAAC,MAAsB,CAAC,UAAU,CAAC,CAAC,EAAE;;gBAE1J,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxC;SACF,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;KAC3F;;;;;IAMD,MAAM;QACJ,QACE,4DAAK,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAC,IAAI,qBAAkB,IAAI,CAAC,OAAO,gBAAa,MAAM,iBAAc,IAAI,CAAC,IAAI,IACxK,kEACE,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,+DAAQ,KAAK,EAAC,oBAAoB,IAC/B,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,0BAA0B,IACpC,iBACE,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,eAAe,mBAE7C,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EACtC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,GAAG,EAAE,CAAC,EAAuB;gBAC3B,IAAI,EAAE,KAAK,IAAI,EAAE;;oBAEf,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;;oBAE7B,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;iBAC9D;aACF,IAED,eAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACP,CACR,EACD,2DAAI,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,IAC3C,IAAI,CAAC,UAAU,CACb,CACE,EAER,IAAI,CAAC,UAAU,KACd,eAAS,KAAK,EAAC,qBAAqB,IAClC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACpB,CACX,EAEA,IAAI,CAAC,UAAU,KACd,cAAQ,KAAK,EAAC,oBAAoB,IAChC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACrB,CACV,CACG,CACE,CACN,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgModal","focusableElements","createID","ClassList","isValidString"],"sources":["src/components/molecules/mg-modal/mg-modal.conf.ts","../styles/dist/components/mg-modal.css?tag=mg-modal&encapsulation=shadow","src/components/molecules/mg-modal/mg-modal.tsx"],"sourcesContent":["/*\n List of all possibles dialog roles\n /\nexport const dialogRoles = ['dialog', 'alertdialog'] as const;\n\n/\n DialogRole type from dialog roles\n /\nexport type DialogRoleType = (typeof dialogRoles)[number];\n",":host{--mg-card-border-radius: var(--mg-modal-border-radius);--mg-card-padding: 1.5rem 2.5rem;--mg-card-border: none}.mg-c-modal{position:fixed;z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem 0;background-color:hsl(var(--color-light)/85%);inset:0}.mg-c-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:3rem}.mg-c-modal__header{margin-bottom:.5rem}.mg-c-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size)var(--line-height))/2-1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size))/2-1);float:right}.mg-c-modal__content{padding:1rem;margin:-1rem;overflow-y:auto}.mg-c-modal__content::slotted(){font-size:var(--mg-modal-content-font-size)}.mg-c-modal.mg-c-modal--hide{display:none}.mg-c-modal ::slotted(){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}/# sourceMappingURL=mg-modal.css.map /\n","import { Component, h, Prop, State, Watch, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { createID, ClassList, focusableElements, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n@Component({\n tag: 'mg-modal',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-modal.css',\n shadow: true,\n})\nexport class MgModal {\n /***********\n Internal \n *********/\n\n // Modal focusable elements\n private modalFocusableElements: HTMLElement[] = [];\n private closeButtonElement: HTMLMgButtonElement;\n\n // Classes\n private readonly classHide = 'mg-c-modal--hide';\n\n // IDs\n private titleId = '';\n\n // Locales\n private messages;\n\n // body overflow default\n private bodyOverflow: string;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgModalElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n /\n @Prop() identifier: string = createID('mg-modal');\n\n /\n Modal dialog role.\n /\n @Prop() dialogRole: DialogRoleType = dialogRoles[0];\n @Watch('dialogRole')\n validateDialogRole(newValue: MgModal['dialogRole']): void {\n if (!dialogRoles.includes(newValue)) throw new Error(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n }\n\n /\n Displayed modal title\n /\n @Prop() modalTitle!: string;\n @Watch('modalTitle')\n validateModalTitle(newValue: MgModal['modalTitle']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-modal> prop \"modalTitle\" is required.');\n }\n }\n\n /\n Define if modal has a cross button\n /\n @Prop() closeButton = false;\n\n /\n Define if modal is hidden\n /\n @Prop({ mutable: true }) hide: boolean;\n @Watch('hide')\n validateHide(newValue: MgModal['hide']): void {\n if (newValue) {\n this.componentHide.emit();\n this.classCollection.add(this.classHide);\n document.body.style.overflow = this.bodyOverflow;\n // reset focus handlers\n this.getLastFocusableElement()?.removeEventListener('keydown', this.handleLastFocusableElement);\n if (this.modalFocusableElements.length > 0) this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);\n } else if (newValue === false) {\n this.componentShow.emit();\n this.classCollection.delete(this.classHide);\n document.body.style.overflow = 'hidden';\n this.setFocus();\n }\n }\n\n /\n Define if component is using actions slot\n /\n @State() hasActions = false;\n\n /\n Define if component is using content slot\n /\n @State() hasContent = false;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-modal']);\n\n /\n Emmited event when modal is diplayed\n /\n @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n /\n Emmited event when modal is hidden\n /\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n /\n Handle 'escape' key down\n * @param event - keydown event\n /\n @Listen('keydown', {\n target: 'window',\n })\n handleKeyDown(event: KeyboardEvent): void {\n // we can use 'Escape button\" when this not a blocking modal, induced by closeButton value.\n if (this.closeButton && event.key === 'Escape') {\n this.hide = true;\n }\n }\n\n /\n Handle last focusable element\n * @param event - keyboard event\n /\n private handleLastFocusableElement = (event): void => {\n if (event.key === 'Tab' && !event.shiftKey) {\n event.preventDefault();\n this.modalFocusableElements[0].focus();\n }\n };\n\n /\n Handle first focusable element\n * @param event - keyboard event\n /\n private handleFirstFocusableElement = (event): void => {\n if (event.key === 'Tab' && event.shiftKey) {\n event.preventDefault();\n this.getLastFocusableElement().focus();\n }\n };\n\n /\n Get last focusablmeElement\n * @returns last modal focusable element\n /\n private getLastFocusableElement = (): HTMLElement \| null => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);\n\n /\n Method to manage focus on modal focusable elements\n /\n private setFocus = (): void => {\n // Get all focusable elements\n const slottedFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n // If close button is enabled or at least one of the slotted element is focusable\n if (this.closeButton \|\| slottedFocusableElements.length > 0) {\n // Check if slotted focusable elements have shadowDom with focusable elements\n this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {\n acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) \|\| focusableElement : focusableElement);\n return acc;\n }, []);\n // When close button is enabled it's the first focusable element.\n if (this.closeButton && this.closeButtonElement !== undefined) {\n this.modalFocusableElements.unshift(this.closeButtonElement);\n }\n // Add event listener on last element\n this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);\n // Add event listener on first element (case shift + tab)\n this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);\n }\n };\n\n /***********\n Handlers \n **********/\n\n /\n * Handle close button\n /\n private handleClose = (): void => {\n this.hide = true;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Store body overflow\n this.bodyOverflow = document.body.style.overflow;\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n this.hasContent = this.element.querySelector('[slot=\"content\"]') !== null;\n this.titleId = `${this.identifier}-title`;\n this.validateModalTitle(this.modalTitle);\n this.validateHide(this.hide);\n this.validateDialogRole(this.dialogRole);\n }\n\n /\n Add observer on component to set focus when displayed\n /\n componentDidLoad(): void {\n new MutationObserver(mutationList => {\n // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation\n if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes((mutation.target as HTMLElement).ariaHidden))) {\n // Set focus on first element\n this.modalFocusableElements[0].focus();\n }\n }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div role={this.dialogRole} id={this.identifier} class={this.classCollection.join()} tabindex=\"-1\" aria-labelledby={this.titleId} aria-modal=\"true\" aria-hidden={this.hide}>\n <mg-card>\n <div class=\"mg-c-modal__dialog\">\n <header class=\"mg-c-modal__header\">\n {this.closeButton && (\n <span class=\"mg-c-modal__close-button\">\n <mg-button\n identifier={`${this.identifier}-close-button`}\n is-icon\n variant=\"flat\"\n label={this.messages.modal.closeButton}\n onClick={this.handleClose}\n ref={(el: HTMLMgButtonElement) => {\n if (el !== null) {\n // store closeButton Element\n this.closeButtonElement = el;\n // add close button element to modalFocusableElements when it is render\n this.modalFocusableElements.unshift(this.closeButtonElement);\n }\n }}\n >\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n </span>\n )}\n <h1 class=\"mg-c-modal__title\" id={this.titleId}>\n {this.modalTitle}\n </h1>\n </header>\n\n {this.hasContent && (\n <article class=\"mg-c-modal__content\">\n <slot name=\"content\"></slot>\n </article>\n )}\n\n {this.hasActions && (\n <footer class=\"mg-c-modal__footer\">\n <slot name=\"actions\"></slot>\n </footer>\n )}\n </div>\n </mg-card>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-pagination2.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { j as je } from './index.es.js';
+import { R as Re } from './index.es.js';
 import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$6 } from './mg-button2.js';
-import { d as defineCustomElement$5 } from './mg-icon2.js';
+import { d as defineCustomElement$7 } from './mg-button2.js';
+import { d as defineCustomElement$6 } from './mg-icon2.js';
+import { d as defineCustomElement$5 } from './mg-input2.js';
 import { d as defineCustomElement$4 } from './mg-input-select2.js';
 import { d as defineCustomElement$3 } from './mg-input-title2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip2.js';
@@ -71,7 +72,7 @@ const MgPagination = /*@__PURE__*/ proxyCustomElement(class MgPagination extends
         this.handleGoToPage = (action, disabled) => {
             !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
         };
-        this.identifier = je('mg-pagination');
+        this.identifier = Re('mg-pagination');
         this.label = undefined;
         this.hideNavigationLabels = undefined;
         this.hidePageCount = undefined;
@@ -114,10 +115,10 @@ const MgPagination = /*@__PURE__*/ proxyCustomElement(class MgPagination extends
      * @returns HTML Element
      */
     render() {
-        const navigationActionButton = (disabled, action) => (h("mg-button", { key: '117897c3594d7b6322e85c659020083a78710979', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
+        const navigationActionButton = (disabled, action) => (h("mg-button", { key: '762b566216021bdfdcbfea249c7a1dbfa409c831', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
             // eslint-disable-next-line react/jsx-no-bind
             onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
-        return (h(Host, { key: '83d52cfe35e330057417a26bdb7ae528255e3e5e', hidden: this.totalPages < 2 }, h("nav", { key: 'cdd2ab05092bfea927719b354c12629f90e44472', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { key: '501099379d9ca210abed5bb10726c56383b15c6f', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { key: 'e3ce99fb7aaf68322176c6135d70e90f910f6bdd', class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
+        return (h(Host, { key: '9bfc7cd582798b28f847f1be74bc966a10afaf01', hidden: this.totalPages < 2 }, h("nav", { key: 'e79017c814781d4452868bb2f50a71682c4da1f1', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { key: '5e9cdd8126ee7d00db9199d5b738d76f651c8585', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { key: '55d248aabdc782a0e3a06b28fd2df36aca4733b0', class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -140,7 +141,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-pagination", "mg-button", "mg-icon", "mg-input-select", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-pagination", "mg-button", "mg-icon", "mg-input", "mg-input-select", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-pagination":
             if (!customElements.get(tagName)) {
@@ -149,10 +150,15 @@ function defineCustomElement() {
             break;
         case "mg-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "mg-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/components/mg-pagination2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-pagination2.js","mappings":"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","names":["createID"],"sources":["src/components/molecules/mg-pagination/mg-pagination.conf.ts","../styles/dist/components/mg-pagination.css?tag=mg-pagination&encapsulation=shadow","src/components/molecules/mg-pagination/mg-pagination.tsx"],"sourcesContent":["export enum NavigationAction {\n NEXT = 'next',\n PREVIOUS = 'previous',\n}\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;flex-direction:row;align-items:center}.mg-c-pagination mg-input-select{margin-right:.5rem}.mg-c-pagination mg-button{display:flex}.mg-c-pagination mg-button:first-of-type{margin-right:1rem}.mg-c-pagination mg-button:last-of-type{margin-left:1rem}.mg-c-pagination.mg-c-pagination--hide-page-count mg-button{margin:0}/# sourceMappingURL=mg-pagination.css.map /\n","import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '@mgdis/stencil-helpers';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/*\n Range generator\n \n ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) \|\| 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) \|\| 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n \n range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n /\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x step);\n\n@Component({\n tag: 'mg-pagination',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css',\n shadow: true,\n})\nexport class MgPagination {\n /***********\n Internal \n *********/\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgPaginationElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n /\n @Prop() identifier: string = createID('mg-pagination');\n\n /\n Panignation label. Is a short description.\n * Customize default value can be usefull to improve accessibility\n /\n @Prop({ mutable: true }) label: string;\n\n /\n Hide navigation label\n /\n @Prop() hideNavigationLabels: boolean;\n\n /\n Hide select input\n /\n @Prop() hidePageCount: boolean;\n\n /\n Component total pages\n /\n @Prop() totalPages = 1;\n @Watch('totalPages')\n validateTotalPages(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n }\n }\n\n /\n Component current page\n /\n @Prop({ reflect: true, mutable: true }) currentPage = 1;\n @Watch('currentPage')\n validateCurrentPage(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n } else if (newValue > this.totalPages) {\n throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n }\n\n this.currentPageChange.emit(newValue);\n }\n\n /\n Emmited event when current page change\n /\n @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n /\n Change current page from target\n * @param target - target page\n /\n private goToPage = (target: number): void => {\n this.currentPage = target;\n };\n\n /**********\n Handlers \n *********/\n\n /\n * select handler\n * @param event - value change event\n /\n private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n const to = Number(event.target.value);\n this.goToPage(to > 0 ? to : 1);\n };\n\n /\n Go to 'previous/next' page button handler\n * @param action - navigation action\n * @param disabled - button disable state\n /\n private handleGoToPage = (action: string, disabled: boolean): void => {\n !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTotalPages(this.totalPages);\n this.validateCurrentPage(this.currentPage);\n // Set default label\n if (this.label === undefined \|\| this.label === '') {\n this.label = this.messages.pagination.label;\n }\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const navigationActionButton = (disabled: boolean, action: string) => (\n <mg-button\n identifier={`${this.identifier}-button-${action}`}\n label={this.messages.pagination[`${action}Page`]}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.handleGoToPage(action, disabled)}\n disabled={disabled}\n variant=\"flat\"\n isIcon={this.hideNavigationLabels}\n >\n {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n {!this.hideNavigationLabels && this.messages.general[action]}\n {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n </mg-button>\n );\n\n return (\n <Host hidden={this.totalPages < 2}>\n <nav role=\"navigation\" aria-label={this.label} id={this.identifier} class={{ 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount }}>\n {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n {!this.hidePageCount && (\n <mg-input-select\n identifier={`${this.identifier}-select`}\n items={range(1, this.totalPages).map(page => page.toString())}\n label={this.messages.pagination.selectPage}\n label-hide={true}\n on-value-change={this.handleSelect}\n value={this.currentPage.toString()}\n placeholder-hide\n ></mg-input-select>\n )}\n <span class=\"mg-u-visually-hidden\">\n {this.messages.pagination.page} {this.currentPage}\n </span>\n <span class={{ 'mg-u-visually-hidden': this.hidePageCount }}>\n / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n </span>\n {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-pagination2.js","mappings":"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","names":["createID"],"sources":["src/components/molecules/mg-pagination/mg-pagination.conf.ts","../styles/dist/components/mg-pagination.css?tag=mg-pagination&encapsulation=shadow","src/components/molecules/mg-pagination/mg-pagination.tsx"],"sourcesContent":["export enum NavigationAction {\n NEXT = 'next',\n PREVIOUS = 'previous',\n}\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;flex-direction:row;align-items:center}.mg-c-pagination mg-input-select{margin-right:.5rem}.mg-c-pagination mg-button{display:flex}.mg-c-pagination mg-button:first-of-type{margin-right:1rem}.mg-c-pagination mg-button:last-of-type{margin-left:1rem}.mg-c-pagination.mg-c-pagination--hide-page-count mg-button{margin:0}/# sourceMappingURL=mg-pagination.css.map /\n","import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '@mgdis/stencil-helpers';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/*\n Range generator\n \n ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) \|\| 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) \|\| 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n \n range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n /\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x step);\n\n@Component({\n tag: 'mg-pagination',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css',\n shadow: true,\n})\nexport class MgPagination {\n /***********\n Internal \n *********/\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgPaginationElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n /\n @Prop() identifier: string = createID('mg-pagination');\n\n /\n Panignation label. Is a short description.\n * Customize default value can be usefull to improve accessibility\n /\n @Prop({ mutable: true }) label: string;\n\n /\n Hide navigation label\n /\n @Prop() hideNavigationLabels?: boolean;\n\n /\n Hide select input\n /\n @Prop() hidePageCount?: boolean;\n\n /\n Component total pages\n /\n @Prop() totalPages = 1;\n @Watch('totalPages')\n validateTotalPages(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n }\n }\n\n /\n Component current page\n /\n @Prop({ reflect: true, mutable: true }) currentPage = 1;\n @Watch('currentPage')\n validateCurrentPage(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n } else if (newValue > this.totalPages) {\n throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n }\n\n this.currentPageChange.emit(newValue);\n }\n\n /\n Emmited event when current page change\n /\n @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n /\n Change current page from target\n * @param target - target page\n /\n private goToPage = (target: number): void => {\n this.currentPage = target;\n };\n\n /**********\n Handlers \n *********/\n\n /\n * select handler\n * @param event - value change event\n /\n private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n const to = Number(event.target.value);\n this.goToPage(to > 0 ? to : 1);\n };\n\n /\n Go to 'previous/next' page button handler\n * @param action - navigation action\n * @param disabled - button disable state\n /\n private handleGoToPage = (action: string, disabled: boolean): void => {\n !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTotalPages(this.totalPages);\n this.validateCurrentPage(this.currentPage);\n // Set default label\n if (this.label === undefined \|\| this.label === '') {\n this.label = this.messages.pagination.label;\n }\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const navigationActionButton = (disabled: boolean, action: string) => (\n <mg-button\n identifier={`${this.identifier}-button-${action}`}\n label={this.messages.pagination[`${action}Page`]}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.handleGoToPage(action, disabled)}\n disabled={disabled}\n variant=\"flat\"\n isIcon={this.hideNavigationLabels}\n >\n {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n {!this.hideNavigationLabels && this.messages.general[action]}\n {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n </mg-button>\n );\n\n return (\n <Host hidden={this.totalPages < 2}>\n <nav role=\"navigation\" aria-label={this.label} id={this.identifier} class={{ 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount }}>\n {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n {!this.hidePageCount && (\n <mg-input-select\n identifier={`${this.identifier}-select`}\n items={range(1, this.totalPages).map(page => page.toString())}\n label={this.messages.pagination.selectPage}\n label-hide={true}\n on-value-change={this.handleSelect}\n value={this.currentPage.toString()}\n placeholder-hide\n ></mg-input-select>\n )}\n <span class=\"mg-u-visually-hidden\">\n {this.messages.pagination.page} {this.currentPage}\n </span>\n <span class={{ 'mg-u-visually-hidden': this.hidePageCount }}>\n / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n </span>\n {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-panel.js CHANGED Viewed

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { j as je, F as Fe, H as He } from './index.es.js';
+import { R as Re, M as Me, B as Be } from './index.es.js';
 import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$9 } from './mg-button2.js';
-import { d as defineCustomElement$8 } from './mg-card2.js';
-import { d as defineCustomElement$7 } from './mg-character-left2.js';
-import { d as defineCustomElement$6 } from './mg-icon2.js';
+import { d as defineCustomElement$a } from './mg-button2.js';
+import { d as defineCustomElement$9 } from './mg-card2.js';
+import { d as defineCustomElement$8 } from './mg-character-left2.js';
+import { d as defineCustomElement$7 } from './mg-icon2.js';
+import { d as defineCustomElement$6 } from './mg-input2.js';
 import { d as defineCustomElement$5 } from './mg-input-text2.js';
 import { d as defineCustomElement$4 } from './mg-input-title2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
@@ -121,7 +122,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
             ];
             return this.titlePosition === 'right' ? children.reverse() : children;
         };
-        this.identifier = je('mg-panel');
+        this.identifier = Re('mg-panel');
         this.panelTitle = undefined;
         this.titlePattern = undefined;
         this.titlePatternErrorMessage = undefined;
@@ -130,12 +131,12 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         this.expanded = false;
         this.expandToggleDisplay = expandToggleDisplays[0];
         this.expandToggleDisabled = undefined;
-        this.classCollection = new Fe(['mg-c-panel']);
+        this.classCollection = new Me(['mg-c-panel']);
         this.isEditing = false;
         this.updatedPanelTitle = undefined;
     }
     validatePanelTitle(newValue) {
-        if (!He(newValue))
+        if (!Be(newValue))
             throw new Error('<mg-panel> prop "panelTitle" is required.');
         this.titleChange.emit(newValue);
     }
@@ -186,7 +187,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '75410a66bcf5910175605ee2e4c7a56efb2d5d21', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '208cdc102ba7874b90f2eecd91026b5ed0c609af' }, h("header", { key: '2beb22b8e9e8e985db5a169207b13e10ed63fa8e', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '06cf2f69238065eb7388c9dc4c836eb033336a31', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '0b64911842875cb212136ffde476136d925dde01' })))));
+        return (h("section", { key: '0f4e6da36c14880761294b950aef7273fb3b254e', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '3f604c637fb25eb7a236efb26d4c9da7c106cada' }, h("header", { key: '86b24eee8ab6a59789579ccee766e34ce1b60206', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '054a9aee122a1273aa431750daa15d2e5cfec316', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: 'b2daff9ba6ebe460c849f33e019bfd6583376451' })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -223,7 +224,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-panel", "mg-button", "mg-card", "mg-character-left", "mg-icon", "mg-input-text", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-panel", "mg-button", "mg-card", "mg-character-left", "mg-icon", "mg-input", "mg-input-text", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-panel":
             if (!customElements.get(tagName)) {
@@ -232,20 +233,25 @@ function defineCustomElement$1() {
             break;
         case "mg-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "mg-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "mg-character-left":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "mg-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

package/dist/components/mg-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-panel.js","mappings":"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","names":["MgPanel","createID","ClassList","isValidString"],"sources":["src/components/molecules/mg-panel/mg-panel.conf.ts","../styles/dist/components/mg-panel.css?tag=mg-panel&encapsulation=shadow","src/components/molecules/mg-panel/mg-panel.tsx"],"sourcesContent":["/*\n Available expand toggle display options\n /\nexport const expandToggleDisplays = ['text', 'icon'] as const;\n\n/\n Generated expand toggle display type from available expand toggle display options\n /\nexport type ExpandToggleDisplayType = (typeof expandToggleDisplays)[number];\n\n/\n Available title positions\n /\nexport const titlePositions = ['left', 'right'] as const;\n\n/\n Generated title positions type from available title positions\n /\nexport type TitlePositionType = (typeof titlePositions)[number];\n",":host{--mg-card-border: none;--mg-card-padding: 0;--mg-card-border-radius: var(--mg-panel-border-radius);--mg-card-background: hsl(var(--mg-panel-background));--mg-card-box-shadow: var(--mg-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 1rem 0 .3rem}.mg-c-panel__header.mg-c-panel__header--reverse{padding-right:.3rem;padding-left:1rem}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:.3rem 0}.mg-c-panel__header-content{min-height:var(--default-size);flex:1 auto;align-items:center;padding-left:.3rem}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:.3rem}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:.3rem}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--font-size: 1.4rem;--mg-button-font-weight: 600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-panel-content-padding)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:1rem}.mg-c-panel ::slotted(){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}/# sourceMappingURL=mg-panel.css.map /\n","import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n@Component({\n tag: 'mg-panel',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css',\n shadow: true,\n})\nexport class MgPanel {\n /***********\n Internal \n *********/\n\n // HTML selector\n private editInputElement: HTMLMgInputTextElement;\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgPanelElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n /\n @Prop() identifier: string = createID('mg-panel');\n\n /\n Panel title\n /\n @Prop({ mutable: true }) panelTitle!: string;\n @Watch('panelTitle')\n validatePanelTitle(newValue: MgPanel['panelTitle']): void {\n if (!isValidString(newValue)) throw new Error('<mg-panel> prop \"panelTitle\" is required.');\n this.titleChange.emit(newValue);\n }\n\n /\n Panel title pattern\n /\n @Prop() titlePattern: string;\n\n /\n Panel title pattern error message\n /\n @Prop() titlePatternErrorMessage: string;\n @Watch('titlePattern')\n @Watch('titlePatternErrorMessage')\n validateTitlePattern(newValue: string): void {\n if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n }\n\n /\n Define if panel title is editable\n /\n @Prop({ mutable: true }) titleEditable = false;\n\n /\n Define title position\n /\n @Prop() titlePosition: TitlePositionType = titlePositions[0];\n @Watch('titlePosition')\n validateTitlePosition(newValue: MgPanel['titlePosition']) {\n if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n }\n\n /\n Panel is opened\n /\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: MgPanel['expanded']): void {\n this.expandedChange.emit(newValue);\n }\n\n /\n Define expand toggle button display\n /\n @Prop() expandToggleDisplay: ExpandToggleDisplayType = expandToggleDisplays[0];\n @Watch('expandToggleDisplay')\n validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n if (!expandToggleDisplays.includes(newValue)) throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n }\n\n /\n Disable possibility to toggle expand\n /\n @Prop() expandToggleDisabled: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-panel']);\n\n /\n Title is in edition mode\n /\n @State() isEditing = false;\n\n /\n Cache for updated panel title before validation\n /\n @State() updatedPanelTitle: string;\n\n /\n Emmited event when title change\n /\n @Event({ eventName: 'title-change' }) titleChange: EventEmitter<HTMLMgPanelElement['panelTitle']>;\n\n /\n Emmited event when expanded change\n /\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgPanelElement['expanded']>;\n\n /**********\n Methods \n *********/\n\n /\n * Toggle is editing state\n /\n private toggleIsEditing = (): void => {\n this.isEditing = !this.isEditing;\n };\n\n /**********\n Handlers \n *********/\n\n /\n * Collapse button click handler\n /\n private handleCollapseButton = (): void => {\n if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n };\n\n /\n Edit button click handler\n /\n private handleEditButton = (): void => {\n this.toggleIsEditing();\n };\n\n /\n Update title handler\n * @param event - input value change event\n /\n private handleUpdateTitle = (event: CustomEvent<string>): void => {\n this.updatedPanelTitle = event.detail;\n };\n\n /\n Cancel edition button handler\n /\n private handleCancelEditButton = (): void => {\n this.updatedPanelTitle = undefined;\n this.toggleIsEditing();\n };\n\n /\n Validate edition button handler\n /\n private handleValidateEditButton = (): void => {\n if (!this.editInputElement.valid) return;\n if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n this.toggleIsEditing();\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTitlePattern(this.titlePattern);\n this.validateTitlePattern(this.titlePatternErrorMessage);\n this.validatePanelTitle(this.panelTitle);\n this.validateExpandToggleDisplay(this.expandToggleDisplay);\n this.validateTitlePosition(this.titlePosition);\n }\n\n /\n Edit DOM after render\n /\n componentDidRender(): void {\n // when we are editing we get focus on edition input\n if (this.isEditing) this.editInputElement.setFocus();\n }\n\n /***********\n Render \n **********/\n\n /\n * Render collapse button\n * @returns collpase button\n /\n private renderCollapseButton = (): HTMLMgButtonElement => (\n <mg-button\n onClick={this.handleCollapseButton}\n variant=\"flat\"\n identifier={`${this.identifier}-collapse-button`}\n aria-expanded={this.expanded.toString()}\n aria-controls={`${this.identifier}-content`}\n disabled={this.expandToggleDisabled}\n isIcon={this.expandToggleDisplay === 'icon'}\n label={this.panelTitle}\n >\n <span class=\"mg-c-panel__collapse-button-content\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n </span>\n </mg-button>\n );\n\n /\n Render edit button\n * @returns edit Button\n /\n private renderEditButton = (): HTMLMgButtonElement => (\n <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton} identifier={`${this.identifier}-edit-button`}>\n <mg-icon icon=\"pen\"></mg-icon>\n </mg-button>\n );\n\n /\n Render input button\n * @returns edit title input\n /\n private renderEditInput = (): HTMLMgInputTextElement => (\n <mg-input-text\n key=\"edition-input\"\n label={this.messages.panel.editLabel}\n label-hide\n value={this.panelTitle}\n onValue-change={this.handleUpdateTitle}\n displayCharacterLeft={false}\n pattern={this.titlePattern}\n pattern-error-message={this.titlePatternErrorMessage}\n identifier={`${this.identifier}-edition-input`}\n ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n >\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.cancel}\n is-icon\n variant=\"secondary\"\n onClick={this.handleCancelEditButton}\n identifier={`${this.identifier}-edition-button-cancel`}\n >\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.confirm}\n is-icon\n variant=\"secondary\"\n onClick={this.handleValidateEditButton}\n identifier={`${this.identifier}-edition-button-validate`}\n >\n <mg-icon icon=\"check\"></mg-icon>\n </mg-button>\n </mg-input-text>\n );\n\n /\n Render title\n * @returns title element\n /\n private renderTitle = (): HTMLElement[] => {\n const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n if (this.titleEditable) {\n if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n else elementsToRender.push(this.renderEditInput());\n }\n\n return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n };\n\n /\n Render header children\n * @returns header child\n /\n private renderHeaderChildren = (): HTMLElement[] => {\n const children = [\n <div\n class={{ 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }}\n key={this.panelTitle}\n >\n {this.renderTitle()}\n </div>,\n <div class=\"mg-c-panel__header-content\" key=\"slot-header\">\n <slot name=\"header-right\"></slot>\n </div>,\n ];\n return this.titlePosition === 'right' ? children.reverse() : children;\n };\n\n /\n Render component\n * @returns rendered component\n */\n render(): HTMLElement {\n const headerId = `${this.identifier}-header`;\n return (\n <section class={this.classCollection.join()} id={this.identifier}>\n <mg-card>\n <header class={{ 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n {this.renderHeaderChildren()}\n </header>\n <article class=\"mg-c-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n <slot></slot>\n </article>\n </mg-card>\n </section>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-panel.js","mappings":"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","names":["MgPanel","createID","ClassList","isValidString"],"sources":["src/components/molecules/mg-panel/mg-panel.conf.ts","../styles/dist/components/mg-panel.css?tag=mg-panel&encapsulation=shadow","src/components/molecules/mg-panel/mg-panel.tsx"],"sourcesContent":["/*\n Available expand toggle display options\n /\nexport const expandToggleDisplays = ['text', 'icon'] as const;\n\n/\n Generated expand toggle display type from available expand toggle display options\n /\nexport type ExpandToggleDisplayType = (typeof expandToggleDisplays)[number];\n\n/\n Available title positions\n /\nexport const titlePositions = ['left', 'right'] as const;\n\n/\n Generated title positions type from available title positions\n /\nexport type TitlePositionType = (typeof titlePositions)[number];\n",":host{--mg-card-border: none;--mg-card-padding: 0;--mg-card-border-radius: var(--mg-panel-border-radius);--mg-card-background: hsl(var(--mg-panel-background));--mg-card-box-shadow: var(--mg-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 1rem 0 .3rem}.mg-c-panel__header.mg-c-panel__header--reverse{padding-right:.3rem;padding-left:1rem}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:.3rem 0}.mg-c-panel__header-content{min-height:var(--default-size);flex:1 auto;align-items:center;padding-left:.3rem}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:.3rem}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:.3rem}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--font-size: 1.4rem;--mg-button-font-weight: 600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-panel-content-padding)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:1rem}.mg-c-panel ::slotted(){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}/# sourceMappingURL=mg-panel.css.map /\n","import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n@Component({\n tag: 'mg-panel',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css',\n shadow: true,\n})\nexport class MgPanel {\n /***********\n Internal \n *********/\n\n // HTML selector\n private editInputElement: HTMLMgInputTextElement;\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgPanelElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n /\n @Prop() identifier: string = createID('mg-panel');\n\n /\n Panel title\n /\n @Prop({ mutable: true }) panelTitle!: string;\n @Watch('panelTitle')\n validatePanelTitle(newValue: MgPanel['panelTitle']): void {\n if (!isValidString(newValue)) throw new Error('<mg-panel> prop \"panelTitle\" is required.');\n this.titleChange.emit(newValue);\n }\n\n /\n Panel title pattern\n /\n @Prop() titlePattern?: string;\n\n /\n Panel title pattern error message\n /\n @Prop() titlePatternErrorMessage?: string;\n @Watch('titlePattern')\n @Watch('titlePatternErrorMessage')\n validateTitlePattern(newValue: string): void {\n if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n }\n\n /\n Define if panel title is editable\n /\n @Prop({ mutable: true }) titleEditable = false;\n\n /\n Define title position\n /\n @Prop() titlePosition: TitlePositionType = titlePositions[0];\n @Watch('titlePosition')\n validateTitlePosition(newValue: MgPanel['titlePosition']) {\n if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n }\n\n /\n Panel is opened\n /\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: MgPanel['expanded']): void {\n this.expandedChange.emit(newValue);\n }\n\n /\n Define expand toggle button display\n /\n @Prop() expandToggleDisplay: ExpandToggleDisplayType = expandToggleDisplays[0];\n @Watch('expandToggleDisplay')\n validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n if (!expandToggleDisplays.includes(newValue)) throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n }\n\n /\n Disable possibility to toggle expand\n /\n @Prop() expandToggleDisabled?: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-panel']);\n\n /\n Title is in edition mode\n /\n @State() isEditing = false;\n\n /\n Cache for updated panel title before validation\n /\n @State() updatedPanelTitle: string;\n\n /\n Emmited event when title change\n /\n @Event({ eventName: 'title-change' }) titleChange: EventEmitter<HTMLMgPanelElement['panelTitle']>;\n\n /\n Emmited event when expanded change\n /\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgPanelElement['expanded']>;\n\n /**********\n Methods \n *********/\n\n /\n * Toggle is editing state\n /\n private toggleIsEditing = (): void => {\n this.isEditing = !this.isEditing;\n };\n\n /**********\n Handlers \n *********/\n\n /\n * Collapse button click handler\n /\n private handleCollapseButton = (): void => {\n if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n };\n\n /\n Edit button click handler\n /\n private handleEditButton = (): void => {\n this.toggleIsEditing();\n };\n\n /\n Update title handler\n * @param event - input value change event\n /\n private handleUpdateTitle = (event: CustomEvent<string>): void => {\n this.updatedPanelTitle = event.detail;\n };\n\n /\n Cancel edition button handler\n /\n private handleCancelEditButton = (): void => {\n this.updatedPanelTitle = undefined;\n this.toggleIsEditing();\n };\n\n /\n Validate edition button handler\n /\n private handleValidateEditButton = (): void => {\n if (!this.editInputElement.valid) return;\n if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n this.toggleIsEditing();\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTitlePattern(this.titlePattern);\n this.validateTitlePattern(this.titlePatternErrorMessage);\n this.validatePanelTitle(this.panelTitle);\n this.validateExpandToggleDisplay(this.expandToggleDisplay);\n this.validateTitlePosition(this.titlePosition);\n }\n\n /\n Edit DOM after render\n /\n componentDidRender(): void {\n // when we are editing we get focus on edition input\n if (this.isEditing) this.editInputElement.setFocus();\n }\n\n /***********\n Render \n **********/\n\n /\n * Render collapse button\n * @returns collpase button\n /\n private renderCollapseButton = (): HTMLMgButtonElement => (\n <mg-button\n onClick={this.handleCollapseButton}\n variant=\"flat\"\n identifier={`${this.identifier}-collapse-button`}\n aria-expanded={this.expanded.toString()}\n aria-controls={`${this.identifier}-content`}\n disabled={this.expandToggleDisabled}\n isIcon={this.expandToggleDisplay === 'icon'}\n label={this.panelTitle}\n >\n <span class=\"mg-c-panel__collapse-button-content\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n </span>\n </mg-button>\n );\n\n /\n Render edit button\n * @returns edit Button\n /\n private renderEditButton = (): HTMLMgButtonElement => (\n <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton} identifier={`${this.identifier}-edit-button`}>\n <mg-icon icon=\"pen\"></mg-icon>\n </mg-button>\n );\n\n /\n Render input button\n * @returns edit title input\n /\n private renderEditInput = (): HTMLMgInputTextElement => (\n <mg-input-text\n key=\"edition-input\"\n label={this.messages.panel.editLabel}\n label-hide\n value={this.panelTitle}\n onValue-change={this.handleUpdateTitle}\n displayCharacterLeft={false}\n pattern={this.titlePattern}\n pattern-error-message={this.titlePatternErrorMessage}\n identifier={`${this.identifier}-edition-input`}\n ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n >\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.cancel}\n is-icon\n variant=\"secondary\"\n onClick={this.handleCancelEditButton}\n identifier={`${this.identifier}-edition-button-cancel`}\n >\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.confirm}\n is-icon\n variant=\"secondary\"\n onClick={this.handleValidateEditButton}\n identifier={`${this.identifier}-edition-button-validate`}\n >\n <mg-icon icon=\"check\"></mg-icon>\n </mg-button>\n </mg-input-text>\n );\n\n /\n Render title\n * @returns title element\n /\n private renderTitle = (): HTMLElement[] => {\n const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n if (this.titleEditable) {\n if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n else elementsToRender.push(this.renderEditInput());\n }\n\n return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n };\n\n /\n Render header children\n * @returns header child\n /\n private renderHeaderChildren = (): HTMLElement[] => {\n const children = [\n <div\n class={{ 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }}\n key={this.panelTitle}\n >\n {this.renderTitle()}\n </div>,\n <div class=\"mg-c-panel__header-content\" key=\"slot-header\">\n <slot name=\"header-right\"></slot>\n </div>,\n ];\n return this.titlePosition === 'right' ? children.reverse() : children;\n };\n\n /\n Render component\n * @returns rendered component\n */\n render(): HTMLElement {\n const headerId = `${this.identifier}-header`;\n return (\n <section class={this.classCollection.join()} id={this.identifier}>\n <mg-card>\n <header class={{ 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n {this.renderHeaderChildren()}\n </header>\n <article class=\"mg-c-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n <slot></slot>\n </article>\n </mg-card>\n </section>\n );\n }\n}\n"],"version":3}