npm - @mgdis/mg-components - Versions diffs - 5.18.0 → 5.19.1 - Mend

@mgdis/mg-components 5.18.0 → 5.19.1

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

Files changed (358) hide show

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

	@@ -1 +1 @@
1	- {"file":"mg-menu2.js","mappings":"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","names":[],"sources":["src/components/molecules/menu/mg-menu/mg-menu.scss?tag=mg-menu&encapsulation=shadow","src/components/molecules/menu/mg-menu/mg-menu.tsx"],"sourcesContent":["@import '../../../../styles/a11y.scss';\n\n:host {\n display: flex;\n background-color: hsl(var(--mg-menu-background-color-hsl, var(--color-light)));\n}\n\n:host([direction='vertical']) {\n flex-direction: column;\n height: 100%;\n overflow-y: auto;\n}\n","import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n@Component({\n tag: 'mg-menu',\n styleUrl: 'mg-menu.scss',\n shadow: true,\n})\nexport class MgMenu {\n /***********\n Internal \n *********/\n\n private readonly name = 'mg-menu';\n private menuItems: HTMLMgMenuItemElement[] = [];\n private focusedMenuItem = 0;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMenuElement;\n\n /\n Menu label. Include short menu description.\n * Required for accessibility\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgMenu['label']): void {\n if (newValue === undefined) {\n throw new Error(`<${this.name}> prop \"label\" is required.`);\n }\n }\n\n /\n Component display direction.\n /\n @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n @Watch('direction')\n validateDirection(newValue: MgMenu['direction']): void {\n if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n }\n }\n\n /\n Customize \"mg-item-more\" element\n * Used with direction: 'vertical' to manage overflow\n /\n @Prop() itemmore: ItemMoreType;\n @Watch('itemmore')\n validateItemMore(newValue: MgMenu['itemmore']): void {\n if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n }\n }\n\n /\n Define mg-menu size\n /\n @Prop() size: MenuSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgMenu['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n }\n }\n\n /\n is this menu a child menu. Used for conditional render.\n /\n @State() isChildMenu: boolean;\n\n /***********\n Methods \n **********/\n\n /\n * Close matching menu-item\n * @param item - menu-item to close\n * @param condition - addionnal condition\n /\n private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n if (!this.isChildMenu && condition) {\n item.expanded = false;\n }\n };\n\n /\n get mg-item-more element\n * @returns mg-item-more element\n /\n private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n /\n get mg-item-more child mg-menu-item element\n * @returns mg-menu-item element\n /\n private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n /\n Set item listend\n * @param item - mg-menu-item element\n * @param index - number\n /\n private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n ['click', 'focus'].forEach(trigger => {\n (item.shadowRoot.querySelector('button') \|\| item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {\n this.focusedMenuItem = index;\n // reset expanded on previous active menu item\n (Boolean(this.getItemMoreMenuItem()) ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n this.closeMenuItem(item, index !== this.focusedMenuItem);\n });\n });\n });\n };\n\n /\n Store menu-items on component init and add listeners\n /\n private initMenuItemsListeners = (): void => {\n // add listeners on menu item and edit index\n this.menuItems.forEach((item, index) => {\n this.setItemListener(item, index);\n });\n };\n\n /\n Handle item-loaded event on mg-item-more element\n /\n private handleItemLoaded = (): void => {\n this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n };\n\n /\n render mg-item-more\n /\n private renderMgItemMore = (): void => {\n // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n const item = 'mg-item-more';\n const mgItemMore = document.createElement(item);\n Object.assign(mgItemMore, this.itemmore);\n mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n this.element.appendChild(mgItemMore);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.validateDirection(this.direction);\n this.validateLabel(this.label);\n this.validateItemMore(this.itemmore);\n this.validateSize(this.size);\n }\n\n /\n Check if component slots configuration\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n // store all menu-items\n this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n // add mg-item-more to manage OverflowBehavior\n if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n // use mutation observer to improve reactivity\n new MutationObserver(entries => {\n const mgItemMore = this.getItemMore();\n // prevent infinit loop by exclude mg-item-more deletion entry\n if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n else if (mgItemMore !== null) {\n // render a new mg-item-more\n mgItemMore.remove();\n mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n this.renderMgItemMore();\n }\n }).observe(this.element, { childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /\n Add listeners to items\n /\n componentDidRender(): void {\n this.initMenuItemsListeners();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"list\" aria-label={this.label}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-menu2.js","mappings":"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","names":[],"sources":["../styles/dist/components/mg-menu.css?tag=mg-menu&encapsulation=shadow","src/components/molecules/menu/mg-menu/mg-menu.tsx"],"sourcesContent":[".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}/# sourceMappingURL=mg-menu.css.map /\n","import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n@Component({\n tag: 'mg-menu',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n shadow: true,\n})\nexport class MgMenu {\n /***********\n Internal \n *********/\n\n private readonly name = 'mg-menu';\n private menuItems: HTMLMgMenuItemElement[] = [];\n private focusedMenuItem = 0;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMenuElement;\n\n /\n Menu label. Include short menu description.\n * Required for accessibility\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgMenu['label']): void {\n if (newValue === undefined) {\n throw new Error(`<${this.name}> prop \"label\" is required.`);\n }\n }\n\n /\n Component display direction.\n /\n @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n @Watch('direction')\n validateDirection(newValue: MgMenu['direction']): void {\n if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n }\n }\n\n /\n Customize \"mg-item-more\" element\n * Used with direction: 'vertical' to manage overflow\n /\n @Prop() itemmore: ItemMoreType;\n @Watch('itemmore')\n validateItemMore(newValue: MgMenu['itemmore']): void {\n if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n }\n }\n\n /\n Define mg-menu size\n /\n @Prop() size: MenuSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgMenu['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n }\n }\n\n /\n is this menu a child menu. Used for conditional render.\n /\n @State() isChildMenu: boolean;\n\n /***********\n Methods \n **********/\n\n /\n * Close matching menu-item\n * @param item - menu-item to close\n * @param condition - addionnal condition\n /\n private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n if (!this.isChildMenu && condition) {\n item.expanded = false;\n }\n };\n\n /\n get mg-item-more element\n * @returns mg-item-more element\n /\n private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n /\n get mg-item-more child mg-menu-item element\n * @returns mg-menu-item element\n /\n private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n /\n Set item listend\n * @param item - mg-menu-item element\n * @param index - number\n /\n private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n ['click', 'focus'].forEach(trigger => {\n (item.shadowRoot.querySelector('button') \|\| item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {\n this.focusedMenuItem = index;\n // reset expanded on previous active menu item\n (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n this.closeMenuItem(item, index !== this.focusedMenuItem);\n });\n });\n });\n };\n\n /\n Store menu-items on component init and add listeners\n /\n private initMenuItemsListeners = (): void => {\n // add listeners on menu item and edit index\n this.menuItems.forEach((item, index) => {\n this.setItemListener(item, index);\n });\n };\n\n /\n Handle item-loaded event on mg-item-more element\n /\n private handleItemLoaded = (): void => {\n this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n };\n\n /\n render mg-item-more\n /\n private renderMgItemMore = (): void => {\n // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n const item = 'mg-item-more';\n const mgItemMore = document.createElement(item);\n Object.assign(mgItemMore, this.itemmore);\n mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n this.element.appendChild(mgItemMore);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.validateDirection(this.direction);\n this.validateLabel(this.label);\n this.validateItemMore(this.itemmore);\n this.validateSize(this.size);\n }\n\n /\n Check if component slots configuration\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n // store all menu-items\n this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n // add mg-item-more to manage OverflowBehavior\n if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n // use mutation observer to improve reactivity\n new MutationObserver(entries => {\n const mgItemMore = this.getItemMore();\n // prevent infinit loop by exclude mg-item-more deletion entry\n if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n else if (mgItemMore !== null) {\n // render a new mg-item-more\n mgItemMore.remove();\n mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n this.renderMgItemMore();\n }\n }).observe(this.element, { childList: true, characterData: true, subtree: true });\n }, 0);\n }\n\n /\n Add listeners to items\n /\n componentDidRender(): void {\n this.initMenuItemsListeners();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"list\" aria-label={this.label}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -10,7 +10,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
  */
 const variants = ['info', 'warning', 'success', 'danger'];
-const mgMessageCss = ":host{--mg-card-padding:0;--mg-card-border-radius:var(--mg-message-border-radius);--mg-card-border:none;--mg-card-overflow:hidden}:host([hide]){display:none}.mg-message{display:inline-block;min-height:var(--default-size)}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{--mg-card-padding:0 3.4rem 0 0}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}.mg-message,mg-message{max-width:100%}";
+const mgMessageCss = ":host{--mg-card-padding:0;--mg-card-border-radius:var(--mg-message-border-radius);--mg-card-border:none;--mg-card-overflow:hidden}:host([hide]){display:none}.mg-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;align-content:stretch;justify-content:flex-end;padding:0 1rem 0 3.8rem}.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%}";
 const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTMLElement {
   constructor() {
@@ -23,7 +23,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
      * Internal *
      ************/
     // Classes
-    this.classHide = 'mg-message--hide';
+    this.classHide = 'mg-c-message--hide';
     // IDs
     this.closeButtonId = '';
     // Stored timer setted when hide action is run from setTimeOut
@@ -87,7 +87,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
     this.variant = variants[0];
     this.closeButton = false;
     this.hide = false;
-    this.classCollection = new ClassList(['mg-message']);
+    this.classCollection = new ClassList(['mg-c-message']);
     this.hasActions = false;
   }
   validateDelay(newValue) {
@@ -101,9 +101,9 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
     }
     else {
       if (oldValue !== undefined) {
-        this.classCollection.delete(`mg-message--${oldValue}`);
+        this.classCollection.delete(`mg-c-message--${oldValue}`);
       }
-      this.classCollection.add(`mg-message--${newValue}`);
+      this.classCollection.add(`mg-c-message--${newValue}`);
     }
   }
   validateCloseButton(newValue) {
@@ -152,7 +152,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
     this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
     this.validateCloseButton(this.closeButton);
     if (this.closeButton) {
-      this.classCollection.add('mg-message--close-button');
+      this.classCollection.add('mg-c-message--close-button');
       this.closeButtonId = `${this.identifier}-close-button`;
     }
     this.validateDelay(this.delay);
@@ -163,7 +163,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
    * @returns HTML Element
    */
   render() {
-    return (h("div", { id: this.identifier, class: this.classCollection.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-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", { id: this.identifier, class: this.classCollection.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, h("span", { class: "mg-c-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-c-message__content" }, h("span", { class: "mg-c-message__content-slot" }, h("slot", null)), 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"],"sources":["src/components/molecules/mg-message/mg-message.conf.ts","src/components/molecules/mg-message/mg-message.scss?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","@import '../../../styles/mixins/reset-mg-card-slotted-variables.scss';\n\n@mixin message-variants($variants...) {\n @each $variant in $variants {\n &.mg-message--#{$variant} .mg-message__icon {\n color: hsl(var(--color-#{$variant}));\n }\n }\n}\n\n:host {\n // Set mg-card variables\n --mg-card-padding: 0;\n --mg-card-border-radius: var(--mg-message-border-radius);\n --mg-card-border: none;\n --mg-card-overflow: hidden;\n}\n\n:host([hide]) {\n display: none;\n}\n\n.mg-message {\n // Display\n display: inline-block;\n min-height: var(--default-size);\n\n @include message-variants('info', 'warning', 'success', 'danger');\n\n &.mg-message--close-button {\n --mg-card-padding: 0 3.4rem 0 0;\n }\n\n &.mg-message--hide {\n display: none;\n }\n\n ::slotted() {\n // Removing default marging to slotted element\n margin: 0;\n padding: 0;\n }\n\n &__icon {\n // Display\n position: absolute;\n top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);\n left: 1.3rem;\n // Font\n line-height: 1;\n }\n\n &__content {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n align-content: stretch;\n padding: 0 1rem 0 3.8rem;\n }\n\n &__content-slot {\n flex-grow: 1;\n margin: 0.84rem 0;\n }\n\n &__content-separator {\n display: inline-block;\n width: 4.5rem;\n height: 0;\n }\n\n &__content-actions-slot {\n padding: 1rem 0;\n text-align: right;\n }\n\n &__close-button {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @include reset-slot-card-variables();\n}\n\n.mg-message,\nmg-message {\n max-width: 100%;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '../../../utils/components.utils';\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: 'mg-message.scss',\n shadow: true,\n})\nexport class MgMessage {\n /***********\n Internal \n *********/\n\n // Classes\n private readonly classHide = 'mg-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-message--${oldValue}`);\n }\n this.classCollection.add(`mg-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 Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-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<string>;\n\n /\n Emited event when message is hidden\n /\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<string>;\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-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 return (\n <div id={this.identifier} class={this.classCollection.join()} role={this.variant === 'info' ? 'status' : 'alert'}>\n <mg-card variant={this.variant} variant-style=\"bar-left\">\n <span class=\"mg-message__icon\">\n <mg-icon icon={this.getIcon()}></mg-icon>\n </span>\n <div class=\"mg-message__content\">\n <span class=\"mg-message__content-slot\">\n <slot></slot>\n </span>\n {this.hasActions && <span class=\"mg-message__content-separator\"></span>}\n {this.hasActions && (\n <span class=\"mg-message__content-actions-slot\">\n <slot name=\"actions\"></slot>\n </span>\n )}\n </div>\n {this.closeButton && (\n <span class=\"mg-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"],"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;align-content:stretch;justify-content:flex-end;padding:0 1rem 0 3.8rem}.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 '../../../utils/components.utils';\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 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<string>;\n\n /\n Emited event when message is hidden\n /\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<string>;\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 return (\n <div id={this.identifier} class={this.classCollection.join()} role={this.variant === 'info' ? 'status' : 'alert'}>\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 { f as focusableElements, c as createID, C as ClassList } from './components.utils.js';
+import { f as focusableElements, c as createID, C as ClassList, i as isValidString } from './components.utils.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-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;padding:2rem 0;background-color:hsl(var(--color-light), 0.85)}.mg-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-modal__dialog{display:flex;position:relative;flex-direction:column;align-self:center;row-gap:3rem;height:fit-content;max-height:100%}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;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)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}.mg-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{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 MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLElement {
   constructor() {
@@ -25,7 +25,7 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
     // Modal focusable elements
     this.modalFocusableElements = [];
     // Classes
-    this.classHide = 'mg-modal--hide';
+    this.classHide = 'mg-c-modal--hide';
     // IDs
     this.titleId = '';
     /**
@@ -91,14 +91,14 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
     this.hide = undefined;
     this.hasActions = false;
     this.hasContent = false;
-    this.classCollection = new ClassList(['mg-modal']);
+    this.classCollection = new ClassList(['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 (typeof newValue !== 'string' || newValue.trim() === '') {
+    if (!isValidString(newValue)) {
       throw new Error('<mg-modal> prop "modalTitle" is required.');
     }
   }
@@ -166,14 +166,14 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
    * @returns HTML Element
    */
   render() {
-    return (h("div", { 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", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
+    return (h("div", { 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", null, h("div", { class: "mg-c-modal__dialog" }, h("header", { 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", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
+      } }, h("mg-icon", { icon: "cross" })))), h("h1", { 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"],"sources":["src/components/molecules/mg-modal/mg-modal.conf.ts","src/components/molecules/mg-modal/mg-modal.scss?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","@import '../../../styles/mixins/reset-mg-card-slotted-variables.scss';\n\n:host {\n // Set mg-card variables\n --mg-card-border-radius: var(--mg-modal-border-radius);\n --mg-card-padding: 1.5rem 2.5rem;\n --mg-card-border: none;\n}\n\n.mg-modal {\n // Layout\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2000;\n padding: 2rem 0;\n // Appearance\n background-color: hsl(var(--color-light), 0.85);\n\n mg-card {\n display: flex;\n width: 60rem;\n max-width: 100%;\n max-height: 100%;\n }\n\n &__dialog {\n // Layout\n display: flex;\n position: relative;\n flex-direction: column;\n align-self: center;\n row-gap: 3rem;\n height: fit-content;\n max-height: 100%;\n }\n\n &__header {\n margin-bottom: 0.5rem;\n }\n\n &__title {\n // Layout\n margin: 0;\n // Text\n font-family: var(--font-family-heading);\n font-size: var(--mg-modal-title-font-size);\n font-weight: 600;\n }\n\n &__close-button {\n float: right;\n height: var(--mg-modal-title-font-size);\n margin-top: calc((var(--default-size) - (var(--mg-modal-title-font-size) var(--line-height))) / 2 * -1); //-6px;\n margin-right: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1); //-10px;\n }\n\n &__content {\n overflow-y: auto;\n &::slotted() {\n font-size: var(--mg-modal-content-font-size);\n }\n }\n\n &.mg-modal--hide {\n display: none;\n }\n\n @include reset-slot-card-variables();\n}\n","import { Component, h, Prop, State, Watch, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { createID, ClassList, focusableElements } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n@Component({\n tag: 'mg-modal',\n styleUrl: 'mg-modal.scss',\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-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 (typeof newValue !== 'string' \|\| newValue.trim() === '') {\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-modal']);\n\n /\n Emmited event when modal is diplayed\n /\n @Event({ eventName: 'component-show' }) componentShow: EventEmitter<string>;\n\n /\n Emmited event when modal is hidden\n /\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<string>;\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 allFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n // If at least one\n if (allFocusableElements.length > 0) {\n this.modalFocusableElements = allFocusableElements.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-modal__dialog\">\n <header class=\"mg-modal__header\">\n {this.closeButton && (\n <span class=\"mg-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-modal__title\" id={this.titleId}>\n {this.modalTitle}\n </h1>\n </header>\n\n {this.hasContent && (\n <article class=\"mg-modal__content\">\n <slot name=\"content\"></slot>\n </article>\n )}\n\n {this.hasActions && (\n <footer class=\"mg-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":"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","names":["MgModal"],"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 '../../../utils/components.utils';\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<string>;\n\n /\n Emmited event when modal is hidden\n /\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<string>;\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 allFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n // If at least one\n if (allFocusableElements.length > 0) {\n this.modalFocusableElements = allFocusableElements.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

@@ -14,7 +14,7 @@ var NavigationAction;
   NavigationAction["PREVIOUS"] = "previous";
 })(NavigationAction || (NavigationAction = {}));
-const mgPaginationCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-pagination{display:flex;align-items:center;flex-direction:row}.mg-pagination mg-input-select{margin-right:0.5rem}.mg-pagination mg-button{display:flex}.mg-pagination mg-button:first-of-type{margin-right:1rem}.mg-pagination mg-button:last-of-type{margin-left:1rem}.mg-pagination.mg-pagination--hide-page-count mg-button{margin:0}";
+const mgPaginationCss = ".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}";
 /**
  * Range generator
@@ -116,7 +116,7 @@ const MgPagination = /*@__PURE__*/ proxyCustomElement(class MgPagination extends
     const navigationActionButton = (disabled, action) => (h("mg-button", { 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, { hidden: this.totalPages < 2 }, h("nav", { "aria-label": this.label, id: this.identifier, class: { 'mg-pagination': true, 'mg-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), h("span", { class: { 'sr-only': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
+    return (h(Host, { hidden: this.totalPages < 2 }, h("nav", { 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", { class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { 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 {

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

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

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createID, C as ClassList } from './components.utils.js';
+import { c as createID, C as ClassList, i as isValidString } from './components.utils.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';
@@ -19,7 +19,7 @@ const expandToggleDisplays = ['text', 'icon'];
  */
 const titlePositions = ['left', 'right'];
-const mgPanelCss = ":host{--mg-card-border:none;--mg-card-padding:0;--mg-card-border-radius:var(--mg-panel-border-radius);--mg-card-background:hsl(var(--mg-panel-background));--mg-card-box-shadow:var(--mg-panel-box-shadow)}.mg-panel__header{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 1rem 0 0.3rem;align-items:flex-start}.mg-panel__header.mg-panel__header--reverse{padding-right:0.3rem;padding-left:1rem}.mg-panel__header-title,.mg-panel__header-content{display:flex;margin:0.3rem 0}.mg-panel__header-content{padding-left:0.3rem;flex:1 auto;min-height:var(--default-size);align-items:center}.mg-panel__header-title mg-input-text{flex-grow:1;margin-left:0.3rem}.mg-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:0.3rem}.mg-panel__header-title.mg-panel__header-title--full{flex:1 1 auto}.mg-panel__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-panel__collapse-button-icon.mg-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-panel__content{padding:var(--mg-panel-content-padding)}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}.mg-panel ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}";
+const mgPanelCss = ":host{--mg-card-border:none;--mg-card-padding:0;--mg-card-border-radius:var(--mg-panel-border-radius);--mg-card-background:hsl(var(--mg-panel-background));--mg-card-box-shadow:var(--mg-panel-box-shadow)}.mg-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}";
 const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLElement {
   constructor() {
@@ -84,7 +84,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
      * Render collapse button
      * @returns collpase button
      */
-    this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-panel__collapse-button-icon': true, 'mg-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
+    this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
     /**
      * Render edit button
      * @returns edit Button
@@ -115,8 +115,8 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
      */
     this.renderHeaderChildren = () => {
       const children = [
-        h("div", { class: { 'mg-panel__header-title': true, 'mg-panel__header-title--full': this.isEditing, 'mg-panel__header-title--reverse': this.titlePosition === 'right' }, key: this.panelTitle }, this.renderTitle()),
-        h("div", { class: "mg-panel__header-content", key: "slot-header" }, h("slot", { name: "header-right" })),
+        h("div", { class: { 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }, key: this.panelTitle }, this.renderTitle()),
+        h("div", { class: "mg-c-panel__header-content", key: "slot-header" }, h("slot", { name: "header-right" })),
       ];
       return this.titlePosition === 'right' ? children.reverse() : children;
     };
@@ -129,12 +129,12 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
     this.expanded = false;
     this.expandToggleDisplay = expandToggleDisplays[0];
     this.expandToggleDisabled = undefined;
-    this.classCollection = new ClassList(['mg-panel']);
+    this.classCollection = new ClassList(['mg-c-panel']);
     this.isEditing = false;
     this.updatedPanelTitle = undefined;
   }
   validatePanelTitle(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '')
+    if (!isValidString(newValue))
       throw new Error('<mg-panel> prop "panelTitle" is required.');
     this.titleChange.emit(newValue);
   }
@@ -185,7 +185,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
    */
   render() {
     const headerId = `${this.identifier}-header`;
-    return (h("section", { class: this.classCollection.join(), id: this.identifier }, h("mg-card", null, h("header", { class: { 'mg-panel__header': true, 'mg-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", null)))));
+    return (h("section", { class: this.classCollection.join(), id: this.identifier }, h("mg-card", null, h("header", { class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", null)))));
   }
   get element() { return this; }
   static get watchers() { return {

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

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