npm - @mgdis/mg-components - Versions diffs - 5.18.0 → 5.19.1 - Mend

@mgdis/mg-components 5.18.0 → 5.19.1

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 (358) hide show

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { M as MgInput } from './MgInput.js';
-import { C as ClassList } from './components.utils.js';
+import { C as ClassList, i as isValidString } from './components.utils.js';
 import { l as localeDate, d as dateRegExp, i as initLocales } from './index2.js';
 import { d as defineCustomElement$5 } from './mg-icon2.js';
 import { d as defineCustomElement$4 } from './mg-input-title2.js';
@@ -15,7 +15,7 @@ var InputError;
   InputError["REQUIRED"] = "required";
 })(InputError || (InputError = {}));
-const mgInputDateCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);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-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-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-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;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));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-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-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}";
+const mgInputDateCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);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__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;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-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.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--label-on-top .mg-c-input__box{width:auto;max-width:100%}.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--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.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]){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 MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends HTMLElement {
   constructor() {
@@ -117,7 +117,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
     this.invalid = undefined;
     this.min = undefined;
     this.max = undefined;
-    this.classCollection = new ClassList(['mg-input--date']);
+    this.classCollection = new ClassList(['mg-c-input--date']);
     this.errorMessage = undefined;
   }
   validateValue(newValue) {
@@ -166,7 +166,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
     if (typeof valid !== 'boolean') {
       throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
     }
-    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+    else if (!isValidString(errorMessage)) {
       throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
     }
     else {
@@ -213,7 +213,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
    * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, 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, ref: (el) => {
         if (el !== null)
           this.input = el;
       } })));

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"],"sources":["src/components/molecules/inputs/mg-input-date/mg-input-date.conf.ts","src/components/molecules/inputs/mg-input-date/mg-input-date.scss?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}\n","@use '../styles/mg-input.scss';\n@use '../styles/mg-input-box.scss';\n@use '../../../../styles/a11y.scss';\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { InputError } from './mg-input-date.conf';\nimport { ClassList } from '../../../../utils/components.utils';\nimport { localeDate, dateRegExp } from '../../../../utils/locale.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-input-date',\n styleUrl: './mg-input-date.scss',\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\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\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 if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' \|\| !dateRegExp.test(newValue))) {\n throw new Error(\"<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd\");\n } else {\n this.valueChange.emit(newValue);\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\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\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 /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Add a help text under the input, usually expected data format and example\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 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;\n @Watch('min')\n @Watch('max')\n validateMinMax(newValue: string): void {\n if (newValue?.length === 0 \|\| (newValue?.length > 0 && !(typeof newValue === 'string' && dateRegExp.test(newValue)))) {\n throw new Error(\"<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd\");\n }\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-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<string>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\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 (typeof errorMessage !== 'string' \|\| errorMessage.trim() === '') {\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 set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputDate['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 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.displayError();\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 ? this.input.checkValidity() : true));\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 // min & max\n else if ((this.input.validity.rangeUnderflow \|\| this.input.validity.rangeOverflow) && this.min?.length > 0 && this.max?.length > 0) {\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].replace('{min}', localeDate(this.min, this.locale)).replace('{max}', localeDate(this.max, this.locale));\n }\n // wrong date format\n // element.validity.badInput is default error message\n else {\n this.errorMessage = this.messages.errors.date.badInput.replace('{min}', this.min?.length > 0 ? localeDate(this.min, this.locale) : localeDate('1900-01-01', this.locale));\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 // Validate\n this.validateValue(this.value);\n this.validateMinMax(this.min);\n this.validateMinMax(this.max);\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\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={localeDate(this.value, this.locale)}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <input\n type=\"date\"\n class=\"mg-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 onInput={this.handleInput}\n onBlur={this.handleBlur}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n </MgInput>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-input-date.js","mappings":"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","names":["MgInputDate"],"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}\n",":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);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__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;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-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.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--label-on-top .mg-c-input__box{width:auto;max-width:100%}.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--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.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]){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 { MgInput } from '../MgInput';\nimport { InputError } from './mg-input-date.conf';\nimport { ClassList, isValidString } from '../../../../utils/components.utils';\nimport { localeDate, dateRegExp } from '../../../../utils/locale.utils';\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\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\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 if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' \|\| !dateRegExp.test(newValue))) {\n throw new Error(\"<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd\");\n } else {\n this.valueChange.emit(newValue);\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\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\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 /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Add a help text under the input, usually expected data format and example\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 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;\n @Watch('min')\n @Watch('max')\n validateMinMax(newValue: string): void {\n if (newValue?.length === 0 \|\| (newValue?.length > 0 && !(typeof newValue === 'string' && dateRegExp.test(newValue)))) {\n throw new Error(\"<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd\");\n }\n }\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<string>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\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 set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputDate['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 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.displayError();\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 ? this.input.checkValidity() : true));\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 // min & max\n else if ((this.input.validity.rangeUnderflow \|\| this.input.validity.rangeOverflow) && this.min?.length > 0 && this.max?.length > 0) {\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].replace('{min}', localeDate(this.min, this.locale)).replace('{max}', localeDate(this.max, this.locale));\n }\n // wrong date format\n // element.validity.badInput is default error message\n else {\n this.errorMessage = this.messages.errors.date.badInput.replace('{min}', this.min?.length > 0 ? localeDate(this.min, this.locale) : localeDate('1900-01-01', this.locale));\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 // Validate\n this.validateValue(this.value);\n this.validateMinMax(this.min);\n this.validateMinMax(this.max);\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\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={localeDate(this.value, this.locale)}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\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 ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n </MgInput>\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 { M as MgInput } from './MgInput.js';
-import { C as ClassList } from './components.utils.js';
+import { C as ClassList, i as isValidString } from './components.utils.js';
 import { a as localeCurrency, b as localeNumber, i as initLocales } from './index2.js';
 import { d as defineCustomElement$5 } from './mg-icon2.js';
 import { d as defineCustomElement$4 } from './mg-input-title2.js';
