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

@mgdis/mg-components 6.7.0 → 6.9.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 (345) hide show

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

	@@ -1 +1 @@
1	- {"file":"mg-badge2.js","mappings":";;;AAEA~~;;;AAGO~~,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAU;;ACL/G,MAAM,UAAU,GAAG,2qGAA2qG,~~CAAC~~;~~AAC/rG~~,~~sBAAe~~,~~UAAU~~;;~~MCQZ~~,~~OAAO;IALpB;;;;;;;;QAWmB~~,~~iBAAY~~,GAAG,~~qBAAqB~~,~~CAAC;;;;QAgC9C~~,~~YAAO~~,GAAsB,~~QAAQ~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~CAAC;;;;QA0BxC~~,~~oBAAe~~,GAAc,~~IAAIA~~,EAAS,CAAC,CAAC,YAAY,CAAC,CAAC~~,CAAC~~;~~KAwBrE~~;~~IAvEC~~,aAAa,CAAC,QAA0B;QACtC,IAAI,YAAY,CAAC,IAAI,CAAC,~~GAAG~~,QAAQ,~~EAAE~~,CAAC,KAAK,IAAI,EAAE;YAC7C,MAAM,IAAI,KAAK,CAAC,~~mGAAmGC~~,EAAQ,CAAC,QAAQ,CAAC,~~GAAG~~,~~CAAC~~,CAAC~~;SAC3I;KACF;IAQD~~,aAAa,CAAC,QAA0B;~~QACtC~~,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,~~2EAA2ED~~,EAAQ,CAAC,QAAQ,CAAC,~~GAAG~~,~~CAAC~~,CAAC~~;SACnH;KACF;IAOD~~,eAAe,CAAC,QAA4B,EAAE,QAA6B;QACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;~~YAChC~~,MAAM,IAAI,KAAK,CAAC,~~6CAA6C~~,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmBA,EAAQ,CAAC,QAAQ,CAAC,~~GAAG~~,~~CAAC~~,CAAC;~~SAC3H;aAAM;YACL~~,IAAI,QAAQ,KAAK,SAAS,EAAE;gBAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,~~eAAe~~,QAAQ,~~EAAE~~,~~CAAC~~,CAAC~~;aACxD;YACD~~,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,~~eAAe~~,QAAQ,~~EAAE~~,~~CAAC~~,CAAC~~;SACrD;KACF;IAOD~~,eAAe,CAAC,QAA4B;~~QAC1C~~,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC~~,CAAC~~;;~~YACrD~~,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC~~,CAAC~~;~~KACrD;;;;IAUD~~,iBAAiB;~~QACf~~,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC~~,CAAC~~;~~QAC/B~~,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC~~,CAAC~~;~~QAC/B~~,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC~~,CAAC~~;~~QACnC~~,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC~~,CAAC~~;~~KACpC;;;;;IAMD~~,MAAM;QACJ,QACE,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,~~IACtC~~,~~6DAAM~~,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACnD,~~6DAAM~~,KAAK,EAAC,sBAAsB,~~IAAE~~,IAAI,CAAC,KAAK,CAAQ,CACjD~~,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["ClassList","toString","isValidString"],"sources":["src/components/atoms/mg-badge/mg-badge.conf.ts","../styles/dist/components/mg-badge.css?tag=mg-badge&encapsulation=shadow","src/components/atoms/mg-badge/mg-badge.tsx"],"sourcesContent":["import type { Variant } from '../../../types';\n\n/*\n List of all possibles variants\n /\nexport const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'] as const;\n\n/\n Variant type from variants\n /\nexport type BadgeVariantType = Variant & (typeof variants)[number];\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}/!\n * @prop --mg-c-badge-size: Defines the height and minimum width of the badge. The default value is `--mg-b-size-16`.\n * @prop --mg-c-badge-font-size: Defines the font size of the badge. The default value is `--mg-b-font-size-small`.\n * @prop --mg-c-badge-color-text: Defines the font color of the badge when used with the `text-color` variant and without `outline`. The default value is `--mg-b-color-light`.\n /.mg-c-badge{min-width:var(--mg-c-badge-size);height:var(--mg-c-badge-size);box-sizing:border-box;padding:0 var(--mg-b-size-4);border:var(--mg-b-size-border) solid;border-radius:calc(var(--mg-c-badge-size)/2);font-size:var(--mg-c-badge-font-size);font-weight:600;line-height:var(--mg-c-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:var(--mg-b-color-primary);background-color:var(--mg-b-color-primary);color:var(--mg-b-color-text-on-primary)}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-primary)}.mg-c-badge.mg-c-badge--secondary{border-color:var(--mg-b-color-secondary);background-color:var(--mg-b-color-secondary);color:var(--mg-b-color-text-on-secondary)}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-secondary)}.mg-c-badge.mg-c-badge--danger{border-color:var(--mg-b-color-danger);background-color:var(--mg-b-color-danger);color:var(--mg-b-color-text-on-danger)}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-badge.mg-c-badge--info{border-color:var(--mg-b-color-info);background-color:var(--mg-b-color-info);color:var(--mg-b-color-text-on-info)}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-badge.mg-c-badge--success{border-color:var(--mg-b-color-success);background-color:var(--mg-b-color-success);color:var(--mg-b-color-text-on-success)}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-badge.mg-c-badge--warning{border-color:var(--mg-b-color-warning);background-color:var(--mg-b-color-warning);color:var(--mg-b-color-text-on-warning)}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:var(--mg-c-badge-color-text, var(--mg-b-color-light))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}/# sourceMappingURL=mg-badge.css.map /\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList, isValidString, toString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-badge',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-badge.css',\n shadow: true,\n})\nexport class MgBadge {\n /**********\n Internal \n *********/\n\n // Classes\n private readonly classOutline = `mg-c-badge--outline`;\n\n /***********\n Decorators \n ***********/\n\n /\n * Badge value\n /\n @Prop() value!: string \| number;\n @Watch('value')\n validateValue(newValue: MgBadge['value']): void {\n if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {\n throw new Error(`<mg-badge> prop \"value\" is required and must be integer and/or special character. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Badge label. Include short description.\n * Required for accessibility\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgBadge['label']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-badge> prop \"label\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define badge variant\n /\n @Prop() variant?: BadgeVariantType = ~~variants[0]; //~~ info\n @Watch('variant')\n validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-badge> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-badge--${oldValue}`);\n }\n this.classCollection.add(`mg-c-badge--${newValue}`);\n }\n }\n\n /\n Define if button is using outline style\n /\n @Prop() outline?: boolean;\n @Watch('outline')\n validateOutline(newValue: MgBadge['outline']): void {\n if (newValue) this.classCollection.add(this.classOutline);\n else this.classCollection.delete(this.classOutline);\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-badge']);\n\n /\n Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateValue(this.value);\n this.validateLabel(this.label);\n this.validateVariant(this.variant);\n this.validateOutline(this.outline);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span class={this.classCollection.join()}>\n <span class=\"mg-c-badge__value\">{this.value}</span>\n <span class=\"mg-u-visually-hidden\">{this.label}</span>\n </span>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-badge2.js","mappings":";;;AAEA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAU;;ACL/G,MAAM,UAAU,GAAG,2qGAA2qG;;MCSjrG,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;AAME;;AAEc;;AAGG,QAAA,IAAY,CAAA,YAAA,GAAG,CAAA,mBAAA,CAAqB;AA6BrD;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAsB,MAAM;AAa3C;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAa,KAAK;AAOjC;;AAEG;QACM,IAAe,CAAA,eAAA,GAAc,IAAIC,EAAS,CAAC,CAAC,YAAY,CAAC,CAAC;AAwBpE;AAvEC,IAAA,aAAa,CAAC,QAA0B,EAAA;QACtC,IAAI,YAAY,CAAC,IAAI,CAAC,CAAA,EAAG,QAAQ,CAAA,CAAE,CAAC,KAAK,IAAI,EAAE;YAC7C,MAAM,IAAI,KAAK,CAAC,CAAmG,gGAAA,EAAAC,EAAQ,CAAC,QAAQ,CAAC,CAAG,CAAA,CAAA,CAAC;;;AAU7I,IAAA,aAAa,CAAC,QAA0B,EAAA;AACtC,QAAA,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,CAA2E,wEAAA,EAAAD,EAAQ,CAAC,QAAQ,CAAC,CAAG,CAAA,CAAA,CAAC;;;IASrH,eAAe,CAAC,QAA4B,EAAE,QAA6B,EAAA;QACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;AAChC,YAAA,MAAM,IAAI,KAAK,CAAC,CAA6C,0CAAA,EAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmBA,EAAQ,CAAC,QAAQ,CAAC,CAAA,CAAA,CAAG,CAAC;;aACpH;AACL,YAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;gBAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAe,YAAA,EAAA,QAAQ,CAAE,CAAA,CAAC;;YAExD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAe,YAAA,EAAA,QAAQ,CAAE,CAAA,CAAC;;;AASvD,IAAA,eAAe,CAAC,QAA4B,EAAA;AAC1C,QAAA,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;;YACpD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;;AAQrD;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;AAC9B,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;AAC9B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC;AAClC,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC;;AAGpC;;;AAGG;IACH,MAAM,GAAA;QACJ,QACE,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACnD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CACjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","ClassList","toString","isValidString"],"sources":["src/components/atoms/mg-badge/mg-badge.conf.ts","../styles/dist/components/mg-badge.css?tag=mg-badge&encapsulation=shadow","src/components/atoms/mg-badge/mg-badge.tsx"],"sourcesContent":["import type { Variant } from '../../../types';\n\n/*\n List of all possibles variants\n /\nexport const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'] as const;\n\n/\n Variant type from variants\n /\nexport type BadgeVariantType = Variant & (typeof variants)[number];\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}/!\n * @prop --mg-c-badge-size: Defines the height and minimum width of the badge. The default value is `--mg-b-size-16`.\n * @prop --mg-c-badge-font-size: Defines the font size of the badge. The default value is `--mg-b-font-size-small`.\n * @prop --mg-c-badge-color-text: Defines the font color of the badge when used with the `text-color` variant and without `outline`. The default value is `--mg-b-color-light`.\n /.mg-c-badge{min-width:var(--mg-c-badge-size);height:var(--mg-c-badge-size);box-sizing:border-box;padding:0 var(--mg-b-size-4);border:var(--mg-b-size-border) solid;border-radius:calc(var(--mg-c-badge-size)/2);font-size:var(--mg-c-badge-font-size);font-weight:600;line-height:var(--mg-c-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:var(--mg-b-color-primary);background-color:var(--mg-b-color-primary);color:var(--mg-b-color-text-on-primary)}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-primary)}.mg-c-badge.mg-c-badge--secondary{border-color:var(--mg-b-color-secondary);background-color:var(--mg-b-color-secondary);color:var(--mg-b-color-text-on-secondary)}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-secondary)}.mg-c-badge.mg-c-badge--danger{border-color:var(--mg-b-color-danger);background-color:var(--mg-b-color-danger);color:var(--mg-b-color-text-on-danger)}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-badge.mg-c-badge--info{border-color:var(--mg-b-color-info);background-color:var(--mg-b-color-info);color:var(--mg-b-color-text-on-info)}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-badge.mg-c-badge--success{border-color:var(--mg-b-color-success);background-color:var(--mg-b-color-success);color:var(--mg-b-color-text-on-success)}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-badge.mg-c-badge--warning{border-color:var(--mg-b-color-warning);background-color:var(--mg-b-color-warning);color:var(--mg-b-color-text-on-warning)}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:var(--mg-c-badge-color-text, var(--mg-b-color-light))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}/# sourceMappingURL=mg-badge.css.map /\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList, isValidString, toString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-badge',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-badge.css',\n shadow: true,\n})\nexport class MgBadge {\n /**********\n Internal \n *********/\n\n // Classes\n private readonly classOutline = `mg-c-badge--outline`;\n\n /***********\n Decorators \n ***********/\n\n /\n * Badge value\n /\n @Prop() value!: string \| number;\n @Watch('value')\n validateValue(newValue: MgBadge['value']): void {\n if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {\n throw new Error(`<mg-badge> prop \"value\" is required and must be integer and/or special character. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Badge label. Include short description.\n * Required for accessibility\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgBadge['label']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-badge> prop \"label\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define badge variant\n /\n @Prop() variant?: BadgeVariantType = 'info';\n @Watch('variant')\n validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-badge> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-badge--${oldValue}`);\n }\n this.classCollection.add(`mg-c-badge--${newValue}`);\n }\n }\n\n /\n Define if button is using outline style\n /\n @Prop() outline?: boolean = false;\n @Watch('outline')\n validateOutline(newValue: MgBadge['outline']): void {\n if (newValue) this.classCollection.add(this.classOutline);\n else this.classCollection.delete(this.classOutline);\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-badge']);\n\n /\n Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateValue(this.value);\n this.validateLabel(this.label);\n this.validateVariant(this.variant);\n this.validateOutline(this.outline);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span class={this.classCollection.join()}>\n <span class=\"mg-c-badge__value\">{this.value}</span>\n <span class=\"mg-u-visually-hidden\">{this.label}</span>\n </span>\n );\n }\n}\n"],"version":3}

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

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

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { Z as Ze, V as Ve, m as me, s as st } from './index.es.js';
+import { k as kt, z as zt, L as Le, M as Mt } from './index.es.js';
 import { d as defineCustomElement$1 } from './mg-icon2.js';
 /**
@@ -12,7 +12,6 @@ const sizes = ['medium', 'large'];
 const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
 const mgButtonCss = "/*!\n * @prop --mg-c-button-border-radius: Defines the border radius of the button. The default value is `--mg-b-size-radius`.\n * @prop --mg-c-button-border-top-width: Defines the top border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-right-width: Defines the right border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-bottom-width: Defines the bottom border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-left-width: Defines the left border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-radius-top-left: Defines the top left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-top-right: Defines the top right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-right: Defines the bottom right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-left: Defines the bottom left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-font-weight: Defines the font weight of the button. Unset by default, fallback on `normal`.\n * @prop --mg-c-button-icon-border-radius: Defines the border radius of the button in icon mode. The default value is `--mg-b-size-min-height`.\n */:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{/*!\n * @prop --mg-c-button-color-background-primary: Defines the background color for the primary variant button.\n * @prop --mg-c-button-color-border-primary: Defines the border color for the primary variant button.\n * @prop --mg-c-button-color-gradient-primary: Defines the gradient color for the primary variant button.\n * @prop --mg-c-button-color-text-primary: Defines the font color for the primary variant button.\n */border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{/*!\n * @prop --mg-c-button-color-background-secondary: Defines the background color for the secondary variant button.\n * @prop --mg-c-button-color-border-secondary: Defines the border color for the secondary variant button.\n * @prop --mg-c-button-color-gradient-secondary: Defines the gradient color for the secondary variant button.\n * @prop --mg-c-button-color-text-secondary: Defines the font color for the secondary variant button.\n */border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{/*!\n * @prop --mg-c-button-color-background-danger: Defines the background color for the danger variant button.\n * @prop --mg-c-button-color-border-danger: Defines the border color for the danger variant button.\n * @prop --mg-c-button-color-gradient-danger: Defines the gradient color for the danger variant button.\n * @prop --mg-c-button-color-text-danger: Defines the font color for the danger variant button.\n */border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{/*!\n * @prop --mg-c-button-color-background-info: Defines the background color for the info variant button.\n * @prop --mg-c-button-color-border-info: Defines the border color for the info variant button.\n * @prop --mg-c-button-color-gradient-info: Defines the gradient color for the info variant button.\n * @prop --mg-c-button-color-text-info: Defines the font color for the info variant button.\n */border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{/*!\n * @prop --mg-c-button-color-background-success: Defines the background color for the success variant button.\n * @prop --mg-c-button-color-border-success: Defines the border color for the success variant button.\n * @prop --mg-c-button-color-gradient-success: Defines the gradient color for the success variant button.\n * @prop --mg-c-button-color-text-success: Defines the font color for the success variant button.\n */border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{/*!\n * @prop --mg-c-button-color-background-warning: Defines the background color for the warning variant button.\n * @prop --mg-c-button-color-border-warning: Defines the border color for the warning variant button.\n * @prop --mg-c-button-color-gradient-warning: Defines the gradient color for the warning variant button.\n * @prop --mg-c-button-color-text-warning: Defines the font color for the warning variant button.\n */border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{/*!\n * @prop --mg-c-button-color-background-danger-alt: Defines the background color for the danger-alt variant button.\n * @prop --mg-c-button-color-border-danger-alt: Defines the border color for the danger-alt variant button.\n * @prop --mg-c-button-color-gradient-danger-alt: Defines the gradient color for the danger-alt variant button.\n * @prop --mg-c-button-color-text-danger-alt: Defines the font color for the danger-alt variant button.\n */border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}";
-const MgButtonStyle0 = mgButtonCss;
 const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLElement {
     constructor() {
@@ -30,11 +29,11 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
         /**
          * Define button variant
          */
-        this.variant = variants[0]; // Primary
+        this.variant = 'primary';
         /**
          * Define button size
          */
-        this.size = sizes[0]; // medium
+        this.size = 'medium';
         /**
          * Set button to full-width
          */
@@ -58,7 +57,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
         /**
          * Component classes
          */
-        this.classCollection = new Ze(['mg-c-button']);
+        this.classCollection = new kt(['mg-c-button']);
         /**
          * Trigger actions onClick event
          * @param event - click event
@@ -101,7 +100,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
         this.setIconSize = () => {
             var _a, _b;
             if (this.size === 'medium') {
-                (_a = this.element.querySelector('mg-icon')) === null || _a === void 0 ? void 0 : _a.removeAttribute('size');
+                (_a = this.element.querySelector('mg-icon[size]')) === null || _a === void 0 ? void 0 : _a.removeAttribute('size');
             }
             else if (this.isIcon) {
                 (_b = this.element.querySelector('mg-icon')) === null || _b === void 0 ? void 0 : _b.setAttribute('size', this.size);
@@ -116,7 +115,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
                 this.variant = variants[0];
                 return;
             }
-            throw new Error(`<mg-button> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${Ve(newValue)}.`);
+            throw new Error(`<mg-button> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${zt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -128,7 +127,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
     validateSize(newValue, oldValue) {
         // validate new value
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-button> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${Ve(newValue)}.`);
+            throw new Error(`<mg-button> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${zt(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -167,7 +166,13 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
         // emit value update
         this.disabledChange.emit(isDisabled);
     }
-    watchIsIcon() {
+    watchIsIcon(newValue) {
+        if (newValue) {
+            this.classCollection.add(`mg-c-button--icon`);
+            if (!Le(this.label)) {
+                throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
+            }
+        }
         this.setIconSize();
     }
     loadingHandler(newValue) {
@@ -186,13 +191,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
         this.validateVariant(this.variant);
         this.validateFullWidth(this.fullWidth);
         this.validateSize(this.size);
-        this.watchIsIcon();
-        if (this.isIcon) {
-            this.classCollection.add(`mg-c-button--icon`);
-            if (!me(this.label)) {
-                throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
-            }
-        }
+        this.watchIsIcon(this.isIcon);
         // Store the onclick fn
         this.onClickElementFn = this.element.onclick;
         this.disabledHandler(this.disabled);
@@ -201,7 +200,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
      * Add listners
      */
     componentDidLoad() {
-        st(() => {
+        Mt(() => {
             var _a;
             const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
             // submit buttons should trigger form submition;
@@ -218,7 +217,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
      */
     render() {
         var _a;
-        return (h(Host, { key: 'a56efb7c3e49a4aadf6751b10bacb39f20c260df', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '2d47d068d188161b603b26117256d0e828393348', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: 'ba84820c70834f1e345af506265222340659f8ec', icon: "loader", spin: true }), h("div", { key: 'db6c3437d5de7f828cca7df9d83670de9d3a8ed6', class: "mg-c-button__content" }, h("slot", { key: 'b00f76d92e1e2f9e4dd834bf41419c68c2635d1a' })))));
+        return (h(Host, { key: '73d97963f988261cec281f67842d71194513528b', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: 'c8ce88a3d9d67ce40cc9687b4ea192681d826896', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: '5e8949fa49487deda3fdeb1fbb85b62d799e33c6', icon: "loader", spin: true }), h("div", { key: 'fc733614c9fb3e30c30c520e9ca3d8a4efd59efe', class: "mg-c-button__content" }, h("slot", { key: '1c2c5a91c44c8983d317a4f475ffe89fc21a36e5' })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -229,7 +228,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
         "isIcon": ["watchIsIcon"],
         "loading": ["loadingHandler"]
     }; }
-    static get style() { return MgButtonStyle0; }
+    static get style() { return mgButtonCss; }
 }, [1, "mg-button", {
         "variant": [1025],
         "label": [1],
@@ -271,5 +270,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgButton as M, defineCustomElement as d };
+//# sourceMappingURL=mg-button2.js.map
 //# sourceMappingURL=mg-button2.js.map

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

	@@ -1 +1 @@
1	- {"file":"mg-button2.js","mappings":"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","names":["ClassList","toString","isValidString","nextTick"],"sources":["src/components/atoms/mg-button/mg-button.conf.ts","../styles/dist/components/mg-button.css?tag=mg-button&encapsulation=shadow","src/components/atoms/mg-button/mg-button.tsx"],"sourcesContent":["import type { Variant, Size } from '../../../types';\n\n/*\n List of all possibles sizes\n /\nexport const sizes = ['medium', 'large'] as const;\n\n/\n SizeType type from button sizes\n /\nexport type SizeType = Size & (typeof sizes)[number];\n\n/\n List of all possibles variants\n /\nexport const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'] as const;\n\n/\n VariantType type from button variants\n /\nexport type VariantType = Variant & (typeof variants)[number];\n\n/\n List of all possibles button types\n /\nexport const buttonTypes = ['button', 'submit', 'reset'] as const;\n\n/\n ButtonType type from buttonTypes\n /\nexport type ButtonType = (typeof buttonTypes)[number];\n","/!\n * @prop --mg-c-button-border-radius: Defines the border radius of the button. The default value is `--mg-b-size-radius`.\n * @prop --mg-c-button-border-top-width: Defines the top border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-right-width: Defines the right border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-bottom-width: Defines the bottom border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-left-width: Defines the left border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-radius-top-left: Defines the top left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-top-right: Defines the top right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-right: Defines the bottom right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-left: Defines the bottom left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-font-weight: Defines the font weight of the button. Unset by default, fallback on `normal`.\n * @prop --mg-c-button-icon-border-radius: Defines the border radius of the button in icon mode. The default value is `--mg-b-size-min-height`.\n /:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{/!\n * @prop --mg-c-button-color-background-primary: Defines the background color for the primary variant button.\n * @prop --mg-c-button-color-border-primary: Defines the border color for the primary variant button.\n * @prop --mg-c-button-color-gradient-primary: Defines the gradient color for the primary variant button.\n * @prop --mg-c-button-color-text-primary: Defines the font color for the primary variant button.\n /border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{/!\n * @prop --mg-c-button-color-background-secondary: Defines the background color for the secondary variant button.\n * @prop --mg-c-button-color-border-secondary: Defines the border color for the secondary variant button.\n * @prop --mg-c-button-color-gradient-secondary: Defines the gradient color for the secondary variant button.\n * @prop --mg-c-button-color-text-secondary: Defines the font color for the secondary variant button.\n /border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{/!\n * @prop --mg-c-button-color-background-danger: Defines the background color for the danger variant button.\n * @prop --mg-c-button-color-border-danger: Defines the border color for the danger variant button.\n * @prop --mg-c-button-color-gradient-danger: Defines the gradient color for the danger variant button.\n * @prop --mg-c-button-color-text-danger: Defines the font color for the danger variant button.\n /border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{/!\n * @prop --mg-c-button-color-background-info: Defines the background color for the info variant button.\n * @prop --mg-c-button-color-border-info: Defines the border color for the info variant button.\n * @prop --mg-c-button-color-gradient-info: Defines the gradient color for the info variant button.\n * @prop --mg-c-button-color-text-info: Defines the font color for the info variant button.\n /border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{/!\n * @prop --mg-c-button-color-background-success: Defines the background color for the success variant button.\n * @prop --mg-c-button-color-border-success: Defines the border color for the success variant button.\n * @prop --mg-c-button-color-gradient-success: Defines the gradient color for the success variant button.\n * @prop --mg-c-button-color-text-success: Defines the font color for the success variant button.\n /border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{/!\n * @prop --mg-c-button-color-background-warning: Defines the background color for the warning variant button.\n * @prop --mg-c-button-color-border-warning: Defines the border color for the warning variant button.\n * @prop --mg-c-button-color-gradient-warning: Defines the gradient color for the warning variant button.\n * @prop --mg-c-button-color-text-warning: Defines the font color for the warning variant button.\n /border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{/!\n * @prop --mg-c-button-color-background-danger-alt: Defines the background color for the danger-alt variant button.\n * @prop --mg-c-button-color-border-danger-alt: Defines the border color for the danger-alt variant button.\n * @prop --mg-c-button-color-gradient-danger-alt: Defines the gradient color for the danger-alt variant button.\n * @prop --mg-c-button-color-text-danger-alt: Defines the font color for the danger-alt variant button.\n /border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2var(--mg-b-size-border) - var(--mg-b-font-size)var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}/# sourceMappingURL=mg-button.css.map /\n","import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType, SizeType, sizes } from './mg-button.conf';\nimport { ClassList, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\n\n/*\n @slot - Button content\n /\n@Component({\n tag: 'mg-button',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n shadow: true,\n})\nexport class MgButton {\n /**********\n Internal \n *********/\n\n private onClickElementFn = null;\n private readonly classDisabled = 'mg-c-button--disabled';\n private readonly classLoading = 'mg-c-button--loading';\n private readonly classFullWidth = 'mg-c-button--full-width';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgButtonElement;\n\n /\n Define button variant\n /\n @Prop({ mutable: true }) variant: VariantType = variants[0]; // Primary\n @Watch('variant')\n validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n // validate new value\n if (!variants.includes(newValue)) {\n if ((newValue as string) === '') {\n // Reactive framework like VUE render with `\"\"` when prop is update to undefined\n this.variant = variants[0];\n return;\n }\n throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${newValue}`);\n }\n }\n\n /\n aria-label\n * In case button text is not explicit enough\n /\n @Prop() label?: string;\n\n /\n Define button type\n /\n @Prop() type?: ButtonType;\n\n /\n Define button size\n /\n @Prop() size: SizeType = sizes[0]; // medium\n @Watch('size')\n validateSize(newValue: MgButton['size'], oldValue?: MgButton['size']): void {\n // validate new value\n if (!sizes.includes(newValue)) {\n throw new Error(`<mg-button> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${newValue}`);\n this.setIconSize();\n }\n }\n\n /\n Set button to full-width\n /\n @Prop() fullWidth = false;\n @Watch('fullWidth')\n validateFullWidth(newValue: MgButton['fullWidth']): void {\n if (newValue && this.isIcon) {\n throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n } else if (newValue) {\n this.classCollection.add(this.classFullWidth);\n } else {\n this.classCollection.delete(this.classFullWidth);\n }\n }\n\n /\n Define form id to attach button with.\n * If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n /\n @Prop() form?: string;\n\n /\n Disable button\n /\n @Prop({ mutable: true }) disabled?: boolean;\n @Watch('disabled')\n disabledHandler(isDisabled: MgButton['disabled']): void {\n // Remove loading when enable\n // Will be set back onclick\n if (!isDisabled && this.disableOnClick) {\n this.loading = false;\n }\n // Manage if onclick\n this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n // apply style\n if (isDisabled) {\n this.classCollection.add(this.classDisabled);\n } else {\n this.classCollection.delete(this.classDisabled);\n }\n\n // emit value update\n this.disabledChange.emit(isDisabled);\n }\n /\n Define if button is round.\n * Used for icon button.\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n watchIsIcon(): void {\n this.setIconSize();\n }\n\n /\n Option to set input disable on click, in order to prevent multi-click.\n * Parent component have to remove the attribute 'disabled' when the process ends.\n /\n @Prop() disableOnClick = false;\n\n /\n Define if button is loading, default to false.\n * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n * It's required to reset to false when action/promise in parent is done to stop the loading state\n /\n @State() loading = false;\n @Watch('loading')\n loadingHandler(newValue: MgButton['loading']): void {\n // we add loading style if it newvalue is true else we remove it\n if (newValue) {\n this.classCollection.add(this.classLoading);\n } else {\n this.classCollection.delete(this.classLoading);\n }\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n /\n Emmited event when disabled change\n /\n @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n /\n Trigger actions onClick event\n * @param event - click event\n /\n private handleClick = (event: MouseEvent): void => {\n if (this.disabled) event.stopPropagation();\n // Used to prevent multi-click.\n else if (this.disableOnClick) {\n this.loading = true;\n this.disabled = true;\n }\n };\n\n /\n Handle onKeydown event\n * @param event - keyboard event\n /\n private handleKeydown = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Handle onKeyup event\n * @param event - keyboard event\n /\n private handleKeyup = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Set child `<mg-icon>` element `size` prop to follow the current `size` prop\n /\n private setIconSize = (): void => {\n if (this.size === 'medium') {\n this.element.querySelector('mg-icon')?.removeAttribute('size');\n } else if (this.isIcon) {\n this.element.querySelector('mg-icon')?.setAttribute('size', this.size);\n }\n };\n\n /\n Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateFullWidth(this.fullWidth);\n this.validateSize(this.size);\n this.watchIsIcon();\n if (this.isIcon) {\n this.classCollection.add(`mg-c-button--icon`);\n if (!isValidString(this.label)) {\n throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n }\n }\n // Store the onclick fn\n this.onClickElementFn = this.element.onclick;\n this.disabledHandler(this.disabled);\n }\n\n /\n Add listners\n /\n componentDidLoad(): void {\n nextTick(() => {\n const closestForm = this.element.closest('form') \|\| this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n // submit buttons should trigger form submition;\n if (closestForm && ['submit', undefined].includes(this.type)) {\n this.element.addEventListener('click', () => {\n closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n });\n }\n });\n }\n\n /\n Render component\n * @returns html element\n */\n render(): HTMLElement {\n return (\n <Host\n role=\"button\"\n tabIndex={0}\n type={this.type}\n form={this.form}\n full-width={this.fullWidth}\n aria-label={this.label}\n aria-disabled={this.disabled?.toString()}\n onClick={this.handleClick}\n onKeyup={this.handleKeyup}\n onKeydown={this.handleKeydown}\n >\n <div class={this.classCollection.join()}>\n {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n <div class=\"mg-c-button__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-button2.js","mappings":";;;;AAEA;;AAEG;AACI,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAOjD;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAU;;ACfpH,MAAM,WAAW,GAAG,26VAA26V;;MCYl7V,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAA,WAAA,CAAA;AALrB,IAAA,WAAA,GAAA;;;;;AAME;;AAEc;AAEN,QAAA,IAAgB,CAAA,gBAAA,GAAG,IAAI;AACd,QAAA,IAAa,CAAA,aAAA,GAAG,uBAAuB;AACvC,QAAA,IAAY,CAAA,YAAA,GAAG,sBAAsB;AACrC,QAAA,IAAc,CAAA,cAAA,GAAG,yBAAyB;AAW3D;;AAEG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAgB,SAAS;AA8BzD;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAa,QAAQ;AAejC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AA0CzB;;;AAGG;AACK,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAYtB;;;AAGG;AACK,QAAA,IAAc,CAAA,cAAA,GAAG,KAAK;AAE9B;;;;AAIG;AACM,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAWxB;;AAEG;QACM,IAAe,CAAA,eAAA,GAAc,IAAIC,EAAS,CAAC,CAAC,aAAa,CAAC,CAAC;AAOpE;;;AAGG;AACK,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAU;YAChD,IAAI,IAAI,CAAC,QAAQ;gBAAE,KAAK,CAAC,eAAe,EAAE;;AAErC,iBAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AAC5B,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;;AAExB,SAAC;AAED;;;AAGG;AACK,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAU;YACrD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBACvC,KAAK,CAAC,cAAc,EAAE;;iBACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAClF,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;;AAE1E,SAAC;AAED;;;AAGG;AACK,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAoB,KAAU;YACnD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBACvC,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;;AAE1E,SAAC;AAED;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,MAAW;;AAC/B,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;AAC1B,gBAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,eAAe,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,eAAe,CAAC,MAAM,CAAC;;AAC/D,iBAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACtB,gBAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;;AAE1E,SAAC;AA0DF;IAnPC,eAAe,CAAC,QAAqB,EAAE,QAAsB,EAAA;;QAE3D,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;AAChC,YAAA,IAAK,QAAmB,KAAK,EAAE,EAAE;;AAE/B,gBAAA,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC;gBAC1B;;AAEF,YAAA,MAAM,IAAI,KAAK,CAAC,CAA8C,2CAAA,EAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmBC,EAAQ,CAAC,QAAQ,CAAC,CAAA,CAAA,CAAG,CAAC;;aACrH;AACL,YAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;gBAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAgB,aAAA,EAAA,QAAQ,CAAE,CAAA,CAAC;;YAEzD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAgB,aAAA,EAAA,QAAQ,CAAE,CAAA,CAAC;;;IAoBxD,YAAY,CAAC,QAA0B,EAAE,QAA2B,EAAA;;QAElE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;AAC7B,YAAA,MAAM,IAAI,KAAK,CAAC,CAA2C,wCAAA,EAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmBA,EAAQ,CAAC,QAAQ,CAAC,CAAA,CAAA,CAAG,CAAC;;aAC/G;AACL,YAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;gBAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAgB,aAAA,EAAA,QAAQ,CAAE,CAAA,CAAC;;YAEzD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAgB,aAAA,EAAA,QAAQ,CAAE,CAAA,CAAC;YACpD,IAAI,CAAC,WAAW,EAAE;;;AAStB,IAAA,iBAAiB,CAAC,QAA+B,EAAA;AAC/C,QAAA,IAAI,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE;AAC3B,YAAA,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC;;aAC7E,IAAI,QAAQ,EAAE;YACnB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;;aACxC;YACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC;;;AAepD,IAAA,eAAe,CAAC,UAAgC,EAAA;;;AAG9C,QAAA,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,cAAc,EAAE;AACtC,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;;AAGtB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC,gBAAgB;;QAGrE,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;;aACvC;YACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;;;AAIjD,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC;;AAQtC,IAAA,WAAW,CAAC,QAAiB,EAAA;QAC3B,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA,iBAAA,CAAmB,CAAC;YAC7C,IAAI,CAACC,EAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AAC9B,gBAAA,MAAM,IAAI,KAAK,CAAC,CAAA,wEAAA,CAA0E,CAAC;;;QAG/F,IAAI,CAAC,WAAW,EAAE;;AAgBpB,IAAA,cAAc,CAAC,QAA6B,EAAA;;QAE1C,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;;aACtC;YACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;;;AA8DlD;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC;AAClC,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC;AACtC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;AAC5B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC;;QAG7B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO;AAC5C,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAGrC;;AAEG;IACH,gBAAgB,GAAA;QACdC,EAAQ,CAAC,MAAK;;YACZ,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,KAAI,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;;AAErH,YAAA,IAAI,WAAW,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;gBAC5D,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAK;AAC1C,oBAAA,WAAW,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC3F,iBAAC,CAAC;;AAEN,SAAC,CAAC;;AAGJ;;;AAGG;IACH,MAAM,GAAA;;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,YAAA,EACH,IAAI,CAAC,SAAS,EAAA,YAAA,EACd,IAAI,CAAC,KAAK,EACP,eAAA,EAAA,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,EACxC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAAA,EAE7B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAA,EACpC,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAW,IAAA,EAAA,CAAA,EACvD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","ClassList","toString","isValidString","nextTick"],"sources":["src/components/atoms/mg-button/mg-button.conf.ts","../styles/dist/components/mg-button.css?tag=mg-button&encapsulation=shadow","src/components/atoms/mg-button/mg-button.tsx"],"sourcesContent":["import type { Variant, Size } from '../../../types';\n\n/*\n List of all possibles sizes\n /\nexport const sizes = ['medium', 'large'] as const;\n\n/\n SizeType type from button sizes\n /\nexport type SizeType = Size & (typeof sizes)[number];\n\n/\n List of all possibles variants\n /\nexport const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'] as const;\n\n/\n VariantType type from button variants\n /\nexport type VariantType = Variant & (typeof variants)[number];\n\n/\n List of all possibles button types\n /\nexport const buttonTypes = ['button', 'submit', 'reset'] as const;\n\n/\n ButtonType type from buttonTypes\n /\nexport type ButtonType = (typeof buttonTypes)[number];\n","/!\n * @prop --mg-c-button-border-radius: Defines the border radius of the button. The default value is `--mg-b-size-radius`.\n * @prop --mg-c-button-border-top-width: Defines the top border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-right-width: Defines the right border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-bottom-width: Defines the bottom border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-left-width: Defines the left border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-radius-top-left: Defines the top left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-top-right: Defines the top right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-right: Defines the bottom right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-left: Defines the bottom left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-font-weight: Defines the font weight of the button. Unset by default, fallback on `normal`.\n * @prop --mg-c-button-icon-border-radius: Defines the border radius of the button in icon mode. The default value is `--mg-b-size-min-height`.\n /:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{/!\n * @prop --mg-c-button-color-background-primary: Defines the background color for the primary variant button.\n * @prop --mg-c-button-color-border-primary: Defines the border color for the primary variant button.\n * @prop --mg-c-button-color-gradient-primary: Defines the gradient color for the primary variant button.\n * @prop --mg-c-button-color-text-primary: Defines the font color for the primary variant button.\n /border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{/!\n * @prop --mg-c-button-color-background-secondary: Defines the background color for the secondary variant button.\n * @prop --mg-c-button-color-border-secondary: Defines the border color for the secondary variant button.\n * @prop --mg-c-button-color-gradient-secondary: Defines the gradient color for the secondary variant button.\n * @prop --mg-c-button-color-text-secondary: Defines the font color for the secondary variant button.\n /border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{/!\n * @prop --mg-c-button-color-background-danger: Defines the background color for the danger variant button.\n * @prop --mg-c-button-color-border-danger: Defines the border color for the danger variant button.\n * @prop --mg-c-button-color-gradient-danger: Defines the gradient color for the danger variant button.\n * @prop --mg-c-button-color-text-danger: Defines the font color for the danger variant button.\n /border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{/!\n * @prop --mg-c-button-color-background-info: Defines the background color for the info variant button.\n * @prop --mg-c-button-color-border-info: Defines the border color for the info variant button.\n * @prop --mg-c-button-color-gradient-info: Defines the gradient color for the info variant button.\n * @prop --mg-c-button-color-text-info: Defines the font color for the info variant button.\n /border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{/!\n * @prop --mg-c-button-color-background-success: Defines the background color for the success variant button.\n * @prop --mg-c-button-color-border-success: Defines the border color for the success variant button.\n * @prop --mg-c-button-color-gradient-success: Defines the gradient color for the success variant button.\n * @prop --mg-c-button-color-text-success: Defines the font color for the success variant button.\n /border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{/!\n * @prop --mg-c-button-color-background-warning: Defines the background color for the warning variant button.\n * @prop --mg-c-button-color-border-warning: Defines the border color for the warning variant button.\n * @prop --mg-c-button-color-gradient-warning: Defines the gradient color for the warning variant button.\n * @prop --mg-c-button-color-text-warning: Defines the font color for the warning variant button.\n /border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{/!\n * @prop --mg-c-button-color-background-danger-alt: Defines the background color for the danger-alt variant button.\n * @prop --mg-c-button-color-border-danger-alt: Defines the border color for the danger-alt variant button.\n * @prop --mg-c-button-color-gradient-danger-alt: Defines the gradient color for the danger-alt variant button.\n * @prop --mg-c-button-color-text-danger-alt: Defines the font color for the danger-alt variant button.\n /border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2var(--mg-b-size-border) - var(--mg-b-font-size)var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}/# sourceMappingURL=mg-button.css.map /\n","import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType, SizeType, sizes } from './mg-button.conf';\nimport { ClassList, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\n\n/*\n @slot - Button content\n /\n@Component({\n tag: 'mg-button',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n shadow: true,\n})\nexport class MgButton {\n /**********\n Internal \n *********/\n\n private onClickElementFn = null;\n private readonly classDisabled = 'mg-c-button--disabled';\n private readonly classLoading = 'mg-c-button--loading';\n private readonly classFullWidth = 'mg-c-button--full-width';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgButtonElement;\n\n /\n Define button variant\n /\n @Prop({ mutable: true }) variant: VariantType = 'primary';\n @Watch('variant')\n validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n // validate new value\n if (!variants.includes(newValue)) {\n if ((newValue as string) === '') {\n // Reactive framework like VUE render with `\"\"` when prop is update to undefined\n this.variant = variants[0];\n return;\n }\n throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${newValue}`);\n }\n }\n\n /\n aria-label\n * In case button text is not explicit enough\n /\n @Prop() label?: string;\n\n /\n Define button type\n /\n @Prop() type?: ButtonType;\n\n /\n Define button size\n /\n @Prop() size: SizeType = 'medium';\n @Watch('size')\n validateSize(newValue: MgButton['size'], oldValue?: MgButton['size']): void {\n // validate new value\n if (!sizes.includes(newValue)) {\n throw new Error(`<mg-button> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${newValue}`);\n this.setIconSize();\n }\n }\n\n /\n Set button to full-width\n /\n @Prop() fullWidth = false;\n @Watch('fullWidth')\n validateFullWidth(newValue: MgButton['fullWidth']): void {\n if (newValue && this.isIcon) {\n throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n } else if (newValue) {\n this.classCollection.add(this.classFullWidth);\n } else {\n this.classCollection.delete(this.classFullWidth);\n }\n }\n\n /\n Define form id to attach button with.\n * If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n /\n @Prop() form?: string;\n\n /\n Disable button\n /\n @Prop({ mutable: true }) disabled?: boolean;\n @Watch('disabled')\n disabledHandler(isDisabled: MgButton['disabled']): void {\n // Remove loading when enable\n // Will be set back onclick\n if (!isDisabled && this.disableOnClick) {\n this.loading = false;\n }\n // Manage if onclick\n this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n // apply style\n if (isDisabled) {\n this.classCollection.add(this.classDisabled);\n } else {\n this.classCollection.delete(this.classDisabled);\n }\n\n // emit value update\n this.disabledChange.emit(isDisabled);\n }\n /\n Define if button is round.\n * Used for icon button.\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n watchIsIcon(newValue: boolean): void {\n if (newValue) {\n this.classCollection.add(`mg-c-button--icon`);\n if (!isValidString(this.label)) {\n throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n }\n }\n this.setIconSize();\n }\n\n /\n Option to set input disable on click, in order to prevent multi-click.\n * Parent component have to remove the attribute 'disabled' when the process ends.\n /\n @Prop() disableOnClick = false;\n\n /\n Define if button is loading, default to false.\n * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n * It's required to reset to false when action/promise in parent is done to stop the loading state\n /\n @State() loading = false;\n @Watch('loading')\n loadingHandler(newValue: MgButton['loading']): void {\n // we add loading style if it newvalue is true else we remove it\n if (newValue) {\n this.classCollection.add(this.classLoading);\n } else {\n this.classCollection.delete(this.classLoading);\n }\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n /\n Emmited event when disabled change\n /\n @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n /\n Trigger actions onClick event\n * @param event - click event\n /\n private handleClick = (event: MouseEvent): void => {\n if (this.disabled) event.stopPropagation();\n // Used to prevent multi-click.\n else if (this.disableOnClick) {\n this.loading = true;\n this.disabled = true;\n }\n };\n\n /\n Handle onKeydown event\n * @param event - keyboard event\n /\n private handleKeydown = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Handle onKeyup event\n * @param event - keyboard event\n /\n private handleKeyup = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Set child `<mg-icon>` element `size` prop to follow the current `size` prop\n /\n private setIconSize = (): void => {\n if (this.size === 'medium') {\n this.element.querySelector('mg-icon[size]')?.removeAttribute('size');\n } else if (this.isIcon) {\n this.element.querySelector('mg-icon')?.setAttribute('size', this.size);\n }\n };\n\n /\n Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateFullWidth(this.fullWidth);\n this.validateSize(this.size);\n this.watchIsIcon(this.isIcon);\n\n // Store the onclick fn\n this.onClickElementFn = this.element.onclick;\n this.disabledHandler(this.disabled);\n }\n\n /\n Add listners\n /\n componentDidLoad(): void {\n nextTick(() => {\n const closestForm = this.element.closest('form') \|\| this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n // submit buttons should trigger form submition;\n if (closestForm && ['submit', undefined].includes(this.type)) {\n this.element.addEventListener('click', () => {\n closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n });\n }\n });\n }\n\n /\n Render component\n * @returns html element\n */\n render(): HTMLElement {\n return (\n <Host\n role=\"button\"\n tabIndex={0}\n type={this.type}\n form={this.form}\n full-width={this.fullWidth}\n aria-label={this.label}\n aria-disabled={this.disabled?.toString()}\n onClick={this.handleClick}\n onKeyup={this.handleKeyup}\n onKeydown={this.handleKeydown}\n >\n <div class={this.classCollection.join()}>\n {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n <div class=\"mg-c-button__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

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

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::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 MgCardStyle0 = mgCardCss;
 const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement {
     constructor() {
@@ -19,7 +18,7 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement
     render() {
         return (h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
     }
-    static get style() { return MgCardStyle0; }
+    static get style() { return mgCardCss; }
 }, [1, "mg-card"]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -37,5 +36,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgCard as M, defineCustomElement as d };
+//# sourceMappingURL=mg-card2.js.map
 //# sourceMappingURL=mg-card2.js.map

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

	@@ -1 +1 @@
1	- {"file":"mg-card2.js","mappings":";;AAAA,MAAM,SAAS,GAAG,k2FAAk2F,~~CAAC;AACr3F~~,~~qBAAe~~,~~SAAS~~;;~~MCSX~~,MAAM~~;;;;;;;;;;;;;IASjB~~,~~MAAM~~;QACJ,QACE,~~4DAAK~~,KAAK,EAAC,WAAW,~~IACpB~~,~~8DAAa~~,CACT~~,EACN;KACH;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["../styles/dist/components/mg-card.css?tag=mg-card&encapsulation=shadow","src/components/atoms/mg-card/mg-card.tsx"],"sourcesContent":["/!\n @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n /.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::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-card.css.map /\n","import { Component, h } from '@stencil/core';\n\n/*\n @slot - Card content\n /\n@Component({\n tag: 'mg-card',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-card.css',\n shadow: true,\n})\nexport class MgCard {\n /***********\n Lifecycle \n **********/\n\n /\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class=\"mg-c-card\">\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-card2.js","mappings":";;AAAA,MAAM,SAAS,GAAG,k2FAAk2F;;MCUv2F,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;;;;;;AACjB;;AAEe;AAEf;;;AAGG;IACH,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["../styles/dist/components/mg-card.css?tag=mg-card&encapsulation=shadow","src/components/atoms/mg-card/mg-card.tsx"],"sourcesContent":["/!\n @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n /.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::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-card.css.map /\n","import { Component, h } from '@stencil/core';\n\n/*\n @slot - Card content\n /\n@Component({\n tag: 'mg-card',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-card.css',\n shadow: true,\n})\nexport class MgCard {\n /***********\n Lifecycle \n **********/\n\n /\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class=\"mg-c-card\">\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-character-left.js CHANGED Viewed

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

package/dist/components/mg-character-left2.js CHANGED Viewed

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { i as initLocales } from './index2.js';
-import { X as Xe, V as Ve } from './index.es.js';
+import { O as Ot, z as zt } from './index.es.js';
 const mgCharacterLeftCss = ".mg-u-visually-hidden.sc-mg-character-left{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*.sc-mg-character-left:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*.sc-mg-character-left{animation:none !important;transition:none !important}}mg-character-left.sc-mg-character-left{display:block}";
-const MgCharacterLeftStyle0 = mgCharacterLeftCss;
 const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft extends HTMLElement {
     constructor() {
@@ -15,13 +14,13 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft e
         this.characters = '';
     }
     watchIdentifier(newValue) {
-        if (newValue !== undefined && !Xe(newValue)) {
-            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${Ve(newValue)}.`);
+        if (newValue !== undefined && !Ot(newValue)) {
+            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${zt(newValue)}.`);
         }
     }
     validateMaxlength(newValue) {
         if (typeof newValue !== 'number') {
-            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${Ve(newValue)}.`);
+            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${zt(newValue)}.`);
         }
     }
     /*************
@@ -47,7 +46,7 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft e
         "identifier": ["watchIdentifier"],
         "maxlength": ["validateMaxlength"]
     }; }
-    static get style() { return MgCharacterLeftStyle0; }
+    static get style() { return mgCharacterLeftCss; }
 }, [2, "mg-character-left", {
         "identifier": [1],
         "characters": [1],
@@ -72,5 +71,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgCharacterLeft as M, defineCustomElement as d };
+//# sourceMappingURL=mg-character-left2.js.map
 //# sourceMappingURL=mg-character-left2.js.map

package/dist/components/mg-character-left2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-character-left2.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,0iBAA0iB,~~CAAC~~;~~AACtkB~~,~~8BAAe~~,~~kBAAkB~~;;~~MCWpB,eAAe~~;~~IAL5B;;;;;;QAoCU~~,~~eAAU~~,GAAG,EAAE~~,CAAC~~;~~KAwCzB~~;~~IAjDC~~,eAAe,CAAC,QAAuC;QACrD,IAAI,QAAQ,KAAK,SAAS,IAAI,~~CAACA~~,EAAU,CAAC,QAAQ,CAAC,EAAE;YACnD,OAAO,CAAC,KAAK,CAAC,~~yEAAyEC~~,EAAQ,CAAC,QAAQ,CAAC,~~GAAG~~,~~CAAC~~,CAAC~~;SAC/G;KACF;IAYD~~,iBAAiB,CAAC,QAAgB;~~QAChC~~,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,MAAM,IAAI,KAAK,CAAC,~~wFAAwFA~~,EAAQ,CAAC,QAAQ,CAAC,~~GAAG~~,~~CAAC~~,CAAC;~~SAChI~~;~~KACF;;;;;;;IASD~~,iBAAiB;~~QACf~~,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC~~,CAAC~~;~~QACtC~~,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC~~,CAAC~~;~~QACvC~~,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ~~,CAAC~~;~~KACpD;;;;;IAMD~~,MAAM;~~QACJ~~,QACE,6DAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ,~~IAC3C~~,~~4EAAkB~~,MAAM,~~IACrB~~,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,OAAG,IAAI,CAAC,SAAS,CACpD,EACP,~~6DAAM~~,KAAK,EAAC,sBAAsB,~~IAAE~~,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAC7H~~,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["isValideID","toString"],"sources":["../styles/dist/components/mg-character-left.css?tag=mg-character-left&encapsulation=scoped","src/components/atoms/internals/mg-character-left/mg-character-left.tsx"],"sourcesContent":[".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}mg-character-left{display:block}/# sourceMappingURL=mg-character-left.css.map /\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../../locales';\nimport { isValideID, toString } from '@mgdis/stencil-helpers';\n\n/*\n @internal\n /\n@Component({\n tag: 'mg-character-left',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css',\n scoped: true,\n})\nexport class MgCharacterLeft {\n /**********\n Internal \n *********/\n\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgCharacterLeftElement;\n\n /\n Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n /\n @Prop() identifier?: string;\n @Watch('identifier')\n watchIdentifier(newValue: MgCharacterLeft['identifier']): void {\n if (newValue !== undefined && !isValideID(newValue)) {\n console.error(`<mg-character-left> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Sets the characters to count\n /\n @Prop() characters = '';\n\n /\n Add maximum length\n /\n @Prop() maxlength!: number;\n @Watch('maxlength')\n validateMaxlength(newValue: number): void {\n if (typeof newValue !== 'number') {\n throw new Error(`<mg-character-left> prop \"maxlength\" is required and must be a number. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.watchIdentifier(this.identifier);\n this.validateMaxlength(this.maxlength);\n this.messages = initLocales(this.element).messages;\n }\n\n /\n Render component\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span id={this.identifier} aria-live=\"polite\">\n <span aria-hidden=\"true\">\n {this.maxlength - this.characters.length}/{this.maxlength}\n </span>\n <span class=\"mg-u-visually-hidden\">{this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length)}</span>\n </span>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-character-left2.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,0iBAA0iB;;MCYxjB,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAA,WAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;AAiCE;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAG,EAAE;AAwCxB;AAjDC,IAAA,eAAe,CAAC,QAAuC,EAAA;QACrD,IAAI,QAAQ,KAAK,SAAS,IAAI,CAACC,EAAU,CAAC,QAAQ,CAAC,EAAE;YACnD,OAAO,CAAC,KAAK,CAAC,CAAyE,sEAAA,EAAAC,EAAQ,CAAC,QAAQ,CAAC,CAAG,CAAA,CAAA,CAAC;;;AAcjH,IAAA,iBAAiB,CAAC,QAAgB,EAAA;AAChC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,MAAM,IAAI,KAAK,CAAC,CAAwF,qFAAA,EAAAA,EAAQ,CAAC,QAAQ,CAAC,CAAG,CAAA,CAAA,CAAC;;;AAIlI;;AAEe;AAEf;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC;AACrC,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC;QACtC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ;;AAGpD;;;AAGG;IACH,MAAM,GAAA;AACJ,QAAA,QACE,6DAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ,EAAA,EAC3C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAkB,MAAM,EAAA,EACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,OAAG,IAAI,CAAC,SAAS,CACpD,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAE,EAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAC7H;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","isValideID","toString"],"sources":["../styles/dist/components/mg-character-left.css?tag=mg-character-left&encapsulation=scoped","src/components/atoms/internals/mg-character-left/mg-character-left.tsx"],"sourcesContent":[".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}mg-character-left{display:block}/# sourceMappingURL=mg-character-left.css.map /\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../../locales';\nimport { isValideID, toString } from '@mgdis/stencil-helpers';\n\n/*\n @internal\n /\n@Component({\n tag: 'mg-character-left',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css',\n scoped: true,\n})\nexport class MgCharacterLeft {\n /**********\n Internal \n *********/\n\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgCharacterLeftElement;\n\n /\n Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n /\n @Prop() identifier?: string;\n @Watch('identifier')\n watchIdentifier(newValue: MgCharacterLeft['identifier']): void {\n if (newValue !== undefined && !isValideID(newValue)) {\n console.error(`<mg-character-left> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Sets the characters to count\n /\n @Prop() characters = '';\n\n /\n Add maximum length\n /\n @Prop() maxlength!: number;\n @Watch('maxlength')\n validateMaxlength(newValue: number): void {\n if (typeof newValue !== 'number') {\n throw new Error(`<mg-character-left> prop \"maxlength\" is required and must be a number. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.watchIdentifier(this.identifier);\n this.validateMaxlength(this.maxlength);\n this.messages = initLocales(this.element).messages;\n }\n\n /\n Render component\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span id={this.identifier} aria-live=\"polite\">\n <span aria-hidden=\"true\">\n {this.maxlength - this.characters.length}/{this.maxlength}\n </span>\n <span class=\"mg-u-visually-hidden\">{this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length)}</span>\n </span>\n );\n }\n}\n"],"version":3}

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

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { m as me } from './index.es.js';
+import { L as Le } from './index.es.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 const mgDetailsCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}";
-const MgDetailsStyle0 = mgDetailsCss;
 const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
     constructor() {
@@ -27,7 +26,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
         };
     }
     validateTitles(newValue) {
-        if (!me(newValue)) {
+        if (!Le(newValue)) {
             throw new Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`);
         }
     }
@@ -44,8 +43,9 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
         this.validateTitles(this.toggleClosed);
         this.validateTitles(this.toggleOpened);
         this.element.addEventListener('click', (event) => {
-            if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]'))
+            if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
                 event.preventDefault();
+            }
         });
     }
     /**
@@ -53,7 +53,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: '941fc56c10cd54a7975dc9b8adf5b7e24dfe89ce', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '8e0a1107069245a5920d28dced132ab73b25dcf1' }, h("slot", { key: '9530891ab1e8e60a1725aa146146bbd846bb7869', name: "summary" }), h("span", { key: '60163fa52f9c96bc15d60a016a2f17c3327f2b2f', class: "mg-c-details__toggle" }, h("mg-icon", { key: '69c033059e73b5ab336dfe5aeac122b78c65adbf', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '341d8915d9327cf811c21e4021446ff77b471029', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '6681fe531a0076a8c016b55c6223492ac5613da4', class: "mg-c-details__details" }, h("slot", { key: 'a09d6f88af12ee0756c9f86d0adcbf01903461c5', name: "details" }))));
+        return (h("details", { key: '3f773b6c0d10c12049d62a9bbe3b24ce95329077', class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: 'c6378c290a253098a26e832dbc43c58182e1d90c' }, h("slot", { key: '033334926172ca422a1346085cfe5fb1adf33e9b', name: "summary" }), h("span", { key: '105cd284d2cf7363cd0ea85279c057471f2113c9', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'c17df4c2813a346a4ced9be2f872dcdc688baa2e', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '5dc2078f2ba8808dbad0b75f2857173d2bd8d3e5', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'bf9883ad6dbf0c1014ad6559cb5d08b157d80d9b', class: "mg-c-details__details" }, h("slot", { key: '244092eb1aceb39143e53b63faf36ab2a5c4c205', name: "details" }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -61,7 +61,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
         "toggleOpened": ["validateTitles"],
         "expanded": ["handleExpanded"]
     }; }
-    static get style() { return MgDetailsStyle0; }
+    static get style() { return mgDetailsCss; }
 }, [1, "mg-details", {
         "toggleClosed": [1, "toggle-closed"],
         "toggleOpened": [1, "toggle-opened"],
@@ -96,5 +96,6 @@ const MgDetails = MgDetails$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgDetails, defineCustomElement };
+//# sourceMappingURL=mg-details.js.map
 //# sourceMappingURL=mg-details.js.map

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

	@@ -1 +1 @@
1	- {"file":"mg-details.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,22CAA22C,~~CAAC~~;~~AACj4C~~,~~wBAAe~~,~~YAAY~~;;~~MCWdA,WAAS~~;~~IALtB;;;;;;;;QA4CU~~,~~gBAAW~~,GAAG,KAAK,~~CAAC;;;;QAKH~~,~~aAAQ~~,GAAG,KAAK,~~CAAC;;;;QAclC~~,~~iBAAY~~,GAAG;~~YACrB~~,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI~~,CAAC~~;~~SACnC~~,~~CAAC~~;~~KAqCH~~;~~IArEC~~,cAAc,CAAC,QAAgB;~~QAC7B~~,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC,EAAE;~~YAC5B~~,MAAM,IAAI,KAAK,CACb,~~4HAA4H~~,IAAI,CAAC,YAAY,~~yBAAyB~~,IAAI,CAAC,YAAY,~~KAAK~~,CAC7L,~~CAAC;SACH;KACF;IAYD~~,cAAc,CAAC,QAAiB;~~QAC9B~~,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC~~,CAAC~~;~~KACpC;;;;;;;IAqBD~~,iBAAiB;~~QACf~~,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC~~,CAAC~~;~~QACvC~~,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC~~,CAAC~~;~~QACvC~~,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAA2C;~~YACjF~~,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,uDAAuD,CAAC;~~gBAAE~~,KAAK,CAAC,cAAc,EAAE,~~CAAC;SAC3G~~,CAAC~~,CAAC~~;~~KACJ;;;;;IAMD~~,MAAM;~~QACJ~~,QACE,~~gEAAS~~,KAAK,EAAC,cAAc,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,~~IAClI~~,~~kEACE~~,~~6DAAM~~,IAAI,EAAC,SAAS,~~GAAQ~~,EAC5B,~~6DAAM~~,KAAK,EAAC,sBAAsB,~~IAChC~~,~~gEAAS~~,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,~~GAAY~~,EACzI,~~6DAAM~~,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,~~IAAG~~,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAQ,CACpH,CACC,EACV,~~4DAAK~~,KAAK,EAAC,uBAAuB,~~IAChC~~,~~6DAAM~~,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE~~,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["MgDetails","isValidString"],"sources":["../styles/dist/components/mg-details.css?tag=mg-details&encapsulation=shadow","src/components/molecules/mg-details/mg-details.tsx"],"sourcesContent":[".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}/!\n @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n /.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media(width < 43.75rem){.mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}/# sourceMappingURL=mg-details.css.map /\n","import { Component, Event, EventEmitter, h, Prop, Watch, Element } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/*\n @slot summary - Summary content\n * @slot details - Details content\n /\n@Component({\n tag: 'mg-details',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-details.css',\n shadow: true,\n})\nexport class MgDetails {\n /**********\n Internal \n *********/\n\n // HTML selector\n private details: HTMLDetailsElement;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgDetailsElement;\n\n /\n Displayed title when details are closed\n /\n @Prop() toggleClosed!: string;\n\n /\n Displayed title when details are opened\n /\n @Prop() toggleOpened!: string;\n @Watch('toggleClosed')\n @Watch('toggleOpened')\n validateTitles(newValue: string): void {\n if (!isValidString(newValue)) {\n throw new Error(\n `<mg-details> prop \"toggleClosed\" and \"toggleOpened\" is required and must be a valid string. Passed value: \"toggleClosed='${this.toggleClosed}'\" and \"toggleOpened='${this.toggleOpened}'\".`,\n );\n }\n }\n\n /\n Hide summary element\n /\n @Prop() hideSummary = false;\n\n /\n Define if details are diplayed\n /\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: boolean): void {\n this.expandedChange.emit(newValue);\n }\n\n /\n Emmited event when expanded change\n /\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgDetailsElement['expanded']>;\n\n /\n Handle details toggle\n /\n private handleToggle = (): void => {\n this.expanded = this.details.open;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n this.validateTitles(this.toggleClosed);\n this.validateTitles(this.toggleOpened);\n this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }) => {\n if (event.target.closest('[slot=\"summary\"] mg-button, mg-button[slot=\"summary\"]')) event.preventDefault();\n });\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <details class=\"mg-c-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n <summary>\n <slot name=\"summary\"></slot>\n <span class=\"mg-c-details__toggle\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n <span class={{ 'mg-u-visually-hidden': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n </span>\n </summary>\n <div class=\"mg-c-details__details\">\n <slot name=\"details\"></slot>\n </div>\n </details>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-details.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,22CAA22C;;MCYn3CA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;;AAyCE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAE3B;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAWzC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAG,MAAW;YAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI;AACnC,SAAC;AAuCF;AAvEC,IAAA,cAAc,CAAC,QAAgB,EAAA;AAC7B,QAAA,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC,EAAE;AAC5B,YAAA,MAAM,IAAI,KAAK,CACb,CAAA,yHAAA,EAA4H,IAAI,CAAC,YAAY,CAAA,sBAAA,EAAyB,IAAI,CAAC,YAAY,CAAA,GAAA,CAAK,CAC7L;;;AAcL,IAAA,cAAc,CAAC,QAAiB,EAAA;AAC9B,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAepC;;AAEe;AAEf;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC;AACtC,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC;QACtC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAA2C,KAAI;YACrF,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,uDAAuD,CAAC,KAAK,IAAI,EAAE;gBAC1F,KAAK,CAAC,cAAc,EAAE;;AAE1B,SAAC,CAAC;;AAGJ;;;AAGG;IACH,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,cAAc,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAAA,EAClI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAQ,CAAA,EAC5B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAChC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAY,CAAA,EACzI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,EAAG,EAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAQ,CACpH,CACC,EACV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails","__stencil_proxyCustomElement","isValidString"],"sources":["../styles/dist/components/mg-details.css?tag=mg-details&encapsulation=shadow","src/components/molecules/mg-details/mg-details.tsx"],"sourcesContent":[".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}/!\n @prop --mg-c-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n /.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media(width < 43.75rem){.mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}}/# sourceMappingURL=mg-details.css.map /\n","import { Component, Event, EventEmitter, h, Prop, Watch, Element } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/*\n @slot summary - Summary content\n * @slot details - Details content\n /\n@Component({\n tag: 'mg-details',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-details.css',\n shadow: true,\n})\nexport class MgDetails {\n /**********\n Internal \n *********/\n\n // HTML selector\n private details: HTMLDetailsElement;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgDetailsElement;\n\n /\n Displayed title when details are closed\n /\n @Prop() toggleClosed!: string;\n\n /\n Displayed title when details are opened\n /\n @Prop() toggleOpened!: string;\n @Watch('toggleClosed')\n @Watch('toggleOpened')\n validateTitles(newValue: string): void {\n if (!isValidString(newValue)) {\n throw new Error(\n `<mg-details> prop \"toggleClosed\" and \"toggleOpened\" is required and must be a valid string. Passed value: \"toggleClosed='${this.toggleClosed}'\" and \"toggleOpened='${this.toggleOpened}'\".`,\n );\n }\n }\n\n /\n Hide summary element\n /\n @Prop() hideSummary = false;\n\n /\n Define if details are diplayed\n /\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: boolean): void {\n this.expandedChange.emit(newValue);\n }\n\n /\n Emmited event when expanded change\n /\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgDetailsElement['expanded']>;\n\n /\n Handle details toggle\n /\n private handleToggle = (): void => {\n this.expanded = this.details.open;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n this.validateTitles(this.toggleClosed);\n this.validateTitles(this.toggleOpened);\n this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }) => {\n if (event.target.closest('[slot=\"summary\"] mg-button, mg-button[slot=\"summary\"]') !== null) {\n event.preventDefault();\n }\n });\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <details class=\"mg-c-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n <summary>\n <slot name=\"summary\"></slot>\n <span class=\"mg-c-details__toggle\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n <span class={{ 'mg-u-visually-hidden': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n </span>\n </summary>\n <div class=\"mg-c-details__details\">\n <slot name=\"details\"></slot>\n </div>\n </details>\n );\n }\n}\n"],"version":3}

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

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