npm - @mgdis/mg-components - Versions diffs - 5.15.0 → 5.17.0 - Mend

@mgdis/mg-components 5.15.0 → 5.17.0

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

Files changed (479) hide show

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

@@ -2,13 +2,14 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { M as MgInput } from './MgInput.js';
 import { C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$4 } from './mg-icon2.js';
-import { d as defineCustomElement$3 } from './mg-input-title2.js';
-import { d as defineCustomElement$2 } from './mg-tooltip2.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 MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class MgInputPassword extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -115,7 +116,7 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
    * @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-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) => {
         if (el !== null)
           this.input = el;
       } })));
@@ -147,12 +148,17 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "classCollection": [32],
     "errorMessage": [32],
     "displayError": [64]
+  }, undefined, {
+    "value": ["handleValue"],
+    "required": ["handleValidityChange"],
+    "readonly": ["handleValidityChange"],
+    "disabled": ["handleValidityChange"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-input-password", "mg-icon", "mg-input-title", "mg-tooltip"];
+  const components = ["mg-input-password", "mg-icon", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-input-password":
       if (!customElements.get(tagName)) {
@@ -161,15 +167,20 @@ function defineCustomElement$1() {
       break;
     case "mg-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "mg-input-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "mg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "mg-tooltip-content":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
@@ -182,3 +193,5 @@ const MgInputPassword = MgInputPassword$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgInputPassword, defineCustomElement };
+//# sourceMappingURL=mg-input-password.js.map

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

@@ -0,0 +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 * Public method to display errors\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\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.valid = this.readonly || this.disabled || (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true);\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 * Set input error message\n */\n private setErrorMessage = (): void => {\n // Set error message\n this.errorMessage = undefined;\n // required\n if (!this.valid && this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\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}

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

@@ -2,9 +2,10 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { M as MgInput } from './MgInput.js';
 import { C as ClassList, a as allItemsAreString } from './components.utils.js';
 import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$4 } from './mg-icon2.js';
-import { d as defineCustomElement$3 } from './mg-input-title2.js';
-import { d as defineCustomElement$2 } from './mg-tooltip2.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 mgInputRadioCss = ":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}fieldset.mg-input{border:0;margin-left:0;margin-right:0;padding:0}fieldset.mg-input input[type=radio],fieldset.mg-input input[type=checkbox]{flex-shrink:0;width:var(--mg-input-check-size);height:var(--mg-input-check-size);margin-top:calc((var(--font-size) * var(--line-height) - var(--mg-input-check-size)) / 2);margin-right:0.6rem;margin-bottom:0;margin-left:0}fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container{margin-top:0.7rem}.mg-input__input-container mg-tooltip{margin-left:3rem}.mg-input__input-group-container{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;column-gap:2.3rem;row-gap:1rem;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2)}.mg-input__input-group-container--vertical{flex-direction:column}.mg-input__input-group{display:flex;align-items:top}.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}}";
@@ -14,7 +15,7 @@ const mgInputRadioCss = ":host{display:block}.mg-input{display:flex;align-items:
  * @returns radio option type is valid
  */
 const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
-const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -149,7 +150,7 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @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, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
         if (el !== null)
           this.inputs[index] = el;
       } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));
@@ -183,12 +184,18 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "errorMessage": [32],
     "options": [32],
     "displayError": [64]
+  }, undefined, {
+    "value": ["handleValue"],
+    "items": ["validateItems"],
+    "required": ["handleValidityChange"],
+    "readonly": ["handleValidityChange"],
+    "disabled": ["handleValidityChange"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-input-radio", "mg-icon", "mg-input-title", "mg-tooltip"];
+  const components = ["mg-input-radio", "mg-icon", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-input-radio":
       if (!customElements.get(tagName)) {
@@ -197,15 +204,20 @@ function defineCustomElement$1() {
       break;
     case "mg-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "mg-input-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "mg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "mg-tooltip-content":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
@@ -218,3 +230,5 @@ const MgInputRadio = MgInputRadio$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgInputRadio, defineCustomElement };
+//# sourceMappingURL=mg-input-radio.js.map

package/dist/components/mg-input-radio.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-input-radio.js","mappings":"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","names":["MgInputRadio"],"sources":["src/components/molecules/inputs/mg-input-radio/mg-input-radio.scss?tag=mg-input-radio&encapsulation=shadow","src/components/molecules/inputs/mg-input-radio/mg-input-radio.tsx"],"sourcesContent":["@use '../styles/mg-input.scss';\n@use '../styles/mg-input-fieldset.scss';\n@use '../../../../styles/a11y.scss';\n","/* eslint-disable jsx-a11y/no-redundant-roles */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, Event, h, Prop, EventEmitter, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\nimport { RadioOption } from './mg-input-radio.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns radio option type is valid\n */\nconst isOption = (option: RadioOption): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\n\n@Component({\n tag: 'mg-input-radio',\n styleUrl: 'mg-input-radio.scss',\n shadow: true,\n})\nexport class MgInputRadio {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private inputs: 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: HTMLMgInputRadioElement;\n\n /**\n * Component value\n */\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n handleValue(newValue: any): void {\n this.valueChange.emit(newValue);\n }\n\n /**\n * Items are the possible options to select\n */\n @Prop() items!: string[] | RadioOption[];\n @Watch('items')\n validateItems(newValue: string[] | RadioOption[]): void {\n // Validate if items have required min length\n if (typeof newValue === 'object' && newValue.length < 2) {\n throw new Error('<mg-input-radio> prop \"items\" require at least 2 items.');\n }\n // String array\n else if (allItemsAreString(newValue as string[])) {\n this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));\n }\n // Object array\n else if (newValue && (newValue as RadioOption[]).every(item => isOption(item))) {\n this.options = newValue as RadioOption[];\n } else {\n throw new Error('<mg-input-radio> prop \"items\" is required and all items must be the same type, string or RadioOption.');\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 = false;\n\n /**\n * Define if label is visible\n */\n @Prop() labelHide = false;\n\n /**\n * Define if inputs are display verticaly\n */\n @Prop() inputVerticalList = 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 this.inputs.forEach(input => {\n input[prop] = newValue;\n });\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\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 * Component classes\n */\n @State() classCollection: ClassList = new ClassList(['mg-input--radio']);\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Formated items for display\n */\n @State() options: RadioOption[];\n\n /**\n * Emitted event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<any>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /**\n * Public method to display errors\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /**\n * Handle input event\n * @param event - input event\n */\n private handleInput = (event: InputEvent & { target: HTMLInputElement }) => {\n this.checkValidity();\n this.value = this.options[event.target.value].value;\n };\n\n /**\n * Handle blur event\n */\n private handleBlur = (): void => {\n this.checkValidity();\n this.setErrorMessage();\n };\n\n /**\n * Check if input is valid\n */\n private checkValidity = (): void => {\n this.valid = this.readonly || this.disabled || this.getInvalidElement() === undefined;\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 * Set input error message\n */\n private setErrorMessage = (): void => {\n const invalidElement = this.getInvalidElement();\n\n // Set error message\n this.errorMessage = undefined;\n if (!this.valid && invalidElement.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n };\n\n /**\n * get invalid element\n * @returns element\n */\n private getInvalidElement = (): HTMLInputElement => this.inputs.find((input: HTMLInputElement) => !input.disabled && !input.readOnly && !input.checkValidity());\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 // Validate\n this.validateItems(this.items);\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 disabled={this.disabled}\n readonly={this.readonly}\n mgWidth={undefined}\n value={this.value as string}\n readonlyValue={this.value as string}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={true}\n >\n <ul class={{ 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }} role=\"list\">\n {this.options.map((input, index) => (\n <li key={input.title} class={{ 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled }}>\n <input\n type=\"radio\"\n id={this.identifier + '_' + index}\n name={this.identifier}\n value={index}\n checked={JSON.stringify(this.value) === JSON.stringify(this.options[index].value)}\n disabled={this.disabled || input.disabled}\n required={this.required}\n onBlur={this.handleBlur}\n onInput={this.handleInput}\n ref={(el: HTMLInputElement) => {\n if (el !== null) this.inputs[index] = el;\n }}\n />\n <label htmlFor={this.identifier + '_' + index}>{input.title}</label>\n </li>\n ))}\n </ul>\n </MgInput>\n );\n }\n}\n"],"version":3}

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

@@ -4,3 +4,5 @@ const MgInputSelect = MgInputSelect$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgInputSelect, defineCustomElement };
+//# sourceMappingURL=mg-input-select.js.map

package/dist/components/mg-input-select.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"mg-input-select.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -2,9 +2,10 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { M as MgInput } from './MgInput.js';
 import { a as allItemsAreString, C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$3 } from './mg-icon2.js';
-import { d as defineCustomElement$2 } from './mg-input-title2.js';
-import { d as defineCustomElement$1 } from './mg-tooltip2.js';
+import { d as defineCustomElement$4 } from './mg-icon2.js';
+import { d as defineCustomElement$3 } from './mg-input-title2.js';
+import { d as defineCustomElement$2 } from './mg-tooltip2.js';
+import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
 const mgInputSelectCss = ":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__box{width:100%;padding-top:0;padding-bottom:0;padding-right:1rem}:host(:not([mg-width])) .mg-input--select:not(.mg-input--label-on-top) .mg-input__box{max-width:unset}";
@@ -50,7 +51,7 @@ const groupOptions = (acc, { group, title, value, disabled }) => {
   }
   return acc;
 };
