@mgdis/mg-components 6.8.0 → 6.10.0

package/dist/components/mg-popover-content2.js

@@ -1,12 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { Z as Ze, K as Ke } from './index.es.js';
+import { Z as Zt, q as qt } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$3 } from './mg-button2.js';
 import { d as defineCustomElement$2 } from './mg-card2.js';
 import { d as defineCustomElement$1 } from './mg-icon2.js';
 
-const mgPopoverContentCss = ":host{position:relative;z-index:2000;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-placement^=left-start]),:host([data-placement^=left-end]),:host([data-placement^=right-start]),:host([data-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width:var(--mg-c-popover-max-width);--mg-c-card-min-width:var(--mg-c-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-8) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}:host([data-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-placement$=end][data-arrow-hide]),:host([data-placement^=left][data-arrow-hide]){padding-right:0}:host([data-placement$=start][data-arrow-hide]),:host([data-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-placement^=top]) ::slotted([slot=arrow]),:host([data-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-placement^=top]) ::slotted([slot=arrow])::before,:host([data-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=left]) ::slotted([slot=arrow]),:host([data-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-placement^=left]) ::slotted([slot=arrow])::before,:host([data-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=left-start]) ::slotted([slot=arrow]),:host([data-placement^=left-end]) ::slotted([slot=arrow]),:host([data-placement^=right-start]) ::slotted([slot=arrow]),:host([data-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius))}:host([data-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-card-border-radius)}";
-const MgPopoverContentStyle0 = mgPopoverContentCss;
+const mgPopoverContentCss = ":host{position:fixed;z-index:2000;top:0;left:0;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-placement^=left-start]),:host([data-placement^=left-end]),:host([data-placement^=right-start]),:host([data-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width:var(--mg-c-popover-max-width);--mg-c-card-min-width:var(--mg-c-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-8) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}:host([data-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-placement$=end][data-arrow-hide]),:host([data-placement^=left][data-arrow-hide]){padding-right:0}:host([data-placement$=start][data-arrow-hide]),:host([data-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-placement^=top]) ::slotted([slot=arrow]),:host([data-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-placement^=top]) ::slotted([slot=arrow])::before,:host([data-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=left]) ::slotted([slot=arrow]),:host([data-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-placement^=left]) ::slotted([slot=arrow])::before,:host([data-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=left-start]) ::slotted([slot=arrow]),:host([data-placement^=left-end]) ::slotted([slot=arrow]),:host([data-placement^=right-start]) ::slotted([slot=arrow]),:host([data-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius))}:host([data-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-card-border-radius)}";
 
 const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent extends HTMLElement {
     constructor() {
@@ -21,7 +20,7 @@ const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent
         /**
          * Component classes
          */
-        this.classCollection = new Ze(['mg-c-popover-content']);
+        this.classCollection = new Zt(['mg-c-popover-content']);
         /**
          * Handle action for close button
          */
@@ -45,7 +44,7 @@ const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent
     componentDidLoad() {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedTitleElement = this.element.querySelector('[slot="title"]');
-        if (slottedTitleElement && !Ke(slottedTitleElement, headingTags)) {
+        if (slottedTitleElement && !qt(slottedTitleElement, headingTags)) {
             throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);
         }
     }
@@ -54,10 +53,10 @@ const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '44aa95d34a4c4beeb5c6d1a59e7e7df999393e52' }, h("mg-card", { key: '483195ec364eaaf78df768993706129cb0ce268e', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { key: '4e2b4f7b563c591120ba208e74c501b0bee7497b', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '58a678df3947e4dbfb718c588ccdc97e611915b9', icon: "cross" }))), h("div", { key: 'e7a9debe373ea8947cde108732f635f39b5305a6', class: "mg-c-popover-content__title" }, h("slot", { key: '15fb949256a5f31e8776cdbd7465f46a73db4876', name: "title" })), h("slot", { key: 'ee914630e089763ec3a059cdd6b4c3eba0c2cfa0', name: "content" })), h("slot", { key: '9c25549d1543a77b3cc459caf8bd8df0b279a036', name: "arrow" })));
+        return (h(Host, { key: '8d2dd7d21518de744c18f0280b7b418f3a76acca' }, h("mg-card", { key: '8beab7c9fb692c1983515709a1ee888dc7e5157a', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { key: 'e636569be26b0c741e0b03e806787d91b47ded5c', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '3edc717cbe542494d892566c182883e20b1ca4cb', icon: "cross" }))), h("div", { key: 'd18525218972d92b6932984edb50844658e12970', class: "mg-c-popover-content__title" }, h("slot", { key: '2cceb41fd4ebb00b889e71cab211431e5894d04c', name: "title" })), h("slot", { key: 'a6615d9d7c85b32fb63d3d89db02fae2f8d5c1b2', name: "content" })), h("slot", { key: '0ff4bf72de19a3d56aafb64391cfc276d70e2f18', name: "arrow" })));
     }
     get element() { return this; }
