@mgdis/mg-components 5.16.0 → 5.18.0

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

@@ -25,7 +25,7 @@ const mgInputCheckboxCss = ":host{display:block}.mg-input{display:flex;align-ite
  */
 const isCheckboxItems = (items) => Array.isArray(items) &&
   items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);
-const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -34,6 +34,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.inputValid = createEvent(this, "input-valid", 7);
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
+    this.mode = 'custom';
     // style
     this.baseClassName = 'mg-input--checkbox';
     // "multi" setup
@@ -133,10 +134,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      * Check if input is valid
      */
     this.checkValidity = () => {
-      this.valid = this.readonly || this.disabled || (this.getInvalidElement() === undefined && this.validateRequired());
-      this.invalid = !this.valid;
-      // We need to send valid event even if it is the same value
-      this.inputValid.emit(this.valid);
+      this.setValidity(this.readonly || this.disabled || (this.getInvalidElement() === undefined && this.validateRequired()));
     };
     /**
      * Render button text
@@ -154,12 +152,17 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     /**
      * Set input error message
      * @param displayError - dispay error condition
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = (displayError = true) => {
+    this.setErrorMessage = (displayError = true, errorMessage) => {
       // Set error message
       this.errorMessage = undefined;
-      if (displayError && !this.valid && !this.validateRequired())
-        this.errorMessage = this.messages.errors.required;
+      if (displayError && !this.valid) {
+        if (errorMessage !== undefined)
+          this.errorMessage = errorMessage;
+        else if (!this.validateRequired())
+          this.errorMessage = this.messages.errors.required;
+      }
     };
     /**
      * Method to get mg-popover identifier
@@ -172,7 +175,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      */
     this.getDisplayItems = () => (this.searchValue.length > 0 ? this.searchResults : this.checkboxItems);
     this.value = undefined;
-    this.type = checkboxTypes[0];
+    this.type = undefined;
     this.identifier = undefined;
     this.name = this.identifier;
     this.label = undefined;