-const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -248,7 +249,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    * @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: undefined, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, 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: undefined, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
         if (el !== null)
           this.input = el;
       } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -288,12 +289,18 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "valueExist": [32],
     "readonlyValue": [32],
     "displayError": [64]
+  }, undefined, {
+    "value": ["validateValue"],
+    "items": ["validateItems"],
+    "required": ["handleValidityChange"],
+    "readonly": ["handleValidityChange"],
+    "disabled": ["handleValidityChange"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-input-select", "mg-icon", "mg-input-title", "mg-tooltip"];
+  const components = ["mg-input-select", "mg-icon", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-input-select":
       if (!customElements.get(tagName)) {
@@ -302,15 +309,20 @@ function defineCustomElement() {
       break;
     case "mg-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "mg-input-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$3();
       }
       break;
     case "mg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "mg-tooltip-content":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }
@@ -320,3 +332,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgInputSelect as M, defineCustomElement as d };
+//# sourceMappingURL=mg-input-select2.js.map

package/dist/components/mg-input-select2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-input-select2.js","mappings":"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","names":[],"sources":["src/components/molecules/inputs/mg-input-select/mg-input-select.scss?tag=mg-input-select&encapsulation=shadow","src/components/molecules/inputs/mg-input-select/mg-input-select.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\n.mg-input__box {\n width: 100%;\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 1rem;\n}\n\n:host(:not([mg-width])) .mg-input--select:not(.mg-input--label-on-top) .mg-input__box {\n max-width: unset;\n}\n","/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, Event, h, Prop, State, EventEmitter, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Width } from '../MgInput.conf';\nimport { ClassList, allItemsAreString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\nimport { SelectOption, OptGroup } from './mg-input-select.conf';\n\n/**\n * Check if item is a well configured option\n * @param option - select option\n * @returns select option type is valid\n */\nconst isOption = (option: unknown): option is SelectOption => typeof option === 'object' && typeof (option as SelectOption).title === 'string';\n\n/**\n * Check if items[] is SelectOption\n * @param items - select option\n * @returns select option array type is valid\n */\nconst allItemsAreOptions = (items: unknown[]): items is SelectOption[] => Array.isArray(items) && items.every(item => isOption(item));\n\n/**\n * Check if item is a well configured optgroup\n * @param optgroup - select option\n * @returns select optgroup type is valid\n */\nconst isOptGroup = (optgroup: unknown): optgroup is OptGroup =>\n typeof optgroup === 'object' && typeof (optgroup as OptGroup).group === 'string' && allItemsAreOptions((optgroup as OptGroup).options);\n\n/**\n * Group options\n * @param acc - reduce accumulator\n * @param item - item to add\n * @returns grouped options\n */\nconst groupOptions = (acc: (SelectOption | OptGroup)[], { group, title, value, disabled }: SelectOption): (SelectOption | OptGroup)[] => {\n if (group !== undefined) {\n // Check if group is already created\n const optGroup: OptGroup = (acc as OptGroup[]).find(grp => grp.group === group);\n // Add to group\n if (optGroup !== undefined) {\n optGroup.options.push({ title, value, disabled });\n }\n // Create group\n else {\n acc.push({ group, options: [{ title, value, disabled }] });\n }\n } else {\n acc.push({ title, value, disabled });\n }\n return acc;\n};\n\n@Component({\n tag: 'mg-input-select',\n styleUrl: 'mg-input-select.scss',\n shadow: true,\n})\nexport class MgInputSelect {\n /************\n * Internal *\n ************/\n\n // HTML selector\n private input: HTMLSelectElement;\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: HTMLMgInputSelectElement;\n\n /**\n * Component value\n */\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n validateValue(newValue: MgInputSelect['value']): void {\n if (allItemsAreString(this.items) && typeof newValue === 'string') {\n this.readonlyValue = Boolean(this.input?.value) ? this.input.value : newValue;\n } else if (allItemsAreOptions(this.items)) {\n this.readonlyValue = this.items.find(item => item.value === newValue)?.title;\n } else {\n this.readonlyValue = null;\n }\n this.valueChange.emit(newValue);\n }\n\n /**\n * Items are the possible options to select\n */\n @Prop() items!: (string | SelectOption)[];\n @Watch('items')\n validateItems(newValue: MgInputSelect['items']): void {\n // Empty options\n if (newValue.length === 0) {\n this.options = [];\n }\n // String array\n else if (allItemsAreString(newValue)) {\n if (typeof this.value === 'string') this.valueExist = newValue.includes(this.value);\n this.options = newValue.map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (allItemsAreOptions(newValue)) {\n this.valueExist = newValue.map(item => item.value).includes(this.value);\n // Grouped object options\n if (newValue.some(item => Boolean(item.group))) {\n this.options = newValue.reduce(groupOptions, []);\n }\n // Standart object options\n else {\n this.options = newValue;\n }\n } else {\n throw new Error('<mg-input-select> prop \"items\" is required, can be an empty Array or all items must be the same type: string or Option.');\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 = 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({ mutable: true }) placeholder: string;\n\n /**\n * Option to remove placeholder\n */\n @Prop() placeholderHide = false;\n\n /**\n * Option to disable placeholder\n */\n @Prop() placeholderDisabled = 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 * Define input width\n */\n @Prop({ reflect: true }) 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 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--select']);\n\n /**\n * Error message to display\n */\n @State() errorMessage: string;\n\n /**\n * Formated items for display\n */\n @State() options: (SelectOption | OptGroup)[];\n\n /**\n * Does value match any item option\n */\n @State() valueExist: boolean;\n\n /**\n * Does value match any item option\n */\n @State() readonlyValue: string;\n\n /**\n * Emited event when value change\n */\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<MgInputSelect['value']>;\n\n /**\n * Emited event when checking validity\n */\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /**\n * Public method to display errors\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /**\n * Handle input event\n */\n private handleInput = (): void => {\n this.updateValue();\n if (this.hasDisplayedError) this.setErrorMessage();\n };\n\n /**\n * Method to compare item.title with input.value\n * @param item - item to compare with\n * @returns truthy if input.value is an item\n */\n private isInputValue = (item: SelectOption): boolean => item.title === this.input?.value;\n\n /**\n * value props setter\n * @param newValue - value to update with\n */\n private setValue = (newValue: MgInputSelect['value']): void => {\n this.checkValidity();\n this.value = newValue;\n };\n\n /**\n * Update value from input.value\n */\n private updateValue = (): void => {\n if (this.input.value === '') {\n this.setValue(null);\n } else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {\n this.setValue(this.input.value);\n } else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {\n this.setValue(this.items.find(this.isInputValue).value);\n } else {\n // before set newValue with push to options[] the unknown input.value with a disable satus\n this.options.push({ title: this.input.value, value: this.input.value, disabled: true });\n this.setValue(this.input.value);\n }\n };\n\n /**\n * Handle blur event\n */\n private handleBlur = (): void => {\n this.displayError();\n };\n\n /**\n * Input value is disabled\n * @returns truthy if input value is disabled\n */\n private isDisabledValue = (): boolean => allItemsAreOptions(this.options) && this.options.find(this.isInputValue)?.disabled === true;\n\n /**\n * Check if input is valid\n */\n private checkValidity = (): void => {\n this.valid = !this.isDisabledValue() && (this.readonly || this.disabled || (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true));\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 * Set input error message\n */\n private setErrorMessage = (): void => {\n // Set error message\n this.errorMessage = undefined;\n if (!this.valid && this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\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 // Validate\n this.validateItems(this.items);\n this.validateValue(this.value);\n // Set default placeholder\n if (this.placeholder === undefined || this.placeholder === '') {\n this.placeholder = this.messages.input.select.placeholder;\n }\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 option\n * @param option - to render\n * @returns render option\n */\n private renderOption = (option: SelectOption): HTMLElement => (\n <option key={option.title} value={option.title} selected={JSON.stringify(this.value) === JSON.stringify(option.value)} disabled={option.disabled}>\n {option.title}\n </option>\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={undefined}\n readonlyValue={this.readonlyValue}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <select\n class=\"mg-input__box\"\n id={this.identifier}\n name={this.name}\n title={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n onInput={this.handleInput}\n onBlur={this.handleBlur}\n ref={(el: HTMLSelectElement) => {\n if (el !== null) this.input = el;\n }}\n >\n {(!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder\n <option value=\"\" disabled={this.placeholderDisabled && this.valueExist}>\n {this.placeholder}\n </option>\n )}\n {this.options.map(option =>\n isOptGroup(option) ? <optgroup label={option.group}>{option.options.map(this.renderOption)}</optgroup> : isOption(option) && this.renderOption(option),\n )}\n </select>\n </MgInput>\n );\n }\n}\n"],"version":3}

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

@@ -4,3 +4,5 @@ const MgInputText = MgInputText$1;
 const defineCustomElement = defineCustomElement$1;
 export { MgInputText, defineCustomElement };
+//# sourceMappingURL=mg-input-text.js.map

package/dist/components/mg-input-text.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"mg-input-text.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -2,14 +2,15 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { M as MgInput } from './MgInput.js';
 import { C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$4 } from './mg-character-left2.js';
-import { d as defineCustomElement$3 } from './mg-icon2.js';
-import { d as defineCustomElement$2 } from './mg-input-title2.js';
-import { d as defineCustomElement$1 } from './mg-tooltip2.js';
+import { d as defineCustomElement$5 } from './mg-character-left2.js';
+import { d as defineCustomElement$4 } from './mg-icon2.js';
+import { d as defineCustomElement$3 } from './mg-input-title2.js';
+import { d as defineCustomElement$2 } from './mg-tooltip2.js';
+import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
 const mgInputTextCss = ":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}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.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--has-icon .mg-input__with-character-left>mg-icon{position:absolute;top:50%;left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);transform:translateY(-50%)}.mg-input.mg-input--has-icon .mg-input__with-character-left .mg-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2)}.mg-input__with-character-left{position:relative;display:inline-flex}.mg-input--width-full .mg-input__with-character-left{width:100%}.mg-input.is-focused .mg-input__with-character-left .mg-input__box{padding-right:calc(var(--mg-character-left-message-length) * 1ch + 0.8rem)}.mg-input__with-character-left mg-character-left{position:absolute;display:none;top:50%;right:1rem;opacity:0.6;transform:translateY(-50%);font-size:1.1rem}.mg-input.is-focused .mg-input__with-character-left mg-character-left{display:block}";
-const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgInputText = /*@__PURE__*/ proxyCustomElement(class MgInputText extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -191,7 +192,7 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         '--mg-character-left-message-length': (this.displayCharacterLeft
           ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
           : 0).toString(),
-      } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
+      } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
         if (el !== null)
           this.input = el;
       } }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
@@ -231,12 +232,18 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "errorMessage": [32],
     "setFocus": [64],
     "displayError": [64]
+  }, undefined, {
+    "value": ["handleValue"],
+    "icon": ["validateIcon"],
+    "required": ["handleValidityChange"],
+    "readonly": ["handleValidityChange"],
+    "disabled": ["handleValidityChange"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-input-text", "mg-character-left", "mg-icon", "mg-input-title", "mg-tooltip"];
+  const components = ["mg-input-text", "mg-character-left", "mg-icon", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-input-text":
       if (!customElements.get(tagName)) {
@@ -245,20 +252,25 @@ function defineCustomElement() {
       break;
     case "mg-character-left":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "mg-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "mg-input-title":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$3();
       }
       break;
     case "mg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "mg-tooltip-content":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }
@@ -268,3 +280,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { MgInputText as M, defineCustomElement as d };
+//# sourceMappingURL=mg-input-text2.js.map

package/dist/components/mg-input-text2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-input-text2.js","mappings":"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","names":[],"sources":["src/components/molecules/inputs/mg-input-text/mg-input-text.scss?tag=mg-input-text&encapsulation=shadow","src/components/molecules/inputs/mg-input-text/mg-input-text.tsx"],"sourcesContent":["@use '../styles/mg-input.scss';\n@use '../styles/mg-input-box.scss';\n@use '../styles/mg-input-width.scss';\n@use '../styles/mg-input-character-left.scss';\n@use '../../../../styles/a11y.scss';\n\n/**\n* Icon in input\n*/\n.mg-input.mg-input--has-icon .mg-input__with-character-left {\n & > mg-icon {\n // layout\n position: absolute;\n top: 50%;\n left: var(--mg-inputs-spacer);\n // text\n color: var(--mg-inputs-color);\n // other\n transform: translateY(-50%);\n }\n\n .mg-input__box {\n padding-left: calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2);\n }\n}\n\n/**\n* Character left\n*/\n.mg-input__with-character-left {\n position: relative;\n display: inline-flex;\n\n .mg-input--width-full & {\n width: 100%;\n }\n\n .mg-input.is-focused & .mg-input__box {\n padding-right: calc(var(--mg-character-left-message-length) * 1ch + 0.8rem);\n }\n\n mg-character-left {\n position: absolute;\n display: none;\n top: 50%;\n right: 1rem;\n opacity: 0.6;\n transform: translateY(-50%);\n font-size: 1.1rem;\n\n .mg-input.is-focused & {\n display: block;\n }\n }\n}\n","import { Component, Event, h, Prop, EventEmitter, State, Element, 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-text',\n styleUrl: 'mg-input-text.scss',\n shadow: true,\n})\nexport class MgInputText {\n /************\n * Internal *\n ************/\n\n // Classes\n private classFocus = 'is-focused';\n private classIsInputGroupAppend = 'mg-input--is-input-group-append';\n private classHasIcon = 'mg-input--has-icon';\n\n // IDs\n private characterLeftId;\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: HTMLMgInputTextElement;\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 * Input type\n */\n @Prop() type: 'text' | 'search' = 'text';\n\n /**\n * Input icon\n */\n @Prop() icon: string;\n @Watch('icon')\n validateIcon(newValue: string): void {\n if (newValue !== undefined) {\n this.classCollection.add(this.classHasIcon);\n } else {\n this.classCollection.delete(this.classHasIcon);\n }\n }\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 * Input max length\n */\n @Prop() maxlength = 400;\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 * Define input pattern to validate\n */\n @Prop() pattern: string;\n\n /**\n * Define input pattern error message\n */\n @Prop() patternErrorMessage: string;\n\n /**\n * Add a tooltip message next to the input\n */\n @Prop() tooltip: string;\n\n /**\n * Define if component should display character left\n */\n @Prop() displayCharacterLeft = true;\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--text']);\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 * Public method to play input focus\n */\n @Method()\n async setFocus(): Promise<void> {\n this.input.focus();\n }\n\n /**\n * Public method to display errors\n */\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\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 focus event\n */\n private handleFocus = (): void => {\n this.classCollection.add(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n };\n\n /**\n * Handle blur event\n */\n private handleBlur = (): void => {\n // Manage focus\n this.classCollection.delete(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n // Display Error\n this.displayError();\n };\n\n /**\n * Check if input is valid\n */\n private checkValidity = (): void => {\n this.valid = this.readonly || this.disabled || (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true);\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 * Set input error message\n */\n private setErrorMessage = (): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does not match pattern\n if (!this.valid && this.input.validity.patternMismatch) {\n this.errorMessage = this.patternErrorMessage;\n }\n // required\n else if (!this.valid && this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n };\n\n /**\n * Validate pattern configuration\n */\n private validatePattern = (): void => {\n if (\n this.pattern !== undefined &&\n typeof this.pattern === 'string' &&\n this.pattern !== '' &&\n (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')\n ) {\n throw new Error('<mg-input-text> prop \"pattern\" must be paired with the prop \"patternErrorMessage\"');\n }\n };\n\n /**\n * Validate append slot\n */\n private validateAppendSlot = (): void => {\n const slotAppendInput: HTMLSlotElement[] = Array.from(this.element.querySelectorAll('[slot=\"append-input\"]'));\n\n if (slotAppendInput.length === 1) {\n this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-input--is-append-input-slot-content');\n } else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {\n this.classCollection.add(this.classIsInputGroupAppend);\n this.classCollection.add('mg-input--has-buttons-group-append');\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 this.characterLeftId = `${this.identifier}-character-left`;\n // Validate\n this.validateIcon(this.icon);\n this.validatePattern();\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={[this.characterLeftId]}\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={undefined}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <div\n class=\"mg-input__with-character-left\"\n style={{\n '--mg-character-left-message-length': (this.displayCharacterLeft\n ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1\n : 0\n ).toString(),\n }}\n >\n {this.icon !== undefined && <mg-icon icon={this.icon}></mg-icon>}\n <input\n type={this.type}\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 maxlength={this.maxlength}\n disabled={this.disabled}\n required={this.required}\n pattern={this.pattern}\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 {this.displayCharacterLeft && this.maxlength > 0 && (\n <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n )}\n </div>\n <slot name=\"append-input\"></slot>\n </MgInput>\n );\n }\n}\n"],"version":3}