npm - @mgdis/mg-components - Versions diffs - 6.3.0 → 6.4.0 - Mend

@mgdis/mg-components 6.3.0 → 6.4.0

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

Files changed (231) hide show

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

@@ -5,10 +5,13 @@ import { isValideID, isValidString, toString } from "@mgdis/stencil-helpers";
  */
 export class MgInputTitle {
     constructor() {
-        this.identifier = undefined;
-        this.required = undefined;
-        this.readonly = undefined;
+        /**
+         * Switch from label to fieldset sementic
+         */
         this.isLegend = false;
+        /**
+         * Component parent tagname
+         */
         this.tagName = 'label';
     }
     validateIdentifier(newValue) {
@@ -39,7 +42,7 @@ export class MgInputTitle {
     render() {
         const TagName = this.readonly ? 'span' : this.tagName;
         // \u00A0 represent a &nbsp;
-        return (h(TagName, { key: '2185a08a69a1b749c7e36d430b83079cbce131de', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: 'eb7409f94e137a2dacd83fa7df27c6b2635bf660' }), this.required && !this.readonly && (h("span", { key: '6910dd3c0d87ea94ab3c07371e5ee55b212d9342', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: '45e9d38af05410888be0fc36e04d4641a41f367b', class: "mg-u-is-asterisk" }, "*")))));
+        return (h(TagName, { key: 'f8f8baaeb87e7c2cc77e71781f4d33ea5a63f760', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: '7f6c0f451dfe789d924e9f608813e03bc72ad88a' }), this.required && !this.readonly && (h("span", { key: 'a78c5191995399e3e2ad346fec8546277581ca9d', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: 'ae8df5f13d54a1b8419d0d01048ff91dda601ab6', class: "mg-u-is-asterisk" }, "*")))));
     }
     static get is() { return "mg-input-title"; }
     static get encapsulation() { return "scoped"; }
@@ -69,6 +72,8 @@ export class MgInputTitle {
                     "tags": [],
                     "text": "Label input id"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": false
             },
@@ -86,6 +91,8 @@ export class MgInputTitle {
                     "tags": [],
                     "text": "If input is required an asterisk is added at the end of the label"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false
             },
@@ -103,6 +110,8 @@ export class MgInputTitle {
                     "tags": [],
                     "text": "If input is required an asterisk is added at the end of the label"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": false
             },
@@ -120,6 +129,8 @@ export class MgInputTitle {
                     "tags": [],
                     "text": "Switch from label to fieldset sementic"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-legend",
                 "reflect": false,
                 "defaultValue": "false"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-input-title.js","sourceRoot":"","sources":["../../../../../src/components/atoms/internals/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,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE7E;;GAEG;AAMH,MAAM,OAAO,YAAY~~;;;;;wBA2BJ~~,KAAK;~~uBASL~~,OAAO~~;;IA9B1B~~,kBAAkB,CAAC,QAAoC;QACrD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;QACrE,CAAC;aAAM,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,OAAO,CAAC,KAAK,CAAC,sEAAsE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC7G,CAAC;IACH,CAAC;IAiBD,gBAAgB,CAAC,QAAkC;QACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IAC/C,CAAC;IAOD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;QACtD,4BAA4B;QAC5B,OAAO,CACL,EAAC,OAAO,qDAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,QAAQ,CAAC,CAAC,CAAC,SAAS;YACtI,8DAAa;YACZ,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAClC,6DAAM,KAAK,EAAC,4BAA4B;;gBAChC,6DAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,CACX,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValideID, isValidString, toString } from '@mgdis/stencil-helpers';\n\n/*\n @internal\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 } else if (!isValideID(newValue)) {\n console.error(`<mg-input-title> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\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 If input is required an asterisk is added at the end of the label\n /\n @Prop() readonly?: 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.readonly ? 'span' : this.tagName;\n // \\u00A0 represent a  \n return (\n <TagName class=\"mg-c-input-title\" htmlFor={!this.isLegend && this.identifier} id={this.isLegend ? `${this.identifier}-title` : undefined}>\n <slot></slot>\n {this.required && !this.readonly && (\n <span class=\"mg-c-input-title__required\">\n  <span class=\"mg-u-is-asterisk\"></span>\n </span>\n )}\n </TagName>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-input-title.js","sourceRoot":"","sources":["../../../../../src/components/atoms/internals/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,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE7E;;GAEG;AAMH,MAAM,OAAO,YAAY;IALzB;QA6BE;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAMzB;;WAEG;QACM,YAAO,GAAG,OAAO,CAAC;KAgC5B;IA9DC,kBAAkB,CAAC,QAAoC;QACrD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;QACrE,CAAC;aAAM,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,OAAO,CAAC,KAAK,CAAC,sEAAsE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC7G,CAAC;IACH,CAAC;IAiBD,gBAAgB,CAAC,QAAkC;QACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IAC/C,CAAC;IAOD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;QACtD,4BAA4B;QAC5B,OAAO,CACL,EAAC,OAAO,qDAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,QAAQ,CAAC,CAAC,CAAC,SAAS;YACtI,8DAAa;YACZ,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAClC,6DAAM,KAAK,EAAC,4BAA4B;;gBAChC,6DAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValideID, isValidString, toString } from '@mgdis/stencil-helpers';\n\n/*\n @internal\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 } else if (!isValideID(newValue)) {\n console.error(`<mg-input-title> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\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 If input is required an asterisk is added at the end of the label\n /\n @Prop() readonly?: 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.readonly ? 'span' : this.tagName;\n // \\u00A0 represent a  \n return (\n <TagName class=\"mg-c-input-title\" htmlFor={!this.isLegend && this.identifier} id={this.isLegend ? `${this.identifier}-title` : undefined}>\n <slot></slot>\n {this.required && !this.readonly && (\n <span class=\"mg-c-input-title__required\">\n  <span class=\"mg-u-is-asterisk\"></span>\n </span>\n )}\n </TagName>\n );\n }\n}\n"]}

package/dist/collection/components/atoms/mg-badge/mg-badge.js CHANGED Viewed

@@ -8,10 +8,13 @@ export class MgBadge {
          ************/
         // Classes
         this.classOutline = `mg-c-badge--outline`;
