@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { M as MgInput } from './MgInput.js';
+import { H as Handler, M as MgInput } from './MgInput.js';
 import { d as allItemsAreString, C as ClassList, i as isValidString } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-icon2.js';
@@ -34,335 +34,341 @@ const isOptGroup = (optgroup) => typeof optgroup === 'object' && typeof optgroup
  * @returns grouped options
  */
 const groupOptions = (acc, { group, title, value, disabled }) => {
-  if (group !== undefined) {
-    // Check if group is already created
-    const optGroup = acc.find(grp => grp.group === group);
-    // Add to group
-    if (optGroup !== undefined) {
-      optGroup.options.push({ title, value, disabled });
+    if (group !== undefined) {
+        // Check if group is already created
+        const optGroup = acc.find(grp => grp.group === group);
+        // Add to group
+        if (optGroup !== undefined) {
+            optGroup.options.push({ title, value, disabled });
+        }
+        // Create group
+        else {
+            acc.push({ group, options: [{ title, value, disabled }] });
+        }
     }
-    // Create group
     else {
-      acc.push({ group, options: [{ title, value, disabled }] });
+        acc.push({ title, value, disabled });
     }
-  }
-  else {
-    acc.push({ title, value, disabled });
-  }
-  return acc;
+    return acc;
 };
 const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.valueChange = createEvent(this, "value-change", 7);
-    this.inputValid = createEvent(this, "input-valid", 7);
-    // hasDisplayedError (triggered by blur event)
-    this.hasDisplayedError = false;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "value-change", 7);
+        this.inputValid = createEvent(this, "input-valid", 7);
+        // hasDisplayedError (triggered by blur event)
+        this.hasDisplayedError = false;
+        /**
+         * Handle input event
+         */
+        this.handleInput = () => {
+            this.updateValue();
+            if (this.hasDisplayedError)
+                this.setErrorMessage();
+        };
+        /**
+         * Method to compare item.title with input.value
+         * @param item - item to compare with
+         * @returns truthy if input.value is an item
+         */
+        this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
+        /**
+         * value props setter
+         * @param newValue - value to update with
+         */
+        this.setValue = (newValue) => {
+            this.checkValidity();
+            this.value = newValue;
+        };
+        /**
+         * Update value from input.value
+         */
+        this.updateValue = () => {
+            if (this.input.value === '') {
+                this.setValue(null);
+            }
+            else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {
+                this.setValue(this.input.value);
+            }
+            else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
+                this.setValue(this.items.find(this.isInputValue).value);
+            }
+            else {
+                // before set newValue with push to options[] the unknown input.value with a disable satus
+                this.options.push({ title: this.input.value, value: this.input.value, disabled: true });
+                this.setValue(this.input.value);
+            }
+        };
+        /**
+         * Handle blur event
+         */
+        this.handleBlur = () => {
+            this.handlerInProgress = Handler.BLUR;
+            this.displayError().finally(() => {
+                // reset guard
+                this.handlerInProgress = undefined;
+            });
+        };
+        /**
+         * Input value is disabled
+         * @returns truthy if input value is disabled
+         */
+        this.isDisabledValue = () => { var _a; return allItemsAreOptions(this.options) && ((_a = this.options.find(this.isInputValue)) === null || _a === void 0 ? void 0 : _a.disabled) === true; };
+        /**
+         * Check if input is valid
+         */
+        this.checkValidity = () => {
+            var _a;
+            this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true)));
+        };
+        /**
+         * Set input error message
+         * @param errorMessage - errorMessage override
+         */
+        this.setErrorMessage = (errorMessage) => {
+            // Set error message
+            this.errorMessage = undefined;
+            if (!this.valid) {
+                if (errorMessage !== undefined) {
+                    this.errorMessage = errorMessage;
+                }
+                else if (this.input.validity.valueMissing) {
+                    this.errorMessage = this.messages.errors.required;
+                }
+            }
+        };
+        /**
+         * Render option
+         * @param option - to render
+         * @returns render option
+         */
+        this.renderOption = (option) => (h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
+        this.value = undefined;
+        this.items = undefined;
+        this.identifier = undefined;
+        this.name = this.identifier;
+        this.label = undefined;
+        this.labelOnTop = undefined;
+        this.labelHide = false;
+        this.placeholder = undefined;
+        this.placeholderHide = false;
+        this.placeholderDisabled = false;
+        this.required = false;
+        this.readonly = false;
+        this.disabled = false;
+        this.mgWidth = undefined;
+        this.tooltip = undefined;
+        this.helpText = undefined;
+        this.valid = undefined;
+        this.invalid = undefined;
+        this.classCollection = new ClassList(['mg-c-input--select']);
+        this.errorMessage = undefined;
+        this.options = undefined;
+        this.valueExist = undefined;
+        this.readonlyValue = undefined;
+    }
+    validateValue(newValue) {
+        var _a, _b;
+        if (allItemsAreString(this.items) && typeof newValue === 'string') {
+            this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
+        }
+        else if (allItemsAreOptions(this.items)) {
+            this.readonlyValue = (_b = this.items.find(item => item.value === newValue)) === null || _b === void 0 ? void 0 : _b.title;
+        }
+        else {
+            this.readonlyValue = null;
+        }
+        this.valueChange.emit(newValue);
+    }
+    validateItems(newValue) {
+        // Empty options
+        if (newValue.length === 0) {
+            this.options = [];
+        }
+        // String array
+        else if (allItemsAreString(newValue)) {
+            if (typeof this.value === 'string')
+                this.valueExist = newValue.includes(this.value);
+            this.options = newValue.map(item => ({ title: item, value: item }));
+        }
+        // Object array
+        else if (allItemsAreOptions(newValue)) {
+            this.valueExist = newValue.map(item => item.value).includes(this.value);
+            // Grouped object options
+            if (newValue.some(item => Boolean(item.group))) {
+                this.options = newValue.reduce(groupOptions, []);
+            }
+            // Standart object options
+            else {
+                this.options = newValue;
+            }
+        }
+        else {
+            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.');
+        }
+    }
+    handleValidityChange(newValue, _oldValue, prop) {
+        if (this.input !== undefined) {
+            this.input[prop] = newValue;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+                this.hasDisplayedError = false;
+            }
+        }
+    }
     /**
-     * Handle input event
+     * Display input error if it exists.
      */
