npm - @mgdis/mg-components - Versions diffs - 5.17.0 → 5.19.0 - Mend

@mgdis/mg-components 5.17.0 → 5.19.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 (348) hide show

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

@@ -1,12 +1,12 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { C as ClassList } from './components.utils.js';
+import { C as ClassList, i as isValidString } from './components.utils.js';
 /**
  * List of all possibles variants
  */
 const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
-const mgBadgeCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);box-sizing:border-box;border:0.1rem solid;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge.mg-badge--text-color{background-color:currentColor;border-color:currentColor}.mg-badge.mg-badge--text-color .mg-badge__value{color:hsl(var(--mg-badge-text-color, var(--color-light)))}.mg-badge.mg-badge--text-color.mg-badge--outline{background-color:transparent}.mg-badge.mg-badge--text-color.mg-badge--outline .mg-badge__value{color:currentColor}.mg-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
+const mgBadgeCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-badge{min-width:var(--mg-badge-size);height:var(--mg-badge-size);box-sizing:border-box;padding:0 .4rem;border:.1rem solid;border-radius:calc(var(--mg-badge-size)/2);font-size:var(--mg-badge-font-size);font-weight:600;line-height:var(--mg-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:hsl(var(--color-dark));background-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary{border-color:hsl(var(--color-light));background-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--success{border-color:hsl(var(--color-success));background-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-success))}.mg-c-badge.mg-c-badge--warning{border-color:hsl(var(--color-warning));background-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-warning))}.mg-c-badge.mg-c-badge--danger{border-color:hsl(var(--color-danger));background-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-danger))}.mg-c-badge.mg-c-badge--info{border-color:hsl(var(--color-info));background-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-info))}.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:hsl(var(--mg-badge-text-color, var(--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}";
 const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLElement {
   constructor() {
@@ -17,12 +17,12 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLEleme
      * Internal *
      ************/
     // Classes
-    this.classOutline = `mg-badge--outline`;
+    this.classOutline = `mg-c-badge--outline`;
     this.value = undefined;
     this.label = undefined;
     this.variant = variants[0];
     this.outline = undefined;
-    this.classCollection = new ClassList(['mg-badge']);
+    this.classCollection = new ClassList(['mg-c-badge']);
   }
   validateValue(newValue) {
     if (`${newValue}`.match(/^(\d+\+*|[?*!a-z])$/i) === null) {
@@ -30,7 +30,7 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLEleme
     }
   }
   validateLabel(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '') {
+    if (!isValidString(newValue)) {
       throw new Error('<mg-badge> prop "label" is required.');
     }
   }
@@ -40,9 +40,9 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLEleme
     }
     else {
       if (oldValue !== undefined) {
-        this.classCollection.delete(`mg-badge--${oldValue}`);
+        this.classCollection.delete(`mg-c-badge--${oldValue}`);
       }
-      this.classCollection.add(`mg-badge--${newValue}`);
+      this.classCollection.add(`mg-c-badge--${newValue}`);
     }
   }
   validateOutline(newValue) {
@@ -65,7 +65,7 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLEleme
    * @returns HTML Element
    */
   render() {
-    return (h("span", { class: this.classCollection.join() }, h("span", { class: "mg-badge__value" }, this.value), h("span", { class: "sr-only" }, this.label)));
+    return (h("span", { class: this.classCollection.join() }, h("span", { class: "mg-c-badge__value" }, this.value), h("span", { class: "mg-u-visually-hidden" }, this.label)));
   }
   static get watchers() { return {
     "value": ["validateValue"],

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

	@@ -1 +1 @@
1	- {"file":"mg-badge2.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAU;;ACH/G,MAAM,UAAU,GAAG,~~gkFAAgkF~~;;~~MCQtkF~~,OAAO;;;;;;;;;IAMD,iBAAY,GAAG,~~mBAAmB~~,CAAC;;;~~mBAgCf~~,QAAQ,CAAC,CAAC,CAAC;;2BA0BV,IAAI,SAAS,CAAC,CAAC,~~UAAU~~,CAAC,CAAC;;EA/~~CjE~~,aAAa,CAAC,QAA0B;IACtC,IAAI,GAAG,QAAQ,EAAE,CAAC,KAAK,CAAC,sBAAsB,CAAC,KAAK,IAAI,EAAE;MACxD,MAAM,IAAI,KAAK,CAAC,mEAAmE,CAAC,CAAC;KACtF;GACF;EAQD,aAAa,CAAC,QAA0B;IACtC,IAAI,~~OAAO~~,~~QAAQ~~,~~KAAK~~,QAAQ,~~IAAI,QAAQ,~~CAAC,~~IAAI,~~EAAE~~,KAAK,EAAE,EAAE~~;~~MAC1D~~,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;KACzD;GACF;EAOD,eAAe,CAAC,QAA4B,EAAE,QAA6B;IACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,6CAA6C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACtF;SAAM;MACL,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,~~aAAa~~,QAAQ,EAAE,CAAC,CAAC;~~OACtD~~;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,~~aAAa~~,QAAQ,EAAE,CAAC,CAAC;~~KACnD~~;GACF;EAOD,eAAe,CAAC,QAA4B;IAC1C,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;MACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACrD;;;;EAUD,iBAAiB;IACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACpC;;;;;EAMD,MAAM;IACJ,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACtC,YAAM,KAAK,EAAC,~~iBAAiB~~,IAAE,IAAI,CAAC,KAAK,CAAQ,~~EACjD~~,YAAM,KAAK,EAAC,~~SAAS~~,IAAE,IAAI,CAAC,KAAK,CAAQ,~~CACpC~~,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-badge/mg-badge.conf.ts","~~src~~/components/~~atoms/~~mg-badge~~/mg-badge~~.~~scss~~?tag=mg-badge&encapsulation=shadow","src/components/atoms/mg-badge/mg-badge.tsx"],"sourcesContent":["/*\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 = (typeof variants)[number];\n","~~@import '../../../styles/a11y~~.~~scss';\n\n/ Variables /\n$~~mg-~~badge~~-~~border~~-width: 0.1rem;\n\n/ ~~Mixins /\n@mixin badge-variant~~(~~$name~~, ~~$backgroundColor~~, ~~$color~~) ~~{\n &.mg~~-~~badge--#~~{~~$name~~} {~~\n @if~~ ~~$name~~ ~~== 'text~~-~~color'~~ {~~\n // Decoration\n background~~-~~color~~: ~~currentColor;\n~~ border-~~color~~: ~~currentColor;\n~~ .mg-~~badge__value {\n // Font\n color~~: ~~hsl~~(var(--mg-badge-text-color, var(--color-light))~~);\n~~ }~~\n } @else~~ {~~\n // Decoration\n~~ background-color: hsl(var(--color~~-#{$backgroundColor}~~))~~;\n~~ border-color: hsl(var(--color~~-#{$backgroundColor}~~))~~;\n // Font\n~~ color: hsl(var(--color~~-#{$~~color}))~~;\n~~ }~~\n\n &.~~mg-badge--outline {~~\n // Decoration\n~~ background-color: ~~transparent;\n // Font\n @if $name == 'text~~-~~color' {\n // Font\n~~ .mg-~~badge__value~~ {\n color: ~~currentColor;\n }\n } @else {\n~~ color: hsl(var(--color~~-#{$backgroundColor}~~))~~;\n~~ }~~\n }\n }\n}\n\n/ Styles /\n~~.mg-badge {~~\n // Display\n padding~~: 0 0~~.4rem;\n height~~: var(--mg-badge-~~size~~)~~;\n min~~-~~width~~: var(--mg-badge-~~size);\n box~~-~~sizing~~: ~~border~~-~~box;\n // Decoration\n border: $~~mg-badge-~~border~~-~~width solid;\n~~ border-~~radius~~: ~~calc~~(var(--mg-~~badge-size~~) ~~/ 2~~)~~;\n // Font\n font~~-~~size~~: var(--mg-badge-~~font~~-~~size);\n font~~-~~weight: 600;\n text~~-~~align: center;\n line~~-~~height~~: var(--mg-badge-~~size);\n\n // Variant\n @include~~ badge-~~variant~~(~~'primary', 'dark', 'light'~~)~~;\n @include badge~~-~~variant~~(~~'secondary', '~~light~~', 'dark'~~)~~;\n @include~~ badge-~~variant~~(~~'success'~~, ~~'success'~~, ~~'dark'~~)~~;\n @include~~ badge-~~variant~~(~~'warning', 'warning', 'dark');\n @include~~ badge-~~variant('danger'~~, ~~'danger', '~~light')~~;\n @include~~ badge-~~variant~~(~~'info'~~, ~~'info'~~, ~~'light'~~)~~;\n @include~~ badge-~~variant('~~text-color', ~~none, 'light');\n~~}~~\n\n~~.mg-badge~~,\nmg~~-badge {\n display: inline-flex~~;\n~~ align-items: center~~;\n~~ justify-content: center~~;\n~~}\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList } from '../../../utils/components.utils';\n@Component({\n tag: 'mg-badge',\n styleUrl: 'mg-badge.~~scss~~',\n shadow: true,\n})\nexport class MgBadge {\n /**********\n Internal \n *********/\n\n // Classes\n private readonly classOutline = `mg-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 (`${newValue}`.match(/^(\\d+\\+\|[?!a-z])$/i) === null) {\n throw new Error('<mg-badge> prop \"value\" must be integer or ponctuation character.');\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 (~~typeof~~ newValue ~~!== 'string' \|\| newValue.trim(~~) ~~=== ''~~) {\n throw new Error('<mg-badge> prop \"label\" is required.');\n }\n }\n\n /\n Define button 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(', ')}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-badge--${oldValue}`);\n }\n this.classCollection.add(`mg-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-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-badge__value\">{this.value}</span>\n <span class=\"sr-~~only~~\">{this.label}</span>\n </span>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-badge2.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAU;;ACH/G,MAAM,UAAU,GAAG,yoFAAyoF;;MCQ/oF,OAAO;;;;;;;;;IAMD,iBAAY,GAAG,qBAAqB,CAAC;;;mBAgCjB,QAAQ,CAAC,CAAC,CAAC;;2BA0BV,IAAI,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;;EA/CnE,aAAa,CAAC,QAA0B;IACtC,IAAI,GAAG,QAAQ,EAAE,CAAC,KAAK,CAAC,sBAAsB,CAAC,KAAK,IAAI,EAAE;MACxD,MAAM,IAAI,KAAK,CAAC,mEAAmE,CAAC,CAAC;KACtF;GACF;EAQD,aAAa,CAAC,QAA0B;IACtC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;KACzD;GACF;EAOD,eAAe,CAAC,QAA4B,EAAE,QAA6B;IACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,6CAA6C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACtF;SAAM;MACL,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;OACxD;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;KACrD;GACF;EAOD,eAAe,CAAC,QAA4B;IAC1C,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;MACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACrD;;;;EAUD,iBAAiB;IACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACpC;;;;;EAMD,MAAM;IACJ,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACtC,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACnD,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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":["/*\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 = (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}}.mg-c-badge{min-width:var(--mg-badge-size);height:var(--mg-badge-size);box-sizing:border-box;padding:0 .4rem;border:.1rem solid;border-radius:calc(var(--mg-badge-size)/2);font-size:var(--mg-badge-font-size);font-weight:600;line-height:var(--mg-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:hsl(var(--color-dark));background-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary{border-color:hsl(var(--color-light));background-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--success{border-color:hsl(var(--color-success));background-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-success))}.mg-c-badge.mg-c-badge--warning{border-color:hsl(var(--color-warning));background-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-warning))}.mg-c-badge.mg-c-badge--danger{border-color:hsl(var(--color-danger));background-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-danger))}.mg-c-badge.mg-c-badge--info{border-color:hsl(var(--color-info));background-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-info))}.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:hsl(var(--mg-badge-text-color, var(--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 } from '../../../utils/components.utils';\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 (`${newValue}`.match(/^(\\d+\\+\|[?!a-z])$/i) === null) {\n throw new Error('<mg-badge> prop \"value\" must be integer or ponctuation character.');\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.');\n }\n }\n\n /\n Define button 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(', ')}.`);\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}

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as ClassList } from './components.utils.js';
+import { C as ClassList, i as isValidString } from './components.utils.js';
 import { d as defineCustomElement$1 } from './mg-icon2.js';
 /**
@@ -7,7 +7,7 @@ import { d as defineCustomElement$1 } from './mg-icon2.js';
  */
 const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
-const mgButtonCss = ":host{display:inline-block;vertical-align:middle;max-width:100%}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:0.2rem}:host(:hover) .mg-button--flat:not(.mg-button--disabled){background:hsl(var(--color-dark), 0.1)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-button.mg-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--primary:not(.mg-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--secondary:not(.mg-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger:not(.mg-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--danger-alt:not(.mg-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--info:not(.mg-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}:host(:hover) .mg-button--success:not(.mg-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);touch-action:manipulation}.mg-button.mg-button--disabled{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--flat{background:none;border:none}.mg-button.mg-button--link{padding:unset;min-height:unset;background:unset;border:unset;border-radius:unset;text-decoration:underline}.mg-button.mg-button--link slot{font-weight:600}.mg-button.mg-button--link:hover{text-decoration:none}.mg-button.mg-button--full-width{display:flex;justify-content:center}.mg-button.mg-button--loading>mg-icon:first-of-type{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading .mg-button__content{opacity:0}.mg-button mg-icon:only-child,.mg-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button slot,.mg-button ::slotted(*:not(mg-icon)){text-decoration:none;font-family:inherit;font-weight:var(--mg-button-font-weight, normal);text-align:left;font-size:var(--font-size);display:flex;align-items:center;column-gap:0.6rem}";
+const mgButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:hsl(var(--color-dark)/10%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-primary-font-color))}:host(:hover) .mg-c-button--primary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-c-button.mg-c-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-secondary-font-color))}:host(:hover) .mg-c-button--secondary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-c-button.mg-c-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--danger:not(.mg-c-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-button.mg-c-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-danger))}:host(:hover) .mg-c-button--danger-alt:not(.mg-c-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-c-button.mg-c-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--info:not(.mg-c-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-button.mg-c-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-dark))}:host(:hover) .mg-c-button--success:not(.mg-c-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-button{position:relative;display:inline-flex;min-height:var(--default-size);box-sizing:border-box;align-items:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-width:var(--mg-button-border-top-width, 0.1rem) var(--mg-button-border-right-width, 0.1rem) var(--mg-button-border-bottom-width, 0.1rem) var(--mg-button-border-left-width, 0.1rem);border-style:solid;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));background-image:none;column-gap:.6rem;cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-button-disabled-opacity)}.mg-c-button.mg-c-button--icon{width:var(--default-size);height:var(--default-size);justify-content:center;padding:0;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:.6rem}.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--full-width{display:flex;justify-content:center}.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--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 MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLElement {
   constructor() {
@@ -19,9 +19,9 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
      * Internal *
      ************/
     this.onClickElementFn = null;
-    this.classDisabled = 'mg-button--disabled';
-    this.classLoading = 'mg-button--loading';
-    this.classFullWidth = 'mg-button--full-width';
+    this.classDisabled = 'mg-c-button--disabled';
+    this.classLoading = 'mg-c-button--loading';
+    this.classFullWidth = 'mg-c-button--full-width';
     /**
      * Trigger actions onClick event
      * @param event - click event
@@ -68,7 +68,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
     this.isIcon = false;
     this.disableOnClick = false;
     this.loading = false;
-    this.classCollection = new ClassList(['mg-button']);
+    this.classCollection = new ClassList(['mg-c-button']);
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
@@ -76,9 +76,9 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
     }
     else {
       if (oldValue !== undefined) {
-        this.classCollection.delete(`mg-button--${oldValue}`);
+        this.classCollection.delete(`mg-c-button--${oldValue}`);
       }
-      this.classCollection.add(`mg-button--${newValue}`);
+      this.classCollection.add(`mg-c-button--${newValue}`);
     }
   }
   validateFullWidth(newValue) {
@@ -126,8 +126,8 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
     this.validateVariant(this.variant);
     this.validateFullWidth(this.fullWidth);
     if (this.isIcon) {
-      this.classCollection.add(`mg-button--icon`);
-      if (typeof this.label !== 'string' || this.label.trim() === '') {
+      this.classCollection.add(`mg-c-button--icon`);
+      if (!isValidString(this.label)) {
         throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
       }
     }
@@ -140,7 +140,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLEle
    * @returns html element
    */
   render() {
-    return (h(Host, { role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null)))));
+    return (h(Host, { role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-c-button__content" }, h("slot", null)))));
   }
   get element() { return this; }
   static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"mg-button2.js","mappings":"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","names":[],"sources":["src/components/atoms/mg-button/mg-button.conf.ts","src/components/atoms/mg-button/mg-button.scss?tag=mg-button&encapsulation=shadow","src/components/atoms/mg-button/mg-button.tsx"],"sourcesContent":["/*\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 = (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","/ Variables /\n$mg-button-border-width: 0.1rem;\n$mg-button-padding-horizontal: 1.1rem;\n$button-column-gap: 0.6rem;\n\n/ Mixins /\n@mixin style-gradient($name, $backgroundColor, $fontColor, $hasVariable: false) {\n @if $hasVariable {\n $backgroundColor: --mg-button-#{$name}-color;\n $fontColor: --mg-button-#{$name}-font-color;\n } @else {\n $backgroundColor: --color-#{$backgroundColor};\n $fontColor: --color-#{$fontColor};\n }\n .mg-button.mg-button--#{$name} {\n // Decoration\n border-color: hsl(\n var(\n #{--mg-button-#{$name}-border-color},\n (var(#{$backgroundColor}-h), var(#{$backgroundColor}-s), calc(var(#{$backgroundColor}-l) - var(--mg-button-border-variation) 10%))\n )\n );\n // Font\n color: hsl(var(#{$fontColor}));\n // Background\n background: linear-gradient(\n to bottom,\n hsl(var(#{$backgroundColor}-h), var(#{$backgroundColor}-s), var(#{$backgroundColor}-l)),\n hsl(var(#{$backgroundColor}-h), var(#{$backgroundColor}-s), calc(var(#{$backgroundColor}-l) - var(--mg-button-gradient) * 10%))\n );\n }\n // Only apply if not disabled\n :host(:hover) .mg-button--#{$name}:not(.mg-button--disabled) {\n background: hsl(var(#{$backgroundColor}-h), var(#{$backgroundColor}-s), var(#{$backgroundColor}-l));\n }\n}\n\n@mixin font-style() {\n text-decoration: none;\n font-family: inherit;\n font-weight: var(--mg-button-font-weight, normal);\n text-align: left;\n font-size: var(--font-size);\n}\n\n:host {\n display: inline-block;\n vertical-align: middle;\n max-width: 100%;\n}\n\n:host(:focus-visible) {\n outline: 0;\n // same style as chrome\n .mg-button {\n outline-color: -webkit-focus-ring-color;\n outline-style: auto;\n outline-width: 0.2rem;\n }\n}\n\n// Only apply if not disabled\n:host(:hover) .mg-button--flat:not(.mg-button--disabled) {\n background: hsl(var(--color-dark), 0.1);\n}\n\n:host([full-width]) {\n display: block;\n}\n\n// Prevent click propagation when disabled\n:host([disabled]),\n:host([aria-disabled='true']) {\n pointer-events: none;\n}\n\n// Gradient style\n@include style-gradient('primary', null, null, true);\n@include style-gradient('secondary', null, null, true);\n@include style-gradient('danger', 'danger', 'neutral');\n@include style-gradient('danger-alt', 'neutral', 'danger');\n@include style-gradient('info', 'info', 'neutral');\n@include style-gradient('success', 'success', 'dark');\n\n/* Styles /\n.mg-button {\n // Display\n position: relative;\n display: inline-flex;\n align-items: center;\n column-gap: $button-column-gap;\n padding: calc((var(--default-size) - (2 $mg-button-border-width) - (var(--font-size) * var(--line-height))) / 2) $mg-button-padding-horizontal;\n min-height: var(--default-size);\n box-sizing: border-box;\n // Decoration\n border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));\n border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));\n border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));\n border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));\n cursor: pointer;\n background-image: none;\n border-top-width: var(--mg-button-border-top-width, $mg-button-border-width);\n border-right-width: var(--mg-button-border-right-width, $mg-button-border-width);\n border-bottom-width: var(--mg-button-border-bottom-width, $mg-button-border-width);\n border-left-width: var(--mg-button-border-left-width, $mg-button-border-width);\n border-style: solid;\n // Font (necessary for stylesheet only)\n @include font-style();\n // Other\n touch-action: manipulation;\n\n // Disabled style\n &.mg-button--disabled {\n opacity: var(--mg-button-disabled-opacity);\n cursor: default;\n }\n\n // Icon only button\n &.mg-button--icon {\n // Display\n padding: 0;\n justify-content: center;\n width: var(--default-size);\n height: var(--default-size);\n // Decoration\n border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));\n border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));\n border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));\n border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));\n // font\n font-size: var(--font-size);\n line-height: var(--font-size);\n }\n\n // Flat variant\n &.mg-button--flat {\n background: none;\n border: none;\n }\n\n // Link variant\n &.mg-button--link {\n padding: unset;\n min-height: unset;\n background: unset;\n border: unset;\n border-radius: unset;\n text-decoration: underline;\n\n slot {\n font-weight: 600;\n }\n\n &:hover {\n text-decoration: none;\n }\n }\n\n // full-width style\n &.mg-button--full-width {\n display: flex;\n justify-content: center;\n }\n\n // loading style\n &.mg-button--loading {\n > mg-icon:first-of-type {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n .mg-button__content {\n opacity: 0;\n }\n }\n\n mg-icon:only-child,\n ::slotted(mg-icon) {\n display: inline-flex;\n flex-shrink: 0;\n line-height: 1;\n margin: auto 0;\n }\n\n slot,\n ::slotted(:not(mg-icon)) {\n // Font\n @include font-style();\n // Display\n display: flex;\n align-items: center;\n column-gap: $button-column-gap;\n }\n}\n","import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType } from './mg-button.conf';\nimport { ClassList } from '../../../utils/components.utils';\n\n@Component({\n tag: 'mg-button',\n styleUrl: 'mg-button.scss',\n shadow: true,\n})\nexport class MgButton {\n /**********\n Internal \n *********/\n\n private onClickElementFn = null;\n private readonly classDisabled = 'mg-button--disabled';\n private readonly classLoading = 'mg-button--loading';\n private readonly classFullWidth = 'mg-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() variant: VariantType = variants[0]; // Primary\n @Watch('variant')\n validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-button--${oldValue}`);\n }\n this.classCollection.add(`mg-button--${newValue}`);\n }\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier: string;\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 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\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-button']);\n\n /\n Emmited event when disabled change\n /\n @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<MgButton['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 Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateFullWidth(this.fullWidth);\n if (this.isIcon) {\n this.classCollection.add(`mg-button--icon`);\n if (typeof this.label !== 'string' \|\| this.label.trim() === '') {\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 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 !== undefined && this.disabled.toString()}\n onClick={this.handleClick}\n onKeyup={this.handleKeyup}\n onKeydown={this.handleKeydown}\n >\n <div class={this.classCollection.join()} id={this.identifier}>\n {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n <div class=\"mg-button__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-button2.js","mappings":"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","names":[],"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":["/*\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 = (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",":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:hsl(var(--color-dark)/10%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-primary-font-color))}:host(:hover) .mg-c-button--primary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-c-button.mg-c-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-secondary-font-color))}:host(:hover) .mg-c-button--secondary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-c-button.mg-c-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--danger:not(.mg-c-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-button.mg-c-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-danger))}:host(:hover) .mg-c-button--danger-alt:not(.mg-c-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-c-button.mg-c-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--info:not(.mg-c-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-button.mg-c-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-dark))}:host(:hover) .mg-c-button--success:not(.mg-c-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-button{position:relative;display:inline-flex;min-height:var(--default-size);box-sizing:border-box;align-items:center;padding:calc((var(--default-size) - .2rem - var(--font-size)var(--line-height))/2) 1.1rem;border-width:var(--mg-button-border-top-width, 0.1rem) var(--mg-button-border-right-width, 0.1rem) var(--mg-button-border-bottom-width, 0.1rem) var(--mg-button-border-left-width, 0.1rem);border-style:solid;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));background-image:none;column-gap:.6rem;cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-button-disabled-opacity)}.mg-c-button.mg-c-button--icon{width:var(--default-size);height:var(--default-size);justify-content:center;padding:0;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button slot,.mg-c-button ::slotted(:not(mg-icon)){font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:.6rem}.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--full-width{display:flex;justify-content:center}.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--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 } from './mg-button.conf';\nimport { ClassList, isValidString } from '../../../utils/components.utils';\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() variant: VariantType = variants[0]; // Primary\n @Watch('variant')\n validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}`);\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 Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier: string;\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 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\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<MgButton['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 Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateFullWidth(this.fullWidth);\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 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 !== undefined && this.disabled.toString()}\n onClick={this.handleClick}\n onKeyup={this.handleKeyup}\n onKeydown={this.handleKeydown}\n >\n <div class={this.classCollection.join()} id={this.identifier}>\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-card2.js CHANGED Viewed

@@ -10,7 +10,7 @@ const variants = ['info', 'warning', 'success', 'danger', 'app'];
  */
 const variantStyles = ['bar-left', 'fill'];
-const mgCardCss = ".mg-card{position:relative;width:100%;max-width:var(--mg-card-max-width);min-width:var(--mg-card-min-width);padding:var(--mg-card-padding, var(--mg-card-padding-default));overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));box-sizing:border-box;z-index:inherit;background:var(--mg-card-background, var(--mg-card-background-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-card ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}.mg-card.mg-card--info{overflow:hidden}.mg-card.mg-card--info.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-card.mg-card--info.mg-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-card.mg-card--warning{overflow:hidden}.mg-card.mg-card--warning.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-card.mg-card--warning.mg-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-card.mg-card--success{overflow:hidden}.mg-card.mg-card--success.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-card.mg-card--success.mg-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-card.mg-card--danger{overflow:hidden}.mg-card.mg-card--danger.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-card.mg-card--danger.mg-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-card.mg-card--app{overflow:hidden}.mg-card.mg-card--app.mg-card--bar-left .mg-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-card.mg-card--app.mg-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-card__bar{position:absolute;top:0;left:0;width:0.3rem;height:100%}";
+const mgCardCss = ".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));width:100%;min-width:var(--mg-card-min-width);max-width:var(--mg-card-max-width);box-sizing:border-box;padding:var(--mg-card-padding, var(--mg-card-padding-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));background:var(--mg-card-background, var(--mg-card-background-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-c-card ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}.mg-c-card.mg-c-card--info{overflow:hidden}.mg-c-card.mg-c-card--info.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-card.mg-c-card--info.mg-c-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--warning{overflow:hidden}.mg-c-card.mg-c-card--warning.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-c-card.mg-c-card--warning.mg-c-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--success{overflow:hidden}.mg-c-card.mg-c-card--success.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-card.mg-c-card--success.mg-c-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--danger{overflow:hidden}.mg-c-card.mg-c-card--danger.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-card.mg-c-card--danger.mg-c-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--app{overflow:hidden}.mg-c-card.mg-c-card--app.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-c-card.mg-c-card--app.mg-c-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-c-card__bar{position:absolute;top:0;left:0;width:.3rem;height:100%}";
 const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement {
   constructor() {
@@ -21,7 +21,7 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement
      * Private *
      *************/
     this.name = 'mg-card';
-    this.baseClass = this.name;
+    this.classBase = 'mg-c-card';
     /**
      * Methode to set default varianStyle props
      * needeed has stencil doesn't know that props is mutated when updated in prop watcher
@@ -32,17 +32,17 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement
     };
     this.variant = undefined;
     this.variantStyle = undefined;
-    this.classCollection = new ClassList([this.baseClass]);
+    this.classCollection = new ClassList([this.classBase]);
   }
   validateVariant(newValue, oldValue) {
     if (newValue && !variants.includes(newValue))
       throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
     if (Boolean(newValue)) {
       this.setDefaultVariantStyle();
-      this.classCollection.add(`${this.baseClass}--${newValue}`);
+      this.classCollection.add(`${this.classBase}--${newValue}`);
     }
     if (Boolean(oldValue))
-      this.classCollection.delete(`${this.baseClass}--${oldValue}`);
+      this.classCollection.delete(`${this.classBase}--${oldValue}`);
   }
   validateVariantStyle(newValue, oldValue) {
     if (newValue && !variantStyles.includes(newValue))
@@ -50,9 +50,9 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement
     else if (Boolean(newValue) && !variants.includes(this.variant))
       throw new Error(`<${this.name}> prop "variantStyle" must be paired with ${JSON.stringify(variants)} "variant" prop.`);
     if (Boolean(newValue))
-      this.classCollection.add(`${this.baseClass}--${newValue}`);
+      this.classCollection.add(`${this.classBase}--${newValue}`);
     if (Boolean(oldValue))
-      this.classCollection.delete(`${this.baseClass}--${oldValue}`);
+      this.classCollection.delete(`${this.classBase}--${oldValue}`);
   }
   /*************
    * Lifecycle *
@@ -70,7 +70,7 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement
    */
   render() {
     var _a;
-    return (h("div", { class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-card__bar" }), h("slot", null)));
+    return (h("div", { class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", null)));
   }
   static get watchers() { return {
     "variant": ["validateVariant"],

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

	@@ -1 +1 @@
1	- {"file":"mg-card2.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAU,CAAC;AAOjF;;;AAGO,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,MAAM,CAAU;;ACb1D,MAAM,SAAS,GAAG,~~0/EAA0/E~~;;~~MCS//E~~,MAAM;;;;;;;;IAKA,SAAI,GAAG,SAAS,CAAC;IACjB,cAAS,GAAG,~~IAAI~~,CAAC~~,IAAI,CAAC~~;;;;;~~IA0C/B~~,2BAAsB,GAAG;MAC/B,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;KACrE,CAAC;;;2BARoC,IAAI,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;EAzBrE,eAAe,CAAC,QAA2B,EAAE,QAA4B;IACvE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,+CAA+C,CAAC,CAAC;IAC5H,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;MACrB,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;KAC5D;IACD,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;GACtF;EAOD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;IACtF,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,yDAAyD,CAAC,CAAC;SACtI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;MAC5D,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6CAA6C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IACxH,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;IAClF,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;GACtF;;;;;;;EAsBD,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GAC9C;;;;;EAMD,MAAM;;IACJ,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACpC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CAAC,MAAM,CAAC,KAAI,YAAM,KAAK,EAAC,~~cAAc~~,GAAQ,~~EAC5E~~,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-card/mg-card.conf.ts","~~src~~/components/~~atoms/~~mg-card~~/mg-card~~.~~scss~~?tag=mg-card&encapsulation=shadow","src/components/atoms/mg-card/mg-card.tsx"],"sourcesContent":["/*\n List available variants\n /\nexport const variants = ['info', 'warning', 'success', 'danger', 'app'] as const;\n\n/\n Variant type\n /\nexport type VariantType = (typeof variants)[number];\n\n/\n List available variant styles\n /\nexport const variantStyles = ['bar-left', 'fill'] as const;\n\n/\n VariantStyle type\n /\nexport type VariantStyleType = (typeof variantStyles)[number];\n","~~@import~~ ~~'../../../styles/mixins/reset~~-mg-card-~~slotted~~-~~variables.scss';\n\n@function~~ ~~getColorPrefix~~(~~$color~~) ~~{\n @if~~ ~~$color~~ == ~~'app'~~ {~~\n @return~~ 'mg-~~color';\n }\n @return~~ ~~'color';\n}\n\n@mixin~~ card-~~variants~~(~~$variants...~~) ~~{\n @each~~ ~~$variant~~ ~~in $variants {\n &.~~mg-card~~--#~~{~~$variant} {\n~~ overflow: hidden~~;\n &.~~mg-card--bar-left .mg-card__bar {\n background-color: hsl(var(~~--#{getColorPrefix($variant)}-#{$variant}~~-h), var(~~--#{getColorPrefix($variant)}-#{$variant}~~-s), var(~~--#{getColorPrefix($variant)}-#{$variant}~~-l))~~;\n~~ }~~\n &.~~mg-card--fill {\n background-color: hsl(var(~~--#{getColorPrefix($variant)}-#{$variant}~~-h), var(~~--#{getColorPrefix($variant)}-#{$variant}~~-s), var(--mg-color-soft-l))~~;\n~~ }\n }~~\n }\n}\n\n~~.mg-card {~~\n // Display\n position~~: ~~relative;\n width: 100%;\n max~~-~~width:~~ var(--mg-card-~~max~~-~~width);\n min~~-~~width~~: var(--mg-~~card~~-~~min-width~~)~~;\n padding:~~ var(--mg-~~card~~-~~padding~~, var(--mg-~~card~~-~~padding~~-~~default~~))~~;\n~~ overflow: var(--mg-card-~~overflow~~, var(--mg-~~card~~-~~overflow~~-~~default~~))~~;\n box~~-~~sizing~~: ~~border~~-~~box;\n z~~-~~index: inherit;\n // Decoration\n~~ background: var(--mg-~~card~~-~~background~~, var(--mg-card-background-~~default~~)~~);\n border:~~ var(--mg-~~card~~-~~border~~, var(--mg-~~card~~-~~border~~-~~default~~))~~;\n border~~-~~radius~~: var(--mg-~~card~~-~~border~~-~~radius~~, var(--mg-~~card~~-~~border~~-~~radius~~-~~default~~))~~;\n box~~-~~shadow~~: var(--mg-~~card~~-~~box~~-~~shadow~~, var(--mg-~~card~~-~~box~~-~~shadow-default~~)~~);\n\n @include~~ ~~reset~~-~~slot~~-~~card~~-~~variables(~~)~~;\n @include card~~-~~variants('info', 'warning', 'success', 'danger', 'app');\n\n &__bar~~ {\n position: absolute~~;\n~~ top: 0~~;\n~~ left: 0~~;\n~~ width~~: 0.~~3rem~~;\n~~ height: 100~~%;\n~~ }\n~~}\n~~","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList } from '../../../utils/components.utils';\nimport { type VariantStyleType, variantStyles, type VariantType, variants } from './mg-card.conf';\n\n@Component({\n tag: 'mg-card',\n styleUrl: 'mg-card.~~scss~~',\n shadow: true,\n})\nexport class MgCard {\n /***********\n Private \n **********/\n\n private readonly name = 'mg-card';\n private readonly ~~baseClass~~ = ~~this.name~~;\n\n /**********\n Decorators \n **********/\n\n /\n * Define variant prop\n /\n @Prop() variant: undefined \| VariantType;\n @Watch('variant')\n validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']) {\n if (newValue && !variants.includes(newValue)) throw new Error(`<${this.name}> prop \"variant\" must match VariantType type.`);\n if (Boolean(newValue)) {\n this.setDefaultVariantStyle();\n this.classCollection.add(`${this.~~baseClass~~}--${newValue}`);\n }\n if (Boolean(oldValue)) this.classCollection.delete(`${this.~~baseClass~~}--${oldValue}`);\n }\n\n /\n Define variantStyle prop\n /\n @Prop({ mutable: true }) variantStyle: undefined \| VariantStyleType;\n @Watch('variantStyle')\n validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']) {\n if (newValue && !variantStyles.includes(newValue)) throw new Error(`<${this.name}> prop \"variantStyle\" must match VariantStyleType type.`);\n else if (Boolean(newValue) && !variants.includes(this.variant))\n throw new Error(`<${this.name}> prop \"variantStyle\" must be paired with ${JSON.stringify(variants)} \"variant\" prop.`);\n if (Boolean(newValue)) this.classCollection.add(`${this.~~baseClass~~}--${newValue}`);\n if (Boolean(oldValue)) this.classCollection.delete(`${this.~~baseClass~~}--${oldValue}`);\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList([this.~~baseClass~~]);\n\n /\n Methode to set default varianStyle props\n * needeed has stencil doesn't know that props is mutated when updated in prop watcher\n /\n private setDefaultVariantStyle = (): void => {\n if (this.variantStyle === undefined) this.variantStyle = 'bar-left';\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateVariantStyle(this.variantStyle);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class={this.classCollection.join()}>\n {this.variantStyle?.startsWith('bar-') && <span class=\"mg-card__bar\"></span>}\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-card2.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAU,CAAC;AAOjF;;;AAGO,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,MAAM,CAAU;;ACb1D,MAAM,SAAS,GAAG,ylFAAylF;;MCS9lF,MAAM;;;;;;;;IAKA,SAAI,GAAG,SAAS,CAAC;IACjB,cAAS,GAAG,WAAW,CAAC;;;;;IA0CjC,2BAAsB,GAAG;MAC/B,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;KACrE,CAAC;;;2BARoC,IAAI,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;EAzBrE,eAAe,CAAC,QAA2B,EAAE,QAA4B;IACvE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,+CAA+C,CAAC,CAAC;IAC5H,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;MACrB,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;KAC5D;IACD,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;GACtF;EAOD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;IACtF,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,yDAAyD,CAAC,CAAC;SACtI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;MAC5D,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6CAA6C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IACxH,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;IAClF,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;GACtF;;;;;;;EAsBD,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GAC9C;;;;;EAMD,MAAM;;IACJ,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACpC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CAAC,MAAM,CAAC,KAAI,YAAM,KAAK,EAAC,gBAAgB,GAAQ,EAC9E,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-card/mg-card.conf.ts","../styles/dist/components/mg-card.css?tag=mg-card&encapsulation=shadow","src/components/atoms/mg-card/mg-card.tsx"],"sourcesContent":["/*\n List available variants\n /\nexport const variants = ['info', 'warning', 'success', 'danger', 'app'] as const;\n\n/\n Variant type\n /\nexport type VariantType = (typeof variants)[number];\n\n/\n List available variant styles\n /\nexport const variantStyles = ['bar-left', 'fill'] as const;\n\n/\n VariantStyle type\n /\nexport type VariantStyleType = (typeof variantStyles)[number];\n",".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-card-overflow, var(--mg-card-overflow-default));width:100%;min-width:var(--mg-card-min-width);max-width:var(--mg-card-max-width);box-sizing:border-box;padding:var(--mg-card-padding, var(--mg-card-padding-default));border:var(--mg-card-border, var(--mg-card-border-default));border-radius:var(--mg-card-border-radius, var(--mg-card-border-radius-default));background:var(--mg-card-background, var(--mg-card-background-default));box-shadow:var(--mg-card-box-shadow, var(--mg-card-box-shadow-default))}.mg-c-card ::slotted(){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}.mg-c-card.mg-c-card--info{overflow:hidden}.mg-c-card.mg-c-card--info.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-card.mg-c-card--info.mg-c-card--fill{background-color:hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--warning{overflow:hidden}.mg-c-card.mg-c-card--warning.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l))}.mg-c-card.mg-c-card--warning.mg-c-card--fill{background-color:hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--success{overflow:hidden}.mg-c-card.mg-c-card--success.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-card.mg-c-card--success.mg-c-card--fill{background-color:hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--danger{overflow:hidden}.mg-c-card.mg-c-card--danger.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-card.mg-c-card--danger.mg-c-card--fill{background-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l))}.mg-c-card.mg-c-card--app{overflow:hidden}.mg-c-card.mg-c-card--app.mg-c-card--bar-left .mg-c-card__bar{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l))}.mg-c-card.mg-c-card--app.mg-c-card--fill{background-color:hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l))}.mg-c-card__bar{position:absolute;top:0;left:0;width:.3rem;height:100%}/# sourceMappingURL=mg-card.css.map /\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList } from '../../../utils/components.utils';\nimport { type VariantStyleType, variantStyles, type VariantType, variants } from './mg-card.conf';\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 Private \n **********/\n\n private readonly name = 'mg-card';\n private readonly classBase = 'mg-c-card';\n\n /**********\n Decorators \n **********/\n\n /\n * Define variant prop\n /\n @Prop() variant: undefined \| VariantType;\n @Watch('variant')\n validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']) {\n if (newValue && !variants.includes(newValue)) throw new Error(`<${this.name}> prop \"variant\" must match VariantType type.`);\n if (Boolean(newValue)) {\n this.setDefaultVariantStyle();\n this.classCollection.add(`${this.classBase}--${newValue}`);\n }\n if (Boolean(oldValue)) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n }\n\n /\n Define variantStyle prop\n /\n @Prop({ mutable: true }) variantStyle: undefined \| VariantStyleType;\n @Watch('variantStyle')\n validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']) {\n if (newValue && !variantStyles.includes(newValue)) throw new Error(`<${this.name}> prop \"variantStyle\" must match VariantStyleType type.`);\n else if (Boolean(newValue) && !variants.includes(this.variant))\n throw new Error(`<${this.name}> prop \"variantStyle\" must be paired with ${JSON.stringify(variants)} \"variant\" prop.`);\n if (Boolean(newValue)) this.classCollection.add(`${this.classBase}--${newValue}`);\n if (Boolean(oldValue)) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList([this.classBase]);\n\n /\n Methode to set default varianStyle props\n * needeed has stencil doesn't know that props is mutated when updated in prop watcher\n /\n private setDefaultVariantStyle = (): void => {\n if (this.variantStyle === undefined) this.variantStyle = 'bar-left';\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateVariantStyle(this.variantStyle);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class={this.classCollection.join()}>\n {this.variantStyle?.startsWith('bar-') && <span class=\"mg-c-card__bar\"></span>}\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -31,7 +31,7 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft e
    * @returns HTML Element
    */
   render() {
-    return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "sr-only" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
+    return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
   }
   get element() { return this; }
   static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"mg-character-left2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,uDAAuD;;MCQrE,eAAe;;;;;sBAyBL,EAAE;;;EAOvB,iBAAiB,CAAC,QAAgB;IAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;KACtE;GACF;;;;;;;EASD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;GACpD;;;;;EAMD,MAAM;IACJ,QACE,YAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ,IAC3C,2BAAkB,MAAM,IACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,OAAG,IAAI,CAAC,SAAS,CACpD,EACP,YAAM,KAAK,EAAC,~~SAAS~~,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,~~CAChH~~,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["~~src~~/components/~~atoms/~~mg-character-left~~/mg-character-left~~.~~scss~~?tag=mg-character-left&encapsulation=scoped","src/components/atoms/mg-character-left/mg-character-left.tsx"],"sourcesContent":["mg-character-left {\n display: block~~;\n~~}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\n\n@Component({\n tag: 'mg-character-left',\n styleUrl: 'mg-character-left.~~scss~~',\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\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.');\n }\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\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=\"sr-~~only~~\">{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,uDAAuD;;MCQrE,eAAe;;;;;sBAyBL,EAAE;;;EAOvB,iBAAiB,CAAC,QAAgB;IAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;KACtE;GACF;;;;;;;EASD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;GACpD;;;;;EAMD,MAAM;IACJ,QACE,YAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ,IAC3C,2BAAkB,MAAM,IACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,OAAG,IAAI,CAAC,SAAS,CACpD,EACP,YAAM,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;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-character-left.css?tag=mg-character-left&encapsulation=scoped","src/components/atoms/mg-character-left/mg-character-left.tsx"],"sourcesContent":["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';\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\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.');\n }\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\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,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { i as isValidString } from './components.utils.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
-const mgDetailsCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-details__toggle{margin-left:1.5rem;flex-shrink:0;display:flex;align-items:center;align-self:flex-start;gap:0.6rem;min-height:calc(var(--font-size) * var(--line-height))}.mg-details__toggle-icon.mg-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-details__details{margin-top:var(--mg-details-spacing)}@media (width < 43.75rem){.mg-details__toggle>span{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}}";
+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}}.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-c-details__toggle{display:flex;min-height:calc(var(--font-size)*var(--line-height));flex-shrink:0;align-items:center;align-self:flex-start;margin-left:1.5rem;gap:.6rem}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-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 MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
   constructor() {
@@ -21,7 +22,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
     this.expanded = false;
   }
   validateTitles(newValue) {
-    if (newValue === undefined || newValue.trim() === '') {
+    if (!isValidString(newValue)) {
       throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
     }
   }
@@ -43,7 +44,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
    * @returns HTML Element
    */
   render() {
-    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
+    return (h("details", { class: "mg-c-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-c-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-c-details__details" }, h("slot", { name: "details" }))));
   }
   static get watchers() { return {
     "toggleClosed": ["validateTitles"],

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

	@@ -1 +1 @@
1	- {"file":"mg-details.js","mappings":"~~;;;~~AAAA,MAAM,YAAY,GAAG~~,orCAAorC~~;;~~MCO5rCA~~,WAAS;;;;;;;;;IAmDZ,iBAAY,GAAG;MACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;KACnC,CAAC;;;uBArBoB,KAAK;oBAKS,KAAK;;EAdzC,cAAc,CAAC,QAAgB;IAC7B,IAAI,~~QAAQ~~,~~KAAK~~,~~SAAS~~,~~IAAI,~~QAAQ,CAAC,~~IAAI,~~EAAE~~,KAAK,EAAE,EAAE~~;~~MACpD~~,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;KACzF;GACF;EAYD,cAAc,CAAC,QAAiB;IAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;EAqBD,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACxC;;;;;EAMD,MAAM;IACJ,QACE,eAAS,KAAK,EAAC,~~YAAY~~,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,~~IAChI~~,mBACE,YAAM,IAAI,EAAC,SAAS,GAAQ,EAC5B,YAAM,KAAK,EAAC,~~oBAAoB~~,~~IAC9B~~,eAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,~~yBAAyB~~,EAAE,IAAI,EAAE,~~kCAAkC~~,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY,~~EAClJ~~,YAAM,KAAK,EAAE,EAAE,~~SAAS~~,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAQ,~~CACvG~~,CACC,EACV,WAAK,KAAK,EAAC,~~qBAAqB~~,~~IAC9B~~,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,EACV;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails"],"sources":["~~src~~/components/~~molecules/~~mg-details~~/mg-details~~.~~scss~~?tag=mg-details&encapsulation=shadow","src/components/molecules/mg-details/mg-details.tsx"],"sourcesContent":["~~@import '../../../styles/a11y~~.~~scss';\n\n.~~mg-~~details~~ {~~\n summary~~ ~~{\n display~~: ~~flex;\n align~~-~~items~~: ~~baseline;\n cursor~~: ~~pointer;\n~~ }~~\n\n &__toggle~~ {~~\n margin~~-~~left~~: 1.~~5rem;\n flex~~-~~shrink:~~ ~~0;\n~~ display: flex~~;\n~~ align-items: ~~center;\n align~~-~~self~~: flex~~-start;\n gap: 0.6rem;\n~~ min-height: calc(var(--font-size) * var(--line-height))~~;\n &-~~icon.mg-details__toggle-icon--reverse {\n transform: rotate(180deg)~~;\n~~ }~~\n }\n\n &__details~~ {\n margin-top: var(--mg-details-spacing)~~;\n~~ }~~\n}\n\n/* hide toggle button when < 700px /\n~~@media (width < 43.75rem) {\n .mg-details__toggle > span {~~\n @include~~ sr-~~only~~()~~;\n~~ }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n tag: 'mg-details',\n styleUrl: 'mg-details.~~scss~~',\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 * 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 (newValue ~~=== undefined \|\| newValue.trim(~~) ~~=== ''~~) {\n throw new Error('<mg-details> prop \"toggleClosed\" and \"toggleOpened\" must be defined.');\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<boolean>;\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 }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <details class=\"mg-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n <summary>\n <slot name=\"summary\"></slot>\n <span class=\"mg-details__toggle\">\n <mg-icon icon=\"chevron-up\" size=\"small\" class={{ 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n <span class={{ 'sr-~~only~~': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n </span>\n </summary>\n <div class=\"mg-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,+oCAA+oC;;MCQvpCA,WAAS;;;;;;;;;IAmDZ,iBAAY,GAAG;MACrB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;KACnC,CAAC;;;uBArBoB,KAAK;oBAKS,KAAK;;EAdzC,cAAc,CAAC,QAAgB;IAC7B,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC5B,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;KACzF;GACF;EAYD,cAAc,CAAC,QAAiB;IAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACpC;;;;;;;EAqBD,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACxC;;;;;EAMD,MAAM;IACJ,QACE,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,IAClI,mBACE,YAAM,IAAI,EAAC,SAAS,GAAQ,EAC5B,YAAM,KAAK,EAAC,sBAAsB,IAChC,eAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY,EACtJ,YAAM,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,WAAK,KAAK,EAAC,uBAAuB,IAChC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,EACV;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDetails"],"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}}.mg-c-details summary{display:flex;align-items:baseline;cursor:pointer}.mg-c-details__toggle{display:flex;min-height:calc(var(--font-size)var(--line-height));flex-shrink:0;align-items:center;align-self:flex-start;margin-left:1.5rem;gap:.6rem}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-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 } from '@stencil/core';\nimport { isValidString } from '../../../utils/components.utils';\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 * 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('<mg-details> prop \"toggleClosed\" and \"toggleOpened\" must be defined.');\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<boolean>;\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 }\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\" size=\"small\" 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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-const mgDividerCss = ".mg-divider{margin:var(--mg-divider-vertical-spacing) auto;width:12rem;height:var(--mg-divider-thickness);background-color:var(--mg-divider-background-color)}.mg-divider.mg-divider--full{width:100%}";
+const mgDividerCss = ".mg-c-divider{width:12rem;height:var(--mg-divider-thickness);margin:var(--mg-divider-vertical-spacing) auto;background-color:var(--mg-divider-background-color)}.mg-c-divider.mg-c-divider--full{width:100%}";
 const MgDivider$1 = /*@__PURE__*/ proxyCustomElement(class MgDivider extends HTMLElement {
   constructor() {
@@ -15,8 +15,8 @@ const MgDivider$1 = /*@__PURE__*/ proxyCustomElement(class MgDivider extends HTM
    */
   render() {
     return (h("div", { class: {
-        'mg-divider': true,
-        'mg-divider--full': this.size === 'full',
+        'mg-c-divider': true,
+        'mg-c-divider--full': this.size === 'full',
       } }));
   }
   static get style() { return mgDividerCss; }

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

	@@ -1 +1 @@
1	- {"file":"mg-divider.js","mappings":";;AAAA,MAAM,YAAY,GAAG,~~wMAAwM~~;;~~MCOhNA~~,WAAS;;;;;gBAQe,SAAS;;;;;;EAM5C,MAAM;IACJ,QACE,WACE,KAAK,EAAE;QACL,~~YAAY~~,EAAE,IAAI;~~QAClB~~,~~kBAAkB~~,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;~~OACzC~~,GACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDivider"],"sources":["~~src~~/components/~~atoms/~~mg-divider~~/mg-divider~~.~~scss~~?tag=mg-divider&encapsulation=shadow","src/components/atoms/mg-divider/mg-divider.tsx"],"sourcesContent":[".mg-divider {~~\n margin~~: var(--mg-divider-~~vertical-spacing~~) ~~auto;\n width~~: ~~12rem;\n height:~~ var(--mg-divider-~~thickness~~)~~;\n~~ background-color: var(--mg-divider-background-color)~~;\n\n &.~~mg-divider--full {\n width: 100~~%;\n~~ }\n~~}\n~~","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'mg-divider',\n styleUrl: 'mg-divider.~~scss~~',\n shadow: true,\n})\nexport class MgDivider {\n /*************\n Decorators \n ***********/\n\n /\n * Define component size\n /\n @Prop() size: 'regular' \| 'full' = 'regular';\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div\n class={{\n 'mg-divider': true,\n 'mg-divider--full': this.size === 'full',\n }}\n ></div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-divider.js","mappings":";;AAAA,MAAM,YAAY,GAAG,8MAA8M;;MCOtNA,WAAS;;;;;gBAQe,SAAS;;;;;;EAM5C,MAAM;IACJ,QACE,WACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;OAC3C,GACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgDivider"],"sources":["../styles/dist/components/mg-divider.css?tag=mg-divider&encapsulation=shadow","src/components/atoms/mg-divider/mg-divider.tsx"],"sourcesContent":[".mg-c-divider{width:12rem;height:var(--mg-divider-thickness);margin:var(--mg-divider-vertical-spacing) auto;background-color:var(--mg-divider-background-color)}.mg-c-divider.mg-c-divider--full{width:100%}/# sourceMappingURL=mg-divider.css.map /\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'mg-divider',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css',\n shadow: true,\n})\nexport class MgDivider {\n /*************\n Decorators \n ***********/\n\n /\n * Define component size\n /\n @Prop() size: 'regular' \| 'full' = 'regular';\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div\n class={{\n 'mg-c-divider': true,\n 'mg-c-divider--full': this.size === 'full',\n }}\n ></div>\n );\n }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { c as createID, C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
-const mgFormCss = ".is-asterisk{color:hsl(var(--color-danger))}.mg-form,.mg-form-group{--mg-inputs-title-width:var(--mg-form-inputs-title-width, 15rem);--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-shrink:0}.mg-form.mg-form--all-required,.mg-form-group.mg-form--all-required{--mg-input-title-display:none}.mg-form>p,.mg-form-group>p{font-size:1.2rem}";
+const mgFormCss = ".mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width:var(--mg-form-inputs-title-width, 15rem);--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-shrink:0}.mg-c-form.mg-c-form--all-required{--mg-input-title-display:none}.mg-c-form>p{font-size:1.2rem}";
 const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLElement {
   constructor() {
@@ -12,7 +12,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
     this.formValid = createEvent(this, "form-valid", 7);
     this.formSubmit = createEvent(this, "form-submit", 7);
     // Classes
-    this.classAllRequired = 'mg-form--all-required';
+    this.classAllRequired = 'mg-c-form--all-required';
     /**
      * Define required message based on mg-inputs required elements
      */
@@ -92,7 +92,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
     this.disabled = false;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classCollection = new ClassList(['mg-form']);
+    this.classCollection = new ClassList(['mg-c-form']);
     this.requiredMessage = undefined;
   }
   handleAttributeChange() {
@@ -100,7 +100,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
     this.setRequiredMessage();
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     if (!this.readonly) {