@mgdis/mg-components 5.18.0 → 5.19.0

package/dist/collection/components/atoms/mg-button/test/mg-button.spec.js

@@ -28,13 +28,13 @@ describe('mg-button', () => {
   test('Should replace classes on variant changes', async () => {
     const page = await getPage({ variant: 'primary', label: 'label' });
     const element = page.doc.querySelector('mg-button');
-    let classPrimary = element.shadowRoot.querySelector('.mg-button--primary');
+    let classPrimary = element.shadowRoot.querySelector('.mg-c-button--primary');
     expect(classPrimary).not.toBeNull();
     // Change variant
     element.variant = 'danger';
     await page.waitForChanges();
-    classPrimary = element.shadowRoot.querySelector('.mg-button--primary');
-    const classDanger = element.shadowRoot.querySelector('.mg-button--danger');
+    classPrimary = element.shadowRoot.querySelector('.mg-c-button--primary');
+    const classDanger = element.shadowRoot.querySelector('.mg-c-button--danger');
     expect(classPrimary).toBeNull();
     expect(classDanger).not.toBeNull();
   });

package/dist/collection/components/atoms/mg-button/test/mg-button.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-button/test/mg-button.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgButton } from '../mg-button';\nimport { variants, buttonTypes } from '../mg-button.conf';\n\nconst getPage = (args, content = 'Text button') =>\n  newSpecPage({\n    components: [MgButton],\n    template: () => <mg-button {...args}>{content}</mg-button>,\n  });\n\ndescribe('mg-button', () => {\n  test('Should render a button with an id', async () => {\n    const { root } = await getPage({ identifier: 'identifier', label: 'label' });\n    expect(root).toMatchSnapshot();\n  });\n\n  describe.each(variants)('Should render an %s button', variant => {\n    test.each([false, true])('isIcon %s', async isIcon => {\n      const { root } = await getPage({ variant, isIcon, label: 'label' });\n      expect(root).toMatchSnapshot();\n    });\n  });\n\n  test.each(buttonTypes)('Should render a button, case type %s', async type => {\n    const { root } = await getPage({ label: 'label', type });\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([true, false, undefined])('Should render a button, case full-width %s', async fullWidth => {\n    const { root } = await getPage({ label: 'label', fullWidth });\n    expect(root).toMatchSnapshot();\n  });\n\n  test('Should replace classes on variant changes', async () => {\n    const page = await getPage({ variant: 'primary', label: 'label' });\n    const element = page.doc.querySelector('mg-button');\n    let classPrimary = element.shadowRoot.querySelector('.mg-button--primary');\n\n    expect(classPrimary).not.toBeNull();\n\n    // Change variant\n    element.variant = 'danger';\n    await page.waitForChanges();\n\n    classPrimary = element.shadowRoot.querySelector('.mg-button--primary');\n    const classDanger = element.shadowRoot.querySelector('.mg-button--danger');\n\n    expect(classPrimary).toBeNull();\n    expect(classDanger).not.toBeNull();\n  });\n\n  test.each(['', 'blu'])('Should throw error', async variant => {\n    expect.assertions(1);\n    try {\n      await getPage({ variant });\n    } catch (err) {\n      expect(err.message).toContain('<mg-button> prop \"variant\" must be one of: ');\n    }\n  });\n\n  test.each(['', ' ', undefined])('should throw error when using prop \"isIcon\" without a good prop \"label\"', async label => {\n    expect.assertions(1);\n    try {\n      await getPage({ isIcon: true, label });\n    } catch (err) {\n      expect(err.message).toContain('<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.');\n    }\n  });\n\n  test('should throw error when using prop \"isIcon\" without a good prop \"fullWidth\"', async () => {\n    expect.assertions(1);\n    try {\n      await getPage({ isIcon: true, label: 'batman', fullWidth: true });\n    } catch (err) {\n      expect(err.message).toContain('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\"');\n    }\n  });\n\n  describe('prevent double click', () => {\n    test('should NOT disable button after click', async () => {\n      const page = await getPage({ identifier: 'identifier' });\n      const button = page.doc.querySelector('mg-button');\n      const spy = jest.spyOn(page.rootInstance.disabledChange, 'emit');\n\n      expect(page.root).toMatchSnapshot();\n\n      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(spy).not.toHaveBeenCalled();\n      expect(page.root).toMatchSnapshot();\n\n      button.disabled = true;\n      await page.waitForChanges();\n      expect(spy).toHaveBeenCalledWith(true);\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test('should disable button after click', async () => {\n      const page = await getPage({ disableOnClick: true });\n      const button = page.doc.querySelector('mg-button');\n      const spy = jest.spyOn(page.rootInstance.disabledChange, 'emit');\n\n      expect(page.root).toMatchSnapshot();\n\n      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(spy).toHaveBeenCalledWith(true);\n      expect(page.root).toMatchSnapshot();\n\n      button.disabled = false;\n      await page.waitForChanges();\n\n      expect(spy).toHaveBeenCalledWith(false);\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test('should not trigger disableOnClick when disabled', async () => {\n      const page = await getPage({\n        disabled: true,\n        disableOnCLick: true,\n      });\n      const button = page.doc.querySelector('mg-button');\n      const spy = jest.spyOn(page.rootInstance.disabledChange, 'emit');\n\n      expect(page.root).toMatchSnapshot();\n\n      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(spy).not.toHaveBeenCalled();\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test('should not have fn when disabled', async () => {\n      const page = await getPage({\n        disabled: true,\n        onClick: () => false,\n      });\n\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n\n  describe.each([{ identifier: 'identifier' }, { identifier: 'identifier', disabled: true }])('keyboard', props => {\n    test.each([' ', 'Enter', 'NumpadEnter'])('Should trigger click event on keydown', async key => {\n      const page = await getPage(props);\n      const button = page.doc.querySelector('mg-button');\n\n      const spy = jest.spyOn(button, 'dispatchEvent');\n\n      button.dispatchEvent(new KeyboardEvent(key === ' ' ? 'keyup' : 'keydown', { bubbles: true, key }));\n      await page.waitForChanges();\n\n      if (props.disabled) {\n        expect(spy).not.lastCalledWith(expect.objectContaining({ type: 'click' }));\n      } else {\n        expect(spy).lastCalledWith(expect.objectContaining({ type: 'click' }));\n      }\n    });\n    test.each(['ArrowRight', 'Tab', ' '])('Should NOT trigger click event on keydown', async key => {\n      const page = await getPage(props);\n      const button = page.doc.querySelector('mg-button');\n\n      const spy = jest.spyOn(button, 'dispatchEvent');\n\n      button.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key }));\n      await page.waitForChanges();\n\n      expect(spy).not.lastCalledWith(expect.objectContaining({ type: 'click' }));\n    });\n  });\n});\n"]}
+{"version":3,"file":"mg-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-button/test/mg-button.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgButton } from '../mg-button';\nimport { variants, buttonTypes } from '../mg-button.conf';\n\nconst getPage = (args, content = 'Text button') =>\n  newSpecPage({\n    components: [MgButton],\n    template: () => <mg-button {...args}>{content}</mg-button>,\n  });\n\ndescribe('mg-button', () => {\n  test('Should render a button with an id', async () => {\n    const { root } = await getPage({ identifier: 'identifier', label: 'label' });\n    expect(root).toMatchSnapshot();\n  });\n\n  describe.each(variants)('Should render an %s button', variant => {\n    test.each([false, true])('isIcon %s', async isIcon => {\n      const { root } = await getPage({ variant, isIcon, label: 'label' });\n      expect(root).toMatchSnapshot();\n    });\n  });\n\n  test.each(buttonTypes)('Should render a button, case type %s', async type => {\n    const { root } = await getPage({ label: 'label', type });\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([true, false, undefined])('Should render a button, case full-width %s', async fullWidth => {\n    const { root } = await getPage({ label: 'label', fullWidth });\n    expect(root).toMatchSnapshot();\n  });\n\n  test('Should replace classes on variant changes', async () => {\n    const page = await getPage({ variant: 'primary', label: 'label' });\n    const element = page.doc.querySelector('mg-button');\n    let classPrimary = element.shadowRoot.querySelector('.mg-c-button--primary');\n\n    expect(classPrimary).not.toBeNull();\n\n    // Change variant\n    element.variant = 'danger';\n    await page.waitForChanges();\n\n    classPrimary = element.shadowRoot.querySelector('.mg-c-button--primary');\n    const classDanger = element.shadowRoot.querySelector('.mg-c-button--danger');\n\n    expect(classPrimary).toBeNull();\n    expect(classDanger).not.toBeNull();\n  });\n\n  test.each(['', 'blu'])('Should throw error', async variant => {\n    expect.assertions(1);\n    try {\n      await getPage({ variant });\n    } catch (err) {\n      expect(err.message).toContain('<mg-button> prop \"variant\" must be one of: ');\n    }\n  });\n\n  test.each(['', ' ', undefined])('should throw error when using prop \"isIcon\" without a good prop \"label\"', async label => {\n    expect.assertions(1);\n    try {\n      await getPage({ isIcon: true, label });\n    } catch (err) {\n      expect(err.message).toContain('<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.');\n    }\n  });\n\n  test('should throw error when using prop \"isIcon\" without a good prop \"fullWidth\"', async () => {\n    expect.assertions(1);\n    try {\n      await getPage({ isIcon: true, label: 'batman', fullWidth: true });\n    } catch (err) {\n      expect(err.message).toContain('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\"');\n    }\n  });\n\n  describe('prevent double click', () => {\n    test('should NOT disable button after click', async () => {\n      const page = await getPage({ identifier: 'identifier' });\n      const button = page.doc.querySelector('mg-button');\n      const spy = jest.spyOn(page.rootInstance.disabledChange, 'emit');\n\n      expect(page.root).toMatchSnapshot();\n\n      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(spy).not.toHaveBeenCalled();\n      expect(page.root).toMatchSnapshot();\n\n      button.disabled = true;\n      await page.waitForChanges();\n      expect(spy).toHaveBeenCalledWith(true);\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test('should disable button after click', async () => {\n      const page = await getPage({ disableOnClick: true });\n      const button = page.doc.querySelector('mg-button');\n      const spy = jest.spyOn(page.rootInstance.disabledChange, 'emit');\n\n      expect(page.root).toMatchSnapshot();\n\n      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(spy).toHaveBeenCalledWith(true);\n      expect(page.root).toMatchSnapshot();\n\n      button.disabled = false;\n      await page.waitForChanges();\n\n      expect(spy).toHaveBeenCalledWith(false);\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test('should not trigger disableOnClick when disabled', async () => {\n      const page = await getPage({\n        disabled: true,\n        disableOnCLick: true,\n      });\n      const button = page.doc.querySelector('mg-button');\n      const spy = jest.spyOn(page.rootInstance.disabledChange, 'emit');\n\n      expect(page.root).toMatchSnapshot();\n\n      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(spy).not.toHaveBeenCalled();\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test('should not have fn when disabled', async () => {\n      const page = await getPage({\n        disabled: true,\n        onClick: () => false,\n      });\n\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n\n  describe.each([{ identifier: 'identifier' }, { identifier: 'identifier', disabled: true }])('keyboard', props => {\n    test.each([' ', 'Enter', 'NumpadEnter'])('Should trigger click event on keydown', async key => {\n      const page = await getPage(props);\n      const button = page.doc.querySelector('mg-button');\n\n      const spy = jest.spyOn(button, 'dispatchEvent');\n\n      button.dispatchEvent(new KeyboardEvent(key === ' ' ? 'keyup' : 'keydown', { bubbles: true, key }));\n      await page.waitForChanges();\n\n      if (props.disabled) {\n        expect(spy).not.lastCalledWith(expect.objectContaining({ type: 'click' }));\n      } else {\n        expect(spy).lastCalledWith(expect.objectContaining({ type: 'click' }));\n      }\n    });\n    test.each(['ArrowRight', 'Tab', ' '])('Should NOT trigger click event on keydown', async key => {\n      const page = await getPage(props);\n      const button = page.doc.querySelector('mg-button');\n\n      const spy = jest.spyOn(button, 'dispatchEvent');\n\n      button.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key }));\n      await page.waitForChanges();\n\n      expect(spy).not.lastCalledWith(expect.objectContaining({ type: 'click' }));\n    });\n  });\n});\n"]}

package/dist/collection/components/atoms/mg-card/mg-card.js

@@ -7,7 +7,7 @@ export class MgCard {
      * 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
@@ -18,17 +18,17 @@ export class MgCard {
     };
     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))
@@ -36,9 +36,9 @@ export class MgCard {
     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 *
@@ -56,18 +56,18 @@ export class MgCard {
    */
   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 is() { return "mg-card"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-card.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-card.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-card.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-card.css"]
     };
   }
   static get properties() {

package/dist/collection/components/atoms/mg-card/mg-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-card.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-card/mg-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAyB,aAAa,EAAoB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAOlG,MAAM,OAAO,MAAM;;IACjB;;mBAEe;IAEE,SAAI,GAAG,SAAS,CAAC;IACjB,cAAS,GAAG,IAAI,CAAC,IAAI,CAAC;IAsCvC;;;OAGG;IACK,2BAAsB,GAAG,GAAS,EAAE;MAC1C,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;IACtE,CAAC,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;EACvF,CAAC;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;EACvF,CAAC;EAeD;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC/C,CAAC;EAED;;;KAGG;EACH,MAAM;;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;MACpC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CAAC,MAAM,CAAC,KAAI,YAAM,KAAK,EAAC,cAAc,GAAQ;MAC5E,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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,"file":"mg-card.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-card/mg-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAyB,aAAa,EAAoB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAOlG,MAAM,OAAO,MAAM;;IACjB;;mBAEe;IAEE,SAAI,GAAG,SAAS,CAAC;IACjB,cAAS,GAAG,WAAW,CAAC;IAsCzC;;;OAGG;IACK,2BAAsB,GAAG,GAAS,EAAE;MAC1C,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;IACtE,CAAC,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;EACvF,CAAC;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;EACvF,CAAC;EAeD;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC/C,CAAC;EAED;;;KAGG;EACH,MAAM;;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;MACpC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CAAC,MAAM,CAAC,KAAI,YAAM,KAAK,EAAC,gBAAgB,GAAQ;MAC9E,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/atoms/mg-character-left/mg-character-left.js

@@ -26,18 +26,18 @@ export class MgCharacterLeft {
    * @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))));
   }
   static get is() { return "mg-character-left"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-character-left.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-character-left.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css"]
     };
   }
   static get properties() {

package/dist/collection/components/atoms/mg-character-left/mg-character-left.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-character-left.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-character-left/mg-character-left.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,MAAM,OAAO,eAAe;;;sBAyBL,EAAE;;;EAOvB,iBAAiB,CAAC,QAAgB;IAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;KACtE;EACH,CAAC;EAED;;iBAEe;EAEf;;KAEG;EACH,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;EACrD,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,YAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ;MAC3C,2BAAkB,MAAM;QACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM;;QAAG,IAAI,CAAC,SAAS,CACpD;MACP,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,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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,"file":"mg-character-left.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-character-left/mg-character-left.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,MAAM,OAAO,eAAe;;;sBAyBL,EAAE;;;EAOvB,iBAAiB,CAAC,QAAgB;IAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;KACtE;EACH,CAAC;EAED;;iBAEe;EAEf;;KAEG;EACH,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;EACrD,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,YAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ;MAC3C,2BAAkB,MAAM;QACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM;;QAAG,IAAI,CAAC,SAAS,CACpD;MACP,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,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/atoms/mg-divider/mg-divider.js

@@ -9,20 +9,20 @@ export class MgDivider {
    */
   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 is() { return "mg-divider"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-divider.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-divider.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css"]
     };
   }
   static get properties() {

package/dist/collection/components/atoms/mg-divider/mg-divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-divider.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-divider/mg-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;;gBAQe,SAAS;;EAE5C;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;OACzC,GACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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,"file":"mg-divider.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-divider/mg-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;;gBAQe,SAAS;;EAE5C;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;OAC3C,GACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/atoms/mg-icon/mg-icon.js

@@ -29,15 +29,15 @@ export class MgIcon {
     this.variant = undefined;
     this.variantStyle = undefined;
     this.spin = false;
-    this.classCollection = new ClassList(['mg-icon']);
+    this.classCollection = new ClassList(['mg-c-icon']);
   }
   validateIcon(newValue, oldValue) {
     if (!iconList.includes(newValue))
       throw new Error(`<mg-icon> prop "icon" must be one of: ${iconList.join(', ')}`);
     else {
       if (oldValue !== undefined)
-        this.classCollection.delete(`mg-icon--${oldValue}`);
-      this.classCollection.add(`mg-icon--${newValue}`);
+        this.classCollection.delete(`mg-c-icon--${oldValue}`);
+      this.classCollection.add(`mg-c-icon--${newValue}`);
       this.renderIcon(newValue);
     }
   }
@@ -46,8 +46,8 @@ export class MgIcon {
       throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}`);
     else {
       if (oldValue !== undefined)
-        this.classCollection.delete(`mg-icon--size-${oldValue}`);
-      this.classCollection.add(`mg-icon--size-${newValue}`);
+        this.classCollection.delete(`mg-c-icon--size-${oldValue}`);
+      this.classCollection.add(`mg-c-icon--size-${newValue}`);
     }
   }
   validateVariant(newValue, oldValue) {
@@ -57,8 +57,8 @@ export class MgIcon {
       else {
         this.setDefaultVariantStyle();
         if (oldValue !== undefined)
-          this.classCollection.delete(`mg-icon--variant-${oldValue}`);
-        this.classCollection.add(`mg-icon--variant-${newValue}`);
+          this.classCollection.delete(`mg-c-icon--variant-${oldValue}`);
+        this.classCollection.add(`mg-c-icon--variant-${newValue}`);
       }
     }
   }
@@ -68,19 +68,17 @@ export class MgIcon {
         throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}`);
       else {
         if (oldValue !== undefined)
-          this.classCollection.delete(`mg-icon--variant-style-${oldValue}`);
-        this.classCollection.add(`mg-icon--variant-style-${newValue}`);
+          this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
+        this.classCollection.add(`mg-c-icon--variant-style-${newValue}`);
       }
     }
   }
   handleSpin(newValue) {
     if (newValue) {
-      this.classCollection.add('mg-icon--spin');
-      this.classCollection.add('mg-a11y-animation');
+      this.classCollection.add('mg-c-icon--spin');
     }
     else {
-      this.classCollection.delete('mg-icon--spin');
-      this.classCollection.delete('mg-a11y-animation');
+      this.classCollection.delete('mg-c-icon--spin');
     }
   }
   /**
@@ -105,12 +103,12 @@ export class MgIcon {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-icon.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-icon.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-icon.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-icon.css"]
     };
   }
   static get properties() {

package/dist/collection/components/atoms/mg-icon/mg-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-icon/mg-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Watch, State, Element } from '@stencil/core';\nimport { sizes, variants, IconVariantType, IconSizeType, IconVariantStyleType, variantStyles } from './mg-icon.conf';\nimport { ClassList } from '../../../utils/components.utils';\nimport iconList from '@mgdis/img/dist/icons/index.json';\nimport { icons } from '../../../assets/icons';\n\n@Component({\n  tag: 'mg-icon',\n  styleUrl: 'mg-icon.scss',\n  shadow: true,\n})\nexport class MgIcon {\n  private svg: SVGSVGElement;\n\n  /**\n   * Icon HTML Element\n   */\n  @Element() element: HTMLMgIconElement;\n\n  /**\n   * Icon to display.\n   */\n  @Prop() icon!: string;\n  @Watch('icon')\n  validateIcon(newValue: MgIcon['icon'], oldValue?: MgIcon['icon']): void {\n    if (!iconList.includes(newValue)) throw new Error(`<mg-icon> prop \"icon\" must be one of: ${iconList.join(', ')}`);\n    else {\n      if (oldValue !== undefined) this.classCollection.delete(`mg-icon--${oldValue}`);\n      this.classCollection.add(`mg-icon--${newValue}`);\n      this.renderIcon(newValue);\n    }\n  }\n\n  /**\n   * Define icon size\n   */\n  @Prop() size: IconSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgIcon['size'], oldValue?: MgIcon['size']): void {\n    if (!sizes.includes(newValue)) throw new Error(`<mg-icon> prop \"size\" must be one of: ${sizes.join(', ')}`);\n    else {\n      if (oldValue !== undefined) this.classCollection.delete(`mg-icon--size-${oldValue}`);\n      this.classCollection.add(`mg-icon--size-${newValue}`);\n    }\n  }\n\n  /**\n   * Define icon variant color\n   */\n  @Prop() variant: IconVariantType;\n  @Watch('variant')\n  validateVariant(newValue: MgIcon['variant'], oldValue?: MgIcon['variant']): void {\n    if (Boolean(newValue)) {\n      if (!variants.includes(newValue)) throw new Error(`<mg-icon> prop \"variant\" must be one of: ${variants.join(', ')}`);\n      else {\n        this.setDefaultVariantStyle();\n        if (oldValue !== undefined) this.classCollection.delete(`mg-icon--variant-${oldValue}`);\n        this.classCollection.add(`mg-icon--variant-${newValue}`);\n      }\n    }\n  }\n\n  /**\n   * Define icon color variant style\n   * Add a color to the icon based on variant color with given style\n   * 'full': Used to set a circular background with variant soft color and icon variant color\n   * 'background': Used to set a circular background with variant soft color\n   * 'icon': Used to set a color only to the icon\n   */\n  @Prop({ mutable: true }) variantStyle: IconVariantStyleType;\n  @Watch('variantStyle')\n  validateVariantStyle(newValue: MgIcon['variantStyle'], oldValue?: MgIcon['variantStyle']): void {\n    if (Boolean(newValue)) {\n      if (!variantStyles.includes(newValue)) throw new Error(`<mg-icon> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}`);\n      else {\n        if (oldValue !== undefined) this.classCollection.delete(`mg-icon--variant-style-${oldValue}`);\n        this.classCollection.add(`mg-icon--variant-style-${newValue}`);\n      }\n    }\n  }\n\n  /**\n   * Make the icon spin\n   */\n  @Prop() spin = false;\n  @Watch('spin')\n  handleSpin(newValue: MgIcon['spin']): void {\n    if (newValue) {\n      this.classCollection.add('mg-icon--spin');\n      this.classCollection.add('mg-a11y-animation');\n    } else {\n      this.classCollection.delete('mg-icon--spin');\n      this.classCollection.delete('mg-a11y-animation');\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-icon']);\n\n  /**\n   * Method 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 = 'background';\n  };\n\n  /**\n   * Render icon in shadowroot\n   * @param icon - icon to render\n   */\n  private renderIcon = icon => {\n    this.element.shadowRoot.innerHTML = icons[icon];\n    this.svg = this.element.shadowRoot.querySelector('svg');\n    // update svg attributes\n    this.svg.setAttribute('aria-hidden', 'true');\n    this.svg.setAttribute('focusable', 'false');\n    this.svg.setAttribute('class', this.classCollection.join());\n  };\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateIcon(this.icon);\n    this.validateSize(this.size);\n    this.validateVariant(this.variant);\n    this.validateVariantStyle(this.variantStyle);\n    this.handleSpin(this.spin);\n    // render icon\n    this.renderIcon(this.icon);\n  }\n\n  /**\n   * update html when component trigger changes\n   */\n  componentWillUpdate() {\n    this.svg.setAttribute('class', this.classCollection.join());\n  }\n}\n"]}
+{"version":3,"file":"mg-icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-icon/mg-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Watch, State, Element } from '@stencil/core';\nimport { sizes, variants, IconVariantType, IconSizeType, IconVariantStyleType, variantStyles } from './mg-icon.conf';\nimport { ClassList } from '../../../utils/components.utils';\nimport iconList from '@mgdis/img/dist/icons/index.json';\nimport { icons } from '../../../assets/icons';\n\n@Component({\n  tag: 'mg-icon',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-icon.css',\n  shadow: true,\n})\nexport class MgIcon {\n  private svg: SVGSVGElement;\n\n  /**\n   * Icon HTML Element\n   */\n  @Element() element: HTMLMgIconElement;\n\n  /**\n   * Icon to display.\n   */\n  @Prop() icon!: string;\n  @Watch('icon')\n  validateIcon(newValue: MgIcon['icon'], oldValue?: MgIcon['icon']): void {\n    if (!iconList.includes(newValue)) throw new Error(`<mg-icon> prop \"icon\" must be one of: ${iconList.join(', ')}`);\n    else {\n      if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--${oldValue}`);\n      this.classCollection.add(`mg-c-icon--${newValue}`);\n      this.renderIcon(newValue);\n    }\n  }\n\n  /**\n   * Define icon size\n   */\n  @Prop() size: IconSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgIcon['size'], oldValue?: MgIcon['size']): void {\n    if (!sizes.includes(newValue)) throw new Error(`<mg-icon> prop \"size\" must be one of: ${sizes.join(', ')}`);\n    else {\n      if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--size-${oldValue}`);\n      this.classCollection.add(`mg-c-icon--size-${newValue}`);\n    }\n  }\n\n  /**\n   * Define icon variant color\n   */\n  @Prop() variant: IconVariantType;\n  @Watch('variant')\n  validateVariant(newValue: MgIcon['variant'], oldValue?: MgIcon['variant']): void {\n    if (Boolean(newValue)) {\n      if (!variants.includes(newValue)) throw new Error(`<mg-icon> prop \"variant\" must be one of: ${variants.join(', ')}`);\n      else {\n        this.setDefaultVariantStyle();\n        if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--variant-${oldValue}`);\n        this.classCollection.add(`mg-c-icon--variant-${newValue}`);\n      }\n    }\n  }\n\n  /**\n   * Define icon color variant style\n   * Add a color to the icon based on variant color with given style\n   * 'full': Used to set a circular background with variant soft color and icon variant color\n   * 'background': Used to set a circular background with variant soft color\n   * 'icon': Used to set a color only to the icon\n   */\n  @Prop({ mutable: true }) variantStyle: IconVariantStyleType;\n  @Watch('variantStyle')\n  validateVariantStyle(newValue: MgIcon['variantStyle'], oldValue?: MgIcon['variantStyle']): void {\n    if (Boolean(newValue)) {\n      if (!variantStyles.includes(newValue)) throw new Error(`<mg-icon> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}`);\n      else {\n        if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);\n        this.classCollection.add(`mg-c-icon--variant-style-${newValue}`);\n      }\n    }\n  }\n\n  /**\n   * Make the icon spin\n   */\n  @Prop() spin = false;\n  @Watch('spin')\n  handleSpin(newValue: MgIcon['spin']): void {\n    if (newValue) {\n      this.classCollection.add('mg-c-icon--spin');\n    } else {\n      this.classCollection.delete('mg-c-icon--spin');\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-icon']);\n\n  /**\n   * Method 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 = 'background';\n  };\n\n  /**\n   * Render icon in shadowroot\n   * @param icon - icon to render\n   */\n  private renderIcon = icon => {\n    this.element.shadowRoot.innerHTML = icons[icon];\n    this.svg = this.element.shadowRoot.querySelector('svg');\n    // update svg attributes\n    this.svg.setAttribute('aria-hidden', 'true');\n    this.svg.setAttribute('focusable', 'false');\n    this.svg.setAttribute('class', this.classCollection.join());\n  };\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateIcon(this.icon);\n    this.validateSize(this.size);\n    this.validateVariant(this.variant);\n    this.validateVariantStyle(this.variantStyle);\n    this.handleSpin(this.spin);\n    // render icon\n    this.renderIcon(this.icon);\n  }\n\n  /**\n   * update html when component trigger changes\n   */\n  componentWillUpdate() {\n    this.svg.setAttribute('class', this.classCollection.join());\n  }\n}\n"]}

package/dist/collection/components/atoms/mg-icon/test/mg-icon.spec.js

@@ -30,13 +30,13 @@ describe('mg-icon', () => {
     expect(root).toMatchSnapshot();
   });
   test.each([
-    { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-icon--chevron-up'], nextProps: { icon: 'chevron-down' }, nextClass: ['.mg-icon--chevron-down'] },
-    { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-icon--size-regular'], nextProps: { size: 'large' }, nextClass: ['.mg-icon--size-large'] },
+    { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-c-icon--chevron-up'], nextProps: { icon: 'chevron-down' }, nextClass: ['.mg-c-icon--chevron-down'] },
+    { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-c-icon--size-regular'], nextProps: { size: 'large' }, nextClass: ['.mg-c-icon--size-large'] },
     {
       initialProps: { icon: 'chevron-up', variant: 'success', variantStyle: 'icon' },
-      initialClass: ['.mg-icon--variant-success', '.mg-icon--variant-style-icon'],
+      initialClass: ['.mg-c-icon--variant-success', '.mg-c-icon--variant-style-icon'],
       nextProps: { variant: 'danger', variantStyle: 'background' },
-      nextClass: ['.mg-icon--variant-danger', '.mg-icon--variant-style-background'],
+      nextClass: ['.mg-c-icon--variant-danger', '.mg-c-icon--variant-style-background'],
     },
   ])('Should replace classes on icon changes', async ({ initialProps, initialClass, nextProps, nextClass }) => {
     const page = await getPage(initialProps);

package/dist/collection/components/atoms/mg-icon/test/mg-icon.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-icon.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-icon/test/mg-icon.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgIcon } from '../mg-icon';\nimport { sizes, variantStyles, variants } from '../mg-icon.conf';\nimport iconList from '@mgdis/img/dist/icons/index.json';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgIcon],\n    template: () => <mg-icon {...args}></mg-icon>,\n  });\n\ndescribe('mg-icon', () => {\n  afterEach(() => {\n    jest.clearAllMocks();\n  });\n\n  describe.each(iconList)('Should render %s icon', icon => {\n    test.each(sizes)('in %s size', async size => {\n      const { root } = await getPage({ icon, size });\n      expect(root).toMatchSnapshot();\n    });\n\n    test.each(variants)('using %s variant', async variant => {\n      const { root } = await getPage({ icon, variant });\n      expect(root).toMatchSnapshot();\n    });\n\n    test.each(variants.flatMap(variant => variantStyles.map(variantStyle => ({ variant, variantStyle }))))('using %s variant', async ({ variant, variantStyle }) => {\n      const { root } = await getPage({ icon, variant, variantStyle });\n      expect(root).toMatchSnapshot();\n    });\n  });\n\n  test('Should render a spin icon', async () => {\n    const { root } = await getPage({ icon: 'check-circle', spin: true });\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([\n    { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-icon--chevron-up'], nextProps: { icon: 'chevron-down' }, nextClass: ['.mg-icon--chevron-down'] },\n    { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-icon--size-regular'], nextProps: { size: 'large' }, nextClass: ['.mg-icon--size-large'] },\n    {\n      initialProps: { icon: 'chevron-up', variant: 'success', variantStyle: 'icon' },\n      initialClass: ['.mg-icon--variant-success', '.mg-icon--variant-style-icon'],\n      nextProps: { variant: 'danger', variantStyle: 'background' },\n      nextClass: ['.mg-icon--variant-danger', '.mg-icon--variant-style-background'],\n    },\n  ])('Should replace classes on icon changes', async ({ initialProps, initialClass, nextProps, nextClass }) => {\n    const page = await getPage(initialProps);\n    const element = page.doc.querySelector('mg-icon');\n\n    // validate inital state\n    initialClass.forEach(className => {\n      expect(element.shadowRoot.querySelector(className)).not.toBeNull();\n    });\n\n    nextClass.forEach(className => {\n      expect(element.shadowRoot.querySelector(className)).toBeNull();\n    });\n\n    // update props\n    Object.keys(nextProps).forEach(key => {\n      element[key] = nextProps[key];\n    });\n\n    await page.waitForChanges();\n\n    // validate next state\n    initialClass.forEach(className => {\n      expect(element.shadowRoot.querySelector(className)).toBeNull();\n    });\n\n    nextClass.forEach(className => {\n      expect(element.shadowRoot.querySelector(className)).not.toBeNull();\n    });\n    expect(page.root).toMatchSnapshot();\n  });\n\n  describe('errors', () => {\n    const iconError = ['', 'blu', undefined].map(icon => ({ props: { icon }, error: `<mg-icon> prop \"icon\" must be one of: ${iconList.join(', ')}` }));\n    const sizeError = ['', 'blu'].map(size => ({ props: { icon: 'check-circle', size }, error: `<mg-icon> prop \"size\" must be one of: ${sizes.join(', ')}` }));\n    const variantError = { props: { icon: 'check-circle', variant: 'blu' }, error: `<mg-icon> prop \"variant\" must be one of: ${variants.join(', ')}` };\n    const variantStyleError = {\n      props: { icon: 'check-circle', variantStyle: 'blu' },\n      error: `<mg-icon> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}`,\n    };\n\n    test.each([...iconError, ...sizeError, variantError, variantStyleError])('Should throw error with invalid icon property: %s', async ({ props, error }) => {\n      expect.assertions(1);\n      try {\n        await getPage(props);\n      } catch (err) {\n        expect(err.message).toMatch(error);\n      }\n    });\n  });\n});\n"]}
+{"version":3,"file":"mg-icon.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-icon/test/mg-icon.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgIcon } from '../mg-icon';\nimport { sizes, variantStyles, variants } from '../mg-icon.conf';\nimport iconList from '@mgdis/img/dist/icons/index.json';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgIcon],\n    template: () => <mg-icon {...args}></mg-icon>,\n  });\n\ndescribe('mg-icon', () => {\n  afterEach(() => {\n    jest.clearAllMocks();\n  });\n\n  describe.each(iconList)('Should render %s icon', icon => {\n    test.each(sizes)('in %s size', async size => {\n      const { root } = await getPage({ icon, size });\n      expect(root).toMatchSnapshot();\n    });\n\n    test.each(variants)('using %s variant', async variant => {\n      const { root } = await getPage({ icon, variant });\n      expect(root).toMatchSnapshot();\n    });\n\n    test.each(variants.flatMap(variant => variantStyles.map(variantStyle => ({ variant, variantStyle }))))('using %s variant', async ({ variant, variantStyle }) => {\n      const { root } = await getPage({ icon, variant, variantStyle });\n      expect(root).toMatchSnapshot();\n    });\n  });\n\n  test('Should render a spin icon', async () => {\n    const { root } = await getPage({ icon: 'check-circle', spin: true });\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([\n    { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-c-icon--chevron-up'], nextProps: { icon: 'chevron-down' }, nextClass: ['.mg-c-icon--chevron-down'] },\n    { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-c-icon--size-regular'], nextProps: { size: 'large' }, nextClass: ['.mg-c-icon--size-large'] },\n    {\n      initialProps: { icon: 'chevron-up', variant: 'success', variantStyle: 'icon' },\n      initialClass: ['.mg-c-icon--variant-success', '.mg-c-icon--variant-style-icon'],\n      nextProps: { variant: 'danger', variantStyle: 'background' },\n      nextClass: ['.mg-c-icon--variant-danger', '.mg-c-icon--variant-style-background'],\n    },\n  ])('Should replace classes on icon changes', async ({ initialProps, initialClass, nextProps, nextClass }) => {\n    const page = await getPage(initialProps);\n    const element = page.doc.querySelector('mg-icon');\n\n    // validate inital state\n    initialClass.forEach(className => {\n      expect(element.shadowRoot.querySelector(className)).not.toBeNull();\n    });\n\n    nextClass.forEach(className => {\n      expect(element.shadowRoot.querySelector(className)).toBeNull();\n    });\n\n    // update props\n    Object.keys(nextProps).forEach(key => {\n      element[key] = nextProps[key];\n    });\n\n    await page.waitForChanges();\n\n    // validate next state\n    initialClass.forEach(className => {\n      expect(element.shadowRoot.querySelector(className)).toBeNull();\n    });\n\n    nextClass.forEach(className => {\n      expect(element.shadowRoot.querySelector(className)).not.toBeNull();\n    });\n    expect(page.root).toMatchSnapshot();\n  });\n\n  describe('errors', () => {\n    const iconError = ['', 'blu', undefined].map(icon => ({ props: { icon }, error: `<mg-icon> prop \"icon\" must be one of: ${iconList.join(', ')}` }));\n    const sizeError = ['', 'blu'].map(size => ({ props: { icon: 'check-circle', size }, error: `<mg-icon> prop \"size\" must be one of: ${sizes.join(', ')}` }));\n    const variantError = { props: { icon: 'check-circle', variant: 'blu' }, error: `<mg-icon> prop \"variant\" must be one of: ${variants.join(', ')}` };\n    const variantStyleError = {\n      props: { icon: 'check-circle', variantStyle: 'blu' },\n      error: `<mg-icon> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}`,\n    };\n\n    test.each([...iconError, ...sizeError, variantError, variantStyleError])('Should throw error with invalid icon property: %s', async ({ props, error }) => {\n      expect.assertions(1);\n      try {\n        await getPage(props);\n      } catch (err) {\n        expect(err.message).toMatch(error);\n      }\n    });\n  });\n});\n"]}

package/dist/collection/components/atoms/mg-input-title/mg-input-title.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { isValidString } from "../../../utils/components.utils";
 export class MgInputTitle {
   constructor() {
     this.identifier = undefined;
@@ -7,7 +8,7 @@ export class MgInputTitle {
     this.tagName = 'label';
   }
   validateIdentifier(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '') {
+    if (!isValidString(newValue)) {
       throw new Error('<mg-input-title> prop "identifier" is required.');
     }
   }
@@ -31,18 +32,18 @@ export class MgInputTitle {
   render() {
     const TagName = this.tagName;
     // \u00A0 represent a &nbsp;
-    return (h(TagName, { class: "mg-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", null), this.required && (h("span", { class: "mg-input-title__required" }, "\u00A0", h("span", { class: "is-asterisk" }, "*")))));
+    return (h(TagName, { class: "mg-c-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", null), this.required && (h("span", { class: "mg-c-input-title__required" }, "\u00A0", h("span", { class: "mg-u-is-asterisk" }, "*")))));
   }
   static get is() { return "mg-input-title"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-input-title.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-input-title.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css"]
     };
   }
   static get properties() {

package/dist/collection/components/atoms/mg-input-title/mg-input-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-input-title.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-input-title/mg-input-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOjE,MAAM,OAAO,YAAY;;;;oBAoBJ,KAAK;mBASL,OAAO;;EAvB1B,kBAAkB,CAAC,QAAgB;IACjC,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MAC1D,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;KACpE;EACH,CAAC;EAYD,gBAAgB,CAAC,QAAkC;IACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;EAC/C,CAAC;EAOD;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACvC,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAC7B,4BAA4B;IAC5B,OAAO,CACL,EAAC,OAAO,IAAC,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;MAClF,eAAa;MACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,YAAM,KAAK,EAAC,0BAA0B;;QAC9B,YAAM,KAAK,EAAC,aAAa,QAAS,CACnC,CACR,CACO,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'mg-input-title',\n  styleUrl: 'mg-input-title.scss',\n  scoped: true,\n})\nexport class MgInputTitle {\n  /**\n   * Label input id\n   */\n  @Prop() identifier!: string;\n  @Watch('identifier')\n  validateIdentifier(newValue: string): void {\n    if (typeof newValue !== 'string' || newValue.trim() === '') {\n      throw new Error('<mg-input-title> prop \"identifier\" is required.');\n    }\n  }\n\n  /**\n   * If input is required an asterisk is added at the end of the label\n   */\n  @Prop() required: boolean;\n\n  /**\n   * Switch from label to fieldset sementic\n   */\n  @Prop() isLegend = false;\n  @Watch('isLegend')\n  validateIsLegend(newValue: MgInputTitle['isLegend']) {\n    this.tagName = newValue ? 'legend' : 'label';\n  }\n\n  /**\n   * Component parent tagname\n   */\n  @State() tagName = 'label';\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Init tag name\n   */\n  componentWillLoad(): void {\n    this.validateIdentifier(this.identifier);\n    this.validateIsLegend(this.isLegend);\n  }\n\n  /**\n   * Render\n   * @returns HTML element\n   */\n  render(): HTMLElement {\n    const TagName = this.tagName;\n    // \\u00A0 represent a &nbsp;\n    return (\n      <TagName class=\"mg-input-title\" htmlFor={this.isLegend ? undefined : this.identifier}>\n        <slot></slot>\n        {this.required && (\n          <span class=\"mg-input-title__required\">\n            &nbsp;<span class=\"is-asterisk\">*</span>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-input-title.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-input-title/mg-input-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAOhE,MAAM,OAAO,YAAY;;;;oBAoBJ,KAAK;mBASL,OAAO;;EAvB1B,kBAAkB,CAAC,QAAoC;IACrD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC5B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;KACpE;EACH,CAAC;EAYD,gBAAgB,CAAC,QAAkC;IACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;EAC/C,CAAC;EAOD;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACvC,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAC7B,4BAA4B;IAC5B,OAAO,CACL,EAAC,OAAO,IAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;MACpF,eAAa;MACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,YAAM,KAAK,EAAC,4BAA4B;;QAChC,YAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValidString } from '../../../utils/components.utils';\n\n@Component({\n  tag: 'mg-input-title',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css',\n  scoped: true,\n})\nexport class MgInputTitle {\n  /**\n   * Label input id\n   */\n  @Prop() identifier!: string;\n  @Watch('identifier')\n  validateIdentifier(newValue: MgInputTitle['identifier']): void {\n    if (!isValidString(newValue)) {\n      throw new Error('<mg-input-title> prop \"identifier\" is required.');\n    }\n  }\n\n  /**\n   * If input is required an asterisk is added at the end of the label\n   */\n  @Prop() required: boolean;\n\n  /**\n   * Switch from label to fieldset sementic\n   */\n  @Prop() isLegend = false;\n  @Watch('isLegend')\n  validateIsLegend(newValue: MgInputTitle['isLegend']) {\n    this.tagName = newValue ? 'legend' : 'label';\n  }\n\n  /**\n   * Component parent tagname\n   */\n  @State() tagName = 'label';\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Init tag name\n   */\n  componentWillLoad(): void {\n    this.validateIdentifier(this.identifier);\n    this.validateIsLegend(this.isLegend);\n  }\n\n  /**\n   * Render\n   * @returns HTML element\n   */\n  render(): HTMLElement {\n    const TagName = this.tagName;\n    // \\u00A0 represent a &nbsp;\n    return (\n      <TagName class=\"mg-c-input-title\" htmlFor={this.isLegend ? undefined : this.identifier}>\n        <slot></slot>\n        {this.required && (\n          <span class=\"mg-c-input-title__required\">\n            &nbsp;<span class=\"mg-u-is-asterisk\">*</span>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n}\n"]}

package/dist/collection/components/atoms/mg-tag/mg-tag.js

@@ -1,18 +1,18 @@
 import { h } from "@stencil/core";
 import { variants } from "./mg-tag.conf";
-import { ClassList } from "../../../utils/components.utils";
+import { ClassList, isValidString } from "../../../utils/components.utils";
 export class MgTag {
   constructor() {
     /************
      * Internal *
      ************/
     // Classes
-    this.classOutline = 'mg-tag--outline';
-    this.classSoft = 'mg-tag--soft';
+    this.classOutline = 'mg-c-tag--outline';
+    this.classSoft = 'mg-c-tag--soft';
     this.variant = variants[0];
     this.outline = undefined;
     this.soft = undefined;
-    this.classCollection = new ClassList(['mg-tag']);
+    this.classCollection = new ClassList(['mg-c-tag']);
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
@@ -20,9 +20,9 @@ export class MgTag {
     }
     else {
       if (oldValue !== undefined) {
-        this.classCollection.delete(`mg-tag--${oldValue}`);
+        this.classCollection.delete(`mg-c-tag--${oldValue}`);
       }
-      this.classCollection.add(`mg-tag--${newValue}`);
+      this.classCollection.add(`mg-c-tag--${newValue}`);
     }
   }
   validateOutline(newValue) {
@@ -49,7 +49,7 @@ export class MgTag {
    * @param textContent - html element textContent property
    */
   validateTextContent(textContent) {
-    if (typeof textContent !== 'string' || textContent.trim() === '')
+    if (!isValidString(textContent))
       throw new Error('<mg-tag> slot must contain a text content.');
   }
   /*************
@@ -75,12 +75,12 @@ export class MgTag {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-tag.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-tag.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-tag.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-tag.css"]
     };
   }
   static get properties() {

package/dist/collection/components/atoms/mg-tag/mg-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-tag.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tag/mg-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAkB,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAM5D,MAAM,OAAO,KAAK;;IAChB;;kBAEc;IAEd,UAAU;IACO,iBAAY,GAAG,iBAAiB,CAAC;IACjC,cAAS,GAAG,cAAc,CAAC;mBAcV,QAAQ,CAAC,CAAC,CAAC;;;2BAwCP,IAAI,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC;;EAtC/D,eAAe,CAAC,QAA0B,EAAE,QAA2B;IACrE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,2CAA2C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACpF;SAAM;MACL,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,WAAW,QAAQ,EAAE,CAAC,CAAC;OACpD;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,WAAW,QAAQ,EAAE,CAAC,CAAC;KACjD;EACH,CAAC;EAOD,eAAe,CAAC,QAA0B;IACxC,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;EACtD,CAAC;EAOD,YAAY,CAAC,QAAuB;IAClC,mBAAmB;IACnB,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO;MAAE,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAC;IAE3G,cAAc;IACd,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;MAClD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EACnD,CAAC;EAOD;;iBAEe;EAEf;;;KAGG;EACK,mBAAmB,CAAC,WAAmB;IAC7C,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE;MAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;EAClI,CAAC;EAED;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACrD,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,YAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;MACtC,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport { TagVariantType, variants } from './mg-tag.conf';\nimport { ClassList } from '../../../utils/components.utils';\n@Component({\n  tag: 'mg-tag',\n  styleUrl: 'mg-tag.scss',\n  shadow: true,\n})\nexport class MgTag {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classOutline = 'mg-tag--outline';\n  private readonly classSoft = 'mg-tag--soft';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTagElement;\n\n  /**\n   * Define tag variant\n   */\n  @Prop() variant: TagVariantType = variants[0]; // primary\n  @Watch('variant')\n  validateVariant(newValue: MgTag['variant'], oldValue?: MgTag['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-tag> prop \"variant\" must be one of: ${variants.join(', ')}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-tag--${oldValue}`);\n      }\n      this.classCollection.add(`mg-tag--${newValue}`);\n    }\n  }\n\n  /**\n   * Define if tag is using outline style\n   */\n  @Prop() outline: boolean;\n  @Watch('outline')\n  validateOutline(newValue: MgTag['outline']): void {\n    if (newValue) this.classCollection.add(this.classOutline);\n    else this.classCollection.delete(this.classOutline);\n  }\n\n  /**\n   * Define if tag is using soft style\n   */\n  @Prop() soft: boolean;\n  @Watch('soft')\n  validateSoft(newValue: MgTag['soft']): void {\n    // usage validation\n    if (newValue && this.outline) throw new Error('<mg-tag> prop \"soft\" can NOT be used with prop \"outline\".');\n\n    // apply class\n    if (newValue) this.classCollection.add(this.classSoft);\n    else this.classCollection.delete(this.classSoft);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-tag']);\n\n  /*************\n   * Methods *\n   *************/\n\n  /**\n   * Validate the given textContent\n   * @param textContent - html element textContent property\n   */\n  private validateTextContent(textContent: string): void {\n    if (typeof textContent !== 'string' || textContent.trim() === '') throw new Error('<mg-tag> slot must contain a text content.');\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.validateOutline(this.outline);\n    this.validateSoft(this.soft);\n    this.validateTextContent(this.element.textContent);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span class={this.classCollection.join()}>\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-tag.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tag/mg-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAkB,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAM3E,MAAM,OAAO,KAAK;;IAChB;;kBAEc;IAEd,UAAU;IACO,iBAAY,GAAG,mBAAmB,CAAC;IACnC,cAAS,GAAG,gBAAgB,CAAC;mBAcZ,QAAQ,CAAC,CAAC,CAAC;;;2BAwCP,IAAI,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;;EAtCjE,eAAe,CAAC,QAA0B,EAAE,QAA2B;IACrE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,2CAA2C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACpF;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;EACH,CAAC;EAOD,eAAe,CAAC,QAA0B;IACxC,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;EACtD,CAAC;EAOD,YAAY,CAAC,QAAuB;IAClC,mBAAmB;IACnB,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO;MAAE,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAC;IAE3G,cAAc;IACd,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;MAClD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EACnD,CAAC;EAOD;;iBAEe;EAEf;;;KAGG;EACK,mBAAmB,CAAC,WAAmB;IAC7C,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;EACjG,CAAC;EAED;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACrD,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,YAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;MACtC,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport { TagVariantType, variants } from './mg-tag.conf';\nimport { ClassList, isValidString } from '../../../utils/components.utils';\n@Component({\n  tag: 'mg-tag',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tag.css',\n  shadow: true,\n})\nexport class MgTag {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classOutline = 'mg-c-tag--outline';\n  private readonly classSoft = 'mg-c-tag--soft';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTagElement;\n\n  /**\n   * Define tag variant\n   */\n  @Prop() variant: TagVariantType = variants[0]; // primary\n  @Watch('variant')\n  validateVariant(newValue: MgTag['variant'], oldValue?: MgTag['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-tag> prop \"variant\" must be one of: ${variants.join(', ')}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-tag--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-tag--${newValue}`);\n    }\n  }\n\n  /**\n   * Define if tag is using outline style\n   */\n  @Prop() outline: boolean;\n  @Watch('outline')\n  validateOutline(newValue: MgTag['outline']): void {\n    if (newValue) this.classCollection.add(this.classOutline);\n    else this.classCollection.delete(this.classOutline);\n  }\n\n  /**\n   * Define if tag is using soft style\n   */\n  @Prop() soft: boolean;\n  @Watch('soft')\n  validateSoft(newValue: MgTag['soft']): void {\n    // usage validation\n    if (newValue && this.outline) throw new Error('<mg-tag> prop \"soft\" can NOT be used with prop \"outline\".');\n\n    // apply class\n    if (newValue) this.classCollection.add(this.classSoft);\n    else this.classCollection.delete(this.classSoft);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-tag']);\n\n  /*************\n   * Methods *\n   *************/\n\n  /**\n   * Validate the given textContent\n   * @param textContent - html element textContent property\n   */\n  private validateTextContent(textContent: string): void {\n    if (!isValidString(textContent)) throw new Error('<mg-tag> slot must contain a text content.');\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.validateOutline(this.outline);\n    this.validateSoft(this.soft);\n    this.validateTextContent(this.element.textContent);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span class={this.classCollection.join()}>\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"]}