npm - @mgdis/mg-components - Versions diffs - 5.28.2 → 6.0.0 - Mend

@mgdis/mg-components 5.28.2 → 6.0.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 (339) hide show

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

@@ -1,22 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { Z as Ze, H as He, B as Be, l as lt, n as nt, I as Ie } from './index.es.js';
-import { d as defineCustomElement$5, H as Handler, b as classReadonly, e as classDisabled } from './mg-input2.js';
+import { Q as Qe, W as We, H as He, a as at, i as it, I as Ie, Z as Ze } from './index.es.js';
+import { d as defineCustomElement$5, b as classReadonly, e as classDisabled } from './mg-input2.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$6 } from './mg-icon2.js';
 import { d as defineCustomElement$4 } from './mg-input-title2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
-var InputError;
-(function (InputError) {
-    InputError["MIN"] = "min";
-    InputError["MAX"] = "max";
-    InputError["MINMAX"] = "minMax";
-    InputError["REQUIRED"] = "required";
-    InputError["PATTERN"] = "badInput";
-})(InputError || (InputError = {}));
-const mgInputDateCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input-icon{color:hsl(var(--color-dark))}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:.5rem}.mg-c-input.mg-c-input--readonly>*:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}";
+const mgInputDateCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}";
 const MgInputDateStyle0 = mgInputDateCss;
 const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends HTMLElement {
@@ -33,7 +24,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
          * @param value - value to test
          * @returns truthy when value match the pattern
          */
-        this.isValidPattern = (value) => Ze(value) && He.test(value);
+        this.isValidPattern = (value) => Qe(value) && We.test(value);
         /**
          * Format help text to display
          * @param helpText - help text format
@@ -41,10 +32,10 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
          */
         this.formatHelpText = (helpText) => {
             const defaultHelpTextVariable = '{defaultHelpText}';
-            let text = Ze(helpText) ? helpText : this.messages.input.date.helpText;
+            let text = Qe(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}', Be(lt(new Date('2023-12-24')), this.systemLocale));
+            return text.replace('{pattern}', this.renderPattern()).replace('{date}', He(at(new Date('2023-12-24')), this.systemLocale));
         };
         /**
          * Handle input event
@@ -60,7 +51,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
          * Handle blur event
          */
         this.handleBlur = () => {
-            this.handlerInProgress = Handler.BLUR;
+            this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
                 // reset guard
                 this.handlerInProgress = undefined;
@@ -86,7 +77,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && (!this.value || this.isValidPattern(this.value))));
+            this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && (['', undefined].includes(this.value) || this.isValidPattern(this.value))));
         };
         /**
          * get input error code
@@ -97,23 +88,23 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
             let inputError = null;
             // required
             if (this.input.validity.valueMissing) {
-                inputError = InputError.REQUIRED;
+                inputError = 'required';
             }
             // pattern
             else if (this.value && !this.isValidPattern(this.value)) {
-                inputError = InputError.PATTERN;
+                inputError = 'badInput';
             }
             // 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 = InputError.MINMAX;
+                inputError = 'minMax';
             }
             // min
             else if (this.input.validity.rangeUnderflow) {
-                inputError = InputError.MIN;
+                inputError = 'min';
             }
             // max
             else if (this.input.validity.rangeOverflow) {
-                inputError = InputError.MAX;
+                inputError = 'max';
             }
             return inputError;
         };
@@ -130,14 +121,14 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
                     this.errorMessage = errorMessage;
                 }
                 // required
-                else if (inputError === InputError.REQUIRED) {
+                else if (inputError === 'required') {
                     this.errorMessage = this.messages.errors[inputError];
                 }
                 // min, max & minMax
-                else if ([InputError.MIN, InputError.MAX, InputError.MINMAX].includes(inputError)) {
+                else if (['min', 'max', 'minMax'].includes(inputError)) {
                     this.errorMessage = this.messages.errors.date[inputError]
-                        .replace('{min}', Be(this.min, this.systemLocale))
-                        .replace('{max}', Be(this.max, this.systemLocale));
+                        .replace('{min}', He(this.min, this.systemLocale))
+                        .replace('{max}', He(this.max, this.systemLocale));
                 }
                 // wrong date format
                 // element.validity.badInput is default error message
@@ -151,7 +142,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
          * @returns translated html pattern
          */
         this.renderPattern = () => {
-            let patternLocal = nt(this.systemLocale);
+            let patternLocal = it(this.systemLocale);
             for (const key in this.messages.input.date.pattern) {
                 patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
             }
@@ -181,14 +172,14 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
         if (newValue === '')
             newValue = null;
         // check value validity
-        if (newValue && !Ze(newValue)) {
-            throw new Error("<mg-input-date> props 'value' must be a valid string");
+        if (newValue && !Qe(newValue)) {
+            throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${Ze(newValue)}.`);
         }
-        else if (!newValue || (newValue && this.isValidPattern(newValue))) {
+        else if ([null, undefined].includes(newValue) || this.isValidPattern(newValue)) {
             this.valueChange.emit(newValue);
         }
         else {
-            console.error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
+            console.error("<mg-input-date> props 'value' doesn't match pattern: 'yyyy-mm-dd'.");
         }
     }
     watchReadonly(newValue) {
@@ -199,7 +190,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
     }
     validateMinMax(newValue) {
         if (newValue && !this.isValidPattern(newValue)) {
-            throw new Error("<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd");
+            throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${Ze(newValue)}.`);
         }
     }
     handleValidityChange(newValue, _oldValue, prop) {
@@ -236,10 +227,10 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
      */
     async setError(valid, errorMessage) {
         if (typeof valid !== 'boolean') {
-            throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
+            throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!Ze(errorMessage)) {
-            throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
+        else if (!Qe(errorMessage)) {
+            throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string.');
         }
         else {
             this.setValidity(valid);
@@ -256,7 +247,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
         this.valid = newValue;
         this.invalid = !this.valid;
         // We need to send valid event even if it is the same value
-        if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue))
+        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
             this.inputValid.emit(this.valid);
     }
     /*************
@@ -292,10 +283,10 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'f38d79cb71311149b4d15885b65cd8f025dde15d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: Be(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, h("input", { key: '67bf6f0ad58ee1a506ffd0d3d41d5954db68465c', 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: '38bcc2503040b03e17e49f3cb1ac27209aa50a1b', 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 && ['', undefined].includes(this.value) ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, He(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;
-            } })));
+            } }))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-input-date.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-input-date.js","mappings":"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","names":["MgInputDate","isValidString","dateRegExp","localeDate","dateToString","getLocaleDatePattern","ClassList"],"sources":["src/components/molecules/inputs/mg-input-date/mg-input-date.conf.ts","../styles/dist/components/mg-input-date.css?tag=mg-input-date&encapsulation=shadow","src/components/molecules/inputs/mg-input-date/mg-input-date.tsx"],"sourcesContent":["export enum InputError {\n MIN = 'min',\n MAX = 'max',\n MINMAX = 'minMax',\n REQUIRED = 'required',\n PATTERN = 'badInput',\n}\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input-icon{color:hsl(var(--color-dark))}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(),.mg-c-input__help-text ::slotted(){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:.5rem}.mg-c-input.mg-c-input--readonly>:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left: 0;--mg-button-border-radius-bottom-left: 0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right: 0;--mg-button-border-radius-bottom-right: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right: var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right: var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}/# sourceMappingURL=mg-input-date.css.map /\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch, Method } from '@stencil/core';\nimport { ClassList, isValidString, localeDate, dateRegExp, dateToString, getLocaleDatePattern } from '@mgdis/stencil-helpers';\nimport { InputError } from './mg-input-date.conf';\nimport { Handler, classReadonly, type TooltipPosition, classDisabled } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-input-date',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-date.css',\n shadow: true,\n})\nexport class MgInputDate {\n /***********\n Internal \n *********/\n\n // HTML selector\n private input: HTMLInputElement;\n\n // Locales\n private messages;\n private locale: string;\n private systemLocale: string;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: Handler;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputDateElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n validateValue(newValue: MgInputDate['value']): void {\n // When the input is not fully completed or has been cleared, the value becomes an empty string.\n if (newValue === '') newValue = null;\n\n // check value validity\n if (newValue && !isValidString(newValue)) {\n throw new Error(\"<mg-input-date> props 'value' must be a valid string\");\n } else if (!newValue \|\| (newValue && this.isValidPattern(newValue))) {\n this.valueChange.emit(newValue);\n } else {\n console.error(\"<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd\");\n }\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop?: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Define if input is required\n /\n @Prop() required = false;\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputDate['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n\n /\n Define input minimum date\n * format: yyyy-mm-dd\n /\n @Prop() min?: string;\n\n /\n Define input maximum date\n * format: yyyy-mm-dd\n /\n @Prop() max?: string = '9999-12-31';\n @Watch('min')\n @Watch('max')\n validateMinMax(newValue: string): void {\n if (newValue && !this.isValidPattern(newValue)) {\n throw new Error(\"<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd\");\n }\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n @Watch('min')\n @Watch('max')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n @Watch('disabled')\n watchDisabled(newValue: MgInputDate['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip?: string;\n\n /\n Define tooltip position\n /\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /\n Add a help text under the input, usually expected data format and example\n * Available string variables:\n * - `{pattern}`: render innerHTML pattern based on system\n * - `{date}`: render innerText date with a pattern base format.\n * - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.\n * ex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`\n /\n @Prop() helpText?: string;\n\n /\n Define input valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define input invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--date']);\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputDateElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputDateElement['valid']>;\n\n /\n Display input error if it exists.\n /\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /\n Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n /\n @Method()\n async setError(valid: MgInputDate['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-date> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-date> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /\n Method to validate date pattern string\n * @param value - value to test\n * @returns truthy when value match the pattern\n /\n private isValidPattern = (value: string): boolean => isValidString(value) && dateRegExp.test(value);\n\n /\n Format help text to display\n * @param helpText - help text format\n * @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)\n /\n private formatHelpText = (helpText: string): string => {\n const defaultHelpTextVariable = '{defaultHelpText}';\n let text = isValidString(helpText) ? helpText : this.messages.input.date.helpText;\n if (text.includes(defaultHelpTextVariable)) text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));\n\n return text.replace('{pattern}', this.renderPattern()).replace('{date}', localeDate(dateToString(new Date('2023-12-24')), this.systemLocale));\n };\n\n /\n Method to set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputDate['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined \|\| (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n\n /\n Handle input event\n /\n private handleInput = (): void => {\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /\n Handle blur event\n /\n private handleBlur = (): void => {\n this.handlerInProgress = Handler.BLUR;\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /\n Handle keydown event\n * @param event - input keydown event\n /\n private handleKeyDown = (event: KeyboardEvent): void => {\n // bypass the native \"Delete\" action wich trigger an \"input\" event with \"checkValidty() => false\" with a falsy badInput = true,\n // when we reset the field we need to test a blank value.\n if (['Delete', 'Backspace'].includes(event.key)) {\n event.preventDefault();\n this.value = '';\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n }\n }\n };\n\n /\n Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(this.readonly \|\| this.disabled \|\| (this.input.checkValidity() && (!this.value \|\| this.isValidPattern(this.value))));\n };\n\n /\n get input error code\n * @returns error code\n /\n private getInputError = (): null \| InputError => {\n let inputError = null;\n\n // required\n if (this.input.validity.valueMissing) {\n inputError = InputError.REQUIRED;\n }\n // pattern\n else if (this.value && !this.isValidPattern(this.value)) {\n inputError = InputError.PATTERN;\n }\n // min & max\n else if ((this.input.validity.rangeUnderflow \|\| this.input.validity.rangeOverflow) && this.min?.length > 0 && this.max !== '9999-12-31') {\n inputError = InputError.MINMAX;\n }\n // min\n else if (this.input.validity.rangeUnderflow) {\n inputError = InputError.MIN;\n }\n // max\n else if (this.input.validity.rangeOverflow) {\n inputError = InputError.MAX;\n }\n\n return inputError;\n };\n\n /\n Check input errors\n * @param errorMessage - errorMessage override\n /\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n if (!this.valid) {\n const inputError = this.getInputError();\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n // required\n else if (inputError === InputError.REQUIRED) {\n this.errorMessage = this.messages.errors[inputError];\n }\n // min, max & minMax\n else if ([InputError.MIN, InputError.MAX, InputError.MINMAX].includes(inputError)) {\n this.errorMessage = this.messages.errors.date[inputError]\n .replace('{min}', localeDate(this.min, this.systemLocale))\n .replace('{max}', localeDate(this.max, this.systemLocale));\n }\n // wrong date format\n // element.validity.badInput is default error message\n else {\n this.errorMessage = this.messages.errors.date.badInput.replace('{pattern}', this.renderPattern());\n }\n }\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n * @returns timeout\n /\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n const locales = initLocales(this.element);\n this.locale = locales.locale;\n this.messages = locales.messages;\n\n // as a native input use the OS locale to define the date pattern\n // we need to get this locale to define the displayed pattern\n this.systemLocale = Intl.DateTimeFormat().resolvedOptions().locale;\n\n // Validate\n this.validateValue(this.value);\n this.validateMinMax(this.min);\n this.validateMinMax(this.max);\n this.watchReadonly(this.readonly);\n this.watchDisabled(this.disabled);\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /\n Render pattern\n * @returns translated html pattern\n /\n private renderPattern = (): string => {\n let patternLocal = getLocaleDatePattern(this.systemLocale);\n for (const key in this.messages.input.date.pattern) {\n patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);\n }\n\n return `<span aria-hidden=\"true\">${patternLocal}</span><span class=\"mg-u-visually-hidden\">${[...patternLocal].join(' ')}</span>`;\n };\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <mg-input\n label={this.label}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonlyValue={localeDate(this.value, this.locale)}\n tooltip={this.tooltip}\n tooltipPosition={this.tooltipPosition}\n helpText={this.formatHelpText(this.helpText)}\n errorMessage={this.errorMessage}\n >\n <input\n type=\"date\"\n class=\"mg-c-input__box\"\n min={this.min}\n max={this.max}\n value={this.value}\n id={this.identifier}\n name={this.name}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onBlur={this.handleBlur}\n onKeyDown={this.handleKeyDown}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n </mg-input>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-input-date.js","mappings":"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","names":["MgInputDate","isValidString","dateRegExp","localeDate","dateToString","getLocaleDatePattern","ClassList","toString"],"sources":["../styles/dist/components/mg-input-date.css?tag=mg-input-date&encapsulation=shadow","src/components/molecules/inputs/mg-input-date/mg-input-date.tsx"],"sourcesContent":[".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left: 0;--mg-c-button-border-radius-bottom-left: 0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right: 0;--mg-c-button-border-radius-bottom-right: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right: var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right: var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}/# sourceMappingURL=mg-input-date.css.map /\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch, Method } from '@stencil/core';\nimport { ClassList, isValidString, localeDate, dateRegExp, dateToString, getLocaleDatePattern, toString } from '@mgdis/stencil-helpers';\nimport { type InputDateError } from './mg-input-date.conf';\nimport { type EventType, classReadonly, type TooltipPosition, classDisabled } from '../mg-input/mg-input.conf';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-input-date',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-date.css',\n shadow: true,\n})\nexport class MgInputDate {\n /**********\n Internal \n *********/\n\n // HTML selector\n private input: HTMLInputElement;\n\n // Locales\n private messages;\n private locale: string;\n private systemLocale: string;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: EventType;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputDateElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n validateValue(newValue: MgInputDate['value']): void {\n // When the input is not fully completed or has been cleared, the value becomes an empty string.\n if (newValue === '') newValue = null;\n\n // check value validity\n if (newValue && !isValidString(newValue)) {\n throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${toString(newValue)}.`);\n } else if ([null, undefined].includes(newValue) \|\| this.isValidPattern(newValue)) {\n this.valueChange.emit(newValue);\n } else {\n console.error(\"<mg-input-date> props 'value' doesn't match pattern: 'yyyy-mm-dd'.\");\n }\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop?: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Define if input is required\n /\n @Prop() required = false;\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputDate['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n\n /\n Define input minimum date\n * format: yyyy-mm-dd\n /\n @Prop() min?: string;\n\n /\n Define input maximum date\n * format: yyyy-mm-dd\n /\n @Prop() max?: string = '9999-12-31';\n @Watch('min')\n @Watch('max')\n validateMinMax(newValue: string): void {\n if (newValue && !this.isValidPattern(newValue)) {\n throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n @Watch('min')\n @Watch('max')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n @Watch('disabled')\n watchDisabled(newValue: MgInputDate['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip?: string;\n\n /\n Define tooltip position\n /\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /\n Add a help text under the input, usually expected data format and example\n * Available string variables:\n * - `{pattern}`: render innerHTML pattern based on system\n * - `{date}`: render innerText date with a pattern base format.\n * - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.\n * ex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`\n /\n @Prop() helpText?: string;\n\n /\n Define input valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define input invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--date']);\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputDateElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputDateElement['valid']>;\n\n /\n Display input error if it exists.\n /\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /\n Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n /\n @Method()\n async setError(valid: MgInputDate['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-date> method \"setError()\" param \"valid\" must be a boolean.');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-date> method \"setError()\" param \"errorMessage\" must be a string.');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /\n Method to validate date pattern string\n * @param value - value to test\n * @returns truthy when value match the pattern\n /\n private isValidPattern = (value: string): boolean => isValidString(value) && dateRegExp.test(value);\n\n /\n Format help text to display\n * @param helpText - help text format\n * @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)\n /\n private formatHelpText = (helpText: string): string => {\n const defaultHelpTextVariable = '{defaultHelpText}';\n let text = isValidString(helpText) ? helpText : this.messages.input.date.helpText;\n if (text.includes(defaultHelpTextVariable)) text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));\n\n return text.replace('{pattern}', this.renderPattern()).replace('{date}', localeDate(dateToString(new Date('2023-12-24')), this.systemLocale));\n };\n\n /\n Method to set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputDate['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined \|\| (this.handlerInProgress === 'blur' && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n\n /\n Handle input event\n /\n private handleInput = (): void => {\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /\n Handle blur event\n /\n private handleBlur = (): void => {\n this.handlerInProgress = 'blur';\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /\n Handle keydown event\n * @param event - input keydown event\n /\n private handleKeyDown = (event: KeyboardEvent): void => {\n // bypass the native \"Delete\" action wich trigger an \"input\" event with \"checkValidty() => false\" with a falsy badInput = true,\n // when we reset the field we need to test a blank value.\n if (['Delete', 'Backspace'].includes(event.key)) {\n event.preventDefault();\n this.value = '';\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n }\n }\n };\n\n /\n Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(this.readonly \|\| this.disabled \|\| (this.input.checkValidity() && (['', undefined].includes(this.value) \|\| this.isValidPattern(this.value))));\n };\n\n /\n get input error code\n * @returns error code\n /\n private getInputError = (): null \| InputDateError => {\n let inputError: InputDateError = null;\n\n // required\n if (this.input.validity.valueMissing) {\n inputError = 'required';\n }\n // pattern\n else if (this.value && !this.isValidPattern(this.value)) {\n inputError = 'badInput';\n }\n // min & max\n else if ((this.input.validity.rangeUnderflow \|\| this.input.validity.rangeOverflow) && this.min?.length > 0 && this.max !== '9999-12-31') {\n inputError = 'minMax';\n }\n // min\n else if (this.input.validity.rangeUnderflow) {\n inputError = 'min';\n }\n // max\n else if (this.input.validity.rangeOverflow) {\n inputError = 'max';\n }\n\n return inputError;\n };\n\n /\n Check input errors\n * @param errorMessage - errorMessage override\n /\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n if (!this.valid) {\n const inputError = this.getInputError();\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n // required\n else if (inputError === 'required') {\n this.errorMessage = this.messages.errors[inputError];\n }\n // min, max & minMax\n else if (['min', 'max', 'minMax'].includes(inputError)) {\n this.errorMessage = this.messages.errors.date[inputError]\n .replace('{min}', localeDate(this.min, this.systemLocale))\n .replace('{max}', localeDate(this.max, this.systemLocale));\n }\n // wrong date format\n // element.validity.badInput is default error message\n else {\n this.errorMessage = this.messages.errors.date.badInput.replace('{pattern}', this.renderPattern());\n }\n }\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n * @returns timeout\n /\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n const locales = initLocales(this.element);\n this.locale = locales.locale;\n this.messages = locales.messages;\n\n // as a native input use the OS locale to define the date pattern\n // we need to get this locale to define the displayed pattern\n this.systemLocale = Intl.DateTimeFormat().resolvedOptions().locale;\n\n // Validate\n this.validateValue(this.value);\n this.validateMinMax(this.min);\n this.validateMinMax(this.max);\n this.watchReadonly(this.readonly);\n this.watchDisabled(this.disabled);\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /\n Render pattern\n * @returns translated html pattern\n /\n private renderPattern = (): string => {\n let patternLocal = getLocaleDatePattern(this.systemLocale);\n for (const key in this.messages.input.date.pattern) {\n patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);\n }\n\n return `<span aria-hidden=\"true\">${patternLocal}</span><span class=\"mg-u-visually-hidden\">${[...patternLocal].join(' ')}</span>`;\n };\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <mg-input\n label={this.label}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n tooltip={this.tooltip}\n tooltipPosition={this.readonly && ['', undefined].includes(this.value) ? 'label' : this.tooltipPosition}\n helpText={this.formatHelpText(this.helpText)}\n errorMessage={this.errorMessage}\n >\n {this.readonly ? (\n this.value && <b class=\"mg-c-input__readonly-value\">{localeDate(this.value, this.locale)}</b>\n ) : (\n <input\n type=\"date\"\n class=\"mg-c-input__box\"\n min={this.min}\n max={this.max}\n value={this.value}\n id={this.identifier}\n name={this.name}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onBlur={this.handleBlur}\n onKeyDown={this.handleKeyDown}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n )}\n </mg-input>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-input-numeric.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { i as it, a as at, I as Ie, Z as Ze } from './index.es.js';
-import { d as defineCustomElement$5, H as Handler, b as classReadonly, e as classDisabled, w as widths } from './mg-input2.js';
+import { c as ct, f as ft, I as Ie, Z as Ze, Q as Qe } from './index.es.js';
+import { d as defineCustomElement$5, b as classReadonly, e as classDisabled, w as widths } from './mg-input2.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$6 } from './mg-icon2.js';
 import { d as defineCustomElement$4 } from './mg-input-title2.js';
@@ -10,17 +10,10 @@ import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
 /**
  * List of all possibles types
  */
-const types = ['decimal', 'integer', 'currency'];
+const types = ['decimal', 'integer'];
 const formats = ['none', 'number', 'currency'];
-var InputError;
-(function (InputError) {
-    InputError["MIN"] = "min";
-    InputError["MAX"] = "max";
-    InputError["MINMAX"] = "minMax";
-    InputError["REQUIRED"] = "required";
-})(InputError || (InputError = {}));
-const mgInputNumericCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input-icon{color:hsl(var(--color-dark))}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:.5rem}.mg-c-input.mg-c-input--readonly>*:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input .mg-c-input__box{text-align:var(--mg-inputs-text-align, right)}";
+const mgInputNumericCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);word-break:break-word}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input .mg-c-input__box{width:auto;text-align:var(--mg-c-input-text-align, right)}";
 const MgInputNumericStyle0 = mgInputNumericCss;
 const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric extends HTMLElement {
@@ -56,7 +49,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
             if (this.value === '-')
                 this.value = '';
             // Display Error
-            this.handlerInProgress = Handler.BLUR;
+            this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
                 // reset guard
                 this.handlerInProgress = undefined;
@@ -81,7 +74,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
                 if (errorMessage !== undefined) {
                     this.errorMessage = errorMessage;
                 }
-                else if (inputError === InputError.REQUIRED) {
+                else if (inputError === 'required') {
                     this.errorMessage = this.messages.errors[inputError];
                 }
                 else {
@@ -98,20 +91,20 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
             const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
             // required
             if (!this.input.checkValidity() && this.input.validity.valueMissing) {
-                inputError = InputError.REQUIRED;
+                inputError = 'required';
             }
             // Min & Max
             else if (hasNotEmptyValues([this.min, this.numericValue]) && this.numericValue < this.min && this.max === undefined) {
                 // Only a min value is set
-                inputError = InputError.MIN;
+                inputError = 'min';
             }
             else if (hasNotEmptyValues([this.max, this.numericValue]) && this.numericValue > this.max && this.min === undefined) {
                 // Only a max value is set
-                inputError = InputError.MAX;
+                inputError = 'max';
             }
             else if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min || this.numericValue > this.max)) {
                 // both min and max values are set
-                inputError = InputError.MINMAX;
+                inputError = 'minMax';
             }
             return inputError;
         };