-    static get style() { return MgPopoverContentStyle0; }
+    static get style() { return mgPopoverContentCss; }
 }, [1, "mg-popover-content", {
         "closeButton": [4, "close-button"],
         "classCollection": [32]
@@ -93,5 +92,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgPopoverContent as M, defineCustomElement as d };
+//# sourceMappingURL=mg-popover-content2.js.map
 
 //# sourceMappingURL=mg-popover-content2.js.map

package/dist/components/mg-popover-content2.js.map

@@ -1 +1 @@
-{"file":"mg-popover-content2.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,gtJAAgtJ,CAAC;AAC7uJ,+BAAe,mBAAmB;;MCWrB,gBAAgB;IAL7B;;;;;;;;QAyBU,gBAAW,GAAG,KAAK,CAAC;;;;QAKnB,oBAAe,GAAc,IAAIA,EAAS,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC;;;;QAUtE,sBAAiB,GAAG;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACzB,CAAC;KAgDH;;;;;;;IAvCC,iBAAiB;;QAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;KACpD;;;;IAKD,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,mBAAmB,IAAI,CAACC,EAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE;YACvE,MAAM,IAAI,KAAK,CAAC,iDAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAC7F;KACF;;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACxC,IAAI,CAAC,WAAW,KACf,mFAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACnG,gEAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACb,EACD,4DAAK,KAAK,EAAC,6BAA6B,IACtC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACpB,EACV,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ClassList","isTagName"],"sources":["../styles/dist/components/mg-popover-content.css?tag=mg-popover-content&encapsulation=shadow","src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"sourcesContent":[":host{position:relative;z-index:2000;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-placement^=left-start]),:host([data-placement^=left-end]),:host([data-placement^=right-start]),:host([data-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width: var(--mg-c-popover-max-width);--mg-c-card-min-width: var(--mg-c-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-8) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border: var(--mg-c-card-border-default);--mg-c-card-spacing: var(--mg-c-card-spacing-default);--mg-c-card-border-radius: var(--mg-c-card-border-radius-default);--mg-c-card-color-background: var(--mg-c-card-color-background-default);--mg-c-card-box-shadow: var(--mg-c-card-box-shadow-default);--mg-c-card-max-width: unset;--mg-c-card-min-width: unset}:host([data-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-placement$=end][data-arrow-hide]),:host([data-placement^=left][data-arrow-hide]){padding-right:0}:host([data-placement$=start][data-arrow-hide]),:host([data-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-placement^=top]) ::slotted([slot=arrow]),:host([data-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-placement^=top]) ::slotted([slot=arrow])::before,:host([data-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=left]) ::slotted([slot=arrow]),:host([data-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-placement^=left]) ::slotted([slot=arrow])::before,:host([data-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=left-start]) ::slotted([slot=arrow]),:host([data-placement^=left-end]) ::slotted([slot=arrow]),:host([data-placement^=right-start]) ::slotted([slot=arrow]),:host([data-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius))}:host([data-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-card-border-radius)}/*# sourceMappingURL=mg-popover-content.css.map */\n","import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-popover-content',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-popover-content.css',\n  shadow: true,\n})\nexport class MgPopoverContent {\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: HTMLMgPopoverContentElement;\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-popover-content']);\n\n  /**\n   * Emited event when close button is clicked\n   */\n  @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<void>;\n\n  /**\n   * Handle action for close button\n   */\n  private handleCloseButton = (): void => {\n    this.hideContent.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are valide\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Check if component slots are valide\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n    const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <mg-card class={this.classCollection.join()}>\n          {this.closeButton && (\n            <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          )}\n          <div class=\"mg-c-popover-content__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"content\"></slot>\n        </mg-card>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-popover-content2.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,0tJAA0tJ;;MCYzuJ,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;;;AAsBE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAE3B;;AAEG;QACM,IAAe,CAAA,eAAA,GAAc,IAAIC,EAAS,CAAC,CAAC,sBAAsB,CAAC,CAAC;AAO7E;;AAEG;AACK,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAW;AACrC,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,SAAC;AAgDF;AA9CC;;AAEe;AAEf;;AAEG;IACH,iBAAiB,GAAA;;QAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ;;AAGpD;;AAEG;IACH,gBAAgB,GAAA;AACd,QAAA,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;QAExD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC;QACxE,IAAI,mBAAmB,IAAI,CAACC,EAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE;AACvE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8CAAA,EAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAG,CAAA,CAAA,CAAC;;;AAI/F;;;AAGG;IACH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAA,EACxC,IAAI,CAAC,WAAW,KACf,mFAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EACnG,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,OAAO,EAAA,CAAW,CACtB,CACb,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAQ,CACpB,EACV,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAQ,CAAA,CACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","ClassList","isTagName"],"sources":["../styles/dist/components/mg-popover-content.css?tag=mg-popover-content&encapsulation=shadow","src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"sourcesContent":[":host{position:fixed;z-index:2000;top:0;left:0;display:none;padding:var(--mg-b-size-8);color:var(--mg-c-popover-color-text)}:host([data-show]){display:block}:host([data-placement^=left-start]),:host([data-placement^=left-end]),:host([data-placement^=right-start]),:host([data-placement^=right-end]){padding:0 var(--mg-b-size-8)}.mg-c-popover-content{--mg-c-card-max-width: var(--mg-c-popover-max-width);--mg-c-card-min-width: var(--mg-c-popover-min-width)}.mg-c-popover-content mg-button{margin-top:calc(-1*(var(--mg-b-size-min-height) - var(--mg-c-popover-title-font-size)*var(--mg-b-line-height))/2);margin-right:calc(-1*(var(--mg-b-size-min-height) - var(--mg-b-size-16))/2);margin-left:var(--mg-b-size-32);float:right}.mg-c-popover-content__title ::slotted([slot=title]){margin:0 0 var(--mg-b-size-8) !important;font-size:var(--mg-c-popover-title-font-size) !important;font-weight:600 !important}.mg-c-popover-content ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border: var(--mg-c-card-border-default);--mg-c-card-spacing: var(--mg-c-card-spacing-default);--mg-c-card-border-radius: var(--mg-c-card-border-radius-default);--mg-c-card-color-background: var(--mg-c-card-color-background-default);--mg-c-card-box-shadow: var(--mg-c-card-box-shadow-default);--mg-c-card-max-width: unset;--mg-c-card-min-width: unset}:host([data-placement^=top][data-arrow-hide]){padding-bottom:0}:host([data-placement^=bottom][data-arrow-hide]){padding-top:0}:host([data-placement$=end][data-arrow-hide]),:host([data-placement^=left][data-arrow-hide]){padding-right:0}:host([data-placement$=start][data-arrow-hide]),:host([data-placement^=right][data-arrow-hide]){padding-left:0}::slotted([slot=arrow]){position:absolute;width:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius) + 2*var(--mg-b-size-8));visibility:hidden}::slotted([slot=arrow])::before{position:absolute;content:\"\";visibility:visible}:host([data-arrow-hide]) ::slotted([slot=arrow]){display:none}:host([data-placement^=top]) ::slotted([slot=arrow]),:host([data-placement^=bottom]) ::slotted([slot=arrow]){height:var(--mg-b-size-8)}:host([data-placement^=top]) ::slotted([slot=arrow])::before,:host([data-placement^=bottom]) ::slotted([slot=arrow])::before{left:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-right:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-left:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-placement^=top]) ::slotted([slot=arrow]){bottom:var(--mg-b-size-border);filter:drop-shadow(0 0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=top]) ::slotted([slot=arrow])::before{border-top:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=bottom]) ::slotted([slot=arrow]){top:var(--mg-b-size-border);filter:drop-shadow(0 -0.5rem 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=bottom]) ::slotted([slot=arrow])::before{border-bottom:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=left]) ::slotted([slot=arrow]),:host([data-placement^=right]) ::slotted([slot=arrow]){width:var(--mg-b-size-8)}:host([data-placement^=left]) ::slotted([slot=arrow])::before,:host([data-placement^=right]) ::slotted([slot=arrow])::before{top:calc(var(--mg-c-card-border-radius) + var(--mg-b-size-8));border-top:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0);border-bottom:calc(var(--mg-b-size-24)/2) solid rgba(0,0,0,0)}:host([data-placement^=left]) ::slotted([slot=arrow]){right:var(--mg-b-size-border);filter:drop-shadow(0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=left]) ::slotted([slot=arrow])::before{border-left:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=right]) ::slotted([slot=arrow]){left:var(--mg-b-size-border);filter:drop-shadow(-0.5rem 0 0.25rem color-mix(in srgb, var(--mg-b-color-dark), transparent 85%))}:host([data-placement^=right]) ::slotted([slot=arrow])::before{border-right:var(--mg-b-size-8) solid var(--mg-c-popover-color-background)}:host([data-placement^=left-start]) ::slotted([slot=arrow]),:host([data-placement^=left-end]) ::slotted([slot=arrow]),:host([data-placement^=right-start]) ::slotted([slot=arrow]),:host([data-placement^=right-end]) ::slotted([slot=arrow]){height:calc(var(--mg-b-size-24) + 2*var(--mg-c-card-border-radius))}:host([data-placement^=left-start]) ::slotted([slot=arrow])::before,:host([data-placement^=left-end]) ::slotted([slot=arrow])::before,:host([data-placement^=right-start]) ::slotted([slot=arrow])::before,:host([data-placement^=right-end]) ::slotted([slot=arrow])::before{top:var(--mg-c-card-border-radius)}/*# sourceMappingURL=mg-popover-content.css.map */\n","import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-popover-content',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-popover-content.css',\n  shadow: true,\n})\nexport class MgPopoverContent {\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: HTMLMgPopoverContentElement;\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-popover-content']);\n\n  /**\n   * Emited event when close button is clicked\n   */\n  @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<void>;\n\n  /**\n   * Handle action for close button\n   */\n  private handleCloseButton = (): void => {\n    this.hideContent.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are valide\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Check if component slots are valide\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n    const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <mg-card class={this.classCollection.join()}>\n          {this.closeButton && (\n            <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          )}\n          <div class=\"mg-c-popover-content__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"content\"></slot>\n        </mg-card>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-popover.js

@@ -4,5 +4,6 @@ const MgPopover = MgPopover$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgPopover, defineCustomElement };
+//# sourceMappingURL=mg-popover.js.map
 
 //# sourceMappingURL=mg-popover.js.map