@@ -213,9 +216,13 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     }
   }
   validateType(newValue) {
-    if (!checkboxTypes.includes(newValue)) {
+    if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
       throw new Error('<mg-input-checkbox> prop "type" must be a CheckboxType.');
     }
+    else if (newValue === undefined) {
+      this.mode = 'auto';
+      this.type = checkboxTypes[0];
+    }
     else {
       const className = `${this.baseClassName}-multi`;
       if (newValue === 'multi') {
@@ -247,9 +254,9 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       this.classCollection.delete(className);
   }
   validateCheckboxItems(newValue) {
-    if (newValue.length > this.multiStart)
+    if (this.mode === 'auto' && newValue.length > this.multiStart)
       this.type = 'multi';
-    if (newValue.length > this.searchStart) {
+    if (this.mode === 'auto' || (this.type === 'multi' && newValue.length > this.searchStart)) {
       this.displaySearchInput = this.type === 'multi';
       // refresh search values
       this.updateSearchResults();
@@ -260,13 +267,44 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.updateSearchResults();
   }
   /**
-   * Public method to display errors
+   * 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-checkbox> method "setError()" param "valid" must be a boolean');
+    }
+    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
+    }
+    else {
+      this.setValidity(valid);
+      this.setErrorMessage(undefined, 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);
+  }
   /**
    * Update ckecboxes item
    * @param key - property to update
@@ -403,7 +441,17 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "displaySearchInput": [32],
     "searchValue": [32],
     "searchResults": [32],
-    "displayError": [64]
+    "displayError": [64],
+    "setError": [64]
+  }, undefined, {
+    "value": ["validateValue"],
+    "type": ["validateType"],
+    "displaySelectedValues": ["validateDisplaySelectedValues"],
+    "required": ["handleValidityChange"],
+    "readonly": ["handleValidityChange"],
+    "disabled": ["handleValidityChange", "validateDisabled"],
+    "checkboxItems": ["validateCheckboxItems"],
+    "searchValue": ["validateSearchValue"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -489,3 +537,5 @@ const MgInputCheckbox = MgInputCheckbox$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputCheckbox, defineCustomElement };
+
+//# sourceMappingURL=mg-input-checkbox.js.map

package/dist/components/mg-input-checkbox.js.map

@@ -0,0 +1 @@
+{"file":"mg-input-checkbox.js","mappings":"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","names":["MgInputCheckbox"],"sources":["src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.scss?tag=mg-input-checkbox&encapsulation=shadow","src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.tsx"],"sourcesContent":["@use '../styles/mg-input.scss';\n@use '../styles/mg-input-fieldset.scss';\n@use '../../../../styles/a11y.scss';\n\n$checkbox-multi-spacer: 0.4rem;\n\n@mixin flex-container($spacer-ratio: 1, $direction: row, $wrap: wrap) {\n  display: flex;\n  flex-wrap: $wrap;\n  gap: calc(#{$checkbox-multi-spacer} * #{$spacer-ratio});\n  flex-direction: $direction;\n}\n\n/**\n* checkbox multi\n*/\n.mg-input.mg-input--checkbox-multi {\n  .mg-input__input-checkbox-multi {\n    display: flex;\n    flex-wrap: wrap;\n    gap: calc(var(--mg-inputs-spacer) * 1.2);\n    &--with-values.mg-input__input-checkbox-multi {\n      gap: $checkbox-multi-spacer;\n    }\n    &-values-container {\n      @include flex-container();\n      margin: 0;\n      padding: 0;\n      list-style: none;\n    }\n    &-value {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      box-sizing: border-box;\n      min-height: var(--default-size);\n      min-width: var(--default-size);\n      padding: calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;\n      background-color: hsl(var(--mg-color-dark-5-hsl));\n      border-radius: 0.3rem;\n      font-size: var(--font-size);\n    }\n    &-no-result {\n      text-align: center;\n    }\n    &-text,\n    &-title {\n      display: inline;\n      margin: 0;\n      color: hsl(var(--mg-color-dark-40-hsl));\n    }\n    &-title {\n      margin: 0 1.1rem;\n    }\n    &-sections {\n      @include flex-container(1, column);\n      &-container {\n        @include flex-container(0, column, nowrap);\n        max-height: 80vh;\n        padding-right: 1rem;\n        overflow-y: auto;\n      }\n    }\n    &-section-header {\n      @include flex-container(2);\n      align-items: center;\n      min-height: var(--default-size);\n    }\n    &-inputs {\n      margin: 0;\n      padding: $checkbox-multi-spacer calc(#{$checkbox-multi-spacer} * 2) $checkbox-multi-spacer calc(#{$checkbox-multi-spacer} / 2);\n    }\n  }\n\n  &:not(.mg-input--label-on-top) mg-tooltip {\n    margin-left: var(--mg-inputs-spacer);\n  }\n  mg-popover {\n    --mg-popover-min-width: 7rem;\n    --mg-card-padding: calc(#{$checkbox-multi-spacer} * 2);\n    &-content [slot='content'] {\n      @include flex-container(2, column);\n      .mg-input__input-group {\n        margin-left: calc(#{$checkbox-multi-spacer} * 2);\n      }\n    }\n  }\n  mg-input-text {\n    --mg-inputs-margin-bottom: 0;\n  }\n}\n","/* eslint-disable jsx-a11y/no-redundant-roles */\nimport { Component, Element, Event, h, Prop, EventEmitter, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\nimport { CheckboxItem, CheckboxType, CheckboxValue, checkboxTypes, SearchValueType, SectionKind, MgInputCheckboxListProps } from './mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from './MgInputCheckboxList';\n\n/**\n * type CheckboxItem validation function\n * @param items - Checkbox item\n * @returns match item type\n */\nconst isCheckboxItems = (items: unknown): items is CheckboxItem[] =>\n  Array.isArray(items) &&\n  items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);\n\n@Component({\n  tag: 'mg-input-checkbox',\n  styleUrl: 'mg-input-checkbox.scss',\n  shadow: true,\n})\nexport class MgInputCheckbox implements Omit<MgInputCheckboxListProps, 'id' | 'checkboxes' | 'messages'> {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private mgPopover: HTMLMgPopoverElement;\n  private searchInput: HTMLInputElement;\n\n  // Locales\n  private messages;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n\n  private mode: 'custom' | 'auto' = 'custom';\n\n  // style\n  private readonly baseClassName = 'mg-input--checkbox';\n\n  // \"multi\" setup\n  private readonly multiStart = 5;\n  private readonly searchStart = 10;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputCheckboxElement;\n\n  /**\n   * Component value\n   * If item.value is `null`, checkbox will be indeterminate by default\n   */\n  @Prop({ mutable: true }) value!: CheckboxValue[];\n  @Watch('value')\n  validateValue(newValue: MgInputCheckbox['value']): void {\n    if (isCheckboxItems(newValue)) {\n      this.checkboxItems = newValue.map((item, index) => ({\n        id: `${this.identifier}_${index}`,\n        title: item.title,\n        value: item.value,\n        disabled: item.disabled,\n        required: item.required,\n        handleInput: this.handleInput.bind(this),\n        handleBlur: this.handleBlur.bind(this),\n        handleKeydown: this.handleKeydown.bind(this),\n      }));\n      this.valueChange.emit(newValue);\n    } else {\n      throw new Error('<mg-input-checkbox> prop \"value\" is required and all values must be the same type, CheckboxItem.');\n    }\n  }\n\n  /**\n   * Define checkbox type\n   * When it's undefined the type is dynamic:\n   * - With 0-5 items type is 'checkbox'\n   * - With 5-10 items type is 'multi'\n   * When it set the type is locked to the defined value.\n   * When type is dynamic OR with 'multi' type AND Over 10 items \"search\" feature is enabled\n   */\n  @Prop({ mutable: true }) type: CheckboxType;\n  @Watch('type')\n  validateType(newValue: MgInputCheckbox['type']): void {\n    if (newValue !== undefined && !checkboxTypes.includes(newValue)) {\n      throw new Error('<mg-input-checkbox> prop \"type\" must be a CheckboxType.');\n    } else if (newValue === undefined) {\n      this.mode = 'auto';\n      this.type = checkboxTypes[0];\n    } else {\n      const className = `${this.baseClassName}-multi`;\n      if (newValue === 'multi') {\n        this.classCollection.add(className);\n        this.element.dataset.mgPopoverGuard = this.getMgPopoverIdentifier();\n      } else this.classCollection.delete(className);\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   * Define input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name = this.identifier;\n\n  /**\n   * Define input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if inputs are display verticaly\n   */\n  @Prop() inputVerticalList = false;\n\n  /**\n   * Define if mg-input-checkbox is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if mg-input-checkbox is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Display selected values list in \"multi\" type\n   */\n  @Prop() displaySelectedValues: boolean;\n  @Watch('displaySelectedValues')\n  validateDisplaySelectedValues(newValue: MgInputCheckbox['displaySelectedValues']): void {\n    if (newValue !== undefined && this.type !== 'multi') throw new Error('<mg-input-checkbox> prop \"displaySelectedValues\" can only be used with prop type \"multi\".');\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 (prop !== 'readonly') this.updateCheckboxItems(prop, newValue);\n    this.checkValidity();\n    if (this.hasDisplayedError) {\n      this.hasDisplayedError = prop !== 'required';\n      this.setErrorMessage(this.hasDisplayedError);\n    }\n  }\n\n  @Watch('disabled')\n  validateDisabled(newValue: MgInputCheckbox['disabled']): void {\n    const className = `${this.baseClassName}-multi-disabled`;\n    if (newValue && this.type === 'multi') this.classCollection.add(className);\n    else this.classCollection.delete(className);\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([this.baseClassName]);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Formated value to display in list\n   */\n  @State() checkboxItems: CheckboxItem[] = [];\n  @Watch('checkboxItems')\n  validateCheckboxItems(newValue: MgInputCheckbox['checkboxItems']): void {\n    if (this.mode === 'auto' && newValue.length > this.multiStart) this.type = 'multi';\n    if (this.mode === 'auto' || (this.type === 'multi' && newValue.length > this.searchStart)) {\n      this.displaySearchInput = this.type === 'multi';\n      // refresh search values\n      this.updateSearchResults();\n    }\n  }\n\n  /**\n   * Display search input\n   */\n  @State() displaySearchInput: boolean;\n\n  /**\n   * Search value query\n   */\n  @State() searchValue: SearchValueType = '';\n  @Watch('searchValue')\n  validateSearchValue(): void {\n    // refresh search values\n    this.updateSearchResults();\n  }\n\n  /**\n   * Search current page\n   */\n  @State() searchResults: CheckboxItem[] = [];\n\n  /**\n   * Emitted event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<MgInputCheckbox['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<MgInputCheckbox['valid']>;\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    this.checkValidity();\n    this.setErrorMessage();\n    this.hasDisplayedError = this.invalid;\n  }\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: MgInputCheckbox['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-checkbox> method \"setError()\" param \"valid\" must be a boolean');\n    } else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {\n      throw new Error('<mg-input-checkbox> method \"setError()\" param \"errorMessage\" must be a string');\n    } else {\n      this.setValidity(valid);\n      this.setErrorMessage(undefined, valid ? undefined : errorMessage);\n      this.hasDisplayedError = this.invalid;\n    }\n  }\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputCheckbox['valid']) {\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    this.inputValid.emit(this.valid);\n  }\n\n  /**\n   * Handle input event\n   * @param event - input event\n   */\n  private handleInput = (event: InputEvent & { target: HTMLInputElement }): void => {\n    this.updateCheckboxItems('value', Boolean(event.target.checked), item => item.id === event.target.id);\n    this.updateValues();\n    this.checkValidity();\n  };\n\n  /**\n   * Keyboard handler\n   * @param event - to trak \"tab\" key\n   */\n  private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n    // track \"Tab\" key event when popover display (is \"multi\" type selected)\n    if (event.key === 'Tab' && this.mgPopover?.display) {\n      // when search input and do a back tab we close the popover\n      if (Boolean(this.searchInput) && event.shiftKey && this.searchInput.id === event.target.id) {\n        this.mgPopover.display = false;\n        return;\n      }\n\n      const enableInputs = Array.from(this.element.shadowRoot.querySelectorAll('input'))\n        .filter(input => !Boolean(input.getAttribute('disabled')))\n        .map(({ id }) => id);\n      const originInputIndex = enableInputs.findIndex(id => id === event.target.id);\n\n      // close popover when tab trigger focus outside its DOM\n      if ((originInputIndex + 1 >= enableInputs.length && !event.shiftKey) || (originInputIndex === 0 && event.shiftKey && !Boolean(this.searchInput)))\n        this.mgPopover.display = false;\n    }\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    // Check validity\n    this.checkValidity();\n    this.setErrorMessage();\n  };\n\n  /**\n   * Handle input search value-change event\n   * @param event - input value-change event\n   */\n  private handleSearchChange = (event: CustomEvent): void => {\n    this.searchValue = event.detail;\n  };\n\n  /**\n   * popover display-change handler\n   * @param event - mg-popover display-change custom event\n   */\n  private handleMgPopoverDisplayChange = (event: CustomEvent): void => {\n    // reset search value\n    if (!event.detail) {\n      this.searchValue = '';\n      this.checkValidity();\n    }\n  };\n\n  /**\n   * Handle select all button\n   * @param event - mass action event trigger a global select/unselect on values\n   */\n  private handleMassAction = (event: CustomEvent): void => {\n    this.updateCheckboxItems('value', event.detail !== 'selected');\n    this.updateValues();\n  };\n\n  /**\n   * Update values\n   */\n  private updateValues = (): void => {\n    this.value = this.checkboxItems.map(o => ({ value: o.value, title: o.title, disabled: o.disabled }));\n  };\n\n  /**\n   * Update ckecboxes item\n   * @param key - property to update\n   * @param newValue - value to update with\n   * @param condition - condtion to applu change on item\n   */\n  private updateCheckboxItems(key: string, newValue: unknown, condition?: (item: CheckboxItem) => boolean): void {\n    this.checkboxItems = this.checkboxItems.map(item => {\n      if ((typeof condition === 'function' && condition(item)) || condition === undefined) item[key] = newValue;\n      return item;\n    });\n  }\n\n  /**\n   * get invalid element\n   * @returns element\n   */\n  private getInvalidElement = (): HTMLInputElement => {\n    const items: HTMLInputElement[] = Array.from(this.element.shadowRoot.querySelectorAll('input[type=\"checkbox\"]'));\n    return items.find(input => input !== null && !input.disabled && !input.checkValidity());\n  };\n\n  /**\n   * Method to update searchResults\n   */\n  private updateSearchResults = (): void => {\n    this.searchResults = this.checkboxItems.filter(item => item.title.toLocaleLowerCase().includes(this.searchValue.trim().toLocaleLowerCase()));\n  };\n\n  /**\n   * Methode to validate if one of inputs value is checked id required\n   * @returns truthy if condition is valid\n   */\n  private validateRequired = (): boolean => !this.required || this.checkboxItems.some(({ value }) => value);\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || (this.getInvalidElement() === undefined && this.validateRequired()));\n  };\n\n  /**\n   * Render button text\n   * @param selectedValuesNb - nb of selected values\n   * @returns translated message\n   */\n  private renderButtonText = (selectedValuesNb: number): string => {\n    let messageKey = 'editButton';\n    if (this.disabled) messageKey = 'showButton';\n    else if (selectedValuesNb < 1) messageKey = 'selectButton';\n\n    return this.messages.input.checkbox[messageKey];\n  };\n\n  /**\n   * Set input error message\n   * @param displayError - dispay error condition\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (displayError = true, errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    if (displayError && !this.valid) {\n      if (errorMessage !== undefined) this.errorMessage = errorMessage;\n      else if (!this.validateRequired()) this.errorMessage = this.messages.errors.required;\n    }\n  };\n\n  /**\n   * Method to get mg-popover identifier\n   * @returns MgPopover identifier\n   */\n  private getMgPopoverIdentifier = (): string => `${this.identifier}-input-mg-popover`;\n\n  /**\n   * Manage items to display depending on the search state\n   * @returns items to display\n   */\n  private getDisplayItems = (): CheckboxItem[] => (this.searchValue.length > 0 ? this.searchResults : this.checkboxItems);\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.validateType(this.type);\n    this.validateValue(this.value);\n    this.validateDisabled(this.disabled);\n    this.validateDisplaySelectedValues(this.displaySelectedValues);\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   * add listeners\n   */\n  componentDidLoad(): void {\n    this.searchInput = this.element.shadowRoot.querySelector('mg-input-text')?.shadowRoot.querySelector('input');\n    this.searchInput?.addEventListener('keydown', this.handleKeydown);\n  }\n\n  /**\n   * Render checkbox multi display values\n   * @param selectedValuesNb - selected values length\n   * @returns display selected values\n   */\n  private renderCheckboxMultiDisplaySelectedValues(selectedValuesNb: number): HTMLElement {\n    if (this.displaySelectedValues) {\n      return (\n        selectedValuesNb > 0 && (\n          <ul role=\"list\" class=\"mg-input__input-checkbox-multi-values-container\">\n            {this.checkboxItems\n              .filter(({ value }) => value)\n              .map(({ title }) => (\n                <li class=\"mg-input__input-checkbox-multi-value\" key={title}>\n                  {title}\n                </li>\n              ))}\n          </ul>\n        )\n      );\n    } else {\n      return <strong>{this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)}</strong>;\n    }\n  }\n\n  /**\n   * Render checkboxes by section\n   * @param checkboxes - checkboxes to render\n   * @returns render sections of checkboxes\n   */\n  private renderCheckboxBySection(checkboxes: CheckboxItem[]): HTMLElement[] {\n    const [checkedValues, notCheckedValues] = checkboxes.reduce(\n      (acc, curr) => {\n        acc[curr.value ? 0 : 1].push(curr);\n        return acc;\n      },\n      [[], []],\n    );\n\n    const baseSection = {\n      readonly: this.readonly,\n      disabled: this.disabled,\n      identifier: this.identifier,\n    };\n\n    const sections = [\n      {\n        ...baseSection,\n        sectionKind: SectionKind.SELECTED,\n        checkboxes: checkedValues,\n        messages: this.messages.input.checkbox.sections.selected,\n      },\n      {\n        ...baseSection,\n        sectionKind: SectionKind.NOT_SELECTED,\n        checkboxes: notCheckedValues,\n        messages: this.messages.input.checkbox.sections.notSelected,\n      },\n    ];\n\n    return sections.map(section => <mg-input-checkbox-paginated {...section} onMass-action={this.handleMassAction}></mg-input-checkbox-paginated>);\n  }\n\n  /**\n   * render checkbox multi element\n   * @returns html element\n   */\n  private renderCheckboxMulti(): HTMLElement[] {\n    const selectedValuesNb = this.checkboxItems.filter(({ value }) => value).length;\n    const checkboxes = this.getDisplayItems();\n\n    return (\n      <div class={{ 'mg-input__input-container': true, 'mg-input__input-checkbox-multi': true, 'mg-input__input-checkbox-multi--with-values': this.displaySelectedValues }}>\n        {this.renderCheckboxMultiDisplaySelectedValues(selectedValuesNb)}\n        <mg-popover\n          arrowHide={true}\n          identifier={this.getMgPopoverIdentifier()}\n          onDisplay-change={this.handleMgPopoverDisplayChange}\n          ref={(el: HTMLMgPopoverElement) => {\n            if (Boolean(el)) this.mgPopover = el;\n          }}\n        >\n          <mg-button variant=\"secondary\">\n            <mg-icon icon=\"list\"></mg-icon>\n            {this.renderButtonText(selectedValuesNb)}\n          </mg-button>\n          <div slot=\"content\">\n            {this.displaySearchInput && [\n              <mg-input-text\n                key=\"input-search\"\n                identifier={`${this.identifier}-input-search`}\n                icon=\"magnifying-glass\"\n                type=\"search\"\n                placeholder={this.messages.input.checkbox.label}\n                label={this.messages.input.checkbox.label}\n                mgWidth=\"full\"\n                value={this.searchValue}\n                labelHide={true}\n                displayCharacterLeft={false}\n                name=\"q\"\n                onValue-change={this.handleSearchChange}\n                aria-controls=\"search-results items-list\"\n              ></mg-input-text>,\n              <p key=\"search-results\" role=\"status\" class=\"sr-only\" id=\"search-results\">\n                {`${checkboxes.length} ${this.messages.input.checkbox[checkboxes.length > 0 ? 'results' : 'result']}`}\n              </p>,\n            ]}\n            {this.displaySearchInput ? (\n              <div class=\"mg-input__input-checkbox-multi-sections-container\">{this.renderCheckboxBySection(checkboxes)}</div>\n            ) : (\n              <MgInputCheckboxList\n                checkboxes={checkboxes}\n                inputVerticalList={true}\n                type={this.type}\n                readonly={this.readonly}\n                displaySearchInput={this.displaySearchInput}\n                messages={this.messages.input.checkbox}\n                id=\"checkboxes-list\"\n                disabled={this.disabled}\n                name={this.name}\n              ></MgInputCheckboxList>\n            )}\n            {this.displaySearchInput && checkboxes.length === 0 && <p class=\"mg-input__input-checkbox-multi-no-result\">{this.messages.input.checkbox.noResult}</p>}\n          </div>\n        </mg-popover>\n      </div>\n    );\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.readonly ? this.required : undefined} // required is only used display asterisk\n        readonly={undefined}\n        mgWidth={undefined}\n        disabled={this.disabled}\n        value={this.value && this.value.toString()}\n        readonlyValue={undefined}\n        tooltip={!this.readonly ? this.tooltip : undefined}\n        helpText={!this.readonly ? this.helpText : undefined}\n        errorMessage={!this.readonly ? this.errorMessage : undefined}\n        isFieldset={true}\n      >\n        {this.type === 'checkbox' || this.readonly ? (\n          <MgInputCheckboxList\n            checkboxes={this.checkboxItems}\n            inputVerticalList={this.inputVerticalList}\n            type={this.type}\n            readonly={this.readonly}\n            displaySearchInput={this.displaySearchInput}\n            messages={this.messages.input.checkbox}\n            id=\"checkboxes-list\"\n            disabled={this.disabled}\n            name={this.name}\n          ></MgInputCheckboxList>\n        ) : (\n          this.renderCheckboxMulti()\n        )}\n      </MgInput>\n    );\n  }\n}\n"],"version":3}

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

@@ -17,7 +17,7 @@ var InputError;
 
 const mgInputDateCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}";
 
-const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -47,10 +47,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      */
     this.checkValidity = () => {
       var _a;
-      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
-      this.invalid = !this.valid;
-      // We need to send valid event even if it is the same value
-      this.inputValid.emit(this.valid);
+      this.setValidity(this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true));
     };
     /**
      * get input error code
@@ -79,15 +76,19 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     };
     /**
      * Check input errors
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = () => {
+    this.setErrorMessage = (errorMessage) => {
       var _a;
       // Set error message
       this.errorMessage = undefined;
       if (!this.valid) {
         const inputError = this.getInputError();
+        if (errorMessage !== undefined) {
+          this.errorMessage = errorMessage;
+        }
         // required
-        if (inputError === InputError.REQUIRED) {
+        else if (inputError === InputError.REQUIRED) {
           this.errorMessage = this.messages.errors[inputError];
         }
         // min, max & minMax
@@ -146,13 +147,44 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   /**
-   * Public method to display errors
+   * 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-date> method "setError()" param "valid" must be a boolean');
+    }
+    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      throw new Error('<mg-input-date> 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 *
    *************/
@@ -214,7 +246,15 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "max": [1],
     "classCollection": [32],
     "errorMessage": [32],
-    "displayError": [64]
+    "displayError": [64],
+    "setError": [64]
+  }, undefined, {
+    "value": ["validateValue"],
+    "required": ["handleValidityChange"],
+    "readonly": ["handleValidityChange"],
+    "disabled": ["handleValidityChange"],
+    "min": ["validateMinMax"],
+    "max": ["validateMinMax"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -255,3 +295,5 @@ const MgInputDate = MgInputDate$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputDate, defineCustomElement };
+
+//# sourceMappingURL=mg-input-date.js.map

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

@@ -0,0 +1 @@
+{"file":"mg-input-date.js","mappings":"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","names":["MgInputDate"],"sources":["src/components/molecules/inputs/mg-input-date/mg-input-date.conf.ts","src/components/molecules/inputs/mg-input-date/mg-input-date.scss?tag=mg-input-date&encapsulation=shadow","src/components/molecules/inputs/mg-input-date/mg-input-date.tsx"],"sourcesContent":["export enum InputError {\n  MIN = 'min',\n  MAX = 'max',\n  MINMAX = 'minMax',\n  REQUIRED = 'required',\n}\n","@use '../styles/mg-input.scss';\n@use '../styles/mg-input-box.scss';\n@use '../../../../styles/a11y.scss';\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { InputError } from './mg-input-date.conf';\nimport { ClassList } from '../../../../utils/components.utils';\nimport { localeDate, dateRegExp } from '../../../../utils/locale.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n  tag: 'mg-input-date',\n  styleUrl: './mg-input-date.scss',\n  shadow: true,\n})\nexport class MgInputDate {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private input: HTMLInputElement;\n\n  // Locales\n  private messages;\n  private locale: string;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputDateElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  @Watch('value')\n  validateValue(newValue: MgInputDate['value']): void {\n    // When the input is not fully completed or has been cleared, the value becomes an empty string.\n    if (newValue === '') newValue = null;\n    if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !dateRegExp.test(newValue))) {\n      throw new Error(\"<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd\");\n    } else {\n      this.valueChange.emit(newValue);\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (this.input !== undefined) {\n      this.input[prop] = newValue;\n      this.checkValidity();\n      if (this.hasDisplayedError) {\n        this.setErrorMessage();\n        this.hasDisplayedError = false;\n      }\n    }\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText: string;\n\n  /**\n   * Define input valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Define input minimum date\n   * format: yyyy-mm-dd\n   */\n  @Prop() min: string;\n\n  /**\n   * Define input maximum date\n   * format: yyyy-mm-dd\n   */\n  @Prop() max: string;\n  @Watch('min')\n  @Watch('max')\n  validateMinMax(newValue: string): void {\n    if (newValue?.length === 0 || (newValue?.length > 0 && !(typeof newValue === 'string' && dateRegExp.test(newValue)))) {\n      throw new Error(\"<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd\");\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-input--date']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<string>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    this.checkValidity();\n    this.setErrorMessage();\n    this.hasDisplayedError = this.invalid;\n  }\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: MgInputDate['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-date> method \"setError()\" param \"valid\" must be a boolean');\n    } else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {\n      throw new Error('<mg-input-date> method \"setError()\" param \"errorMessage\" must be a string');\n    } else {\n      this.setValidity(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n      this.hasDisplayedError = this.invalid;\n    }\n  }\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputDate['valid']) {\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    this.inputValid.emit(this.valid);\n  }\n\n  /**\n   * Handle input event\n   */\n  private handleInput = (): void => {\n    this.checkValidity();\n    if (this.hasDisplayedError) {\n      this.setErrorMessage();\n    }\n    this.value = this.input.value;\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    this.displayError();\n  };\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true));\n  };\n\n  /**\n   * get input error code\n   * @returns error code\n   */\n  private getInputError = (): null | InputError => {\n    let inputError = null;\n\n    // required\n    if (this.input.validity.valueMissing) {\n      inputError = InputError.REQUIRED;\n    }\n    // min & max\n    else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && this.min?.length > 0 && this.max?.length > 0) {\n      inputError = InputError.MINMAX;\n    }\n    // min\n    else if (this.input.validity.rangeUnderflow) {\n      inputError = InputError.MIN;\n    }\n    //max\n    else if (this.input.validity.rangeOverflow) {\n      inputError = InputError.MAX;\n    }\n\n    return inputError;\n  };\n\n  /**\n   * Check input errors\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    if (!this.valid) {\n      const inputError = this.getInputError();\n      if (errorMessage !== undefined) {\n        this.errorMessage = errorMessage;\n      }\n      // required\n      else if (inputError === InputError.REQUIRED) {\n        this.errorMessage = this.messages.errors[inputError];\n      }\n      // min, max & minMax\n      else if ([InputError.MIN, InputError.MAX, InputError.MINMAX].includes(inputError)) {\n        this.errorMessage = this.messages.errors.date[inputError].replace('{min}', localeDate(this.min, this.locale)).replace('{max}', localeDate(this.max, this.locale));\n      }\n      // wrong date format\n      // element.validity.badInput is default error message\n      else {\n        this.errorMessage = this.messages.errors.date.badInput.replace('{min}', this.min?.length > 0 ? localeDate(this.min, this.locale) : localeDate('1900-01-01', this.locale));\n      }\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   * @returns timeout\n   */\n  componentWillLoad(): ReturnType<typeof setTimeout> {\n    // Get locales\n    const locales = initLocales(this.element);\n    this.locale = locales.locale;\n    this.messages = locales.messages;\n    // Validate\n    this.validateValue(this.value);\n    this.validateMinMax(this.min);\n    this.validateMinMax(this.max);\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <MgInput\n        identifier={this.identifier}\n        classCollection={this.classCollection}\n        ariaDescribedbyIDs={[]}\n        label={this.label}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        readonly={this.readonly}\n        mgWidth={undefined}\n        disabled={this.disabled}\n        value={this.value}\n        readonlyValue={localeDate(this.value, this.locale)}\n        tooltip={this.tooltip}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n        isFieldset={false}\n      >\n        <input\n          type=\"date\"\n          class=\"mg-input__box\"\n          min={this.min}\n          max={this.max}\n          value={this.value}\n          id={this.identifier}\n          name={this.name}\n          disabled={this.disabled}\n          required={this.required}\n          onInput={this.handleInput}\n          onBlur={this.handleBlur}\n          ref={(el: HTMLInputElement) => {\n            if (el !== null) this.input = el;\n          }}\n        />\n      </MgInput>\n    );\n  }\n}\n"],"version":3}

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

@@ -21,7 +21,7 @@ var InputError;
 
 const mgInputNumericCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-input .mg-input__box{text-align:var(--mg-inputs-text-align, right)}";
 
-const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -61,20 +61,21 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
      * Check if input is valid
      */
     this.checkValidity = () => {
-      this.valid = this.readonly || this.disabled || this.getInputError() === null;
-      this.invalid = !this.valid;
-      // We need to send valid event even if it is the same value
-      this.inputValid.emit(this.valid);
+      this.setValidity(this.readonly || this.disabled || this.getInputError() === null);
     };
     /**
      * Set input error message
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = () => {
+    this.setErrorMessage = (errorMessage) => {
       // Set error message
       this.errorMessage = undefined;
       if (!this.valid) {
         const inputError = this.getInputError();
-        if (inputError === InputError.REQUIRED) {
+        if (errorMessage !== undefined) {
+          this.errorMessage = errorMessage;
+        }
+        else if (inputError === InputError.REQUIRED) {
           this.errorMessage = this.messages.errors[inputError];
         }
         else {
@@ -168,36 +169,6 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       this.updateValues(newValue);
     }
   }
-  /**
-   * Checks if the given value is valid according to the defined rules.
-   * @param value - The input value to validate.
-   * @param regex - The regular expression for validation.
-   * @param integer - The integer part of the value.
-   * @param decimal - The decimal part of the value.
-   * @returns Returns true if the value is valid, otherwise false.
-   */
-  isValidValue(value, regex, integer, decimal) {
-    return ['', '-'].includes(value) || (value.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength));
-  }
-  /**
-   * Handles invalid input values and returns a corrected value.
-   * @returns The corrected value.
-   */
-  handleInvalidValue() {
-    return this.storedValue !== undefined ? this.storedValue : null;
-  }
-  /**
-   * Updates the component values based on the validated input value.
-   * @param newValue - The validated input value.
-   */
-  updateValues(newValue) {
-    this.value = newValue;
-    if (this.input !== undefined)
-      this.input.value = this.value;
-    this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
-    this.valueChange.emit(this.numericValue);
-    this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
-  }
   handleValidityChange(newValue, _oldValue, prop) {
     if (this.input !== undefined) {
       this.input[prop] = newValue;
@@ -224,13 +195,74 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     }
   }
   /**
-   * Public method to display errors
+   * 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-numeric> method "setError()" param "valid" must be a boolean');
+    }
+    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      throw new Error('<mg-input-numeric> 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);
+  }
+  /**
+   * Checks if the given value is valid according to the defined rules.
+   * @param value - The input value to validate.
+   * @param regex - The regular expression for validation.
+   * @param integer - The integer part of the value.
+   * @param decimal - The decimal part of the value.
+   * @returns Returns true if the value is valid, otherwise false.
+   */
+  isValidValue(value, regex, integer, decimal) {
+    return ['', '-'].includes(value) || (value.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength));
+  }
+  /**
+   * Handles invalid input values and returns a corrected value.
+   * @returns The corrected value.
+   */
+  handleInvalidValue() {
+    return this.storedValue !== undefined ? this.storedValue : null;
+  }
+  /**
+   * Updates the component values based on the validated input value.
+   * @param newValue - The validated input value.
+   */
+  updateValues(newValue) {
+    this.value = newValue;
+    if (this.input !== undefined)
+      this.input.value = this.value;
+    this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
+    this.valueChange.emit(this.numericValue);
+    this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
+  }
   /**
    * Displayed value in input
    * Change on focus/blur
@@ -311,7 +343,16 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "classCollection": [32],
     "errorMessage": [32],
     "hasFocus": [32],
-    "displayError": [64]
+    "displayError": [64],
+    "setError": [64]
+  }, undefined, {
+    "value": ["validateValue"],
+    "required": ["handleValidityChange"],
+    "readonly": ["handleValidityChange"],
+    "disabled": ["handleValidityChange"],
+    "type": ["validateType"],
+    "integerLength": ["validateIntegerLength"],
+    "decimalLength": ["validateDecimalLength"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -352,3 +393,5 @@ const MgInputNumeric = MgInputNumeric$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputNumeric, defineCustomElement };
+
+//# sourceMappingURL=mg-input-numeric.js.map