@@ -123,9 +116,9 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
         this.formatValue = (value) => {
             switch (this.format) {
                 case 'number':
-                    return at(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
+                    return ft(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'currency':
-                    return it(value, this.locale, this.currency);
+                    return ct(value, this.locale, this.currency);
                 case 'none':
                     return value.toString();
             }
@@ -136,9 +129,22 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
         this.validateAppendSlot = () => {
             const slotAppendInput = this.element.querySelector('[slot="append-input"]');
             if (slotAppendInput !== null) {
-                this.classCollection.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-c-input--is-input-group-append' : 'mg-c-input--is-append-input-slot-content');
+                if (slotAppendInput.nodeName === 'MG-BUTTON') {
+                    this.classCollection.add('mg-c-input--is-input-group-append');
+                }
+                else {
+                    this.classCollection.add('mg-c-input--is-append-input-slot-content');
+                    this.slotContent = slotAppendInput.textContent;
+                }
             }
         };
+        /**
+         * Renders the readonly content of the input component.
+         * @returns The readonly content element.
+         */
+        this.renderReadonly = () => {
+            return this.slotContent !== undefined ? (h("span", { class: "mg-c-input__readonly-value" }, h("b", null, this.readonlyValue), this.slotContent)) : (h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue));
+        };
         this.value = undefined;
         this.identifier = undefined;
         this.name = this.identifier;
@@ -157,7 +163,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
         this.helpText = undefined;
         this.type = 'decimal';
         this.format = 'number';
-        this.currency = 'USD';
+        this.currency = 'EUR';
         this.integerLength = 13;
         this.decimalLength = 2;
         this.valid = undefined;
@@ -212,30 +218,27 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
             this.classCollection.delete(`mg-c-input--width-${width}`);
         });
         // apply new width