-        this.value = undefined;
-        this.label = undefined;
-        this.variant = variants[0];
-        this.outline = undefined;
+        /**
+         * Define badge variant
+         */
+        this.variant = variants[0]; // info
+        /**
+         * Component classes
+         */
         this.classCollection = new ClassList(['mg-c-badge']);
     }
     validateValue(newValue) {
@@ -85,6 +88,8 @@ export class MgBadge {
                     "tags": [],
                     "text": "Badge value"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -102,6 +107,8 @@ export class MgBadge {
                     "tags": [],
                     "text": "Badge label. Include short description.\nRequired for accessibility"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -125,6 +132,8 @@ export class MgBadge {
                     "tags": [],
                     "text": "Define badge variant"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "variants[0]"
@@ -143,6 +152,8 @@ export class MgBadge {
                     "tags": [],
                     "text": "Define if button is using outline style"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "outline",
                 "reflect": false
             }

package/dist/collection/components/atoms/mg-badge/mg-badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-badge.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-badge/mg-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAoB,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAO5E,MAAM,OAAO,OAAO;;~~QAClB;;~~sBAEc;QAEd,UAAU;QACO,iBAAY,GAAG,qBAAqB,CAAC~~;;;uBAgCjB~~,QAAQ,CAAC,CAAC,CAAC~~;;+BA0BV~~,IAAI,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC~~;;IA/CnE~~,aAAa,CAAC,QAA0B;QACtC,IAAI,YAAY,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC;YAC9C,MAAM,IAAI,KAAK,CAAC,mGAAmG,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC5I,CAAC;IACH,CAAC;IAQD,aAAa,CAAC,QAA0B;QACtC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,2EAA2E,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACpH,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA4B,EAAE,QAA6B;QACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,6CAA6C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC5H,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;YACzD,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA4B;QAC1C,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;YACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;IAOD;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACtC,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;YACnD,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList, isValidString, toString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-badge',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-badge.css',\n shadow: true,\n})\nexport class MgBadge {\n /***********\n Internal \n *********/\n\n // Classes\n private readonly classOutline = `mg-c-badge--outline`;\n\n /***********\n Decorators \n ***********/\n\n /\n * Badge value\n /\n @Prop() value!: string \| number;\n @Watch('value')\n validateValue(newValue: MgBadge['value']): void {\n if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {\n throw new Error(`<mg-badge> prop \"value\" is required and must be integer and/or special character. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Badge label. Include short description.\n * Required for accessibility\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgBadge['label']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-badge> prop \"label\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define badge variant\n /\n @Prop() variant?: BadgeVariantType = variants[0]; // info\n @Watch('variant')\n validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-badge> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-badge--${oldValue}`);\n }\n this.classCollection.add(`mg-c-badge--${newValue}`);\n }\n }\n\n /\n Define if button is using outline style\n /\n @Prop() outline?: boolean;\n @Watch('outline')\n validateOutline(newValue: MgBadge['outline']): void {\n if (newValue) this.classCollection.add(this.classOutline);\n else this.classCollection.delete(this.classOutline);\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-badge']);\n\n /\n Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateValue(this.value);\n this.validateLabel(this.label);\n this.validateVariant(this.variant);\n this.validateOutline(this.outline);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span class={this.classCollection.join()}>\n <span class=\"mg-c-badge__value\">{this.value}</span>\n <span class=\"mg-u-visually-hidden\">{this.label}</span>\n </span>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-badge.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-badge/mg-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAoB,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAO5E,MAAM,OAAO,OAAO;IALpB;QAME;;sBAEc;QAEd,UAAU;QACO,iBAAY,GAAG,qBAAqB,CAAC;QA6BtD;;WAEG;QACK,YAAO,GAAsB,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;QAuBzD;;WAEG;QACM,oBAAe,GAAc,IAAI,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;KAwBrE;IAvEC,aAAa,CAAC,QAA0B;QACtC,IAAI,YAAY,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC;YAC9C,MAAM,IAAI,KAAK,CAAC,mGAAmG,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC5I,CAAC;IACH,CAAC;IAQD,aAAa,CAAC,QAA0B;QACtC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,2EAA2E,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACpH,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA4B,EAAE,QAA6B;QACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,6CAA6C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC5H,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;YACzD,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA4B;QAC1C,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;YACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;IAOD;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACtC,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;YACnD,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList, isValidString, toString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-badge',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-badge.css',\n shadow: true,\n})\nexport class MgBadge {\n /***********\n Internal \n *********/\n\n // Classes\n private readonly classOutline = `mg-c-badge--outline`;\n\n /***********\n Decorators \n ***********/\n\n /\n * Badge value\n /\n @Prop() value!: string \| number;\n @Watch('value')\n validateValue(newValue: MgBadge['value']): void {\n if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {\n throw new Error(`<mg-badge> prop \"value\" is required and must be integer and/or special character. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Badge label. Include short description.\n * Required for accessibility\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgBadge['label']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-badge> prop \"label\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define badge variant\n /\n @Prop() variant?: BadgeVariantType = variants[0]; // info\n @Watch('variant')\n validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void {\n if (!variants.includes(newValue)) {\n throw new Error(`<mg-badge> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-badge--${oldValue}`);\n }\n this.classCollection.add(`mg-c-badge--${newValue}`);\n }\n }\n\n /\n Define if button is using outline style\n /\n @Prop() outline?: boolean;\n @Watch('outline')\n validateOutline(newValue: MgBadge['outline']): void {\n if (newValue) this.classCollection.add(this.classOutline);\n else this.classCollection.delete(this.classOutline);\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-badge']);\n\n /\n Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateValue(this.value);\n this.validateLabel(this.label);\n this.validateVariant(this.variant);\n this.validateOutline(this.outline);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span class={this.classCollection.join()}>\n <span class=\"mg-c-badge__value\">{this.value}</span>\n <span class=\"mg-u-visually-hidden\">{this.label}</span>\n </span>\n );\n }\n}\n"]}

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

@@ -13,6 +13,38 @@ export class MgButton {
         this.classDisabled = 'mg-c-button--disabled';
         this.classLoading = 'mg-c-button--loading';
         this.classFullWidth = 'mg-c-button--full-width';
+        /**
+         * Define button variant
+         */
+        this.variant = variants[0]; // Primary
+        /**
+         * Define button size
+         */
+        this.size = sizes[0]; // medium
+        /**
+         * Set button to full-width
+         */
+        this.fullWidth = false;
+        /**
+         * Define if button is round.
+         * Used for icon button.
+         */
+        this.isIcon = false;
+        /**
+         * Option to set input disable on click, in order to prevent multi-click.
+         * Parent component have to remove the attribute 'disabled' when the process ends.
+         */
+        this.disableOnClick = false;
+        /**
+         * Define if button is loading, default to false.
+         * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
+         * It's required to reset to false when action/promise in parent is done to stop the loading state
+         */
+        this.loading = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-button']);
         /**
          * Trigger actions onClick event
          * @param event - click event
@@ -61,17 +93,6 @@ export class MgButton {
                 (_b = this.element.querySelector('mg-icon')) === null || _b === void 0 ? void 0 : _b.setAttribute('size', this.size);
             }
         };
-        this.variant = variants[0];
-        this.label = undefined;
-        this.type = undefined;
-        this.size = sizes[0];
-        this.fullWidth = false;
-        this.form = undefined;
-        this.disabled = undefined;
-        this.isIcon = false;
-        this.disableOnClick = false;
-        this.loading = false;
-        this.classCollection = new ClassList(['mg-c-button']);
     }
     validateVariant(newValue, oldValue) {
         // validate new value
@@ -219,6 +240,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Define button variant"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "variants[0]"
@@ -237,6 +260,8 @@ export class MgButton {
                     "tags": [],
                     "text": "aria-label\nIn case button text is not explicit enough"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -260,6 +285,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Define button type"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false
             },
@@ -283,6 +310,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Define button size"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "sizes[0]"
@@ -301,6 +330,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Set button to full-width"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
@@ -319,6 +350,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Define form id to attach button with.\nIf this attribute is not set, the `<button>` is associated with its ancestor `<form>` element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "form",
                 "reflect": false
             },
@@ -336,6 +369,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Disable button"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false
             },
@@ -353,6 +388,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Define if button is round.\nUsed for icon button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-icon",
                 "reflect": false,
                 "defaultValue": "false"
@@ -371,6 +408,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Option to set input disable on click, in order to prevent multi-click.\nParent component have to remove the attribute 'disabled' when the process ends."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disable-on-click",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/components/atoms/mg-button/mg-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-button.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-button/mg-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType, SizeType, sizes } from './mg-button.conf';\nimport { ClassList, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\n\n/*\n @slot - Button content\n /\n@Component({\n tag: 'mg-button',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n shadow: true,\n})\nexport class MgButton {\n /**********\n Internal \n *********/\n\n private onClickElementFn = null;\n private readonly classDisabled = 'mg-c-button--disabled';\n private readonly classLoading = 'mg-c-button--loading';\n private readonly classFullWidth = 'mg-c-button--full-width';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgButtonElement;\n\n /\n Define button variant\n /\n @Prop({ mutable: true }) variant: VariantType = variants[0]; // Primary\n @Watch('variant')\n validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n // validate new value\n if (!variants.includes(newValue)) {\n if ((newValue as string) === '') {\n // Reactive framework like VUE render with `\"\"` when prop is update to undefined\n this.variant = variants[0];\n return;\n }\n throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${newValue}`);\n }\n }\n\n /\n aria-label\n * In case button text is not explicit enough\n /\n @Prop() label?: string;\n\n /\n Define button type\n /\n @Prop() type?: ButtonType;\n\n /\n Define button size\n /\n @Prop() size: SizeType = sizes[0]; // medium\n @Watch('size')\n validateSize(newValue: MgButton['size'], oldValue?: MgButton['size']): void {\n // validate new value\n if (!sizes.includes(newValue)) {\n throw new Error(`<mg-button> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${newValue}`);\n this.setIconSize();\n }\n }\n\n /\n Set button to full-width\n /\n @Prop() fullWidth = false;\n @Watch('fullWidth')\n validateFullWidth(newValue: MgButton['fullWidth']): void {\n if (newValue && this.isIcon) {\n throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n } else if (newValue) {\n this.classCollection.add(this.classFullWidth);\n } else {\n this.classCollection.delete(this.classFullWidth);\n }\n }\n\n /\n Define form id to attach button with.\n * If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n /\n @Prop() form?: string;\n\n /\n Disable button\n /\n @Prop({ mutable: true }) disabled?: boolean;\n @Watch('disabled')\n disabledHandler(isDisabled: MgButton['disabled']): void {\n // Remove loading when enable\n // Will be set back onclick\n if (!isDisabled && this.disableOnClick) {\n this.loading = false;\n }\n // Manage if onclick\n this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n // apply style\n if (isDisabled) {\n this.classCollection.add(this.classDisabled);\n } else {\n this.classCollection.delete(this.classDisabled);\n }\n\n // emit value update\n this.disabledChange.emit(isDisabled);\n }\n /\n Define if button is round.\n * Used for icon button.\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n watchIsIcon(): void {\n this.setIconSize();\n }\n\n /\n Option to set input disable on click, in order to prevent multi-click.\n * Parent component have to remove the attribute 'disabled' when the process ends.\n /\n @Prop() disableOnClick = false;\n\n /\n Define if button is loading, default to false.\n * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n * It's required to reset to false when action/promise in parent is done to stop the loading state\n /\n @State() loading = false;\n @Watch('loading')\n loadingHandler(newValue: MgButton['loading']): void {\n // we add loading style if it newvalue is true else we remove it\n if (newValue) {\n this.classCollection.add(this.classLoading);\n } else {\n this.classCollection.delete(this.classLoading);\n }\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n /\n Emmited event when disabled change\n /\n @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n /\n Trigger actions onClick event\n * @param event - click event\n /\n private handleClick = (event: MouseEvent): void => {\n if (this.disabled) event.stopPropagation();\n // Used to prevent multi-click.\n else if (this.disableOnClick) {\n this.loading = true;\n this.disabled = true;\n }\n };\n\n /\n Handle onKeydown event\n * @param event - keyboard event\n /\n private handleKeydown = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Handle onKeyup event\n * @param event - keyboard event\n /\n private handleKeyup = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Set child `<mg-icon>` element `size` prop to follow the current `size` prop\n /\n private setIconSize = (): void => {\n if (this.size === 'medium') {\n this.element.querySelector('mg-icon')?.removeAttribute('size');\n } else if (this.isIcon) {\n this.element.querySelector('mg-icon')?.setAttribute('size', this.size);\n }\n };\n\n /\n Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateFullWidth(this.fullWidth);\n this.validateSize(this.size);\n this.watchIsIcon();\n if (this.isIcon) {\n this.classCollection.add(`mg-c-button--icon`);\n if (!isValidString(this.label)) {\n throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n }\n }\n // Store the onclick fn\n this.onClickElementFn = this.element.onclick;\n this.disabledHandler(this.disabled);\n }\n\n /\n Add listners\n /\n componentDidLoad(): void {\n nextTick(() => {\n const closestForm = this.element.closest('form') \|\| this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n // submit buttons should trigger form submition;\n if (closestForm && ['submit', undefined].includes(this.type)) {\n this.element.addEventListener('click', () => {\n closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n });\n }\n });\n }\n\n /\n Render component\n * @returns html element\n */\n render(): HTMLElement {\n return (\n <Host\n role=\"button\"\n tabIndex={0}\n type={this.type}\n form={this.form}\n full-width={this.fullWidth}\n aria-label={this.label}\n aria-disabled={this.disabled?.toString()}\n onClick={this.handleClick}\n onKeyup={this.handleKeyup}\n onKeydown={this.handleKeydown}\n >\n <div class={this.classCollection.join()}>\n {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n <div class=\"mg-c-button__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-button.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-button/mg-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType, SizeType, sizes } from './mg-button.conf';\nimport { ClassList, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\n\n/*\n @slot - Button content\n /\n@Component({\n tag: 'mg-button',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n shadow: true,\n})\nexport class MgButton {\n /**********\n Internal \n *********/\n\n private onClickElementFn = null;\n private readonly classDisabled = 'mg-c-button--disabled';\n private readonly classLoading = 'mg-c-button--loading';\n private readonly classFullWidth = 'mg-c-button--full-width';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgButtonElement;\n\n /\n Define button variant\n /\n @Prop({ mutable: true }) variant: VariantType = variants[0]; // Primary\n @Watch('variant')\n validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n // validate new value\n if (!variants.includes(newValue)) {\n if ((newValue as string) === '') {\n // Reactive framework like VUE render with `\"\"` when prop is update to undefined\n this.variant = variants[0];\n return;\n }\n throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${newValue}`);\n }\n }\n\n /\n aria-label\n * In case button text is not explicit enough\n /\n @Prop() label?: string;\n\n /\n Define button type\n /\n @Prop() type?: ButtonType;\n\n /\n Define button size\n /\n @Prop() size: SizeType = sizes[0]; // medium\n @Watch('size')\n validateSize(newValue: MgButton['size'], oldValue?: MgButton['size']): void {\n // validate new value\n if (!sizes.includes(newValue)) {\n throw new Error(`<mg-button> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-button--${oldValue}`);\n }\n this.classCollection.add(`mg-c-button--${newValue}`);\n this.setIconSize();\n }\n }\n\n /\n Set button to full-width\n /\n @Prop() fullWidth = false;\n @Watch('fullWidth')\n validateFullWidth(newValue: MgButton['fullWidth']): void {\n if (newValue && this.isIcon) {\n throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n } else if (newValue) {\n this.classCollection.add(this.classFullWidth);\n } else {\n this.classCollection.delete(this.classFullWidth);\n }\n }\n\n /\n Define form id to attach button with.\n * If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n /\n @Prop() form?: string;\n\n /\n Disable button\n /\n @Prop({ mutable: true }) disabled?: boolean;\n @Watch('disabled')\n disabledHandler(isDisabled: MgButton['disabled']): void {\n // Remove loading when enable\n // Will be set back onclick\n if (!isDisabled && this.disableOnClick) {\n this.loading = false;\n }\n // Manage if onclick\n this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n // apply style\n if (isDisabled) {\n this.classCollection.add(this.classDisabled);\n } else {\n this.classCollection.delete(this.classDisabled);\n }\n\n // emit value update\n this.disabledChange.emit(isDisabled);\n }\n /\n Define if button is round.\n * Used for icon button.\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n watchIsIcon(): void {\n this.setIconSize();\n }\n\n /\n Option to set input disable on click, in order to prevent multi-click.\n * Parent component have to remove the attribute 'disabled' when the process ends.\n /\n @Prop() disableOnClick = false;\n\n /\n Define if button is loading, default to false.\n * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n * It's required to reset to false when action/promise in parent is done to stop the loading state\n /\n @State() loading = false;\n @Watch('loading')\n loadingHandler(newValue: MgButton['loading']): void {\n // we add loading style if it newvalue is true else we remove it\n if (newValue) {\n this.classCollection.add(this.classLoading);\n } else {\n this.classCollection.delete(this.classLoading);\n }\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n /\n Emmited event when disabled change\n /\n @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n /\n Trigger actions onClick event\n * @param event - click event\n /\n private handleClick = (event: MouseEvent): void => {\n if (this.disabled) event.stopPropagation();\n // Used to prevent multi-click.\n else if (this.disableOnClick) {\n this.loading = true;\n this.disabled = true;\n }\n };\n\n /\n Handle onKeydown event\n * @param event - keyboard event\n /\n private handleKeydown = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Handle onKeyup event\n * @param event - keyboard event\n /\n private handleKeyup = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Set child `<mg-icon>` element `size` prop to follow the current `size` prop\n /\n private setIconSize = (): void => {\n if (this.size === 'medium') {\n this.element.querySelector('mg-icon')?.removeAttribute('size');\n } else if (this.isIcon) {\n this.element.querySelector('mg-icon')?.setAttribute('size', this.size);\n }\n };\n\n /\n Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateFullWidth(this.fullWidth);\n this.validateSize(this.size);\n this.watchIsIcon();\n if (this.isIcon) {\n this.classCollection.add(`mg-c-button--icon`);\n if (!isValidString(this.label)) {\n throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n }\n }\n // Store the onclick fn\n this.onClickElementFn = this.element.onclick;\n this.disabledHandler(this.disabled);\n }\n\n /\n Add listners\n /\n componentDidLoad(): void {\n nextTick(() => {\n const closestForm = this.element.closest('form') \|\| this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n // submit buttons should trigger form submition;\n if (closestForm && ['submit', undefined].includes(this.type)) {\n this.element.addEventListener('click', () => {\n closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n });\n }\n });\n }\n\n /\n Render component\n * @returns html element\n */\n render(): HTMLElement {\n return (\n <Host\n role=\"button\"\n tabIndex={0}\n type={this.type}\n form={this.form}\n full-width={this.fullWidth}\n aria-label={this.label}\n aria-disabled={this.disabled?.toString()}\n onClick={this.handleClick}\n onKeyup={this.handleKeyup}\n onKeydown={this.handleKeydown}\n >\n <div class={this.classCollection.join()}>\n {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n <div class=\"mg-c-button__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -11,7 +11,7 @@ export class MgCard {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'b8de627bd3018342b2e33f62e1779de8c53fa61e', class: "mg-c-card" }, h("slot", { key: '210e9b12485a345ab50d4ddb85d091cde58551a8' })));
+        return (h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
     }
     static get is() { return "mg-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,12 @@
 import { h } from "@stencil/core";
 export class MgDivider {
     constructor() {
+        /**************
+         * Decorators *
+         **************/
+        /**
+         * Define component size
+         */
         this.fullWidth = false;
     }
     /**
@@ -8,7 +14,7 @@ export class MgDivider {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'b7d74c11f15700cbffa553bf4d688ad291473087', class: {
+        return (h("div", { key: '60b987cb329c6db14c2cc4a665e7f32b2696a3ee', class: {
                 'mg-c-divider': true,
                 'mg-c-divider--full-width': this.fullWidth,
             } }));
@@ -41,6 +47,8 @@ export class MgDivider {
                     "tags": [],
                     "text": "Define component size"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"

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

	@@ -1 +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;;~~yBAQA~~,KAAK~~;;IAEzB~~;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,0BAA0B,EAAE,IAAI,CAAC,SAAS;aAC3C,GACI,CACR,CAAC;IACJ,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() fullWidth = false;\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-width': this.fullWidth,\n }}\n ></div>\n );\n }\n}\n"]}
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;IALtB;QAME;;wBAEgB;QAEhB;;WAEG;QACK,cAAS,GAAG,KAAK,CAAC;KAgB3B;IAdC;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,0BAA0B,EAAE,IAAI,CAAC,SAAS;aAC3C,GACI,CACR,CAAC;IACJ,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() fullWidth = false;\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-width': this.fullWidth,\n }}\n ></div>\n );\n }\n}\n"]}

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

@@ -3,6 +3,18 @@ import { ClassList, toString } from "@mgdis/stencil-helpers";
 import { icons } from "../../../assets/icons";
 export class MgIcon {
     constructor() {
+        /**
+         * Define icon size
+         */
+        this.size = 'medium';
+        /**
+         * Make the icon spin
+         */
+        this.spin = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-icon']);
         /**
          * Method to set default varianStyle props
          * needeed has stencil doesn't know that props is mutated when updated in prop watcher
@@ -23,12 +35,6 @@ export class MgIcon {
             this.svg.setAttribute('focusable', 'false');
             this.svg.setAttribute('class', this.classCollection.join());
         };
-        this.icon = undefined;
-        this.size = 'medium';
-        this.variant = undefined;
-        this.variantStyle = undefined;
-        this.spin = false;
-        this.classCollection = new ClassList(['mg-c-icon']);
     }
     validateIcon(newValue, oldValue) {
         if (!Object.keys(icons).includes(newValue))
@@ -132,6 +138,8 @@ export class MgIcon {
                     "tags": [],
                     "text": "Icon to display."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": false
             },
@@ -155,6 +163,8 @@ export class MgIcon {
                     "tags": [],
                     "text": "Define icon size"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
@@ -179,6 +189,8 @@ export class MgIcon {
                     "tags": [],
                     "text": "Define icon variant color"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false
             },
@@ -202,6 +214,8 @@ export class MgIcon {
                     "tags": [],
                     "text": "Define icon color variant style\nAdd 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"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant-style",
                 "reflect": false
             },
@@ -219,6 +233,8 @@ export class MgIcon {
                     "tags": [],
                     "text": "Make the icon spin"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "spin",
                 "reflect": false,
                 "defaultValue": "false"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-icon/mg-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAiB,KAAK,EAAqB,QAAQ,EAAwB,aAAa,EAA6B,MAAM,gBAAgB,CAAC;AACnJ,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAO9C,MAAM,OAAO,MAAM;;~~QAwFjB~~;;;WAGG;QACK,2BAAsB,GAAG,GAAS,EAAE;YAC1C,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;gBAAE,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACxE,CAAC,CAAC;QAEF;;;WAGG;QACK,eAAU,GAAG,CAAC,IAAc,EAAQ,EAAE;YAC5C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;YAChD,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxD,wBAAwB;YACxB,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YAC7C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;YAC5C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC~~;;oBAlF2B~~,~~QAAQ;;;oBAgDtB,KAAK;+BAakB,IAAI,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;;IAzElE,~~YAAY,CAAC,QAAwB,EAAE,QAAyB;QAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,yCAAyC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;aACvK,CAAC;YACJ,IAAI,QAAQ,KAAK,SAAS;gBAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,cAAc,QAAQ,EAAE,CAAC,CAAC;YAClF,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,cAAc,QAAQ,EAAE,CAAC,CAAC;YACnD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC;IAOD,YAAY,CAAC,QAAwB,EAAE,QAAyB;QAC9D,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,yCAAyC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;aAC7I,CAAC;YACJ,IAAI,QAAQ,KAAK,SAAS;gBAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,mBAAmB,QAAQ,EAAE,CAAC,CAAC;YACvF,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,mBAAmB,QAAQ,EAAE,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA2B,EAAE,QAA4B;QACvE,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;gBAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;iBACtJ,CAAC;gBACJ,IAAI,CAAC,sBAAsB,EAAE,CAAC;gBAC9B,IAAI,QAAQ,KAAK,SAAS;oBAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,sBAAsB,QAAQ,EAAE,CAAC,CAAC;gBAC1F,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,sBAAsB,QAAQ,EAAE,CAAC,CAAC;YAC7D,CAAC;QACH,CAAC;IACH,CAAC;IAWD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;QACtF,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;gBAAE,MAAM,IAAI,KAAK,CAAC,iDAAiD,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;iBACrK,CAAC;gBACJ,IAAI,QAAQ,KAAK,SAAS;oBAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,4BAA4B,QAAQ,EAAE,CAAC,CAAC;gBAChG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,4BAA4B,QAAQ,EAAE,CAAC,CAAC;YACnE,CAAC;QACH,CAAC;IACH,CAAC;IAOD,UAAU,CAAC,QAAwB;QACjC,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IA4BD;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3B,cAAc;QACd,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED;;OAEG;IACH,mBAAmB;QACjB,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;IAC9D,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Prop, Watch, State, Element } from '@stencil/core';\nimport { type IconType, sizes, type IconSizeType, variants, type IconVariantType, variantStyles, type IconVariantStyleType } from './mg-icon.conf';\nimport { ClassList, toString } from '@mgdis/stencil-helpers';\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!: IconType;\n @Watch('icon')\n validateIcon(newValue: MgIcon['icon'], oldValue?: MgIcon['icon']): void {\n if (!Object.keys(icons).includes(newValue)) throw new Error(`<mg-icon> prop \"icon\" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${toString(newValue)}.`);\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 = 'medium';\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(', ')}. Passed value: ${toString(newValue)}.`);\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 (newValue !== undefined) {\n if (!variants.includes(newValue)) throw new Error(`<mg-icon> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\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 (newValue !== undefined) {\n if (!variantStyles.includes(newValue)) throw new Error(`<mg-icon> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}. Passed value: ${toString(newValue)}.`);\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: IconType): void => {\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"]}
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 { type IconType, sizes, type IconSizeType, variants, type IconVariantType, variantStyles, type IconVariantStyleType } from './mg-icon.conf';\nimport { ClassList, toString } from '@mgdis/stencil-helpers';\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!: IconType;\n @Watch('icon')\n validateIcon(newValue: MgIcon['icon'], oldValue?: MgIcon['icon']): void {\n if (!Object.keys(icons).includes(newValue)) throw new Error(`<mg-icon> prop \"icon\" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${toString(newValue)}.`);\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 = 'medium';\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(', ')}. Passed value: ${toString(newValue)}.`);\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 (newValue !== undefined) {\n if (!variants.includes(newValue)) throw new Error(`<mg-icon> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\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 (newValue !== undefined) {\n if (!variantStyles.includes(newValue)) throw new Error(`<mg-icon> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}. Passed value: ${toString(newValue)}.`);\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: IconType): void => {\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-tag/mg-tag.js CHANGED Viewed

@@ -12,9 +12,13 @@ export class MgTag {
         // Classes
         this.classOutline = 'mg-c-tag--outline';
         this.classSoft = 'mg-c-tag--soft';
-        this.variant = variants[0];
-        this.outline = undefined;
-        this.soft = undefined;
+        /**
+         * Define tag variant
+         */
+        this.variant = variants[0]; // primary
+        /**
+         * Component classes
+         */
         this.classCollection = new ClassList(['mg-c-tag']);
     }
     validateVariant(newValue, oldValue) {
@@ -72,7 +76,7 @@ export class MgTag {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: 'bb99306c07ea9ef4ee193a6e52c2c211378d34df', class: this.classCollection.join() }, h("slot", { key: '0e427b1189217e5d863daf9ed15d35de4832d8dd' })));
+        return (h("span", { key: 'b3269e3baec3a281bdbe65f8b62636b7ea2fa84c', class: this.classCollection.join() }, h("slot", { key: 'bcca2d8653dbcd6a96d322055a4e2773d85ca87d' })));
     }
     static get is() { return "mg-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -108,6 +112,8 @@ export class MgTag {
                     "tags": [],
                     "text": "Define tag variant"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "variants[0]"
@@ -126,6 +132,8 @@ export class MgTag {
                     "tags": [],
                     "text": "Define if tag is using outline style"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "outline",
                 "reflect": false
             },
@@ -143,6 +151,8 @@ export class MgTag {
                     "tags": [],
                     "text": "Define if tag is using soft style"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "soft",
                 "reflect": false
             }

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

	@@ -1 +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,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC5E;;GAEG;AAMH,MAAM,OAAO,KAAK;;~~QAChB;;~~sBAEc;QAEd,UAAU;QACO,iBAAY,GAAG,mBAAmB,CAAC;QACnC,cAAS,GAAG,gBAAgB,CAAC;~~uBAcZ~~,QAAQ,CAAC,CAAC,CAAC~~;;;+BAwCP~~,IAAI,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC~~;;IAtCjE~~,eAAe,CAAC,QAA0B,EAAE,QAA2B;QACrE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,2CAA2C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC1H,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAC;YACvD,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA0B;QACxC,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;YACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;IAOD,YAAY,CAAC,QAAuB;QAClC,mBAAmB;QACnB,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO;YAAE,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAC;QAE3G,cAAc;QACd,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;YAClD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACnD,CAAC;IAOD;;mBAEe;IAEf;;;OAGG;IACK,mBAAmB,CAAC,WAAmB;QAC7C,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;IACjG,CAAC;IAED;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACrD,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACtC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport { TagVariantType, variants } from './mg-tag.conf';\nimport { ClassList, isValidString, toString } from '@mgdis/stencil-helpers';\n/*\n @slot - Tag content\n /\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(', ')}. Passed value: ${toString(newValue)}.`);\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"]}
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,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC5E;;GAEG;AAMH,MAAM,OAAO,KAAK;IALlB;QAME;;sBAEc;QAEd,UAAU;QACO,iBAAY,GAAG,mBAAmB,CAAC;QACnC,cAAS,GAAG,gBAAgB,CAAC;QAW9C;;WAEG;QACK,YAAO,GAAmB,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU;QAqCzD;;WAEG;QACM,oBAAe,GAAc,IAAI,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;KAuCnE;IA7EC,eAAe,CAAC,QAA0B,EAAE,QAA2B;QACrE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,2CAA2C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC1H,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAC;YACvD,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA0B;QACxC,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;YACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;IAOD,YAAY,CAAC,QAAuB;QAClC,mBAAmB;QACnB,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO;YAAE,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAC;QAE3G,cAAc;QACd,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;YAClD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACnD,CAAC;IAOD;;mBAEe;IAEf;;;OAGG;IACK,mBAAmB,CAAC,WAAmB;QAC7C,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;IACjG,CAAC;IAED;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACrD,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACtC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport { TagVariantType, variants } from './mg-tag.conf';\nimport { ClassList, isValidString, toString } from '@mgdis/stencil-helpers';\n/*\n @slot - Tag content\n /\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(', ')}. Passed value: ${toString(newValue)}.`);\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"]}