@mgdis/mg-components 5.15.0 → 5.17.0

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

@@ -0,0 +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"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class MgInputTitle {
   constructor() {
     this.identifier = undefined;
@@ -116,3 +116,4 @@ export class MgInputTitle {
       }];
   }
 }
+//# sourceMappingURL=mg-input-title.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,18 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+describe('mg-input-title', () => {
+  test('Should render', async () => {
+    const props = [
+      { isLegend: false, required: false },
+      { isLegend: false, required: true },
+      { isLegend: true, required: false },
+      { isLegend: true, required: true },
+    ];
+    const html = props
+      .map(({ isLegend, required }) => `<div><mg-input-title identifier="identifier" is-legend="${isLegend}" required=${required}>Label</mg-input-title></div>`)
+      .join('');
+    const page = await createPage(html, { width: 50, height: 75 });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-input-title.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-input-title.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-input-title/test/mg-input-title.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAEtE,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC/B,MAAM,KAAK,GAAG;MACZ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE;MACpC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE;MACnC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;MACnC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;KACnC,CAAC;IACF,MAAM,IAAI,GAAG,KAAK;OACf,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,2DAA2D,QAAQ,cAAc,QAAQ,+BAA+B,CAAC;OACzJ,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAE/D,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\n\ndescribe('mg-input-title', () => {\n  test('Should render', async () => {\n    const props = [\n      { isLegend: false, required: false },\n      { isLegend: false, required: true },\n      { isLegend: true, required: false },\n      { isLegend: true, required: true },\n    ];\n    const html = props\n      .map(({ isLegend, required }) => `<div><mg-input-title identifier=\"identifier\" is-legend=\"${isLegend}\" required=${required}>Label</mg-input-title></div>`)\n      .join('');\n    const page = await createPage(html, { width: 50, height: 75 });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

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

@@ -0,0 +1,27 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgInputTitle } from "../mg-input-title";
+const getPage = args => newSpecPage({
+  components: [MgInputTitle],
+  template: () => h("mg-input-title", Object.assign({}, args), "mg-input-title"),
+});
+describe('mg-input-title', () => {
+  test.each([
+    { required: false, identifier: 'identifier' },
+    { required: true, identifier: 'identifier' },
+    { isLegend: true, identifier: 'identifier' },
+  ])('Should render label with args %s', async (args) => {
+    const { root } = await getPage(args);
+    expect(root).toMatchSnapshot();
+  });
+  test.each(['', ' ', undefined])('Should throw error, case invalid identifier prop', async (identifier) => {
+    expect.assertions(1);
+    try {
+      await getPage({ identifier });
+    }
+    catch (err) {
+      expect(err.message).toContain('<mg-input-title> prop "identifier" is required.');
+    }
+  });
+});
+//# sourceMappingURL=mg-input-title.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-input-title.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-input-title/test/mg-input-title.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CACrB,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,YAAY,CAAC;EAC1B,QAAQ,EAAE,GAAG,EAAE,CAAC,sCAAoB,IAAI,oBAAiC;CAC1E,CAAC,CAAC;AAEL,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,IAAI,CAAC,IAAI,CAAC;IACR,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE;IAC7C,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE;IAC5C,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE;GAC7C,CAAC,CAAC,kCAAkC,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,kDAAkD,EAAE,KAAK,EAAC,UAAU,EAAC,EAAE;IACrG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;KAC/B;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,iDAAiD,CAAC,CAAC;KAClF;EACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgInputTitle } from '../mg-input-title';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgInputTitle],\n    template: () => <mg-input-title {...args}>mg-input-title</mg-input-title>,\n  });\n\ndescribe('mg-input-title', () => {\n  test.each([\n    { required: false, identifier: 'identifier' },\n    { required: true, identifier: 'identifier' },\n    { isLegend: true, identifier: 'identifier' },\n  ])('Should render label with args %s', async args => {\n    const { root } = await getPage(args);\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each(['', ' ', undefined])('Should throw error, case invalid identifier prop', async identifier => {\n    expect.assertions(1);\n    try {\n      await getPage({ identifier });\n    } catch (err) {\n      expect(err.message).toContain('<mg-input-title> prop \"identifier\" is required.');\n    }\n  });\n});\n"]}

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

@@ -2,3 +2,4 @@
  * List of all possibles variants
  */
 export const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
+//# sourceMappingURL=mg-tag.conf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tag.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tag/mg-tag.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC","sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;\n\n/**\n * TagVariantType type from tag variants\n */\nexport type TagVariantType = (typeof variants)[number];\n"]}

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

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { variants } from './mg-tag.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { h } from "@stencil/core";
+import { variants } from "./mg-tag.conf";
+import { ClassList } from "../../../utils/components.utils";
 export class MgTag {
   constructor() {
     /************
@@ -94,7 +94,8 @@ export class MgTag {
           "references": {
             "TagVariantType": {
               "location": "import",
-              "path": "./mg-tag.conf"
+              "path": "./mg-tag.conf",
+              "id": "src/components/atoms/mg-tag/mg-tag.conf.ts::TagVariantType"
             }
           }
         },
@@ -163,3 +164,4 @@ export class MgTag {
       }];
   }
 }
+//# sourceMappingURL=mg-tag.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,37 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+import { darkBackground } from "../../../../utils/e2e.test.utils";
+import { variants } from "../mg-tag.conf";
+describe('mg-tag', () => {
+  test('Should render', async () => {
+    const html = variants
+      .map(variant => {
+      const template = [true, false]
+        .map(icon => [
+        { outline: false, soft: false },
+        { outline: true, soft: false },
+        { outline: false, soft: true },
+      ]
+        .map(({ outline, soft }) => darkBackground(variant === 'secondary', `<mg-tag style="margin: 0.2rem;" variant="${variant}" outline="${outline}" soft="${soft}">${icon ? '<mg-icon icon="user"></mg-icon>' : ''}${variant}</mg-tag>`))
+        .join(''))
+        .join('');
+      return `<h2>${variant}<h2/><div>${template}<div>`;
+    })
+      .join('');
+    const page = await createPage(html);
+    const element = await page.find('mg-tag');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should render a 2 lines tag', async () => {
+    const page = await createPage(`<mg-tag>Tag with a<br> two lines text</mg-tag>`);
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should render a tag in a paragraph', async () => {
+    const page = await createPage(`<p>This is a <mg-tag>tag</mg-tag> in a paragraph.</p>`);
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-tag.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tag.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-tag/test/mg-tag.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;EACtB,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC/B,MAAM,IAAI,GAAG,QAAQ;OAClB,GAAG,CAAC,OAAO,CAAC,EAAE;MACb,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC;SAC3B,GAAG,CAAC,IAAI,CAAC,EAAE,CACV;QACE,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE;QAC/B,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE;QAC9B,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE;OAC/B;SACE,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,CACzB,cAAc,CACZ,OAAO,KAAK,WAAW,EACvB,4CAA4C,OAAO,cAAc,OAAO,WAAW,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,WAAW,CAC/J,CACF;SACA,IAAI,CAAC,EAAE,CAAC,CACZ;SACA,IAAI,CAAC,EAAE,CAAC,CAAC;MACZ,OAAO,OAAO,OAAO,aAAa,QAAQ,OAAO,CAAC;IACpD,CAAC,CAAC;OACD,IAAI,CAAC,EAAE,CAAC,CAAC;IAEZ,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;IAEpC,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAExC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,gDAAgD,CAAC,CAAC;IAEhF,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,uDAAuD,CAAC,CAAC;IAEvF,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\nimport { darkBackground } from '../../../../utils/e2e.test.utils';\nimport { variants } from '../mg-tag.conf';\n\ndescribe('mg-tag', () => {\n  test('Should render', async () => {\n    const html = variants\n      .map(variant => {\n        const template = [true, false]\n          .map(icon =>\n            [\n              { outline: false, soft: false },\n              { outline: true, soft: false },\n              { outline: false, soft: true },\n            ]\n              .map(({ outline, soft }) =>\n                darkBackground(\n                  variant === 'secondary',\n                  `<mg-tag style=\"margin: 0.2rem;\" variant=\"${variant}\" outline=\"${outline}\" soft=\"${soft}\">${icon ? '<mg-icon icon=\"user\"></mg-icon>' : ''}${variant}</mg-tag>`,\n                ),\n              )\n              .join(''),\n          )\n          .join('');\n        return `<h2>${variant}<h2/><div>${template}<div>`;\n      })\n      .join('');\n\n    const page = await createPage(html);\n\n    const element = await page.find('mg-tag');\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should render a 2 lines tag', async () => {\n    const page = await createPage(`<mg-tag>Tag with a<br> two lines text</mg-tag>`);\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should render a tag in a paragraph', async () => {\n    const page = await createPage(`<p>This is a <mg-tag>tag</mg-tag> in a paragraph.</p>`);\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

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

@@ -0,0 +1,71 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgTag } from "../mg-tag";
+import { variants } from "../mg-tag.conf";
+const getPage = (args, slot) => newSpecPage({
+  components: [MgTag],
+  template: () => h("mg-tag", Object.assign({}, args), slot),
+});
+describe('mg-tag', () => {
+  describe.each(variants)('variant %s', variant => {
+    test.each([true, false])('outline %s', async (outline) => {
+      const { root } = await getPage({ variant, outline }, variant);
+      expect(root).toMatchSnapshot();
+    });
+    test.each([true, false])('soft %s', async (soft) => {
+      const { root } = await getPage({ variant, soft }, variant);
+      expect(root).toMatchSnapshot();
+    });
+  });
+  test('Should replace classes on variant/ouline changes', async () => {
+    const page = await getPage({}, 'Blu');
+    const element = page.doc.querySelector('mg-tag');
+    let classPrimary = element.shadowRoot.querySelector('.mg-tag--primary');
+    let classOutline = element.shadowRoot.querySelector('.mg-tag--outline');
+    expect(classPrimary).not.toBeNull();
+    expect(classOutline).toBeNull();
+    // Change variant
+    element.variant = 'danger';
+    await page.waitForChanges();
+    classPrimary = element.shadowRoot.querySelector('.mg-tag--primary');
+    const classDanger = element.shadowRoot.querySelector('.mg-tag--danger');
+    expect(classPrimary).toBeNull();
+    expect(classDanger).not.toBeNull();
+    // Change outline
+    element.outline = true;
+    await page.waitForChanges();
+    classOutline = element.shadowRoot.querySelector('.mg-tag--outline');
+    expect(classOutline).not.toBeNull();
+  });
+  describe('errors', () => {
+    test.each(['', 'blu'])('Should throw error, case wrong variant', async (variant) => {
+      expect.assertions(1);
+      try {
+        await getPage({ variant }, 'wrong variant');
+      }
+      catch (err) {
+        expect(err.message).toContain('<mg-tag> prop "variant" must be one of: ');
+      }
+    });
+    test.each([undefined, ' '])('Should throw error, case empty slot', async (slot) => {
+      expect.assertions(1);
+      try {
+        await getPage({ variant: variants[0] }, slot);
+      }
+      catch (err) {
+        expect(err.message).toBe('<mg-tag> slot must contain a text content.');
+      }
+    });
+    test('Should throw error, case empty slot', async () => {
+      const variant = variants[0];
+      expect.assertions(1);
+      try {
+        await getPage({ variant, outline: true, soft: true }, variant);
+      }
+      catch (err) {
+        expect(err.message).toBe('<mg-tag> prop "soft" can NOT be used with prop "outline".');
+      }
+    });
+  });
+});
+//# sourceMappingURL=mg-tag.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tag.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-tag/test/mg-tag.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgTag } from '../mg-tag';\nimport { variants } from '../mg-tag.conf';\n\nconst getPage = (args, slot) =>\n  newSpecPage({\n    components: [MgTag],\n    template: () => <mg-tag {...args}>{slot}</mg-tag>,\n  });\n\ndescribe('mg-tag', () => {\n  describe.each(variants)('variant %s', variant => {\n    test.each([true, false])('outline %s', async outline => {\n      const { root } = await getPage({ variant, outline }, variant);\n      expect(root).toMatchSnapshot();\n    });\n\n    test.each([true, false])('soft %s', async soft => {\n      const { root } = await getPage({ variant, soft }, variant);\n      expect(root).toMatchSnapshot();\n    });\n  });\n\n  test('Should replace classes on variant/ouline changes', async () => {\n    const page = await getPage({}, 'Blu');\n    const element = page.doc.querySelector('mg-tag');\n    let classPrimary = element.shadowRoot.querySelector('.mg-tag--primary');\n    let classOutline = element.shadowRoot.querySelector('.mg-tag--outline');\n\n    expect(classPrimary).not.toBeNull();\n    expect(classOutline).toBeNull();\n\n    // Change variant\n    element.variant = 'danger';\n    await page.waitForChanges();\n\n    classPrimary = element.shadowRoot.querySelector('.mg-tag--primary');\n    const classDanger = element.shadowRoot.querySelector('.mg-tag--danger');\n\n    expect(classPrimary).toBeNull();\n    expect(classDanger).not.toBeNull();\n\n    // Change outline\n    element.outline = true;\n    await page.waitForChanges();\n\n    classOutline = element.shadowRoot.querySelector('.mg-tag--outline');\n    expect(classOutline).not.toBeNull();\n  });\n\n  describe('errors', () => {\n    test.each(['', 'blu'])('Should throw error, case wrong variant', async variant => {\n      expect.assertions(1);\n      try {\n        await getPage({ variant }, 'wrong variant');\n      } catch (err) {\n        expect(err.message).toContain('<mg-tag> prop \"variant\" must be one of: ');\n      }\n    });\n    test.each([undefined, ' '])('Should throw error, case empty slot', async slot => {\n      expect.assertions(1);\n      try {\n        await getPage({ variant: variants[0] }, slot);\n      } catch (err) {\n        expect(err.message).toBe('<mg-tag> slot must contain a text content.');\n      }\n    });\n    test('Should throw error, case empty slot', async () => {\n      const variant = variants[0];\n      expect.assertions(1);\n      try {\n        await getPage({ variant, outline: true, soft: true }, variant);\n      } catch (err) {\n        expect(err.message).toBe('<mg-tag> prop \"soft\" can NOT be used with prop \"outline\".');\n      }\n    });\n  });\n});\n"]}

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.css

@@ -0,0 +1,43 @@
+:host {
+  display: none;
+  padding: 0.5rem 0.8rem;
+  z-index: 1000;
+  border-radius: var(--mg-tooltip-border-radius);
+  background-color: hsl(var(--mg-tooltip-background-color));
+  color: hsl(var(--mg-tooltip-font-color));
+  text-align: start;
+  max-width: 40rem;
+  box-sizing: border-box;
+}
+
+:host([data-show]) {
+  display: block;
+}
+
+::slotted([slot=arrow]) {
+  visibility: hidden;
+}
+::slotted([slot=arrow])::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
+}
+::slotted([slot=arrow]), ::slotted([slot=arrow])::before {
+  position: absolute;
+  width: 0.8rem;
+  height: 0.8rem;
+  z-index: 9999;
+  background-color: hsl(var(--mg-tooltip-background-color));
+}
+:host([data-popper-placement^=top]) > ::slotted([slot=arrow]) {
+  bottom: -4px;
+}
+:host([data-popper-placement^=bottom]) > ::slotted([slot=arrow]) {
+  top: -4px;
+}
+:host([data-popper-placement^=left]) > ::slotted([slot=arrow]) {
+  right: -4px;
+}
+:host([data-popper-placement^=right]) > ::slotted([slot=arrow]) {
+  left: -4px;
+}

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js

@@ -0,0 +1,50 @@
+import { h, Host } from "@stencil/core";
+export class MgTooltipContent {
+  constructor() {
+    this.message = undefined;
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Render
+   * @returns HTML Element
+   */
+  render() {
+    return (h(Host, { role: "tooltip" }, h("span", { innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { name: "arrow" })));
+  }
+  static get is() { return "mg-tooltip-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-tooltip-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-tooltip-content.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Displayed message in the tooltip"
+        },
+        "attribute": "message",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=mg-tooltip-content.js.map

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tooltip-content.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,gBAAgB;;;;EAM3B;;iBAEe;EAEf;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,SAAS;MAClB,YAAM,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,6BAA6B,GAAQ;MAC1E,YAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'mg-tooltip-content',\n  styleUrl: 'mg-tooltip-content.scss',\n  shadow: true,\n})\nexport class MgTooltipContent {\n  /**\n   * Displayed message in the tooltip\n   */\n  @Prop() message!: string;\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"tooltip\">\n        <span innerHTML={this.message} class=\"mg-tooltip-content__message\"></span>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.conf.js

@@ -4,3 +4,4 @@ export var Guard;
   Guard["HOVER_TOOLTIP_ELEMENT"] = "hoverTooltipGuard";
   Guard["HOVER_TOOLTIPED_ELEMENT"] = "hoverTooltipedGuard";
 })(Guard || (Guard = {}));
+//# sourceMappingURL=mg-tooltip.conf.js.map

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.conf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tooltip.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,KAIX;AAJD,WAAY,KAAK;EACf,wBAAe,CAAA;EACf,oDAA2C,CAAA;EAC3C,wDAA+C,CAAA;AACjD,CAAC,EAJW,KAAK,KAAL,KAAK,QAIhB","sourcesContent":["export enum Guard {\n  FOCUS = 'focus',\n  HOVER_TOOLTIP_ELEMENT = 'hoverTooltipGuard',\n  HOVER_TOOLTIPED_ELEMENT = 'hoverTooltipedGuard',\n}\n"]}

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.css

@@ -1,46 +1,3 @@
 :host {
   display: inline-block;
-}
-
-.mg-tooltip {
-  display: none;
-  padding: 0.5rem 0.8rem;
-  z-index: 1000;
-  border-radius: var(--mg-tooltip-border-radius);
-  background-color: hsl(var(--mg-tooltip-background-color));
-  color: hsl(var(--mg-tooltip-font-color));
-  text-align: start;
-  max-width: 40rem;
-  box-sizing: border-box;
-}
-.mg-tooltip[data-show] {
-  display: block;
-}
-.mg-tooltip .mg-tooltip__arrow,
-.mg-tooltip .mg-tooltip__arrow::before {
-  position: absolute;
-  width: 0.8rem;
-  height: 0.8rem;
-  z-index: 9999;
-  background: inherit;
-}
-.mg-tooltip .mg-tooltip__arrow {
-  visibility: hidden;
-}
-.mg-tooltip .mg-tooltip__arrow::before {
-  visibility: visible;
-  content: "";
-  transform: rotate(45deg);
-}
-.mg-tooltip[data-popper-placement^=top] > .mg-tooltip__arrow {
-  bottom: -4px;
-}
-.mg-tooltip[data-popper-placement^=bottom] > .mg-tooltip__arrow {
-  top: -4px;
-}
-.mg-tooltip[data-popper-placement^=left] > .mg-tooltip__arrow {
-  right: -4px;
-}
-.mg-tooltip[data-popper-placement^=right] > .mg-tooltip__arrow {
-  left: -4px;
 }

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

@@ -1,7 +1,13 @@
-import { h, Host } from '@stencil/core';
-import { createID, focusableElements, getWindows } from '../../../utils/components.utils';
-import { createPopper } from '@popperjs/core';
-import { Guard } from './mg-tooltip.conf';
+import { h, Host } from "@stencil/core";
+import { createID, focusableElements, getWindows } from "../../../utils/components.utils";
+import { createPopper } from "@popperjs/core";
+import { Guard } from "./mg-tooltip.conf";
+/**
+ * HTMLMgButtonElement type guard
+ * @param element - element to check
+ * @returns return true if type is HTMLMgButtonElement
+ */
+const isButton = (element) => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes(element.tagName);
 export class MgTooltip {
   constructor() {
     /**
@@ -9,7 +15,7 @@ export class MgTooltip {
      */
     this.show = () => {
       // Make the tooltip visible
-      this.tooltip.dataset.show = '';
+      this.mgTooltipContent.dataset.show = '';
       // Enable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
       // hide when click outside
@@ -26,7 +32,7 @@ export class MgTooltip {
      */
     this.hide = () => {
       // Hide the tooltip
-      this.tooltip.removeAttribute('data-show');
+      this.mgTooltipContent.removeAttribute('data-show');
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
       // Remove event listener
@@ -113,8 +119,12 @@ export class MgTooltip {
      */
     this.initTooltip = (slotElement, interactiveElement) => {
       // Add tabindex to slotted element if we can't find any interactive element
-      if (interactiveElement === null || interactiveElement === undefined)
+      if (!this.disabled && !Boolean(interactiveElement)) {
+        this.hasCustomTabIndex = true;
         slotElement.tabIndex = 0;
+        // Add role on non-interactive element to work with "aria-describedby" for screen readers
+        slotElement.setAttribute('role', 'button');
+      }
       // Set aria-describedby
       const ariaDescribedby = slotElement.getAttribute('aria-describedby');
       if (ariaDescribedby === null) {
@@ -125,7 +135,7 @@ export class MgTooltip {
         slotElement.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);
       }
       // Create popperjs tooltip
-      this.popper = createPopper(this.tooltipedElement, this.tooltip, {
+      this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
         placement: this.placement,
         strategy: 'fixed',
         modifiers: [
@@ -142,6 +152,12 @@ export class MgTooltip {
         this.guard = Guard.FOCUS;
         this.setDisplay(true);
       });
+      // as `click` event is the composition of `mousedown` and `mouseup` event,
+      // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`
+      // we reset the guard on `mouseup` event to unlock tooltip
+      this.tooltipedElement.addEventListener('mouseup', () => {
+        this.resetGuard();
+      });
       this.tooltipedElement.addEventListener('blur', () => {
         this.resetGuard();
         this.setDisplay(false);
@@ -151,7 +167,7 @@ export class MgTooltip {
       ['mouseenter', 'mouseleave'].forEach(eventType => {
         const isMouseenter = eventType === 'mouseenter';
         [
-          { element: this.tooltip, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
+          { element: this.mgTooltipContent, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
           { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },
         ].forEach(({ element, action }) => {
           element.addEventListener(eventType, () => {
@@ -170,6 +186,7 @@ export class MgTooltip {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-tooltip> prop "message" is required.');
     }
+    this.mgTooltipContent.message = newValue;
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -179,6 +196,28 @@ export class MgTooltip {
       this.hide();
     }
   }
+  validateDisabled(newValue) {
+    if (this.hasCustomTabIndex) {
+      if (newValue)
+        this.tooltipedElement.removeAttribute('tabindex');
+      else if (this.tooltipedElement.getAttribute('tabindex') === null)
+        this.tooltipedElement.setAttribute('tabindex', '0');
+    }
+  }
+  /**
+   * Render tooltip content element
+   */
+  renderTooltip() {
+    const mgTooltipContent = document.createElement('mg-tooltip-content');
+    mgTooltipContent.setAttribute('slot', 'content');
+    mgTooltipContent.setAttribute('id', this.identifier);
+    const arrow = document.createElement('div');
+    arrow.setAttribute('slot', 'arrow');
+    arrow.dataset.popperArrow = '';
+    mgTooltipContent.appendChild(arrow);
+    // append tooltip element to component
+    this.element.appendChild(mgTooltipContent);
+  }
   /*************
    * Lifecycle *
    *************/
@@ -188,6 +227,12 @@ export class MgTooltip {
   componentWillLoad() {
     // Get windows to attach events
     this.windows = getWindows(window);
+    // Get tooltip element
+    this.renderTooltip();
+    this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
+    //validate properties
+    this.validateDisabled(this.disabled);
+    this.validateMessage(this.message);
   }
   /**
    * Get slotted element
@@ -196,17 +241,15 @@ export class MgTooltip {
    */
   componentDidLoad() {
     var _a;
-    // Get tooltip element
-    this.tooltip = this.element.shadowRoot.querySelector(`#${this.identifier}`);
-    // get slotted element
-    const slotElement = this.element.firstElementChild;
+    // get slotted element wich is not the tooltip
+    const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
     // Get interactive element
     const interactiveElement = slotElement.matches(focusableElements) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
     // define selected element to become tooltip selector
     this.tooltipedElement = interactiveElement || slotElement;
     // Check if slotted element is a disabled mg-button
     // In this case we wrap the mg-button into a div to enable the tooltip
-    if (['MG-BUTTON', 'BUTTON'].includes(slotElement.tagName)) {
+    if (isButton(slotElement)) {
       new MutationObserver(mutationList => {
         if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {
           this.setMgButtonWrapper(slotElement);
@@ -221,7 +264,6 @@ export class MgTooltip {
     // Init Tooltip
     this.initTooltip(slotElement, interactiveElement);
     this.handleDisplay(this.display);
-    this.validateMessage(this.message);
   }
   /**
    * update popper position after props change on component did update hook to benefit from render ended
@@ -234,7 +276,7 @@ export class MgTooltip {
    * @returns HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip" }, h("span", { innerHTML: this.message }), h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("slot", { name: "content" })));
   }
   static get is() { return "mg-tooltip"; }
   static get encapsulation() { return "shadow"; }
@@ -294,7 +336,8 @@ export class MgTooltip {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@popperjs/core"
+              "path": "@popperjs/core",
+              "id": "../../node_modules/.pnpm/@popperjs+core@2.11.7/node_modules/@popperjs/core/index.d.ts::Placement"
             }
           }
         },
@@ -354,6 +397,10 @@ export class MgTooltip {
       }, {
         "propName": "display",
         "methodName": "handleDisplay"
+      }, {
+        "propName": "disabled",
+        "methodName": "validateDisabled"
       }];
   }
 }
+//# sourceMappingURL=mg-tooltip.js.map