-        if (newValue)
+        if (newValue !== undefined)
             this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
     }
     validateType(newValue) {
         if (!types.includes(newValue)) {
-            throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}`);
-        }
-        else if (newValue === 'currency') {
-            this.format = 'currency';
+            throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${Ze(newValue)}.`);
         }
     }
     watchFormat(newValue) {
         if (!formats.includes(newValue)) {
-            throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}`);
+            throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${Ze(newValue)}.`);
         }
     }
     validateIntegerLength(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number.`);
+            throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${Ze(newValue)}.`);
         }
     }
     validateDecimalLength(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead.`);
+            throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${Ze(newValue)}.`);
         }
     }
     /**
@@ -256,10 +259,10 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
      */
     async setError(valid, errorMessage) {
         if (typeof valid !== 'boolean') {
-            throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
+            throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!Ze(errorMessage)) {
-            throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
+        else if (!Qe(errorMessage)) {
+            throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string.');
         }
         else {
             this.setValidity(valid);
@@ -276,7 +279,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
         this.valid = newValue;
         this.invalid = !this.valid;
         // We need to send valid event even if it is the same value
-        if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue))
+        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
             this.inputValid.emit(this.valid);
     }
     /**
@@ -353,10 +356,15 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '52a1e1cc7a6f16290a62c258e099cd8c0cc30567', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("input", { key: 'a36bbe191ff0fcacbf7bd459ad7d743a623eba44', type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
-                if (el !== null)
-                    this.input = el;
-            } }), h("slot", { key: '6b6ae5ae8aa3de2c1d0360c2ddef962a7b3e6bc0', name: "append-input" })));
+        return (h("mg-input", { key: '9b48fe7bf2a16f084ebddc050d90938c5d4e4b23', 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 === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
+            ? this.readonlyValue && this.renderReadonly()
+            : [
+                h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+                        if (el !== null)
+                            this.input = el;
+                    } }),
+                h("slot", { key: "slot", name: "append-input" }),
+            ]));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -391,7 +399,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
         "tooltipPosition": [1, "tooltip-position"],
         "helpText": [1, "help-text"],
         "type": [1],
-        "format": [1025],
+        "format": [1],
         "currency": [1],
         "integerLength": [2, "integer-length"],
         "decimalLength": [2, "decimal-length"],