-    this.handleInput = () => {
-      this.updateValue();
-      if (this.hasDisplayedError)
+    async displayError() {
+        this.checkValidity();
         this.setErrorMessage();
-    };
-    /**
-     * Method to compare item.title with input.value
-     * @param item - item to compare with
-     * @returns truthy if input.value is an item
-     */
-    this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
-    /**
-     * value props setter
-     * @param newValue - value to update with
-     */
-    this.setValue = (newValue) => {
-      this.checkValidity();
-      this.value = newValue;
-    };
-    /**
-     * Update value from input.value
-     */
-    this.updateValue = () => {
-      if (this.input.value === '') {
-        this.setValue(null);
-      }
-      else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {
-        this.setValue(this.input.value);
-      }
-      else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
-        this.setValue(this.items.find(this.isInputValue).value);
-      }
-      else {
-        // before set newValue with push to options[] the unknown input.value with a disable satus
-        this.options.push({ title: this.input.value, value: this.input.value, disabled: true });
-        this.setValue(this.input.value);
-      }
-    };
-    /**
-     * Handle blur event
-     */
-    this.handleBlur = () => {
-      this.displayError();
-    };
+        this.hasDisplayedError = this.invalid;
+    }
     /**
-     * Input value is disabled
-     * @returns truthy if input value is disabled
+     * Set an error and display a custom error message.
+     * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+     * It must be paired with an error message to display for the given context.
+     * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+     * @param valid - value indicating the validity
+     * @param errorMessage - the error message to display
      */
-    this.isDisabledValue = () => { var _a; return allItemsAreOptions(this.options) && ((_a = this.options.find(this.isInputValue)) === null || _a === void 0 ? void 0 : _a.disabled) === true; };
+    async setError(valid, errorMessage) {
+        if (typeof valid !== 'boolean') {
+            throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
+        }
+        else if (!isValidString(errorMessage)) {
+            throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
+        }
+        else {
+            this.setValidity(valid);
+            this.setErrorMessage(valid ? undefined : errorMessage);
+            this.hasDisplayedError = this.invalid;
+        }
+    }
     /**
-     * Check if input is valid
+     * Method to set validity values
+     * @param newValue - valid new value
      */