package/dist/components/mg-popover2.js

@@ -1,13 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { G as Ge, X as Xe, V as Ve, Y as Ye } from './index.es.js';
-import { i as isFloatingUIPlacement, s as sides, a as autoUpdate, b as alignments, c as computePosition, o as offset, f as flip, d as shift, l as limitShift, e as arrow } from './floating-ui.utils.js';
+import { P as Pt, U as Ut, G as Gt, B as Bt } from './index.es.js';
+import { i as isFloatingUIPlacement, s as sides, a as alignments, b as autoUpdate, c as computePosition, o as offset, f as flip, d as shift, e as arrow, g as getTransformation, n as numberToPx, l as limitShift } from './floating-ui.utils.js';
 import { d as defineCustomElement$4 } from './mg-button2.js';
 import { d as defineCustomElement$3 } from './mg-card2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 import { d as defineCustomElement$1 } from './mg-popover-content2.js';
 
 const mgPopoverCss = "/*!\n * @prop --mg-c-popover-color-background: Defines the background color of the popover. Default value: `--mg-b-color-light`.\n * @prop --mg-c-popover-color-text: Defines the font color of the popover. Default value: `--mg-b-color-font-dark`.\n * @prop --mg-c-popover-title-font-size: Defines the font size of the popover title. Default value: `--mg-b-font-size-h5`.\n * @prop --mg-c-popover-padding-vertical: Defines the vertical padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-padding-horizontal: Defines the horizontal padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-max-width: Defines the max-width of the popover. Default value: `--mg-b-size-floating-element-max-width`.\n * @prop --mg-c-popover-min-width: Defines the min-width of the popover. Default value: `unset`.\n */:host{--mg-c-card-spacing:var(--mg-c-popover-padding-vertical, var(--mg-b-size-16)) var(--mg-c-popover-padding-horizontal, var(--mg-b-size-16));--mg-c-card-border:none;--mg-c-card-border-radius:var(--mg-b-size-radius);--mg-c-card-color-background:var(--mg-c-popover-color-background);position:relative;display:contents}:host::slotted(*){display:inline-block}";
-const MgPopoverStyle0 = mgPopoverCss;
 
 const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLElement {
     constructor() {
@@ -20,7 +19,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
          * Sets an `id` attribute.
          * Needed by the input for accessibility `aria-decribedby`.
          */
-        this.identifier = Ge('mg-popover');
+        this.identifier = Pt('mg-popover');
         /**
          * Popover placement
          */
@@ -50,16 +49,6 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
                 this.display = false;
             }
         };
-        /**
-         * Update aria-expanded attribute on interactive element
-         * @param expanded - expanded state
-         */
-        this.updateAriaExpanded = (expanded) => {
-            const interactiveElement = this.element.querySelector(':not([slot])');
-            if (interactiveElement !== null) {
-                interactiveElement.setAttribute('aria-expanded', String(expanded));
-            }
-        };
         /**
          * Show popover
          */
@@ -67,12 +56,13 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
             // Make the popover visible
             this.mgPopover.dataset.show = '';
             // Update aria-expanded
-            this.updateAriaExpanded(true);
+            this.interactiveElement.setAttribute('aria-expanded', 'true');
             // hide when click outside
             // setTimeout is used to prevent event to trigger after creation
             setTimeout(() => {
                 this.manageClickOutsideListeners('addEventListener');
             });
+            this.updatePopover();
         };
         /**
          * Hide popover
@@ -81,7 +71,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
             // Hide the popover
             this.mgPopover.removeAttribute('data-show');
             // Update aria-expanded
-            this.updateAriaExpanded(false);
+            this.interactiveElement.setAttribute('aria-expanded', 'false');
             // Remove event listener
             this.manageClickOutsideListeners('removeEventListener');
         };
@@ -160,63 +150,50 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
             return Array.from(new Set([...currentSidePlacements, ...sides.filter(otherSide => otherSide !== side)])).filter(isFloatingUIPlacement);
         };
         /**
-         * Set up Floating UI positioning and arrow behavior
-         * @param interactiveElement - Element that triggers the popover
+         * Update popover position
+         * @returns autoUpdate function
          */
