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

@mgdis/mg-components 6.6.0 → 6.6.1

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

Files changed (11) 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/esm/mg-action-more_36.entry.js CHANGED Viewed

@@ -5460,7 +5460,7 @@ MgMessage.style = MgMessageStyle0;
  */
 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 = class {