@@ -19,7 +19,7 @@ var InputError;
   InputError["REQUIRED"] = "required";
 })(InputError || (InputError = {}));
-const mgInputNumericCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);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-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-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-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;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));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-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-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-input .mg-input__box{text-align:var(--mg-inputs-text-align, right)}";
+const mgInputNumericCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);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__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;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-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.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--label-on-top .mg-c-input__box{width:auto;max-width:100%}.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--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.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]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.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 MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric extends HTMLElement {
   constructor() {
@@ -123,7 +123,7 @@ 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-input--is-input-group-append' : 'mg-input--is-append-input-slot-content');
+        this.classCollection.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-c-input--is-input-group-append' : 'mg-c-input--is-append-input-slot-content');
       }
     };
     this.value = undefined;
@@ -147,7 +147,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
     this.decimalLength = 2;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classCollection = new ClassList(['mg-input--numeric']);
+    this.classCollection = new ClassList(['mg-c-input--numeric']);
     this.errorMessage = undefined;
     this.hasFocus = false;
   }
@@ -155,7 +155,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
     // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type
     if (typeof newValue === 'string') {
       // Split number and decimal
-      const [integer, decimal = ''] = newValue.replace('-', '').split(/[\.,]/);
+      const [integer, decimal = ''] = newValue.replace('-', '').split(/[.,]/);
       // Regex
       const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+(?:[.,]\d*)?$/;
       // Filter input
@@ -214,7 +214,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
     if (typeof valid !== 'boolean') {
       throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
     }
-    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+    else if (!isValidString(errorMessage)) {
       throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
     }
     else {
@@ -242,14 +242,15 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
    * @returns Returns true if the value is valid, otherwise false.
    */
   isValidValue(value, regex, integer, decimal) {
-    return ['', '-'].includes(value) || (value.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength));
+    return (['', '-'].includes(value) || (regex.exec(value) !== null && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength)));
   }
   /**
    * Handles invalid input values and returns a corrected value.
    * @returns The corrected value.
    */
   handleInvalidValue() {
-    return this.storedValue !== undefined ? this.storedValue : null;
+    var _a;
+    return (_a = this.storedValue) !== null && _a !== void 0 ? _a : null;
   }
   /**
    * Updates the component values based on the validated input value.
@@ -302,7 +303,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
    * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-c-input__box", 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", { name: "append-input" })));

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

	@@ -1 +1 @@
1	- {"file":"mg-input-numeric.js","mappings":"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","names":["MgInputNumeric"],"sources":["src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.ts","src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.scss?tag=mg-input-numeric&encapsulation=shadow","src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.tsx"],"sourcesContent":["/*\n List of all possibles types\n /\nexport const types: string[] = ['decimal', 'integer', 'currency'];\n\nexport enum InputError {\n MIN = 'min',\n MAX = 'max',\n MINMAX = 'minMax',\n REQUIRED = 'required',\n}\n","@use '../styles/mg-input.scss';\n@use '../styles/mg-input-box.scss';\n@use '../styles/mg-input-width.scss';\n@use '../../../../styles/a11y.scss';\n\n.mg-input {\n .mg-input__box {\n text-align: var(--mg-inputs-text-align, right);\n }\n}\n","import { Component, Element, Event, h, Prop, EventEmitter, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Width } from '../MgInput.conf';\nimport { types, InputError } from './mg-input-numeric.conf';\nimport { ClassList } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales/';\nimport { localeCurrency, localeNumber } from '../../../../utils/locale.utils';\n\n@Component({\n tag: 'mg-input-numeric',\n styleUrl: 'mg-input-numeric.scss',\n shadow: true,\n})\nexport class MgInputNumeric {\n /**********\n Internal \n *********/\n\n // Manage different values\n private storedValue: string;\n private numericValue: number;\n private readonlyValue: string;\n\n // HTML selector\n private input: HTMLInputElement;\n\n // Locales\n private locale: string;\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputNumericElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n validateValue(newValue: MgInputNumeric['value']): void {\n // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type\n if (typeof newValue === 'string') {\n // Split number and decimal\n const [integer, decimal = ''] = newValue.replace('-', '').split(/[\\.,]/);\n // Regex\n const regex = this.type === 'integer' ? /^-?\\d+$/ : /^-?\\d+(?:[.,]\\d)?$/;\n // Filter input\n if (this.isValidValue(newValue, regex, integer, decimal)) {\n this.storedValue = newValue;\n } else {\n newValue = this.handleInvalidValue();\n }\n // Set value and input value\n this.updateValues(newValue);\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 Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n /\n @Prop() placeholder: string;\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\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\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 /\n Define input width\n /\n @Prop() mgWidth: Width;\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText: string;\n\n /\n Define numeric type\n /\n @Prop() type: string = types[0];\n @Watch('type')\n validateType(newValue: MgInputNumeric['type']): void {\n if (!types.includes(newValue)) {\n throw new Error(`<mg-input-numeric> prop \"type\" must be one of: ${types.join(', ')}`);\n }\n }\n\n /\n Define currency\n /\n @Prop() currency = 'USD';\n\n /\n Maximum value\n /\n @Prop() max: number;\n\n /\n Minimum value\n /\n @Prop() min: number;\n\n /\n Override integer length\n * integer is the number before the decimal point\n /\n @Prop() integerLength = 13;\n @Watch('integerLength')\n validateIntegerLength(newValue: MgInputNumeric['integerLength']): void {\n if (newValue < 1) {\n throw new Error(`<mg-input-numeric> prop \"integer-length\" must be a positive number.`);\n }\n }\n\n /\n Override decimal length\n * decimal is the number after the decimal point\n /\n @Prop() decimalLength = 2;\n @Watch('decimalLength')\n validateDecimalLength(newValue: MgInputNumeric['decimalLength']): void {\n if (newValue < 1) {\n throw new Error(`<mg-input-numeric> prop \"decimal-length\" must be a positive number, consider using prop \"type\" to \"integer\" instead.`);\n }\n }\n\n /\n Define input pattern to validate\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define input pattern error message\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-input--numeric']);\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Define if input has focus\n /\n @State() hasFocus = false;\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<number>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\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: MgInputNumeric['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-numeric> method \"setError()\" param \"valid\" must be a boolean');\n } else if (typeof errorMessage !== 'string' \|\| errorMessage.trim() === '') {\n throw new Error('<mg-input-numeric> 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 set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputNumeric['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 this.inputValid.emit(this.valid);\n }\n\n /\n Checks if the given value is valid according to the defined rules.\n * @param value - The input value to validate.\n * @param regex - The regular expression for validation.\n * @param integer - The integer part of the value.\n * @param decimal - The decimal part of the value.\n * @returns Returns true if the value is valid, otherwise false.\n /\n private isValidValue(value: string, regex: RegExp, integer: string, decimal: string): boolean {\n return ['', '-'].includes(value) \|\| (value.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength));\n }\n\n /\n Handles invalid input values and returns a corrected value.\n * @returns The corrected value.\n /\n private handleInvalidValue(): string \| null {\n return this.storedValue !== undefined ? this.storedValue : null;\n }\n\n /\n Updates the component values based on the validated input value.\n * @param newValue - The validated input value.\n /\n private updateValues(newValue: string \| null): void {\n this.value = newValue;\n if (this.input !== undefined) this.input.value = this.value;\n\n this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;\n this.valueChange.emit(this.numericValue);\n\n this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';\n }\n\n /\n Displayed value in input\n * Change on focus/blur\n * @returns display value\n /\n private displayValue(): MgInputNumeric['value'] \| MgInputNumeric['readonlyValue'] {\n return this.hasFocus ? this.value : this.readonlyValue;\n }\n\n /\n Handle input event\n /\n private handleInput = (): void => {\n // Check validity\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /\n Handle focus event\n /\n private handleFocus = (): void => {\n this.hasFocus = true;\n };\n\n /\n Handle blur event\n /\n private handleBlur = (): void => {\n if (this.value === '-') this.value = '';\n // Display Error\n this.displayError();\n this.hasFocus = false;\n };\n\n /\n Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(this.readonly \|\| this.disabled \|\| this.getInputError() === null);\n };\n\n /\n Set input error message\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 } else if (inputError === InputError.REQUIRED) {\n this.errorMessage = this.messages.errors[inputError];\n } else {\n this.errorMessage = this.messages.errors.numeric[inputError].replace('{min}', `${this.formatValue(this.min)}`).replace('{max}', `${this.formatValue(this.max)}`);\n }\n }\n };\n\n /\n Get input error code\n * @returns error code\n /\n private getInputError = (): null \| InputError => {\n let inputError = null;\n const hasNotEmptyValues = (toControl: unknown[]) => !toControl.some(value => [null, undefined].includes(value));\n\n if (!hasNotEmptyValues([this.input])) return inputError;\n\n // required\n if (!this.input.checkValidity() && this.input.validity.valueMissing) {\n inputError = InputError.REQUIRED;\n }\n // Min & Max\n else if (hasNotEmptyValues([this.min, this.numericValue]) && this.numericValue < this.min && this.max === undefined) {\n // Only a min value is set\n inputError = InputError.MIN;\n } else if (hasNotEmptyValues([this.max, this.numericValue]) && this.numericValue > this.max && this.min === undefined) {\n // Only a max value is set\n inputError = InputError.MAX;\n } else if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min \|\| this.numericValue > this.max)) {\n // both min and max values are set\n inputError = InputError.MINMAX;\n }\n return inputError;\n };\n\n /\n Format value based on type\n * @param value - value to format\n * @returns formated local value\n /\n private formatValue = (value: number): string => (this.type === 'currency' ? localeCurrency(value, this.locale, this.currency) : localeNumber(value, this.locale));\n\n /\n Validate append slot\n /\n private validateAppendSlot = (): void => {\n const slotAppendInput: HTMLSlotElement = this.element.querySelector('[slot=\"append-input\"]');\n if (slotAppendInput !== null) {\n this.classCollection.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-input--is-input-group-append' : 'mg-input--is-append-input-slot-content');\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 // Validate component config\n this.validateType(this.type);\n this.validateIntegerLength(this.integerLength);\n this.validateDecimalLength(this.decimalLength);\n // validate value\n this.validateValue(this.value);\n this.validateAppendSlot();\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\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={this.readonlyValue}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <input\n type=\"text\"\n class=\"mg-input__box\"\n value={this.displayValue()}\n id={this.identifier}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n <slot name=\"append-input\"></slot>\n </MgInput>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-input-numeric.js","mappings":"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","names":["MgInputNumeric"],"sources":["src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.ts","../styles/dist/components/mg-input-numeric.css?tag=mg-input-numeric&encapsulation=shadow","src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.tsx"],"sourcesContent":["/*\n List of all possibles types\n /\nexport const types: string[] = ['decimal', 'integer', 'currency'];\n\nexport enum InputError {\n MIN = 'min',\n MAX = 'max',\n MINMAX = 'minMax',\n REQUIRED = 'required',\n}\n",":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);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__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;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-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.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--label-on-top .mg-c-input__box{width:auto;max-width:100%}.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--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.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]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.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)}/# sourceMappingURL=mg-input-numeric.css.map /\n","import { Component, Element, Event, h, Prop, EventEmitter, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Width } from '../MgInput.conf';\nimport { types, InputError } from './mg-input-numeric.conf';\nimport { ClassList, isValidString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales/';\nimport { localeCurrency, localeNumber } from '../../../../utils/locale.utils';\n\n@Component({\n tag: 'mg-input-numeric',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-numeric.css',\n shadow: true,\n})\nexport class MgInputNumeric {\n /**********\n Internal \n *********/\n\n // Manage different values\n private storedValue: string;\n private numericValue: number;\n private readonlyValue: string;\n\n // HTML selector\n private input: HTMLInputElement;\n\n // Locales\n private locale: string;\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputNumericElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n validateValue(newValue: MgInputNumeric['value']): void {\n // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type\n if (typeof newValue === 'string') {\n // Split number and decimal\n const [integer, decimal = ''] = newValue.replace('-', '').split(/[.,]/);\n // Regex\n const regex = this.type === 'integer' ? /^-?\\d+$/ : /^-?\\d+(?:[.,]\\d)?$/;\n // Filter input\n if (this.isValidValue(newValue, regex, integer, decimal)) {\n this.storedValue = newValue;\n } else {\n newValue = this.handleInvalidValue();\n }\n // Set value and input value\n this.updateValues(newValue);\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 Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n /\n @Prop() placeholder: string;\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\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\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 /\n Define input width\n /\n @Prop() mgWidth: Width;\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText: string;\n\n /\n Define numeric type\n /\n @Prop() type: string = types[0];\n @Watch('type')\n validateType(newValue: MgInputNumeric['type']): void {\n if (!types.includes(newValue)) {\n throw new Error(`<mg-input-numeric> prop \"type\" must be one of: ${types.join(', ')}`);\n }\n }\n\n /\n Define currency\n /\n @Prop() currency = 'USD';\n\n /\n Maximum value\n /\n @Prop() max: number;\n\n /\n Minimum value\n /\n @Prop() min: number;\n\n /\n Override integer length\n * integer is the number before the decimal point\n /\n @Prop() integerLength = 13;\n @Watch('integerLength')\n validateIntegerLength(newValue: MgInputNumeric['integerLength']): void {\n if (newValue < 1) {\n throw new Error(`<mg-input-numeric> prop \"integer-length\" must be a positive number.`);\n }\n }\n\n /\n Override decimal length\n * decimal is the number after the decimal point\n /\n @Prop() decimalLength = 2;\n @Watch('decimalLength')\n validateDecimalLength(newValue: MgInputNumeric['decimalLength']): void {\n if (newValue < 1) {\n throw new Error(`<mg-input-numeric> prop \"decimal-length\" must be a positive number, consider using prop \"type\" to \"integer\" instead.`);\n }\n }\n\n /\n Define input pattern to validate\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define input pattern error message\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--numeric']);\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Define if input has focus\n /\n @State() hasFocus = false;\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<number>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\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: MgInputNumeric['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-numeric> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-numeric> 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 set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputNumeric['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 this.inputValid.emit(this.valid);\n }\n\n /\n Checks if the given value is valid according to the defined rules.\n * @param value - The input value to validate.\n * @param regex - The regular expression for validation.\n * @param integer - The integer part of the value.\n * @param decimal - The decimal part of the value.\n * @returns Returns true if the value is valid, otherwise false.\n /\n private isValidValue(value: string, regex: RegExp, integer: string, decimal: string): boolean {\n return (\n ['', '-'].includes(value) \|\| (regex.exec(value) !== null && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))\n );\n }\n\n /\n Handles invalid input values and returns a corrected value.\n * @returns The corrected value.\n /\n private handleInvalidValue(): string \| null {\n return this.storedValue ?? null;\n }\n\n /\n Updates the component values based on the validated input value.\n * @param newValue - The validated input value.\n /\n private updateValues(newValue: string \| null): void {\n this.value = newValue;\n if (this.input !== undefined) this.input.value = this.value;\n\n this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;\n this.valueChange.emit(this.numericValue);\n\n this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';\n }\n\n /\n Displayed value in input\n * Change on focus/blur\n * @returns display value\n /\n private displayValue(): MgInputNumeric['value'] \| MgInputNumeric['readonlyValue'] {\n return this.hasFocus ? this.value : this.readonlyValue;\n }\n\n /\n Handle input event\n /\n private handleInput = (): void => {\n // Check validity\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /\n Handle focus event\n /\n private handleFocus = (): void => {\n this.hasFocus = true;\n };\n\n /\n Handle blur event\n /\n private handleBlur = (): void => {\n if (this.value === '-') this.value = '';\n // Display Error\n this.displayError();\n this.hasFocus = false;\n };\n\n /\n Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(this.readonly \|\| this.disabled \|\| this.getInputError() === null);\n };\n\n /\n Set input error message\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 } else if (inputError === InputError.REQUIRED) {\n this.errorMessage = this.messages.errors[inputError];\n } else {\n this.errorMessage = this.messages.errors.numeric[inputError].replace('{min}', `${this.formatValue(this.min)}`).replace('{max}', `${this.formatValue(this.max)}`);\n }\n }\n };\n\n /\n Get input error code\n * @returns error code\n /\n private getInputError = (): null \| InputError => {\n let inputError = null;\n const hasNotEmptyValues = (toControl: unknown[]) => !toControl.some(value => [null, undefined].includes(value));\n\n if (!hasNotEmptyValues([this.input])) return inputError;\n\n // required\n if (!this.input.checkValidity() && this.input.validity.valueMissing) {\n inputError = InputError.REQUIRED;\n }\n // Min & Max\n else if (hasNotEmptyValues([this.min, this.numericValue]) && this.numericValue < this.min && this.max === undefined) {\n // Only a min value is set\n inputError = InputError.MIN;\n } else if (hasNotEmptyValues([this.max, this.numericValue]) && this.numericValue > this.max && this.min === undefined) {\n // Only a max value is set\n inputError = InputError.MAX;\n } else if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min \|\| this.numericValue > this.max)) {\n // both min and max values are set\n inputError = InputError.MINMAX;\n }\n return inputError;\n };\n\n /\n Format value based on type\n * @param value - value to format\n * @returns formated local value\n /\n private formatValue = (value: number): string => (this.type === 'currency' ? localeCurrency(value, this.locale, this.currency) : localeNumber(value, this.locale));\n\n /\n Validate append slot\n /\n private validateAppendSlot = (): void => {\n const slotAppendInput: HTMLSlotElement = this.element.querySelector('[slot=\"append-input\"]');\n if (slotAppendInput !== null) {\n this.classCollection.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-c-input--is-input-group-append' : 'mg-c-input--is-append-input-slot-content');\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 // Validate component config\n this.validateType(this.type);\n this.validateIntegerLength(this.integerLength);\n this.validateDecimalLength(this.decimalLength);\n // validate value\n this.validateValue(this.value);\n this.validateAppendSlot();\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\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={this.readonlyValue}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <input\n type=\"text\"\n class=\"mg-c-input__box\"\n value={this.displayValue()}\n id={this.identifier}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n <slot name=\"append-input\"></slot>\n </MgInput>\n );\n }\n}\n"],"version":3}

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

