npm - @mgdis/mg-components - Versions diffs - 6.6.1 → 6.8.0 - Mend

@mgdis/mg-components 6.6.1 → 6.8.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 (131) hide show

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -39,6 +39,7 @@
     "components/molecules/mg-popover/mg-popover-content/mg-popover-content.js",
     "components/molecules/mg-progress/mg-progress.js",
     "components/molecules/mg-skip-links/mg-skip-links.js",
+    "components/molecules/mg-table/mg-table.js",
     "components/molecules/mg-tabs/mg-tabs.js"
   ],
   "compiler": {

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

@@ -87,7 +87,7 @@ export class MgButton {
         this.setIconSize = () => {
             var _a, _b;
             if (this.size === 'medium') {
-                (_a = this.element.querySelector('mg-icon')) === null || _a === void 0 ? void 0 : _a.removeAttribute('size');
+                (_a = this.element.querySelector('mg-icon[size]')) === null || _a === void 0 ? void 0 : _a.removeAttribute('size');
             }
             else if (this.isIcon) {
                 (_b = this.element.querySelector('mg-icon')) === null || _b === void 0 ? void 0 : _b.setAttribute('size', this.size);
@@ -153,7 +153,13 @@ export class MgButton {
         // emit value update
         this.disabledChange.emit(isDisabled);
     }
-    watchIsIcon() {
+    watchIsIcon(newValue) {
+        if (newValue) {
+            this.classCollection.add(`mg-c-button--icon`);
+            if (!isValidString(this.label)) {
+                throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
+            }
+        }
         this.setIconSize();
     }
     loadingHandler(newValue) {
@@ -172,13 +178,7 @@ export class MgButton {
         this.validateVariant(this.variant);
         this.validateFullWidth(this.fullWidth);
         this.validateSize(this.size);
-        this.watchIsIcon();
-        if (this.isIcon) {
-            this.classCollection.add(`mg-c-button--icon`);
-            if (!isValidString(this.label)) {
-                throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
-            }
-        }
+        this.watchIsIcon(this.isIcon);
         // Store the onclick fn
         this.onClickElementFn = this.element.onclick;
         this.disabledHandler(this.disabled);
@@ -204,7 +204,7 @@ export class MgButton {
      */
     render() {
         var _a;
-        return (h(Host, { key: 'a56efb7c3e49a4aadf6751b10bacb39f20c260df', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '2d47d068d188161b603b26117256d0e828393348', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: 'ba84820c70834f1e345af506265222340659f8ec', icon: "loader", spin: true }), h("div", { key: 'db6c3437d5de7f828cca7df9d83670de9d3a8ed6', class: "mg-c-button__content" }, h("slot", { key: 'b00f76d92e1e2f9e4dd834bf41419c68c2635d1a' })))));
+        return (h(Host, { key: 'bb6328d9245f36de9f6f3d503b16961fc34206fc', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '9c7c1adfb0c6752d745bfb0b407f6be65c08b82a', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: '0d6471de739aa33ec60e69aab941c73eadefab54', icon: "loader", spin: true }), h("div", { key: 'cecf5647a5dcb0538e514abf47bc09ab1efcfc9c', class: "mg-c-button__content" }, h("slot", { key: '15a6d2e63e6ec4668697bf74f2271432598faf06' })))));
     }
     static get is() { return "mg-button"; }
     static get encapsulation() { return "shadow"; }

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(newValue: boolean): void {\n if (newValue) {\n this.classCollection.add(`mg-c-button--icon`);\n if (!isValidString(this.label)) {\n throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n }\n }\n this.setIconSize();\n }\n\n /\n Option to set input disable on click, in order to prevent multi-click.\n * Parent component have to remove the attribute 'disabled' when the process ends.\n /\n @Prop() disableOnClick = false;\n\n /\n Define if button is loading, default to false.\n * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n * It's required to reset to false when action/promise in parent is done to stop the loading state\n /\n @State() loading = false;\n @Watch('loading')\n loadingHandler(newValue: MgButton['loading']): void {\n // we add loading style if it newvalue is true else we remove it\n if (newValue) {\n this.classCollection.add(this.classLoading);\n } else {\n this.classCollection.delete(this.classLoading);\n }\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n /\n Emmited event when disabled change\n /\n @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n /\n Trigger actions onClick event\n * @param event - click event\n /\n private handleClick = (event: MouseEvent): void => {\n if (this.disabled) event.stopPropagation();\n // Used to prevent multi-click.\n else if (this.disableOnClick) {\n this.loading = true;\n this.disabled = true;\n }\n };\n\n /\n Handle onKeydown event\n * @param event - keyboard event\n /\n private handleKeydown = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Handle onKeyup event\n * @param event - keyboard event\n /\n private handleKeyup = (event: KeyboardEvent): void => {\n if (!this.disabled && event.key === ' ') {\n event.preventDefault();\n this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n }\n };\n\n /\n Set child `<mg-icon>` element `size` prop to follow the current `size` prop\n /\n private setIconSize = (): void => {\n if (this.size === 'medium') {\n this.element.querySelector('mg-icon[size]')?.removeAttribute('size');\n } else if (this.isIcon) {\n this.element.querySelector('mg-icon')?.setAttribute('size', this.size);\n }\n };\n\n /\n Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateFullWidth(this.fullWidth);\n this.validateSize(this.size);\n this.watchIsIcon(this.isIcon);\n\n // Store the onclick fn\n this.onClickElementFn = this.element.onclick;\n this.disabledHandler(this.disabled);\n }\n\n /\n Add listners\n /\n componentDidLoad(): void {\n nextTick(() => {\n const closestForm = this.element.closest('form') \|\| this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n // submit buttons should trigger form submition;\n if (closestForm && ['submit', undefined].includes(this.type)) {\n this.element.addEventListener('click', () => {\n closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n });\n }\n });\n }\n\n /\n Render component\n * @returns html element\n */\n render(): HTMLElement {\n return (\n <Host\n role=\"button\"\n tabIndex={0}\n type={this.type}\n form={this.form}\n full-width={this.fullWidth}\n aria-label={this.label}\n aria-disabled={this.disabled?.toString()}\n onClick={this.handleClick}\n onKeyup={this.handleKeyup}\n onKeydown={this.handleKeydown}\n >\n <div class={this.classCollection.join()}>\n {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n <div class=\"mg-c-button__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -28,30 +28,45 @@ export class MgIcon {
          * @param icon - icon to render
          */
         this.renderIcon = (icon) => {
-            this.element.shadowRoot.innerHTML = icons[icon];
-            this.svg = this.element.shadowRoot.querySelector('svg');
+            var _a;
+            // Remove existing SVG from ShadowRoot
+            (_a = this.element.shadowRoot.querySelector('svg')) === null || _a === void 0 ? void 0 : _a.remove();
+            // Append new SVG to ShadowRoot
+            const svgContainer = document.createElement('div');
+            svgContainer.innerHTML = icons[icon];
+            this.element.shadowRoot.append(svgContainer.firstChild);
+            svgContainer.remove();
             // update svg attributes
+            this.svg = this.element.shadowRoot.querySelector('svg');
             this.svg.setAttribute('aria-hidden', 'true');
             this.svg.setAttribute('focusable', 'false');
             this.svg.setAttribute('class', this.classCollection.join());
         };
     }
     validateIcon(newValue, oldValue) {
-        if (!Object.keys(icons).includes(newValue))
+        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)}.`);
+        }
         else {
-            if (oldValue !== undefined)
+            if (oldValue !== undefined) {
                 this.classCollection.delete(`mg-c-icon--${oldValue}`);
+            }
             this.classCollection.add(`mg-c-icon--${newValue}`);
             this.renderIcon(newValue);
         }
     }
     validateSize(newValue, oldValue) {
-        if (!sizes.includes(newValue))
+        // When removing size attribute, it is set to null
+        if (newValue === null) {
+            newValue = 'medium';
+        }
+        if (!sizes.includes(newValue)) {
             throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);
+        }
         else {
-            if (oldValue !== undefined)
+            if (oldValue !== undefined) {
                 this.classCollection.delete(`mg-c-icon--size-${oldValue}`);
+            }
             this.classCollection.add(`mg-c-icon--size-${newValue}`);
         }
     }
@@ -123,7 +138,7 @@ export class MgIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"copy\" | \"history\" | \"location\" | \"key\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"list\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
+                    "resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"copy\" | \"history\" | \"location\" | \"key\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"list\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
                     "references": {
                         "IconType": {
                             "location": "import",

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;IALnB;~~QA2BE~~;;WAEG;QACK,SAAI,GAAiB,QAAQ,CAAC;~~QA6CtC~~;;WAEG;QACK,SAAI,GAAG,KAAK,CAAC;QAUrB;;WAEG;QACM,oBAAe,GAAc,IAAI,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;QAEnE;;;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;KAqBH;~~IAnHC~~,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)) {\n 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) {\n this.classCollection.delete(`mg-c-icon--${oldValue}`);\n }\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 // When removing size attribute, it is set to null\n if (newValue === null) {\n newValue = 'medium';\n }\n if (!sizes.includes(newValue)) {\n throw new Error(`<mg-icon> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n } else {\n if (oldValue !== undefined) {\n this.classCollection.delete(`mg-c-icon--size-${oldValue}`);\n }\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 // Remove existing SVG from ShadowRoot\n this.element.shadowRoot.querySelector('svg')?.remove();\n\n // Append new SVG to ShadowRoot\n const svgContainer = document.createElement('div');\n svgContainer.innerHTML = icons[icon];\n this.element.shadowRoot.append(svgContainer.firstChild);\n svgContainer.remove();\n\n // update svg attributes\n this.svg = this.element.shadowRoot.querySelector('svg');\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/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js CHANGED Viewed

@@ -97,10 +97,10 @@ export class MgInputCheckboxPaginated {
      * @returns HTML Element
      */
     render() {
-        const getText = (checkboxes) => (h("em", { key: '8f20e5be81047106e04cd101385b9c6555c0c38d', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`));
+        const getText = (checkboxes) => (h("em", { key: '8f20e5be81047106e04cd101385b9c6555c0c38d', class: "mg-c-input__section-header-title-label" }, `${this.messages[checkboxes.length > 1 ? 'titlePlural' : 'title']} (${checkboxes.length})`));
         const [from, to] = this.getFromToIndexes();
         const itemsContainerId = `items-${this.sectionKind}-container`;
-        return (h(Host, { key: '39d0fc41abe4b537b240bdc14e80fc42cb41033d', hidden: this.checkboxes.length < 1 }, h("div", { key: 'fec430cfffc005a217694f9a4ba68412a6a08c7b', class: "mg-c-input__section-header" }, this.sectionKind === SectionKind.SELECTED ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-tooltip", { key: 'e1b38d93875962af3024ac27e1892c040dbf9bdb', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip }, h("mg-button", { key: 'f593b3d5ca5bd8b3080253842a5c513709f16e3a', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { key: '74c18984938188e2861cd79b56d919a94f32064f', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, h(MgInputCheckboxList, { key: '15c2f6fe98d772ce5b0a0d4ec448986e91592107', checkboxes: this.getArrayRange(this.checkboxes, from, to), displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
+        return (h(Host, { key: 'ed5b99164dd8b03ce07b60b373eaacd17a030f4b', hidden: this.checkboxes.length < 1 }, h("div", { key: 'bd8f69a280da86a7eba42f5bd4eaaa1df75f0303', class: "mg-c-input__section-header" }, this.sectionKind === SectionKind.SELECTED ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: "mg-c-input__section-header-title" }, getText(this.checkboxes)))) : (h("p", { class: "mg-c-input__section-header-title mg-c-input__section-header-title--static" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-tooltip", { key: 'e33ca1a20b2fb420b678a884e24e53913b6024d6', class: "mg-c-input__section-header-tootlip", message: this.messages.tooltip }, h("mg-button", { key: '6d2e26d70c22b633085cc3d1dd735fe68398326b', variant: "link", onClick: this.massActionHandler }, this.messages.action))), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { key: '32468986664f58c857ab733e2ed814f09723b2c2', hidden: !this.expanded, id: itemsContainerId, class: "mg-c-input__section-content" }, h(MgInputCheckboxList, { key: 'f86f3e0bdec85575699b101c3b21147c3b9bc8e2', checkboxes: this.getArrayRange(this.checkboxes, from, to), displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, disabled: this.disabled, name: this.name, invalid: this.invalid }))));
     }
     static get is() { return "mg-input-checkbox-paginated"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-input-checkbox-paginated.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\nimport { CheckboxItem, IMgInputCheckboxBase, type SectionKindType, SectionKind } from '../mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from '../MgInputCheckboxList';\n\n/*\n Internal component use to manage sections instances\n * @internal\n /\n@Component({\n tag: 'mg-input-checkbox-paginated',\n shadow: false,\n scoped: true,\n})\nexport class MgInputCheckboxPaginated implements IMgInputCheckboxBase {\n /***********\n Constantes \n **********/\n private readonly offset = 10;\n private sectionKind: SectionKindType;\n\n /**********\n Decorators \n **********/\n\n /\n * Define if mg-input-checkbox-list is readonly\n /\n @Prop() readonly?: boolean;\n\n /\n Define if mg-input-checkbox-list is disabled\n /\n @Prop() disabled?: boolean;\n\n /\n Define mg-input-checkbox input name\n /\n @Prop() name?: string;\n\n /\n Define mg-input-checkbox input invalid\n /\n @Prop() invalid?: boolean;\n\n /\n Current page\n /\n @Prop({ mutable: true }) currentPage = 1;\n\n /\n Define checkboxes to paginate\n /\n @Prop() checkboxes: CheckboxItem[] = [];\n @Watch('checkboxes')\n watchCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue?: MgInputCheckboxPaginated['checkboxes']): void {\n const pageCountNewValue = this.getPageCount(newValue);\n const pageCountOldValue = this.getPageCount(oldValue);\n // after each array.length update we reset pagination\n // when items fill on page, we set current page to 1\n if (pageCountNewValue === 1 \|\| (pageCountNewValue !== 0 && this.currentPage === 0)) {\n this.currentPage = 1;\n }\n // when old items page numbers match the current page AND new items page number is lower than current page, we set the new last page\n else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {\n this.currentPage--;\n }\n this.sectionKind = newValue[0].value ? SectionKind.SELECTED : SectionKind.NOT_SELECTED;\n }\n\n /\n Define component message\n /\n @Prop() messages: Record<string, string>;\n\n /\n Emit 'mass-action' event\n * used to informe that select-all/unselect-all button listner is triggered\n /\n @Event({ eventName: 'mass-action' }) massAction: EventEmitter<SectionKindType>;\n\n /\n Is checked items values expanded\n /\n @State() expanded = true;\n\n /*********\n Methods \n ********/\n\n /\n * Mass action handler\n /\n private massActionHandler = (): void => {\n this.massAction.emit(this.sectionKind);\n };\n\n /\n Toggle items button handler\n /\n private handleToggleClick = (): void => {\n this.expanded = !this.expanded;\n };\n\n /\n Method to get a array range\n * @param from - array start index\n * @param to - array end index\n * @returns array's range\n /\n private getArrayRange = <ItemType,>(array: ItemType[], from: number, to: number): ItemType[] => array.slice(from, to);\n\n /\n Get from and to index\n * @returns [from,to] index\n /\n private getFromToIndexes(): number[] {\n const isFirstPage = this.currentPage === 1;\n const from = isFirstPage ? 0 : (this.currentPage - 1) this.offset;\n const to = isFirstPage ? this.offset : this.currentPage * this.offset;\n return [from, to];\n }\n\n /*\n Method to get page count from items\n * @param items - items to count\n * @returns page count from items\n /\n private getPageCount = (items: unknown[]): number => (items?.length > 0 ? Math.ceil(items.length / this.offset) : 0);\n\n /\n Handle mg-pagination current page change event\n * @param event - pagination current page change event\n /\n private handleCurrentPageChange = (event: CustomEvent): void => {\n this.currentPage = Number(event.detail);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.watchCheckboxes(this.checkboxes);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const getText = (checkboxes: CheckboxItem[]): HTMLElement => (\n <em class=\"mg-c-input__section-header-title-label\">{`${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`}</em>\n );\n const [from, to] = this.getFromToIndexes();\n const itemsContainerId = `items-${this.sectionKind}-container`;\n\n return (\n <Host hidden={this.checkboxes.length < 1}>\n <div class=\"mg-c-input__section-header\">\n {this.sectionKind === SectionKind.SELECTED ? (\n <mg-button variant=\"flat\" onClick={this.handleToggleClick} aria-controls={itemsContainerId} aria-expanded={this.expanded.toString()}>\n <mg-icon icon={this.expanded ? 'chevron-up' : 'chevron-down'}></mg-icon>\n <span class=\"mg-c-input__section-header-title\">{getText(this.checkboxes)}</span>\n </mg-button>\n ) : (\n <p class=\"mg-c-input__section-header-title mg-c-input__section-header-title--static\">{getText(this.checkboxes)}</p>\n )}\n {((this.sectionKind === SectionKind.SELECTED && this.expanded) \|\| this.sectionKind === SectionKind.NOT_SELECTED) && (\n <mg-tooltip class=\"mg-c-input__section-header-tootlip\" message={this.messages.tooltip}>\n <mg-button variant=\"link\" onClick={this.massActionHandler}>\n {this.messages.action}\n </mg-button>\n </mg-tooltip>\n )}\n {this.expanded && this.getPageCount(this.checkboxes) > 1 && (\n <mg-pagination\n key=\"search-pagination\"\n totalPages={this.getPageCount(this.checkboxes)}\n currentPage={this.currentPage}\n onCurrent-page-change={this.handleCurrentPageChange}\n hideNavigationLabels={true}\n hidePageCount={true}\n identifier={`input-checkbox-pagination-${this.sectionKind}`}\n ></mg-pagination>\n )}\n </div>\n <div hidden={!this.expanded} id={itemsContainerId} class=\"mg-c-input__section-content\">\n <MgInputCheckboxList\n checkboxes={this.getArrayRange(this.checkboxes, from, to)}\n displaySearchInput={true}\n messages={this.messages}\n id={`items-${this.sectionKind}`}\n disabled={this.disabled}\n name={this.name}\n invalid={this.invalid}\n ></MgInputCheckboxList>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-input-checkbox-paginated.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\nimport { CheckboxItem, IMgInputCheckboxBase, type SectionKindType, SectionKind } from '../mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from '../MgInputCheckboxList';\n\n/*\n Internal component use to manage sections instances\n * @internal\n /\n@Component({\n tag: 'mg-input-checkbox-paginated',\n shadow: false,\n scoped: true,\n})\nexport class MgInputCheckboxPaginated implements IMgInputCheckboxBase {\n /***********\n Constantes \n **********/\n private readonly offset = 10;\n private sectionKind: SectionKindType;\n\n /**********\n Decorators \n **********/\n\n /\n * Define if mg-input-checkbox-list is readonly\n /\n @Prop() readonly?: boolean;\n\n /\n Define if mg-input-checkbox-list is disabled\n /\n @Prop() disabled?: boolean;\n\n /\n Define mg-input-checkbox input name\n /\n @Prop() name?: string;\n\n /\n Define mg-input-checkbox input invalid\n /\n @Prop() invalid?: boolean;\n\n /\n Current page\n /\n @Prop({ mutable: true }) currentPage = 1;\n\n /\n Define checkboxes to paginate\n /\n @Prop() checkboxes: CheckboxItem[] = [];\n @Watch('checkboxes')\n watchCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue?: MgInputCheckboxPaginated['checkboxes']): void {\n const pageCountNewValue = this.getPageCount(newValue);\n const pageCountOldValue = this.getPageCount(oldValue);\n // after each array.length update we reset pagination\n // when items fill on page, we set current page to 1\n if (pageCountNewValue === 1 \|\| (pageCountNewValue !== 0 && this.currentPage === 0)) {\n this.currentPage = 1;\n }\n // when old items page numbers match the current page AND new items page number is lower than current page, we set the new last page\n else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {\n this.currentPage--;\n }\n this.sectionKind = newValue[0].value ? SectionKind.SELECTED : SectionKind.NOT_SELECTED;\n }\n\n /\n Define component message\n /\n @Prop() messages: Record<string, string>;\n\n /\n Emit 'mass-action' event\n * used to informe that select-all/unselect-all button listner is triggered\n /\n @Event({ eventName: 'mass-action' }) massAction: EventEmitter<SectionKindType>;\n\n /\n Is checked items values expanded\n /\n @State() expanded = true;\n\n /*********\n Methods \n ********/\n\n /\n * Mass action handler\n /\n private massActionHandler = (): void => {\n this.massAction.emit(this.sectionKind);\n };\n\n /\n Toggle items button handler\n /\n private handleToggleClick = (): void => {\n this.expanded = !this.expanded;\n };\n\n /\n Method to get a array range\n * @param from - array start index\n * @param to - array end index\n * @returns array's range\n /\n private getArrayRange = <ItemType,>(array: ItemType[], from: number, to: number): ItemType[] => array.slice(from, to);\n\n /\n Get from and to index\n * @returns [from,to] index\n /\n private getFromToIndexes(): number[] {\n const isFirstPage = this.currentPage === 1;\n const from = isFirstPage ? 0 : (this.currentPage - 1) this.offset;\n const to = isFirstPage ? this.offset : this.currentPage * this.offset;\n return [from, to];\n }\n\n /*\n Method to get page count from items\n * @param items - items to count\n * @returns page count from items\n /\n private getPageCount = (items: unknown[]): number => (items?.length > 0 ? Math.ceil(items.length / this.offset) : 0);\n\n /\n Handle mg-pagination current page change event\n * @param event - pagination current page change event\n /\n private handleCurrentPageChange = (event: CustomEvent): void => {\n this.currentPage = Number(event.detail);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.watchCheckboxes(this.checkboxes);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const getText = (checkboxes: CheckboxItem[]): HTMLElement => (\n <em class=\"mg-c-input__section-header-title-label\">{`${this.messages[checkboxes.length > 1 ? 'titlePlural' : 'title']} (${checkboxes.length})`}</em>\n );\n const [from, to] = this.getFromToIndexes();\n const itemsContainerId = `items-${this.sectionKind}-container`;\n\n return (\n <Host hidden={this.checkboxes.length < 1}>\n <div class=\"mg-c-input__section-header\">\n {this.sectionKind === SectionKind.SELECTED ? (\n <mg-button variant=\"flat\" onClick={this.handleToggleClick} aria-controls={itemsContainerId} aria-expanded={this.expanded.toString()}>\n <mg-icon icon={this.expanded ? 'chevron-up' : 'chevron-down'}></mg-icon>\n <span class=\"mg-c-input__section-header-title\">{getText(this.checkboxes)}</span>\n </mg-button>\n ) : (\n <p class=\"mg-c-input__section-header-title mg-c-input__section-header-title--static\">{getText(this.checkboxes)}</p>\n )}\n {((this.sectionKind === SectionKind.SELECTED && this.expanded) \|\| this.sectionKind === SectionKind.NOT_SELECTED) && (\n <mg-tooltip class=\"mg-c-input__section-header-tootlip\" message={this.messages.tooltip}>\n <mg-button variant=\"link\" onClick={this.massActionHandler}>\n {this.messages.action}\n </mg-button>\n </mg-tooltip>\n )}\n {this.expanded && this.getPageCount(this.checkboxes) > 1 && (\n <mg-pagination\n key=\"search-pagination\"\n totalPages={this.getPageCount(this.checkboxes)}\n currentPage={this.currentPage}\n onCurrent-page-change={this.handleCurrentPageChange}\n hideNavigationLabels={true}\n hidePageCount={true}\n identifier={`input-checkbox-pagination-${this.sectionKind}`}\n ></mg-pagination>\n )}\n </div>\n <div hidden={!this.expanded} id={itemsContainerId} class=\"mg-c-input__section-content\">\n <MgInputCheckboxList\n checkboxes={this.getArrayRange(this.checkboxes, from, to)}\n displaySearchInput={true}\n messages={this.messages}\n id={`items-${this.sectionKind}`}\n disabled={this.disabled}\n name={this.name}\n invalid={this.invalid}\n ></MgInputCheckboxList>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.conf.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export {};
+export const DEFAULT_MAX_DATE = '9999-12-31';
 //# sourceMappingURL=mg-input-date.conf.js.map

package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.conf.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-input-date.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-date/mg-input-date.conf.ts"],"names":[],"mappings":"","sourcesContent":["import type { InputError } from '../../../../types';\n\nexport type InputDateError = InputError & ('min' \| 'max' \| 'minMax' \| 'required' \| 'badInput');\n"]}
1	+ {"version":3,"file":"mg-input-date.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-date/mg-input-date.conf.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG,YAAY,CAAC","sourcesContent":["import type { InputError } from '../../../../types';\n\nexport const DEFAULT_MAX_DATE = '9999-12-31';\n\nexport type InputDateError = InputError & ('min' \| 'max' \| 'minMax' \| 'required' \| 'badInput');\n"]}

package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, isValidString, localeDate, dateRegExp, dateToString, getLocaleDatePattern, toString } from "@mgdis/stencil-helpers";
+import { DEFAULT_MAX_DATE } from "./mg-input-date.conf";
 import { classReadonly, classDisabled } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 export class MgInputDate {
@@ -27,7 +28,7 @@ export class MgInputDate {
          * Define input maximum date
          * format: yyyy-mm-dd
          */
-        this.max = '9999-12-31';
+        this.max = '9999-12-31'; // Hardcoded value matching DEFAULT_MAX_DATE for documentation
         /**
          * Define if input is disabled
          */
@@ -52,11 +53,36 @@ export class MgInputDate {
          * @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)
          */
         this.formatHelpText = (helpText) => {
+            var _a, _b;
+            // If the component is in readonly mode, return directly because the message will not be rendered
+            if (this.readonly) {
+                return undefined;
+            }
             const defaultHelpTextVariable = '{defaultHelpText}';
-            let text = isValidString(helpText) ? helpText : this.messages.input.date.helpText;
-            if (text.includes(defaultHelpTextVariable))
-                text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));
-            return text.replace('{pattern}', this.renderPattern()).replace('{date}', localeDate(dateToString(new Date('2023-12-24')), this.systemLocale));
+            // If a custom helpText is provided, store it but don't return it directly
+            let text = isValidString(helpText) ? helpText : this.messages.input.date.helpText.expectedFormat;
+            // Handle defaultHelpText
+            if (text.includes(defaultHelpTextVariable)) {
+                text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText.expectedFormat));
+            }
+            // Replace pattern and date variables
+            text = text.replace('{pattern}', this.renderPattern()).replace('{date}', localeDate(dateToString(new Date('2025-12-24')), this.systemLocale));
+            // Add additional message for min/max if necessary
+            let rangeMessage;
+            if (((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
+                rangeMessage = this.messages.input.date.helpText.minMax.replace('{min}', localeDate(this.min, this.systemLocale)).replace('{max}', localeDate(this.max, this.systemLocale));
+            }
+            else if (((_b = this.min) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                rangeMessage = this.messages.input.date.helpText.min.replace('{min}', localeDate(this.min, this.systemLocale));
+            }
+            else if (this.max !== DEFAULT_MAX_DATE) {
+                rangeMessage = this.messages.input.date.helpText.max.replace('{max}', localeDate(this.max, this.systemLocale));
+            }
+            // Combine custom helpText with range message if both exist
+            if (text !== undefined && rangeMessage !== undefined) {
+                return `${text}<br>${rangeMessage}`;
+            }
+            return text;
         };
         /**
          * Handle input event
@@ -106,28 +132,27 @@ export class MgInputDate {
          */
         this.getInputError = () => {
             var _a;
-            let inputError = null;
             // bad input or pattern
             if (this.input.validity.badInput || (this.value && !this.isValidPattern(this.value))) {
-                inputError = 'badInput';
+                return 'badInput';
             }
             // required
-            else if (this.input.validity.valueMissing) {
-                inputError = 'required';
+            if (this.input.validity.valueMissing) {
+                return 'required';
             }
             // min & max
-            else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== '9999-12-31') {
-                inputError = 'minMax';
+            if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== DEFAULT_MAX_DATE) {
+                return 'minMax';
             }
             // min
-            else if (this.input.validity.rangeUnderflow) {
-                inputError = 'min';
+            if (this.input.validity.rangeUnderflow) {
+                return 'min';
             }
             // max
-            else if (this.input.validity.rangeOverflow) {
-                inputError = 'max';
+            if (this.input.validity.rangeOverflow) {
+                return 'max';
             }
-            return inputError;
+            return null;
         };
         /**
          * Check input errors
@@ -147,14 +172,16 @@ export class MgInputDate {
                 }
                 // min, max & minMax
                 else if (['min', 'max', 'minMax'].includes(inputError)) {
-                    this.errorMessage = this.messages.errors.date[inputError]
+                    this.errorMessage = this.messages.input.date.helpText[inputError]
                         .replace('{min}', localeDate(this.min, this.systemLocale))
                         .replace('{max}', localeDate(this.max, this.systemLocale));
                 }
                 // wrong date format
                 // element.validity.badInput is default error message
                 else {
-                    this.errorMessage = this.messages.errors.date.badInput.replace('{pattern}', this.renderPattern());
+                    this.errorMessage = this.messages.input.date.error.badInput
+                        .replace('{pattern}', this.renderPattern())
+                        .replace('{date}', localeDate(dateToString(new Date('2025-12-24')), this.systemLocale));
                 }
             }
         };
@@ -313,7 +340,7 @@ export class MgInputDate {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '78d4b2b8adb5aa39757e9e077a3d597d72b5c61b', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (h("mg-input", { key: '81d2fbf8eef1bcfcf4520a82825b252b6256e72d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }))));