npm - @mgdis/mg-components - Versions diffs - 6.6.0 → 6.7.0 - Mend

@mgdis/mg-components 6.6.0 → 6.7.0

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

Files changed (58) hide show

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

@@ -10,7 +10,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
  */
 const dialogRoles = ['dialog', 'alertdialog'];
-const mgModalCss = "/*!\n * @prop --mg-c-modal-border-radius: Defines the border radius of the modal. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-modal-title-font-size: Defines the font size of the modal title. Default value: `--mg-b-font-size-h3`.\n */:host{--mg-c-card-border-radius:var(--mg-c-modal-border-radius);--mg-c-card-spacing:var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border:none}.mg-c-modal{border:none;background:none}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-light);opacity:.85}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));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:var(--mg-b-size-24)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto}.mg-c-modal ::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}";
+const mgModalCss = "/*!\n * @prop --mg-c-modal-border-radius: Defines the border radius of the modal. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-modal-title-font-size: Defines the font size of the modal title. Default value: `--mg-b-font-size-h3`.\n */:host{--mg-c-card-border-radius:var(--mg-c-modal-border-radius);--mg-c-card-spacing:var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border:none}.mg-c-modal{border:none;background:none;color:inherit}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-light);opacity:.85}.mg-c-modal mg-card{display:flex;width:calc(75*var(--mg-b-size-8));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:var(--mg-b-size-24)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)*var(--mg-b-line-height))/2*-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2*-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)*-1);overflow-y:auto}.mg-c-modal ::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}";
 const MgModalStyle0 = mgModalCss;
 const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLElement {

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

	@@ -1 +1 @@
1	- {"file":"mg-modal.js","mappings":"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","names":["MgModal","createID","ClassList","isValideID","toString","isValidString"],"sources":["src/components/molecules/mg-modal/mg-modal.conf.ts","../styles/dist/components/mg-modal.css?tag=mg-modal&encapsulation=shadow","src/components/molecules/mg-modal/mg-modal.tsx"],"sourcesContent":["/*\n List of all possibles dialog roles\n /\nexport const dialogRoles = ['dialog', 'alertdialog'] as const;\n\n/\n DialogRole type from dialog roles\n /\nexport type DialogRoleType = (typeof dialogRoles)[number];\n","/!\n * @prop --mg-c-modal-border-radius: Defines the border radius of the modal. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-modal-title-font-size: Defines the font size of the modal title. Default value: `--mg-b-font-size-h3`.\n /:host{--mg-c-card-border-radius: var(--mg-c-modal-border-radius);--mg-c-card-spacing: var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border: none}.mg-c-modal{border:none;background:none}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-light);opacity:.85}.mg-c-modal mg-card{display:flex;width:calc(75var(--mg-b-size-8));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:var(--mg-b-size-24)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)var(--mg-b-line-height))/2-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)-1);overflow-y:auto}.mg-c-modal ::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}/# sourceMappingURL=mg-modal.css.map /\n","import { Component, h, Prop, State, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { createID, ClassList, isValidString, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n/\n @slot - Modal content\n * @slot actions - Actions content\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 dialog: HTMLDialogElement;\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 @Watch('identifier')\n watchIdentifier(newValue: MgModal['identifier']): void {\n if (!isValideID(newValue)) {\n throw new Error(`<mg-modal> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\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(', ')}. Passed value: ${toString(newValue)}.`);\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. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define if modal has a cross button\n /\n @Prop() closeButton = false;\n\n /\n Define if modal is open\n /\n @Prop({ mutable: true }) open = false;\n @Watch('open')\n watchOpen(newValue: boolean): void {\n if (newValue) {\n this.dialog.showModal();\n this.componentShow.emit();\n document.body.style.overflow = 'hidden';\n } else {\n this.dialog.close();\n this.componentHide.emit();\n document.body.style.overflow = this.bodyOverflow;\n }\n }\n\n /\n Define if component is using actions slot\n /\n @State() hasActions = false;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-modal']);\n\n /\n Emmited event when modal is diplayed\n /\n @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n /\n Emmited event when modal is hidden\n /\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n /\n Emmited event when modal is closed\n /\n @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\n\n /*********\n Handles \n ********/\n\n /\n * Closes the modal.\n /\n private handleClose = (): void => {\n this.open = false;\n this.componentClose.emit();\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.titleId = `${this.identifier}-title`;\n this.watchIdentifier(this.identifier);\n this.validateModalTitle(this.modalTitle);\n this.validateDialogRole(this.dialogRole);\n }\n\n /\n Define open state on component load\n /\n componentDidLoad(): void {\n this.watchOpen(this.open);\n // update open prop when use escape key\n this.dialog.addEventListener('close', () => {\n this.open = false;\n this.componentClose.emit();\n });\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <dialog\n role={this.dialogRole}\n id={this.identifier}\n class={this.classCollection.join()}\n aria-labelledby={this.titleId}\n ref={(el: HTMLDialogElement) => {\n if (el !== null) {\n this.dialog = el;\n }\n }}\n >\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 is-icon variant=\"flat\" label={this.messages.modal.closeButton} onClick={this.handleClose}>\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 <article class=\"mg-c-modal__content\">\n <slot></slot>\n </article>\n {this.hasActions && (\n <footer class=\"mg-c-modal__footer\">\n <slot name=\"actions\"></slot>\n </footer>\n )}\n </div>\n </mg-card>\n </dialog>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-modal.js","mappings":";;;;;;;AAAA;;;AAGO,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,aAAa,CAAU;;ACH7D,MAAM,UAAU,GAAG,swDAAswD,CAAC;AAC1xD,sBAAe,UAAU;;MCaZA,SAAO;IALpB;;;;;;;;QAcU,YAAO,GAAG,EAAE,CAAC;;;;;QAqBb,eAAU,GAAWC,EAAQ,CAAC,UAAU,CAAC,CAAC;;;;QAW1C,eAAU,GAAmB,WAAW,CAAC,CAAC,CAAC,CAAC;;;;QAoB5C,gBAAW,GAAG,KAAK,CAAC;;;;QAKH,SAAI,GAAG,KAAK,CAAC;;;;QAiB7B,eAAU,GAAG,KAAK,CAAC;;;;QAKnB,oBAAe,GAAc,IAAIC,EAAS,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;;;;;;;QAwB5D,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B,CAAC;KA8EH;IAjKC,eAAe,CAAC,QAA+B;QAC7C,IAAI,CAACC,EAAU,CAAC,QAAQ,CAAC,EAAE;YACzB,MAAM,IAAI,KAAK,CAAC,gEAAgEC,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SACxG;KACF;IAOD,kBAAkB,CAAC,QAA+B;QAChD,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,gDAAgD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmBA,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACtK;IAOD,kBAAkB,CAAC,QAA+B;QAChD,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,2DAA2DD,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SACnG;KACF;IAYD,SAAS,CAAC,QAAiB;QACzB,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YAC1B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;SACzC;aAAM;YACL,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YAC1B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC;SAClD;KACF;;;;;;;IA8CD,iBAAiB;;QAEf,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;;QAEjD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;;QAEnD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;QAC1E,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,UAAU,QAAQ,CAAC;QAC1C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC1C;;;;IAKD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;QAE1B,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE;YACpC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B,CAAC,CAAC;KACJ;;;;;IAMD,MAAM;QACJ,QACE,+DACE,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,qBACjB,IAAI,CAAC,OAAO,EAC7B,GAAG,EAAE,CAAC,EAAqB;gBACzB,IAAI,EAAE,KAAK,IAAI,EAAE;oBACf,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;iBAClB;aACF,IAED,kEACE,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,+DAAQ,KAAK,EAAC,oBAAoB,IAC/B,IAAI,CAAC,WAAW,KACf,6DAAM,KAAK,EAAC,0BAA0B,IACpC,mFAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,IACjG,gEAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACP,CACR,EACD,2DAAI,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,IAC3C,IAAI,CAAC,UAAU,CACb,CACE,EACT,gEAAS,KAAK,EAAC,qBAAqB,IAClC,8DAAa,CACL,EACT,IAAI,CAAC,UAAU,KACd,+DAAQ,KAAK,EAAC,oBAAoB,IAChC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACrB,CACV,CACG,CACE,CACH,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgModal","createID","ClassList","isValideID","toString","isValidString"],"sources":["src/components/molecules/mg-modal/mg-modal.conf.ts","../styles/dist/components/mg-modal.css?tag=mg-modal&encapsulation=shadow","src/components/molecules/mg-modal/mg-modal.tsx"],"sourcesContent":["/*\n List of all possibles dialog roles\n /\nexport const dialogRoles = ['dialog', 'alertdialog'] as const;\n\n/\n DialogRole type from dialog roles\n /\nexport type DialogRoleType = (typeof dialogRoles)[number];\n","/!\n * @prop --mg-c-modal-border-radius: Defines the border radius of the modal. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-modal-title-font-size: Defines the font size of the modal title. Default value: `--mg-b-font-size-h3`.\n /:host{--mg-c-card-border-radius: var(--mg-c-modal-border-radius);--mg-c-card-spacing: var(--mg-b-size-16) var(--mg-b-size-24);--mg-c-card-border: none}.mg-c-modal{border:none;background:none;color:inherit}.mg-c-modal[open]{display:flex;padding:var(--mg-b-size-24) var(--mg-b-size-8)}.mg-c-modal::backdrop{background-color:var(--mg-b-color-light);opacity:.85}.mg-c-modal mg-card{display:flex;width:calc(75var(--mg-b-size-8));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:var(--mg-b-size-24)}.mg-c-modal__title{margin:0;font-family:var(--mg-b-font-family-heading);font-size:var(--mg-c-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-c-modal-title-font-size);margin-top:calc((var(--mg-b-size-min-height) - var(--mg-c-modal-title-font-size)var(--mg-b-line-height))/2-1);margin-right:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2-1);margin-left:var(--mg-b-size-16);float:right}.mg-c-modal__content{padding:var(--mg-b-size-16);margin:calc(var(--mg-b-size-16)-1);overflow-y:auto}.mg-c-modal ::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}/# sourceMappingURL=mg-modal.css.map /\n","import { Component, h, Prop, State, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { createID, ClassList, isValidString, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n/\n @slot - Modal content\n * @slot actions - Actions content\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 dialog: HTMLDialogElement;\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 @Watch('identifier')\n watchIdentifier(newValue: MgModal['identifier']): void {\n if (!isValideID(newValue)) {\n throw new Error(`<mg-modal> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\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(', ')}. Passed value: ${toString(newValue)}.`);\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. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define if modal has a cross button\n /\n @Prop() closeButton = false;\n\n /\n Define if modal is open\n /\n @Prop({ mutable: true }) open = false;\n @Watch('open')\n watchOpen(newValue: boolean): void {\n if (newValue) {\n this.dialog.showModal();\n this.componentShow.emit();\n document.body.style.overflow = 'hidden';\n } else {\n this.dialog.close();\n this.componentHide.emit();\n document.body.style.overflow = this.bodyOverflow;\n }\n }\n\n /\n Define if component is using actions slot\n /\n @State() hasActions = false;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-modal']);\n\n /\n Emmited event when modal is diplayed\n /\n @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n /\n Emmited event when modal is hidden\n /\n @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n /\n Emmited event when modal is closed\n /\n @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\n\n /*********\n Handles \n ********/\n\n /\n * Closes the modal.\n /\n private handleClose = (): void => {\n this.open = false;\n this.componentClose.emit();\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.titleId = `${this.identifier}-title`;\n this.watchIdentifier(this.identifier);\n this.validateModalTitle(this.modalTitle);\n this.validateDialogRole(this.dialogRole);\n }\n\n /\n Define open state on component load\n /\n componentDidLoad(): void {\n this.watchOpen(this.open);\n // update open prop when use escape key\n this.dialog.addEventListener('close', () => {\n this.open = false;\n this.componentClose.emit();\n });\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <dialog\n role={this.dialogRole}\n id={this.identifier}\n class={this.classCollection.join()}\n aria-labelledby={this.titleId}\n ref={(el: HTMLDialogElement) => {\n if (el !== null) {\n this.dialog = el;\n }\n }}\n >\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 is-icon variant=\"flat\" label={this.messages.modal.closeButton} onClick={this.handleClose}>\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 <article class=\"mg-c-modal__content\">\n <slot></slot>\n </article>\n {this.hasActions && (\n <footer class=\"mg-c-modal__footer\">\n <slot name=\"actions\"></slot>\n </footer>\n )}\n </div>\n </mg-card>\n </dialog>\n );\n }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 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 { a as autoUpdate, i as isFloatingUIPlacement, c as computePosition, o as offset, f as flip, s as sides, b as shift, l as limitShift, d as arrow } from './floating-ui.utils.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 { 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';
@@ -50,12 +50,24 @@ 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
          */
         this.show = () => {
             // Make the popover visible
             this.mgPopover.dataset.show = '';
+            // Update aria-expanded
+            this.updateAriaExpanded(true);
             // hide when click outside
             // setTimeout is used to prevent event to trigger after creation
             setTimeout(() => {
@@ -68,6 +80,8 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
         this.hide = () => {
             // Hide the popover
             this.mgPopover.removeAttribute('data-show');
+            // Update aria-expanded
+            this.updateAriaExpanded(false);
             // Remove event listener
             this.manageClickOutsideListeners('removeEventListener');
         };
@@ -122,12 +136,34 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
                 mgPopoverContent.setAttribute('id', this.identifier);
             }
         };
+        /**
+         * Get alternative placements ordered by proximity to initial placement
+         * First check fallbackPlacement attribute, then generate alternatives:
+         * 1. Same side with different alignments (start, center, end)
+         * 2. Other sides in order
+         * @param placement - initial placement
+         * @returns array of alternative placements
+         */
+        this.getClosestPlacements = (placement) => {
+            // First check if fallbackPlacement attribute is defined
+            const fallbackPlacements = (this.element.dataset.fallbackPlacement || '')
+                .split(',')
+                .map(t => t.trim())
+                .filter(isFloatingUIPlacement);
+            if (fallbackPlacements.length > 0)
+                return Array.from(new Set([...fallbackPlacements, ...sides]).values()).filter(isFloatingUIPlacement);
+            // Extract side from placement (e.g. "top" from "top-start")
+            const [side] = placement.split('-');
+            // Generate placements for same side with different alignments
+            const currentSidePlacements = alignments.map(alignment => (alignment !== null ? `${side}-${alignment}` : side));
+            // Return unique placements: current side variants first, then other sides
+            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
          */
         this.setFloatingUI = (interactiveElement) => {
-            const fallbackPlacements = (this.element.dataset.fallbackPlacement || '').split(',').map(t => t.trim());
             this.floatingUICleanup = autoUpdate(interactiveElement, this.mgPopover, () => {
                 computePosition(interactiveElement, this.mgPopover, {
                     placement: this.placement,
@@ -135,7 +171,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
                     middleware: [
                         offset(0),
                         flip({
-                            fallbackPlacements: Array.from(new Set([...fallbackPlacements, ...sides]).values()).filter(isFloatingUIPlacement), // simulate "auto" placement with default fallback values
+                            fallbackPlacements: this.getClosestPlacements(this.placement),
                         }),
                         shift({
                             limiter: limitShift(),
@@ -164,7 +200,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
                     // 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!
+                    // 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, {
@@ -286,7 +322,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '726e360b49d1148572db27898037c1d2cfd1755f' }, h("slot", { key: '4700d3d58fde644274827866ee8f230c077399b7' }), h("slot", { key: '35d20ddd547b3383dd1de655fac2c35e83fb48af', name: "content" })));
+        return (h(Host, { key: '085dde7110b2c100db1876d31f7db23e7c1fda5e' }, h("slot", { key: 'dcc6587d5a88784109f1421925992112ef77490d' }), h("slot", { key: '0d1831d325762c99a503a5e461b428a5cb7bdc2c', name: "content" })));
     }
     get element() { return this; }
     static get watchers() { return {

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

	@@ -1 +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 } 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 Show popover\n /\n private show = (): void => {\n // Make the popover visible\n this.mgPopover.dataset.show = '';\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 // 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 Set up Floating UI positioning and arrow behavior\n * @param interactiveElement - Element that triggers the popover\n /\n private setFloatingUI = (interactiveElement: HTMLElement): void => {\n const fallbackPlacements = (this.element.dataset.fallbackPlacement \|\| '').split(',').map(t => t.trim());\n\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: Array.from(new Set([...fallbackPlacements, ...sides]).values()).filter(isFloatingUIPlacement), // simulate \"auto\" placement with default fallback values\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}
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}

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { G as Ge, s as st, X as Xe, V as Ve, m as me, Y as Ye, Q as Qe } from './index.es.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, b as shift, l as limitShift, d as arrow, i as isFloatingUIPlacement } from './floating-ui.utils.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, d as shift, l as limitShift, e as arrow, i as isFloatingUIPlacement } from './floating-ui.utils.js';
 import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
 const Guard = {

package/dist/esm/{index-6b7bdd63.js → index-a58f8b91.js} RENAMED Viewed

@@ -3,7 +3,7 @@ import { h as ht } from './index.es-b80b758c.js';
 const errors$1 = {
 	required: "This field is required.",
 	date: {
-		badInput: "The date format must be {pattern}",
+		badInput: "The date is incorrect, the format must be {pattern}",
 		min: "The date cannot be earlier than {min}",
 		max: "The date cannot be later than {max}",
 		minMax: "The date must be between {min} and {max}"
@@ -124,7 +124,7 @@ const en = {
 const errors = {
 	required: "Ce champ est obligatoire.",
 	date: {
-		badInput: "Le format de la date doit être du type {pattern}",
+		badInput: "La date est incorrecte, le format doit être du type {pattern}",
 		min: "La date ne peut pas être antérieure au {min}",
 		max: "La date ne peut pas être postérieure au {max}",
 		minMax: "La date doit être comprise entre le {min} et le {max}"
@@ -253,4 +253,4 @@ const initLocales = ht(messages, defaultLocale);
 export { initLocales as i };
-//# sourceMappingURL=index-6b7bdd63.js.map
+//# sourceMappingURL=index-a58f8b91.js.map

package/dist/esm/{index-6b7bdd63.js.map → index-a58f8b91.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"index-~~6b7bdd63~~.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,aAAa,GAAG,IAAI,CAAC;AAC3B,MAAM,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAE5B;;;;;MAKa,WAAW,GAAGA,EAAa,CAAC,QAAQ,EAAE,aAAa;;;;","names":["defineLocales"],"sources":["src/locales/index.ts"],"sourcesContent":["import en from './en/messages.json';\nimport fr from './fr/messages.json';\nimport { defineLocales } from '@mgdis/stencil-helpers';\n\nconst defaultLocale = 'en';\nconst messages = { en, fr };\n\n/*\n Get Intl object\n * @param element - element we need to get the language\n * @returns messages object\n */\nexport const initLocales = defineLocales(messages, defaultLocale);\n"],"version":3}
1	+ {"file":"index-a58f8b91.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,aAAa,GAAG,IAAI,CAAC;AAC3B,MAAM,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAE5B;;;;;MAKa,WAAW,GAAGA,EAAa,CAAC,QAAQ,EAAE,aAAa;;;;","names":["defineLocales"],"sources":["src/locales/index.ts"],"sourcesContent":["import en from './en/messages.json';\nimport fr from './fr/messages.json';\nimport { defineLocales } from '@mgdis/stencil-helpers';\n\nconst defaultLocale = 'en';\nconst messages = { en, fr };\n\n/*\n Get Intl object\n * @param element - element we need to get the language\n * @returns messages object\n */\nexport const initLocales = defineLocales(messages, defaultLocale);\n"],"version":3}