@@ -1,13 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { M as MgInput } from './MgInput.js';
-import { C as ClassList } from './components.utils.js';
+import { C as ClassList, i as isValidString } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$5 } 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';
-const mgInputPasswordCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);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-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-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-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;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));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-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-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}";
+const mgInputPasswordCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);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__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;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-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.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--label-on-top .mg-c-input__box{width:auto;max-width:100%}.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--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.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]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.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 MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class MgInputPassword extends HTMLElement {
   constructor() {
@@ -73,7 +73,7 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class MgInputPassword
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classCollection = new ClassList(['mg-input--password']);
+    this.classCollection = new ClassList(['mg-c-input--password']);
     this.errorMessage = undefined;
   }
   handleValue(newValue) {
@@ -109,7 +109,7 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class MgInputPassword
     if (typeof valid !== 'boolean') {
       throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
     }
-    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+    else if (!isValidString(errorMessage)) {
       throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
     }
     else {
@@ -150,7 +150,7 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class MgInputPassword
    * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "password", class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "password", class: "mg-c-input__box", value: this.value, 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, onBlur: this.handleBlur, ref: (el) => {
         if (el !== null)
           this.input = el;
       } })));

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

	@@ -1 +1 @@
1	- {"file":"mg-input-password.js","mappings":"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","names":["MgInputPassword"],"sources":["src/components/molecules/inputs/mg-input-password/mg-input-password.scss?tag=mg-input-password&encapsulation=shadow","src/components/molecules/inputs/mg-input-password/mg-input-password.tsx"],"sourcesContent":["@use '../styles/mg-input.scss';\n@use '../styles/mg-input-box.scss';\n@use '../styles/mg-input-width.scss';\n@use '../../../../styles/a11y.scss';\n","import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Width } from '../MgInput.conf';\nimport { ClassList } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-input-password',\n styleUrl: 'mg-input-password.scss',\n shadow: true,\n})\nexport class MgInputPassword {\n /***********\n Internal \n *********/\n\n // HTML selector\n private input: HTMLInputElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputPasswordElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n handleValue(newValue: string): void {\n this.valueChange.emit(newValue);\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 Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n /\n @Prop() placeholder: string;\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\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\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 /\n Define input width\n /\n @Prop() mgWidth: Width = 'full';\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Add a help text under the input, usually expected data format and example\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-input--password']);\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<string>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\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: MgInputPassword['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-password> method \"setError()\" param \"valid\" must be a boolean');\n } else if (typeof errorMessage !== 'string' \|\| errorMessage.trim() === '') {\n throw new Error('<mg-input-password> 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 set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputPassword['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 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.displayError();\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 ? this.input.checkValidity() : true));\n };\n\n /\n Set input error message\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 if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n // required\n else if (this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\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 this.messages = initLocales(this.element).messages;\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\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={this.value !== undefined ? '•'.repeat(this.value.length) : undefined}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <input\n type=\"password\"\n class=\"mg-input__box\"\n value={this.value}\n id={this.identifier}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n onInput={this.handleInput}\n onBlur={this.handleBlur}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n </MgInput>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-input-password.js","mappings":"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","names":["MgInputPassword"],"sources":["../styles/dist/components/mg-input-password.css?tag=mg-input-password&encapsulation=shadow","src/components/molecules/inputs/mg-input-password/mg-input-password.tsx"],"sourcesContent":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);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__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;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-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.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--label-on-top .mg-c-input__box{width:auto;max-width:100%}.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--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.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]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.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-password.css.map /\n","import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Width } from '../MgInput.conf';\nimport { ClassList, isValidString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-input-password',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-password.css',\n shadow: true,\n})\nexport class MgInputPassword {\n /***********\n Internal \n *********/\n\n // HTML selector\n private input: HTMLInputElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputPasswordElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n handleValue(newValue: string): void {\n this.valueChange.emit(newValue);\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 Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n /\n @Prop() placeholder: string;\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\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\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 /\n Define input width\n /\n @Prop() mgWidth: Width = 'full';\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Add a help text under the input, usually expected data format and example\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--password']);\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<string>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\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: MgInputPassword['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-password> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-password> 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 set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputPassword['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 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.displayError();\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 ? this.input.checkValidity() : true));\n };\n\n /\n Set input error message\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 if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n // required\n else if (this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\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 this.messages = initLocales(this.element).messages;\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\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={this.value !== undefined ? '•'.repeat(this.value.length) : undefined}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <input\n type=\"password\"\n class=\"mg-c-input__box\"\n value={this.value}\n id={this.identifier}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onBlur={this.handleBlur}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.input = el;\n }}\n />\n </MgInput>\n );\n }\n}\n"],"version":3}