-    this.checkValidity = () => {
-      var _a;
-      this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true)));
-    };
+    setValidity(newValue) {
+        const oldValidValue = this.valid;
+        this.valid = newValue;
+        this.invalid = !this.valid;
+        // We need to send valid event even if it is the same value
+        if (this.handlerInProgress === undefined || (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue))
+            this.inputValid.emit(this.valid);
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Set input error message
-     * @param errorMessage - errorMessage override
+     * Check if component props are well configured on init
+     * @returns timeout
      */
-    this.setErrorMessage = (errorMessage) => {
-      // Set error message
-      this.errorMessage = undefined;
-      if (!this.valid) {
-        if (errorMessage !== undefined) {
-          this.errorMessage = errorMessage;
-        }
-        else if (this.input.validity.valueMissing) {
-          this.errorMessage = this.messages.errors.required;
+    componentWillLoad() {
+        // Get locales
+        this.messages = initLocales(this.element).messages;
+        // Validate
+        this.validateItems(this.items);
+        this.validateValue(this.value);
+        // Set default placeholder
+        if (this.placeholder === undefined || this.placeholder === '') {
+            this.placeholder = this.messages.input.select.placeholder;
         }
-      }
-    };
+        // Check validity when component is ready
+        // return a promise to process action only in the FIRST render().
+        // https://stenciljs.com/docs/component-lifecycle#componentwillload
+        return setTimeout(() => {
+            this.checkValidity();
+        }, 0);
+    }
     /**
-     * Render option
-     * @param option - to render
-     * @returns render option
+     * Render
+     * @returns HTML Element
      */
-    this.renderOption = (option) => (h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
-    this.value = undefined;
-    this.items = undefined;
-    this.identifier = undefined;
-    this.name = this.identifier;
-    this.label = undefined;
-    this.labelOnTop = undefined;
-    this.labelHide = false;
-    this.placeholder = undefined;
-    this.placeholderHide = false;
-    this.placeholderDisabled = false;
-    this.required = false;
-    this.readonly = false;
-    this.disabled = false;
-    this.mgWidth = undefined;
-    this.tooltip = undefined;
-    this.helpText = undefined;
-    this.valid = undefined;
-    this.invalid = undefined;
-    this.classCollection = new ClassList(['mg-c-input--select']);
-    this.errorMessage = undefined;
-    this.options = undefined;
-    this.valueExist = undefined;
-    this.readonlyValue = undefined;
-  }
-  validateValue(newValue) {
-    var _a, _b;
-    if (allItemsAreString(this.items) && typeof newValue === 'string') {
-      this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
-    }
-    else if (allItemsAreOptions(this.items)) {
-      this.readonlyValue = (_b = this.items.find(item => item.value === newValue)) === null || _b === void 0 ? void 0 : _b.title;
-    }
-    else {
-      this.readonlyValue = null;
-    }
-    this.valueChange.emit(newValue);
-  }
-  validateItems(newValue) {
-    // Empty options
-    if (newValue.length === 0) {
-      this.options = [];
-    }
-    // String array
-    else if (allItemsAreString(newValue)) {
-      if (typeof this.value === 'string')
-        this.valueExist = newValue.includes(this.value);
-      this.options = newValue.map(item => ({ title: item, value: item }));
+    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-c-input__box", id: this.identifier, name: this.name, 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;
+            } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
+        h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (h("optgroup", { label: option.group, key: option.group }, option.options.map(this.renderOption))) : (isOption(option) && this.renderOption(option))))));
     }