-        this.setFloatingUI = (interactiveElement) => {
-            this.floatingUICleanup = autoUpdate(interactiveElement, this.mgPopover, () => {
-                computePosition(interactiveElement, this.mgPopover, {
-                    placement: this.placement,
-                    strategy: 'fixed',
-                    middleware: [
-                        offset(0),
-                        flip({
-                            fallbackPlacements: this.getClosestPlacements(this.placement),
-                        }),
-                        shift({
-                            limiter: limitShift(),
-                        }),
-                        arrow({
-                            element: this.mgPopover.querySelector('[data-floating-arrow]'),
-                        }),
-                    ],
-                }).then(({ x, y, placement, middlewareData }) => {
-                    Object.assign(this.mgPopover.style, {
-                        position: 'fixed',
-                        top: '0',
-                        left: '0',
-                        transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`,
-                    });
-                    // Update arrow style
-                    const staticSide = {
-                        top: 'bottom',
-                        right: 'left',
-                        bottom: 'top',
-                        left: 'right',
-                    }[placement.split('-')[0]];
-                    const arrowElement = this.mgPopover.querySelector('[data-floating-arrow]');
-                    const { x: arrowX, y: arrowY } = middlewareData.arrow;
-                    // https://floating-ui.com/docs/arrow
-                    // Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.
-                    // Due to this, either x or y will be undefined, depending on the side of placement.
-                    // The above code uses `isNaN` to check for null and undefined simultaneously.
-                    // Don't remove `isNaN`, because either value can be falsy (0), causing a bug!
-                    const numberToPx = (number) => (!isNaN(number) ? `${number}px` : '');
-                    if (arrowElement !== null)
-                        Object.assign(arrowElement.style, {
-                            position: 'absolute',
-                            left: numberToPx(arrowX),
-                            top: numberToPx(arrowY),
-                            [staticSide]: '1px',
-                        });
-                    this.mgPopover.setAttribute('data-placement', placement);
-                });
+        this.updatePopover = () => autoUpdate(this.interactiveElement, this.mgPopover, async () => {
+            const { x, y, placement, middlewareData } = await computePosition(this.interactiveElement, this.mgPopover, {
+                placement: this.placement,
+                strategy: 'fixed',
+                middleware: [
+                    offset(0),
+                    flip({
+                        fallbackPlacements: this.getClosestPlacements(this.placement),
+                    }),
+                    shift({
+                        limiter: limitShift(),
+                    }),
+                    arrow({
+                        element: this.arrowElement,
+                    }),
+                ],
             });
-        };
+            Object.assign(this.mgPopover.style, {
+                transform: getTransformation(x, y),
+            });
+            // Arrow positioning
+            if (this.arrowElement !== null) {
+                const { x: arrowX, y: arrowY } = middlewareData.arrow;
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                }[placement.split('-')[0]];
+                Object.assign(this.arrowElement.style, {
+                    left: numberToPx(arrowX),
+                    top: numberToPx(arrowY),
+                    [staticSide]: '1px',
+                });
+                this.mgPopover.setAttribute('data-placement', placement);
+            }
+        });
     }
     validateIdentifier(newValue) {
-        if (!Xe(newValue)) {
-            throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${Ve(newValue)}.`);
+        if (!Ut(newValue)) {
+            throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${Gt(newValue)}.`);
         }
         // use renderPopoverContent to update popover-content id
         this.renderPopoverContent();
@@ -250,14 +227,14 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
      * update popper position after props change on component did update hook to benefit from render ended
      */
     componentDidUpdate() {
-        this.floatingUICleanup();
+        this.updatePopover();
     }
     /**
      * Check if component props are well configured on init
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = Ye(window);
+        this.windows = Bt(window);
         // render mg-popover-content slot
         this.renderPopoverContent();
         this.validateCloseButton(this.closeButton);
@@ -271,26 +248,21 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
     componentDidLoad() {
         // Get popover content
         this.mgPopover = this.element.querySelector(`#${this.identifier}`);
+        // Get arrow element
+        this.arrowElement = this.mgPopover.querySelector('[data-floating-arrow]');
         // Get interactive element (first element without slot attribute)
-        const interactiveElement = this.element.querySelector(':not([slot])');
+        this.interactiveElement = this.element.querySelector(':not([slot])');
         // Add aria attributes
-        interactiveElement.setAttribute('aria-controls', this.identifier);
-        interactiveElement.setAttribute('aria-expanded', `${this.display}`);
-        // Initial styles configuration
-        Object.assign(this.mgPopover.style, {
-            position: 'fixed',
-        });
-        // Create Floating UI instance
-        this.setFloatingUI(interactiveElement);
+        this.interactiveElement.setAttribute('aria-controls', this.identifier);
+        this.interactiveElement.setAttribute('aria-expanded', `${this.display}`);
         // Add resize observer
-        [interactiveElement, this.mgPopoverContent].forEach(element => {
+        [this.interactiveElement, this.mgPopoverContent].forEach(element => {
             new ResizeObserver(() => {
-                this.floatingUICleanup();
-                this.setFloatingUI(interactiveElement);
+                this.updatePopover();
             }).observe(element);
         });
         // Add events to toggle display
-        interactiveElement.addEventListener('click', () => {
+        this.interactiveElement.addEventListener('click', () => {
             if (!this.disabled)
                 this.display = !this.display;
         });
@@ -305,7 +277,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
             if (!this.disabled && e.code === 'Escape') {
                 this.display = false;
                 this.componentClose.emit();
-                interactiveElement.focus();
+                this.interactiveElement.focus();
             }
         });
         this.handleDisplay(this.display);
@@ -314,15 +286,16 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
      * Cleanup when component is disconnected
      */
     disconnectedCallback() {
+        var _a;
         // Cleanup Floating UI instance
-        this.floatingUICleanup();
+        (_a = this.updatePopover) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '085dde7110b2c100db1876d31f7db23e7c1fda5e' }, h("slot", { key: 'dcc6587d5a88784109f1421925992112ef77490d' }), h("slot", { key: '0d1831d325762c99a503a5e461b428a5cb7bdc2c', name: "content" })));
+        return (h(Host, { key: '26244db5e6a35b731b5220c06b77ad1f14378245' }, h("slot", { key: '92ca05ac9637cf9634d86b177393fd6d0e6c6796' }), h("slot", { key: 'bdc8f8a8b4f2c891e473cdac5a305c3f1ab615b0', name: "content" })));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -332,7 +305,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
         "closeButton": ["validateCloseButton"],
         "display": ["handleDisplay"]
     }; }
-    static get style() { return MgPopoverStyle0; }
+    static get style() { return mgPopoverCss; }
 }, [1, "mg-popover", {
         "identifier": [1],
         "placement": [1025],
@@ -383,5 +356,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgPopover as M, defineCustomElement as d };
+//# sourceMappingURL=mg-popover2.js.map
 
 //# sourceMappingURL=mg-popover2.js.map

package/dist/components/mg-popover2.js.map

@@ -1 +1 @@
-{"file":"mg-popover2.js","mappings":"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","names":["createID","isValideID","toString","getWindows"],"sources":["../styles/dist/components/mg-popover.css?tag=mg-popover&encapsulation=shadow","src/components/molecules/mg-popover/mg-popover.tsx"],"sourcesContent":["/*!\n * @prop --mg-c-popover-color-background: Defines the background color of the popover. Default value: `--mg-b-color-light`.\n * @prop --mg-c-popover-color-text: Defines the font color of the popover. Default value: `--mg-b-color-font-dark`.\n * @prop --mg-c-popover-title-font-size: Defines the font size of the popover title. Default value: `--mg-b-font-size-h5`.\n * @prop --mg-c-popover-padding-vertical: Defines the vertical padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-padding-horizontal: Defines the horizontal padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-max-width: Defines the max-width of the popover. Default value: `--mg-b-size-floating-element-max-width`.\n * @prop --mg-c-popover-min-width: Defines the min-width of the popover. Default value: `unset`.\n */:host{--mg-c-card-spacing: var(--mg-c-popover-padding-vertical, var(--mg-b-size-16)) var(--mg-c-popover-padding-horizontal, var(--mg-b-size-16));--mg-c-card-border: none;--mg-c-card-border-radius: var(--mg-b-size-radius);--mg-c-card-color-background: var(--mg-c-popover-color-background);position:relative;display:contents}:host::slotted(*){display:inline-block}/*# sourceMappingURL=mg-popover.css.map */\n","import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows, isValideID, toString } from '@mgdis/stencil-helpers';\nimport { computePosition, autoUpdate, flip, shift, limitShift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { isFloatingUIPlacement, type PopoverPlacementType, sides, alignments } from './mg-popover.conf';\n\n/**\n * @slot - Element that will display the popover\n * @slot content - popover content\n */\n@Component({\n  tag: 'mg-popover',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css',\n  shadow: true,\n})\nexport class MgPopover {\n  /************\n   * Internal *\n   ************/\n\n  private mgPopover: HTMLElement;\n  private mgPopoverContent: HTMLMgPopoverContentElement;\n  private windows: Window[];\n  private floatingUICleanup: ReturnType<typeof autoUpdate>;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string = createID('mg-popover');\n  @Watch('identifier')\n  validateIdentifier(newValue: MgPopover['identifier']): void {\n    if (!isValideID(newValue)) {\n      throw new Error(`<mg-popover> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n    // use renderPopoverContent to update popover-content id\n    this.renderPopoverContent();\n  }\n\n  /**\n   * Popover placement\n   */\n  @Prop({ mutable: true }) placement: PopoverPlacementType = 'bottom';\n  @Watch('placement')\n  watchPlacement(newValue): void {\n    if (!isFloatingUIPlacement(newValue)) this.placement = 'bottom';\n  }\n\n  /**\n   * Hide popover arrow\n   */\n  @Prop() arrowHide = false;\n  @Watch('arrowHide')\n  validateArrowHide(newValue: MgPopover['arrowHide']): void {\n    if (newValue) this.mgPopoverContent.dataset.arrowHide = '';\n    else delete this.mgPopoverContent.dataset.arrowHide;\n  }\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n  @Watch('closeButton')\n  validateCloseButton(newValue: MgPopover['closeButton']): void {\n    this.mgPopoverContent.closeButton = newValue;\n  }\n\n  /**\n   * Display popover\n   */\n  @Prop({ mutable: true }) display = false;\n  @Watch('display')\n  handleDisplay(newValue: boolean): void {\n    if (newValue) {\n      this.show();\n    } else {\n      this.hide();\n    }\n    this.displayChange.emit(newValue);\n  }\n\n  /**\n   * Disable popover\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Emited event when display value change\n   */\n  @Event({ eventName: 'display-change' }) displayChange: EventEmitter<HTMLMgPopoverElement['display']>;\n\n  /**\n   * Emmited event when popover is closed\n   */\n  @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\n\n  /**\n   * Check if clicked outside of component\n   * @param event - mouse event\n   */\n  private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n    if (!this.disabled && event.target.closest('mg-popover') !== this.element && event.target.closest(`[data-mg-popover-guard=\"${this.identifier}\"]`) === null) {\n      this.display = false;\n    }\n  };\n\n  /**\n   * Update aria-expanded attribute on interactive element\n   * @param expanded - expanded state\n   */\n  private updateAriaExpanded = (expanded: boolean): void => {\n    const interactiveElement = this.element.querySelector(':not([slot])');\n    if (interactiveElement !== null) {\n      interactiveElement.setAttribute('aria-expanded', String(expanded));\n    }\n  };\n\n  /**\n   * Show popover\n   */\n  private show = (): void => {\n    // Make the popover visible\n    this.mgPopover.dataset.show = '';\n    // Update aria-expanded\n    this.updateAriaExpanded(true);\n    // hide when click outside\n    // setTimeout is used to prevent event to trigger after creation\n    setTimeout(() => {\n      this.manageClickOutsideListeners('addEventListener');\n    });\n  };\n\n  /**\n   * Hide popover\n   */\n  private hide = (): void => {\n    // Hide the popover\n    this.mgPopover.removeAttribute('data-show');\n    // Update aria-expanded\n    this.updateAriaExpanded(false);\n    // Remove event listener\n    this.manageClickOutsideListeners('removeEventListener');\n  };\n\n  /**\n   * Manage all clickOustside listeners\n   * @param action - top process on elements listeners\n   */\n  private manageClickOutsideListeners = (action: 'removeEventListener' | 'addEventListener'): void => {\n    // clickOutside listeners need to bind windows\n    // AND as shawdowDom content is not include on windows listeners `event.target` we need to include popover guard content DOM if it's a web-component\n    // by doing this we can get and parse all needeed document DOM elements in clickOutside callback event.details.\n    // This result in the givern junction :\n    // Windows > document > [data-mg-popover-guard] + [data-mg-popover-guard] > shadowRoot =  Windows > document > [data-mg-popover-guard] > shadowRoot\n    const guardChildren = Array.from(document.querySelector(`[data-mg-popover-guard=\"${this.identifier}\"]`)?.shadowRoot?.children || new Set());\n    [...guardChildren, ...this.windows].forEach((element: Window | HTMLElement) => {\n      if (element !== null) {\n        element[action]('click', this.clickOutside, false);\n      }\n    });\n  };\n\n  /**\n   * Handle content hide event\n   */\n  private handleHideContent = (): void => {\n    this.display = false;\n    this.componentClose.emit();\n  };\n\n  /**\n   * Render popover content element\n   */\n  private renderPopoverContent = (): void => {\n    const mgPopoverContent = this.element.querySelector('mg-popover-content');\n    if (mgPopoverContent === null) {\n      this.mgPopoverContent = document.createElement('mg-popover-content');\n      this.mgPopoverContent.setAttribute('slot', 'content');\n      this.mgPopoverContent.setAttribute('id', this.identifier);\n      this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);\n\n      const arrow = document.createElement('div');\n      arrow.setAttribute('slot', 'arrow');\n      arrow.dataset.floatingArrow = '';\n      this.mgPopoverContent.appendChild(arrow);\n\n      // insert elements in DOM\n      ['[slot=\"title\"]', '[slot=\"content\"]:not(mg-popover-content)'].forEach(slotType => {\n        Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {\n          this.mgPopoverContent.appendChild(slot);\n        });\n      });\n      this.element.appendChild(this.mgPopoverContent);\n    } else {\n      mgPopoverContent.setAttribute('id', this.identifier);\n    }\n  };\n\n  /**\n   * Get alternative placements ordered by proximity to initial placement\n   * First check fallbackPlacement attribute, then generate alternatives:\n   * 1. Same side with different alignments (start, center, end)\n   * 2. Other sides in order\n   * @param placement - initial placement\n   * @returns array of alternative placements\n   */\n  private getClosestPlacements = (placement: PopoverPlacementType): Placement[] => {\n    // First check if fallbackPlacement attribute is defined\n    const fallbackPlacements = (this.element.dataset.fallbackPlacement || '')\n      .split(',')\n      .map(t => t.trim())\n      .filter(isFloatingUIPlacement);\n    if (fallbackPlacements.length > 0) return Array.from(new Set([...fallbackPlacements, ...sides]).values()).filter(isFloatingUIPlacement);\n\n    // Extract side from placement (e.g. \"top\" from \"top-start\")\n    const [side] = placement.split('-');\n\n    // Generate placements for same side with different alignments\n    const currentSidePlacements = alignments.map(alignment => (alignment !== null ? `${side}-${alignment}` : side));\n\n    // Return unique placements: current side variants first, then other sides\n    return Array.from(new Set([...currentSidePlacements, ...sides.filter(otherSide => otherSide !== side)])).filter(isFloatingUIPlacement);\n  };\n\n  /**\n   * Set up Floating UI positioning and arrow behavior\n   * @param interactiveElement - Element that triggers the popover\n   */\n  private setFloatingUI = (interactiveElement: HTMLElement): void => {\n    this.floatingUICleanup = autoUpdate(interactiveElement, this.mgPopover, () => {\n      computePosition(interactiveElement, this.mgPopover, {\n        placement: this.placement as Placement,\n        strategy: 'fixed',\n        middleware: [\n          offset(0),\n          flip({\n            fallbackPlacements: this.getClosestPlacements(this.placement),\n          }),\n          shift({\n            limiter: limitShift(),\n          }),\n          arrow({\n            element: this.mgPopover.querySelector('[data-floating-arrow]'),\n          }),\n        ],\n      }).then(({ x, y, placement, middlewareData }) => {\n        Object.assign(this.mgPopover.style, {\n          position: 'fixed',\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`,\n        });\n\n        // Update arrow style\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        const arrowElement: HTMLElement = this.mgPopover.querySelector('[data-floating-arrow]');\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\n        // https://floating-ui.com/docs/arrow\n        // Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.\n        // Due to this, either x or y will be undefined, depending on the side of placement.\n        // The above code uses `isNaN` to check for null and undefined simultaneously.\n        // Don't remove `isNaN`, because either value can be falsy (0), causing a bug!\n        const numberToPx = (number: number): string => (!isNaN(number) ? `${number}px` : '');\n\n        if (arrowElement !== null)\n          Object.assign(arrowElement.style, {\n            position: 'absolute',\n            left: numberToPx(arrowX),\n            top: numberToPx(arrowY),\n            [staticSide]: '1px',\n          });\n\n        this.mgPopover.setAttribute('data-placement', placement);\n      });\n    });\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * update popper position after props change on component did update hook to benefit from render ended\n   */\n  componentDidUpdate(): void {\n    this.floatingUICleanup();\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get windows to attach events\n    this.windows = getWindows(window);\n    // render mg-popover-content slot\n    this.renderPopoverContent();\n    this.validateCloseButton(this.closeButton);\n    this.validateIdentifier(this.identifier);\n    this.validateArrowHide(this.arrowHide);\n    this.watchPlacement(this.placement);\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentDidLoad(): void {\n    // Get popover content\n    this.mgPopover = this.element.querySelector(`#${this.identifier}`);\n\n    // Get interactive element (first element without slot attribute)\n    const interactiveElement: HTMLElement = this.element.querySelector(':not([slot])');\n\n    // Add aria attributes\n    interactiveElement.setAttribute('aria-controls', this.identifier);\n    interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n\n    // Initial styles configuration\n    Object.assign(this.mgPopover.style, {\n      position: 'fixed',\n    });\n\n    // Create Floating UI instance\n    this.setFloatingUI(interactiveElement);\n\n    // Add resize observer\n    [interactiveElement, this.mgPopoverContent].forEach(element => {\n      new ResizeObserver(() => {\n        this.floatingUICleanup();\n        this.setFloatingUI(interactiveElement);\n      }).observe(element);\n    });\n\n    // Add events to toggle display\n    interactiveElement.addEventListener('click', () => {\n      if (!this.disabled) this.display = !this.display;\n    });\n\n    this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }): void => {\n      const target = event.target.closest('[popovertargetaction]');\n      if (this.display === true && target !== null && target.getAttribute('popovertargetaction') === 'hide') {\n        this.display = false;\n      }\n    });\n\n    // Add events to hide popover\n    this.element.addEventListener('keydown', e => {\n      if (!this.disabled && e.code === 'Escape') {\n        this.display = false;\n        this.componentClose.emit();\n        interactiveElement.focus();\n      }\n    });\n\n    this.handleDisplay(this.display);\n  }\n\n  /**\n   * Cleanup when component is disconnected\n   */\n  disconnectedCallback(): void {\n    // Cleanup Floating UI instance\n    this.floatingUICleanup();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <slot></slot>\n        <slot name=\"content\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-popover2.js","mappings":"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","names":["__stencil_proxyCustomElement","createID","isValideID","toString","getWindows"],"sources":["../styles/dist/components/mg-popover.css?tag=mg-popover&encapsulation=shadow","src/components/molecules/mg-popover/mg-popover.tsx"],"sourcesContent":["/*!\n * @prop --mg-c-popover-color-background: Defines the background color of the popover. Default value: `--mg-b-color-light`.\n * @prop --mg-c-popover-color-text: Defines the font color of the popover. Default value: `--mg-b-color-font-dark`.\n * @prop --mg-c-popover-title-font-size: Defines the font size of the popover title. Default value: `--mg-b-font-size-h5`.\n * @prop --mg-c-popover-padding-vertical: Defines the vertical padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-padding-horizontal: Defines the horizontal padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-max-width: Defines the max-width of the popover. Default value: `--mg-b-size-floating-element-max-width`.\n * @prop --mg-c-popover-min-width: Defines the min-width of the popover. Default value: `unset`.\n */:host{--mg-c-card-spacing: var(--mg-c-popover-padding-vertical, var(--mg-b-size-16)) var(--mg-c-popover-padding-horizontal, var(--mg-b-size-16));--mg-c-card-border: none;--mg-c-card-border-radius: var(--mg-b-size-radius);--mg-c-card-color-background: var(--mg-c-popover-color-background);position:relative;display:contents}:host::slotted(*){display:inline-block}/*# sourceMappingURL=mg-popover.css.map */\n","import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows, isValideID, toString } from '@mgdis/stencil-helpers';\nimport { computePosition, autoUpdate, flip, shift, limitShift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { isFloatingUIPlacement, type PopoverPlacementType, sides, alignments, getTransformation, numberToPx } from './mg-popover.conf';\n\n/**\n * @slot - Element that will display the popover\n * @slot content - popover content\n * @slot title - popover title\n */\n@Component({\n  tag: 'mg-popover',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css',\n  shadow: true,\n})\nexport class MgPopover {\n  /************\n   * Internal *\n   ************/\n\n  private mgPopover: HTMLElement;\n  private mgPopoverContent: HTMLMgPopoverContentElement;\n  private windows: Window[];\n  private interactiveElement: HTMLElement;\n  private arrowElement: HTMLElement;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string = createID('mg-popover');\n  @Watch('identifier')\n  validateIdentifier(newValue: MgPopover['identifier']): void {\n    if (!isValideID(newValue)) {\n      throw new Error(`<mg-popover> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n    // use renderPopoverContent to update popover-content id\n    this.renderPopoverContent();\n  }\n\n  /**\n   * Popover placement\n   */\n  @Prop({ mutable: true }) placement: PopoverPlacementType = 'bottom';\n  @Watch('placement')\n  watchPlacement(newValue): void {\n    if (!isFloatingUIPlacement(newValue)) this.placement = 'bottom';\n  }\n\n  /**\n   * Hide popover arrow\n   */\n  @Prop() arrowHide = false;\n  @Watch('arrowHide')\n  validateArrowHide(newValue: MgPopover['arrowHide']): void {\n    if (newValue) this.mgPopoverContent.dataset.arrowHide = '';\n    else delete this.mgPopoverContent.dataset.arrowHide;\n  }\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n  @Watch('closeButton')\n  validateCloseButton(newValue: MgPopover['closeButton']): void {\n    this.mgPopoverContent.closeButton = newValue;\n  }\n\n  /**\n   * Display popover\n   */\n  @Prop({ mutable: true }) display = false;\n  @Watch('display')\n  handleDisplay(newValue: boolean): void {\n    if (newValue) {\n      this.show();\n    } else {\n      this.hide();\n    }\n    this.displayChange.emit(newValue);\n  }\n\n  /**\n   * Disable popover\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Emited event when display value change\n   */\n  @Event({ eventName: 'display-change' }) displayChange: EventEmitter<HTMLMgPopoverElement['display']>;\n\n  /**\n   * Emmited event when popover is closed\n   */\n  @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\n\n  /**\n   * Check if clicked outside of component\n   * @param event - mouse event\n   */\n  private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n    if (!this.disabled && event.target.closest('mg-popover') !== this.element && event.target.closest(`[data-mg-popover-guard=\"${this.identifier}\"]`) === null) {\n      this.display = false;\n    }\n  };\n\n  /**\n   * Show popover\n   */\n  private show = (): void => {\n    // Make the popover visible\n    this.mgPopover.dataset.show = '';\n    // Update aria-expanded\n    this.interactiveElement.setAttribute('aria-expanded', 'true');\n    // hide when click outside\n    // setTimeout is used to prevent event to trigger after creation\n    setTimeout(() => {\n      this.manageClickOutsideListeners('addEventListener');\n    });\n    this.updatePopover();\n  };\n\n  /**\n   * Hide popover\n   */\n  private hide = (): void => {\n    // Hide the popover\n    this.mgPopover.removeAttribute('data-show');\n    // Update aria-expanded\n    this.interactiveElement.setAttribute('aria-expanded', 'false');\n    // Remove event listener\n    this.manageClickOutsideListeners('removeEventListener');\n  };\n\n  /**\n   * Manage all clickOustside listeners\n   * @param action - top process on elements listeners\n   */\n  private manageClickOutsideListeners = (action: 'removeEventListener' | 'addEventListener'): void => {\n    // clickOutside listeners need to bind windows\n    // AND as shawdowDom content is not include on windows listeners `event.target` we need to include popover guard content DOM if it's a web-component\n    // by doing this we can get and parse all needeed document DOM elements in clickOutside callback event.details.\n    // This result in the givern junction :\n    // Windows > document > [data-mg-popover-guard] + [data-mg-popover-guard] > shadowRoot =  Windows > document > [data-mg-popover-guard] > shadowRoot\n    const guardChildren = Array.from(document.querySelector(`[data-mg-popover-guard=\"${this.identifier}\"]`)?.shadowRoot?.children || new Set());\n    [...guardChildren, ...this.windows].forEach((element: Window | HTMLElement) => {\n      if (element !== null) {\n        element[action]('click', this.clickOutside, false);\n      }\n    });\n  };\n\n  /**\n   * Handle content hide event\n   */\n  private handleHideContent = (): void => {\n    this.display = false;\n    this.componentClose.emit();\n  };\n\n  /**\n   * Render popover content element\n   */\n  private renderPopoverContent = (): void => {\n    const mgPopoverContent = this.element.querySelector('mg-popover-content');\n    if (mgPopoverContent === null) {\n      this.mgPopoverContent = document.createElement('mg-popover-content');\n      this.mgPopoverContent.setAttribute('slot', 'content');\n      this.mgPopoverContent.setAttribute('id', this.identifier);\n      this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);\n\n      const arrow = document.createElement('div');\n      arrow.setAttribute('slot', 'arrow');\n      arrow.dataset.floatingArrow = '';\n      this.mgPopoverContent.appendChild(arrow);\n\n      // insert elements in DOM\n      ['[slot=\"title\"]', '[slot=\"content\"]:not(mg-popover-content)'].forEach(slotType => {\n        Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {\n          this.mgPopoverContent.appendChild(slot);\n        });\n      });\n      this.element.appendChild(this.mgPopoverContent);\n    } else {\n      mgPopoverContent.setAttribute('id', this.identifier);\n    }\n  };\n\n  /**\n   * Get alternative placements ordered by proximity to initial placement\n   * First check fallbackPlacement attribute, then generate alternatives:\n   * 1. Same side with different alignments (start, center, end)\n   * 2. Other sides in order\n   * @param placement - initial placement\n   * @returns array of alternative placements\n   */\n  private getClosestPlacements = (placement: PopoverPlacementType): Placement[] => {\n    // First check if fallbackPlacement attribute is defined\n    const fallbackPlacements = (this.element.dataset.fallbackPlacement || '')\n      .split(',')\n      .map(t => t.trim())\n      .filter(isFloatingUIPlacement);\n    if (fallbackPlacements.length > 0) return Array.from(new Set([...fallbackPlacements, ...sides]).values()).filter(isFloatingUIPlacement);\n\n    // Extract side from placement (e.g. \"top\" from \"top-start\")\n    const [side] = placement.split('-');\n\n    // Generate placements for same side with different alignments\n    const currentSidePlacements = alignments.map(alignment => (alignment !== null ? `${side}-${alignment}` : side));\n\n    // Return unique placements: current side variants first, then other sides\n    return Array.from(new Set([...currentSidePlacements, ...sides.filter(otherSide => otherSide !== side)])).filter(isFloatingUIPlacement);\n  };\n\n  /**\n   * Update popover position\n   * @returns autoUpdate function\n   */\n  private updatePopover = () =>\n    autoUpdate(this.interactiveElement, this.mgPopover, async () => {\n      const { x, y, placement, middlewareData } = await computePosition(this.interactiveElement, this.mgPopover, {\n        placement: this.placement as Placement,\n        strategy: 'fixed',\n        middleware: [\n          offset(0),\n          flip({\n            fallbackPlacements: this.getClosestPlacements(this.placement),\n          }),\n          shift({\n            limiter: limitShift(),\n          }),\n          arrow({\n            element: this.arrowElement,\n          }),\n        ],\n      });\n\n      Object.assign(this.mgPopover.style, {\n        transform: getTransformation(x, y),\n      });\n\n      // Arrow positioning\n      if (this.arrowElement !== null) {\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        Object.assign(this.arrowElement.style, {\n          left: numberToPx(arrowX),\n          top: numberToPx(arrowY),\n          [staticSide]: '1px',\n        });\n\n        this.mgPopover.setAttribute('data-placement', placement);\n      }\n    });\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * update popper position after props change on component did update hook to benefit from render ended\n   */\n  componentDidUpdate(): void {\n    this.updatePopover();\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get windows to attach events\n    this.windows = getWindows(window);\n    // render mg-popover-content slot\n    this.renderPopoverContent();\n    this.validateCloseButton(this.closeButton);\n    this.validateIdentifier(this.identifier);\n    this.validateArrowHide(this.arrowHide);\n    this.watchPlacement(this.placement);\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentDidLoad(): void {\n    // Get popover content\n    this.mgPopover = this.element.querySelector(`#${this.identifier}`);\n\n    // Get arrow element\n    this.arrowElement = this.mgPopover.querySelector('[data-floating-arrow]');\n\n    // Get interactive element (first element without slot attribute)\n    this.interactiveElement = this.element.querySelector(':not([slot])');\n\n    // Add aria attributes\n    this.interactiveElement.setAttribute('aria-controls', this.identifier);\n    this.interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n\n    // Add resize observer\n    [this.interactiveElement, this.mgPopoverContent].forEach(element => {\n      new ResizeObserver(() => {\n        this.updatePopover();\n      }).observe(element);\n    });\n\n    // Add events to toggle display\n    this.interactiveElement.addEventListener('click', () => {\n      if (!this.disabled) this.display = !this.display;\n    });\n\n    this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }): void => {\n      const target = event.target.closest('[popovertargetaction]');\n      if (this.display === true && target !== null && target.getAttribute('popovertargetaction') === 'hide') {\n        this.display = false;\n      }\n    });\n\n    // Add events to hide popover\n    this.element.addEventListener('keydown', e => {\n      if (!this.disabled && e.code === 'Escape') {\n        this.display = false;\n        this.componentClose.emit();\n        this.interactiveElement.focus();\n      }\n    });\n\n    this.handleDisplay(this.display);\n  }\n\n  /**\n   * Cleanup when component is disconnected\n   */\n  disconnectedCallback(): void {\n    // Cleanup Floating UI instance\n    this.updatePopover?.();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <slot></slot>\n        <slot name=\"content\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/mg-progress.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { m as me, V as Ve, e as et } from './index.es.js';
+import { D as De, G as Gt, W as Wt } from './index.es.js';
 
 /**
  * List of all possibles roles
@@ -7,7 +7,6 @@ import { m as me, V as Ve, e as et } from './index.es.js';
 const roles = ['progressbar', 'meter'];
 
 const mgProgressCss = "/*!\n * @prop --mg-c-progress-size: Defines the size of the progress bar. Default value is `--mg-b-size-8`.\n * @prop --mg-c-progress-border-color: Defines the color of the progress bar border. Default value is `--mg-b-color-neutral-80`.\n * @prop --mg-c-progress-bar-color-background: Defines the color of the progress bar. Default value is `--mg-b-color-neutral-30`.\n * @prop --mg-c-progress-fill-color-background: Defines the color of the progress bar fill background. Default value is `--mg-b-color-app`.\n */.mg-c-progress{min-width:calc(var(--mg-b-size-16)*4)}.mg-c-progress__bar{position:relative;overflow:hidden;height:var(--mg-c-progress-size);border-width:var(--mg-b-size-border);border-style:solid;border-color:var(--mg-c-progress-border-color);border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);background-color:var(--mg-c-progress-bar-color-background)}.mg-c-progress__fill{height:100%;border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);transition:width 300ms ease-in-out}.mg-c-progress__bar.mg-c-progress__bar--active .mg-c-progress__fill{background-color:var(--mg-c-progress-fill-color-background)}";
-const MgProgressStyle0 = mgProgressCss;
 
 const MgProgress$1 = /*@__PURE__*/ proxyCustomElement(class MgProgress extends HTMLElement {
     constructor() {
@@ -36,26 +35,26 @@ const MgProgress$1 = /*@__PURE__*/ proxyCustomElement(class MgProgress extends H
         this.max = 100;
     }
     watchLabel(newValue) {
-        if (!me(newValue)) {
-            throw new Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${Ve(newValue)}.`);
+        if (!De(newValue)) {
+            throw new Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${Gt(newValue)}.`);
         }
     }
     watchAriaRole(newValue) {
         if (newValue && !roles.includes(newValue)) {
-            throw new Error(`<mg-progress> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Ve(newValue)}.`);
+            throw new Error(`<mg-progress> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${Gt(newValue)}.`);
         }
     }
     watchValue(newValue) {
-        if (newValue !== undefined && (!et(newValue) || !(newValue >= this.min && newValue <= this.max)))
-            throw new Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${Ve(newValue)}.`);
+        if (newValue !== undefined && (!Wt(newValue) || !(newValue >= this.min && newValue <= this.max)))
+            throw new Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${Gt(newValue)}.`);
     }
     watchMin(newValue) {
-        if (newValue !== 0 && newValue !== undefined && (!et(newValue) || newValue >= this.max))
-            throw new Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${Ve(newValue)}.`);
+        if (newValue !== 0 && newValue !== undefined && (!Wt(newValue) || newValue >= this.max))
+            throw new Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${Gt(newValue)}.`);
     }
     watchMax(newValue) {
-        if (newValue !== 100 && newValue !== undefined && (!et(newValue) || newValue <= this.min))
-            throw new Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${Ve(newValue)}.`);
+        if (newValue !== 100 && newValue !== undefined && (!Wt(newValue) || newValue <= this.min))
+            throw new Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${Gt(newValue)}.`);
     }
     /*************
      * Lifecycle *
@@ -76,7 +75,7 @@ const MgProgress$1 = /*@__PURE__*/ proxyCustomElement(class MgProgress extends H
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '53468a3432308e0e255a2a3ed8164091a414ba99', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: 'c96350a559b88cbe3ff8db5df277284034772ac9', class: "mg-c-progress" }, h("div", { key: '9a5cb4e8f0d18ea2ba26b3689035e00ce2a52a15', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: 'fb1908f24f86754a3a7359669205e86e7e44c6ab', class: "mg-c-progress__fill", style: {
+        return (h(Host, { key: 'c2a8b5264af27dab4f81981a6d20d04d572321db', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '1ab08ca9582182c7c2e9cf1041e68cfd38390e3b', class: "mg-c-progress" }, h("div", { key: '95044f35b5fcc1b5eb380828acc3935ff30c6c1f', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: '4d3588379c0b1a135dd9118fd2cb3c00c9dd31cb', class: "mg-c-progress__fill", style: {
                 width: `${Math.round(((this.value - this.min) / (this.max - this.min)) * 100)}%`,
             } })))));
     }
@@ -87,7 +86,7 @@ const MgProgress$1 = /*@__PURE__*/ proxyCustomElement(class MgProgress extends H
         "min": ["watchMin"],
         "max": ["watchMax"]
     }; }
-    static get style() { return MgProgressStyle0; }
+    static get style() { return mgProgressCss; }
 }, [1, "mg-progress", {
         "label": [1],
         "ariaRole": [1, "aria-role"],
@@ -120,5 +119,6 @@ const MgProgress = MgProgress$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgProgress, defineCustomElement };
+//# sourceMappingURL=mg-progress.js.map
 
 //# sourceMappingURL=mg-progress.js.map