-    // Object array
-    else if (allItemsAreOptions(newValue)) {
-      this.valueExist = newValue.map(item => item.value).includes(this.value);
-      // Grouped object options
-      if (newValue.some(item => Boolean(item.group))) {
-        this.options = newValue.reduce(groupOptions, []);
-      }
-      // Standart object options
-      else {
-        this.options = newValue;
-      }
-    }
-    else {
-      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.');
-    }
-  }
-  handleValidityChange(newValue, _oldValue, prop) {
-    if (this.input !== undefined) {
-      this.input[prop] = newValue;
-      this.checkValidity();
-      if (this.hasDisplayedError) {
-        this.setErrorMessage();
-        this.hasDisplayedError = false;
-      }
-    }
-  }
-  /**
-   * Display input error if it exists.
-   */
-  async displayError() {
-    this.checkValidity();
-    this.setErrorMessage();
-    this.hasDisplayedError = this.invalid;
-  }
-  /**
-   * Set an error and display a custom error message.
-   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
-   * It must be paired with an error message to display for the given context.
-   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
-   * @param valid - value indicating the validity
-   * @param errorMessage - the error message to display
-   */
-  async setError(valid, errorMessage) {
-    if (typeof valid !== 'boolean') {
-      throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
-    }
-    else if (!isValidString(errorMessage)) {
-      throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
-    }
-    else {
-      this.setValidity(valid);
-      this.setErrorMessage(valid ? undefined : errorMessage);
-      this.hasDisplayedError = this.invalid;
-    }
-  }
-  /**
-   * Method to set validity values
-   * @param newValue - valid new value
-   */
-  setValidity(newValue) {
-    this.valid = newValue;
-    this.invalid = !this.valid;
-    // We need to send valid event even if it is the same value
-    this.inputValid.emit(this.valid);
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   * @returns timeout
-   */
-  componentWillLoad() {
-    // Get locales
-    this.messages = initLocales(this.element).messages;
-    // Validate
-    this.validateItems(this.items);
-    this.validateValue(this.value);
-    // Set default placeholder
-    if (this.placeholder === undefined || this.placeholder === '') {
-      this.placeholder = this.messages.input.select.placeholder;
-    }
-    // Check validity when component is ready
-    // return a promise to process action only in the FIRST render().
-    // https://stenciljs.com/docs/component-lifecycle#componentwillload
-    return setTimeout(() => {
-      this.checkValidity();
-    }, 0);
-  }
-  /**
-   * Render
-   * @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-c-input__box", id: this.identifier, name: this.name, 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;
-      } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
-    h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (h("optgroup", { label: option.group, key: option.group }, option.options.map(this.renderOption))) : (isOption(option) && this.renderOption(option))))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "value": ["validateValue"],
-    "items": ["validateItems"],
-    "required": ["handleValidityChange"],
-    "readonly": ["handleValidityChange"],
-    "disabled": ["handleValidityChange"]
-  }; }
-  static get style() { return mgInputSelectCss; }
+    get element() { return this; }
+    static get watchers() { return {
+        "value": ["validateValue"],
+        "items": ["validateItems"],
+        "required": ["handleValidityChange"],
+        "readonly": ["handleValidityChange"],
+        "disabled": ["handleValidityChange"]
+    }; }
+    static get style() { return mgInputSelectCss; }
 }, [1, "mg-input-select", {
-    "value": [1032],
-    "items": [16],
-    "identifier": [1],
-    "name": [1],
-    "label": [1],
-    "labelOnTop": [4, "label-on-top"],
-    "labelHide": [4, "label-hide"],
-    "placeholder": [1025],
-    "placeholderHide": [4, "placeholder-hide"],
-    "placeholderDisabled": [4, "placeholder-disabled"],
-    "required": [4],
-    "readonly": [4],
-    "disabled": [4],
-    "mgWidth": [520, "mg-width"],
-    "tooltip": [1],
-    "helpText": [1, "help-text"],
-    "valid": [1028],
-    "invalid": [1028],
-    "classCollection": [32],
-    "errorMessage": [32],
-    "options": [32],
-    "valueExist": [32],
-    "readonlyValue": [32],
-    "displayError": [64],
-    "setError": [64]
-  }, undefined, {
-    "value": ["validateValue"],
-    "items": ["validateItems"],
-    "required": ["handleValidityChange"],
-    "readonly": ["handleValidityChange"],
-    "disabled": ["handleValidityChange"]
-  }]);
+        "value": [1032],
+        "items": [16],
+        "identifier": [1],
+        "name": [1],
+        "label": [1],
+        "labelOnTop": [4, "label-on-top"],
+        "labelHide": [4, "label-hide"],
+        "placeholder": [1025],
+        "placeholderHide": [4, "placeholder-hide"],
+        "placeholderDisabled": [4, "placeholder-disabled"],
+        "required": [4],
+        "readonly": [4],
+        "disabled": [4],
+        "mgWidth": [520, "mg-width"],
+        "tooltip": [1],
+        "helpText": [1, "help-text"],
+        "valid": [1028],
+        "invalid": [1028],
+        "classCollection": [32],
+        "errorMessage": [32],
+        "options": [32],
+        "valueExist": [32],
+        "readonlyValue": [32],
+        "displayError": [64],
+        "setError": [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", "mg-tooltip-content"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-input-select":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgInputSelect);
-      }
-      break;
-    case "mg-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "mg-input-title":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "mg-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "mg-tooltip-content":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    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)) {
+                customElements.define(tagName, MgInputSelect);
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "mg-input-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "mg-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "mg-tooltip-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 defineCustomElement();