@mgdis/mg-components 5.27.0 → 5.27.2

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

@@ -1 +1 @@
-{"file":"mg-input-checkbox-paginated2.js","mappings":"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","names":[],"sources":["src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts","src/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.tsx","src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"sourcesContent":["/**\n * interface CheckboxValue\n * use to match returned value\n */\nexport interface CheckboxValue {\n  title: string;\n  value: boolean | null;\n  disabled?: boolean;\n  required?: boolean;\n}\n\n/**\n * interface CheckboxItem\n * use to match checkbox attributes\n */\nexport interface CheckboxItem extends CheckboxValue {\n  _id: string;\n  _handleInput: (event: InputEvent & { target: HTMLInputElement }) => void;\n  _handleBlur: () => void;\n  _handleKeydown: (event: KeyboardEvent & { target: HTMLElement }) => void;\n}\n\n/**\n * List of all availables checkbox type\n */\nexport const checkboxTypes = ['checkbox', 'multi'] as const;\n\n/**\n * ChecboxType from checkbox types\n */\nexport type CheckboxType = (typeof checkboxTypes)[number];\n\n/**\n * mg-input-checkbox-paginated section kind\n */\nexport enum SectionKind {\n  SELECTED = 'selected',\n  NOT_SELECTED = 'not-selected',\n}\n\n/**\n * mg-input-checkbox-paginated section title kind\n */\nexport enum SectionTitleKind {\n  BUTTON = 'button',\n  TEXT = 'text',\n}\n\n/**\n * Base mg-input-checkbox interface\n */\nexport interface IMgInputCheckboxBase {\n  disabled?: boolean;\n  name?: string;\n  invalid?: boolean;\n}\n\n/**\n * mg-input-checkbox-list interface\n */\nexport interface MgInputCheckboxListProps extends IMgInputCheckboxBase {\n  displaySearchInput: boolean;\n  messages: Record<string, unknown>;\n  checkboxes: CheckboxItem[];\n  id: string;\n}\n\n/**\n * Define select values button key\n */\nexport enum SelectValuesButtonKey {\n  EDIT = 'editButton',\n  SHOW = 'showButton',\n  SELECT = 'selectButton',\n}\n","import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { MgInputCheckboxListProps } from './mg-input-checkbox.conf';\n\n/**\n * Get checkboxes list template\n * @param props - MgInputCheckboxList Interface Props\n * @returns input template\n */\nexport const MgInputCheckboxList: FunctionalComponent<MgInputCheckboxListProps> = (props: MgInputCheckboxListProps): VNode[] => (\n  // eslint-disable-next-line jsx-a11y/no-redundant-roles\n  <ul\n    class=\"mg-c-input__input-group-container\"\n    role=\"list\"\n    aria-describedby={props.displaySearchInput ? 'search-results' : undefined}\n    aria-label={props.displaySearchInput ? props.messages.searchResults : undefined}\n    aria-live={props.displaySearchInput ? 'polite' : undefined}\n    id={props.id}\n  >\n    {props.checkboxes.map(input => (\n      <li key={input._id} class={{ 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled }}>\n        <input\n          type=\"checkbox\"\n          id={input._id}\n          name={props.name}\n          value={input.value?.toString()}\n          checked={Boolean(input.value)}\n          required={input.required}\n          aria-invalid={props.invalid?.toString() || 'false'}\n          disabled={props.disabled || input.disabled}\n          indeterminate={input.value === null}\n          onInput={input._handleInput}\n          onBlur={input._handleBlur}\n          onKeyDown={input._handleKeydown}\n        />\n        <label htmlFor={input._id}>{input.title}</label>\n      </li>\n    ))}\n  </ul>\n);\n","import { Component, h, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\nimport { CheckboxItem, IMgInputCheckboxBase, SectionKind, SectionTitleKind } from '../mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from '../MgInputCheckboxList';\n\n/**\n * Internal component use to manage sections instances\n */\n@Component({\n  tag: 'mg-input-checkbox-paginated',\n  shadow: false,\n  scoped: true,\n})\nexport class MgInputCheckboxPaginated implements IMgInputCheckboxBase {\n  /*************\n   * Constantes *\n   *************/\n  private readonly offset = 10;\n\n  /*************\n   * Decorators *\n   *************/\n\n  /**\n   * Define if mg-input-checkbox-list is readonly\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Define if mg-input-checkbox-list is disabled\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Define mg-input-checkbox input name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Define mg-input-checkbox input invalid\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Current page\n   */\n  @Prop({ mutable: true }) currentPage = 1;\n\n  /**\n   * Define checkboxes to paginate\n   */\n  @Prop() checkboxes: CheckboxItem[] = [];\n  @Watch('checkboxes')\n  validateCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue: MgInputCheckboxPaginated['checkboxes']): void {\n    const pageCountNewValue = this.getPageCount(newValue);\n    const pageCountOldValue = this.getPageCount(oldValue);\n    // after each array.length update we reset pagination\n    // when items fill on page, we set current page to 1\n    if (pageCountNewValue === 1 || (pageCountNewValue !== 0 && this.currentPage === 0)) {\n      this.currentPage = 1;\n    }\n    // when old items page numbers match the current page AND new items page number is lower than current page, we set the new last page\n    else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {\n      this.currentPage--;\n    }\n  }\n\n  /**\n   * Define section kind\n   */\n  @Prop() sectionKind?: SectionKind;\n  @Watch('sectionKind')\n  validateSectionKind(newValue: MgInputCheckboxPaginated['sectionKind']): void {\n    if (newValue === SectionKind.SELECTED) this.titleKind = SectionTitleKind.BUTTON;\n    else this.titleKind = SectionTitleKind.TEXT;\n  }\n\n  /**\n   * Define component message\n   */\n  @Prop() messages: Record<string, string>;\n\n  /**\n   * Emit 'mass-action' event\n   * used to informe that select-all/unselect-all button listner is triggered\n   */\n  @Event({ eventName: 'mass-action' }) massAction: EventEmitter<HTMLMgInputCheckboxPaginatedElement['sectionKind']>;\n\n  /**\n   * Define section title\n   */\n  @State() titleKind: SectionTitleKind;\n\n  /**\n   * Is checked items values expanded\n   */\n  @State() expanded = true;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * Mass action handler\n   */\n  private massActionHandler = (): void => {\n    this.massAction.emit(this.sectionKind);\n  };\n\n  /**\n   * Toggle items button handler\n   */\n  private handleToggleClick = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  /**\n   * Method to get a array range\n   * @param from - array start index\n   * @param to - array end index\n   * @returns array's range\n   */\n  private getArrayRange = <ItemType,>(array: ItemType[], from: number, to: number): ItemType[] => array.slice(from, to);\n\n  /**\n   * Get from and to index\n   * @returns [from,to] index\n   */\n  private getFromToIndexes(): number[] {\n    const isFirstPage = this.currentPage === 1;\n    const from = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;\n    const to = isFirstPage ? this.offset : this.currentPage * this.offset;\n    return [from, to];\n  }\n\n  /**\n   * Method to get page count from items\n   * @param items - items to count\n   * @returns page count from items\n   */\n  private getPageCount = (item: unknown[]): number => Math.ceil(item.length / this.offset);\n\n  /**\n   * Handle mg-pagination current page change event\n   * @param event - pagination current page change event\n   */\n  private handleCurrentPageChange = (event: CustomEvent): void => {\n    this.currentPage = Number(event.detail);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateSectionKind(this.sectionKind);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const getText = (checkboxes: CheckboxItem[]): HTMLElement => (\n      <em class=\"mg-c-input__section-header-title-label\">{`${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`}</em>\n    );\n    const [from, to] = this.getFromToIndexes();\n    const itemsContainerId = `items-${this.sectionKind}-container`;\n\n    return (\n      <Host hidden={this.checkboxes.length < 1}>\n        <div class=\"mg-c-input__section-header\">\n          {this.titleKind === SectionTitleKind.BUTTON ? (\n            <mg-button variant=\"flat\" onClick={this.handleToggleClick} aria-controls={itemsContainerId} aria-expanded={this.expanded.toString()}>\n              <mg-icon icon={this.expanded ? 'chevron-up' : 'chevron-down'} size=\"small\"></mg-icon>\n              <span class=\"mg-c-input__section-header-title\">{getText(this.checkboxes)}</span>\n            </mg-button>\n          ) : (\n            <p class=\"mg-c-input__section-header-title mg-c-input__section-header-title--static\">{getText(this.checkboxes)}</p>\n          )}\n          {((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (\n            <mg-tooltip class=\"mg-c-input__section-header-tootlip\" message={this.messages.tooltip} data-popper-strategy=\"absolute\">\n              <mg-button variant=\"link\" onClick={this.massActionHandler}>\n                {this.messages.action}\n              </mg-button>\n            </mg-tooltip>\n          )}\n          {this.expanded && this.getPageCount(this.checkboxes) > 1 && (\n            <mg-pagination\n              key=\"search-pagination\"\n              totalPages={this.getPageCount(this.checkboxes)}\n              currentPage={this.currentPage}\n              onCurrent-page-change={this.handleCurrentPageChange}\n              hideNavigationLabels={true}\n              hidePageCount={true}\n              identifier={`input-checkbox-pagination-${this.sectionKind}`}\n            ></mg-pagination>\n          )}\n        </div>\n        <div hidden={!this.expanded} id={itemsContainerId} class=\"mg-c-input__section-content\">\n          <MgInputCheckboxList\n            checkboxes={this.getArrayRange(this.checkboxes, from, to)}\n            displaySearchInput={true}\n            messages={this.messages}\n            id={`items-${this.sectionKind}`}\n            disabled={this.disabled}\n            name={this.name}\n            invalid={this.invalid}\n          ></MgInputCheckboxList>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-input-checkbox-paginated2.js","mappings":"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","names":[],"sources":["src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts","src/components/molecules/inputs/mg-input-checkbox/MgInputCheckboxList.tsx","src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.tsx"],"sourcesContent":["/**\n * interface CheckboxValue\n * use to match returned value\n */\nexport interface CheckboxValue {\n  title: string;\n  value: boolean | null;\n  disabled?: boolean;\n  required?: boolean;\n}\n\n/**\n * interface CheckboxItem\n * use to match checkbox attributes\n */\nexport interface CheckboxItem extends CheckboxValue {\n  _id: string;\n  _handleInput: (event: InputEvent & { target: HTMLInputElement }) => void;\n  _handleBlur: () => void;\n  _handleKeydown: (event: KeyboardEvent & { target: HTMLElement }) => void;\n}\n\n/**\n * List of all availables checkbox type\n */\nexport const checkboxTypes = ['checkbox', 'multi'] as const;\n\n/**\n * ChecboxType from checkbox types\n */\nexport type CheckboxType = (typeof checkboxTypes)[number];\n\n/**\n * mg-input-checkbox-paginated section kind\n */\nexport enum SectionKind {\n  SELECTED = 'selected',\n  NOT_SELECTED = 'not-selected',\n}\n\n/**\n * mg-input-checkbox-paginated section title kind\n */\nexport enum SectionTitleKind {\n  BUTTON = 'button',\n  TEXT = 'text',\n}\n\n/**\n * Base mg-input-checkbox interface\n */\nexport interface IMgInputCheckboxBase {\n  disabled?: boolean;\n  name?: string;\n  invalid?: boolean;\n}\n\n/**\n * mg-input-checkbox-list interface\n */\nexport interface MgInputCheckboxListProps extends IMgInputCheckboxBase {\n  displaySearchInput: boolean;\n  messages: Record<string, unknown>;\n  checkboxes: CheckboxItem[];\n  id: string;\n}\n\n/**\n * Define select values button key\n */\nexport enum SelectValuesButtonKey {\n  EDIT = 'editButton',\n  SHOW = 'showButton',\n  SELECT = 'selectButton',\n}\n","import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { MgInputCheckboxListProps } from './mg-input-checkbox.conf';\n\n/**\n * Get checkboxes list template\n * @param props - MgInputCheckboxList Interface Props\n * @returns input template\n */\nexport const MgInputCheckboxList: FunctionalComponent<MgInputCheckboxListProps> = (props: MgInputCheckboxListProps): VNode[] => (\n  // eslint-disable-next-line jsx-a11y/no-redundant-roles\n  <ul\n    class=\"mg-c-input__input-group-container\"\n    role=\"list\"\n    aria-describedby={props.displaySearchInput ? 'search-results' : undefined}\n    aria-label={props.displaySearchInput ? props.messages.searchResults : undefined}\n    aria-live={props.displaySearchInput ? 'polite' : undefined}\n    id={props.id}\n  >\n    {props.checkboxes.map(input => (\n      <li key={input._id} class={{ 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled }}>\n        <input\n          type=\"checkbox\"\n          id={input._id}\n          name={props.name}\n          value={input.value?.toString()}\n          checked={Boolean(input.value)}\n          required={input.required}\n          aria-invalid={props.invalid?.toString() || 'false'}\n          disabled={props.disabled || input.disabled}\n          indeterminate={input.value === null}\n          onInput={input._handleInput}\n          onBlur={input._handleBlur}\n          onKeyDown={input._handleKeydown}\n        />\n        <label htmlFor={input._id}>{input.title}</label>\n      </li>\n    ))}\n  </ul>\n);\n","import { Component, h, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\nimport { CheckboxItem, IMgInputCheckboxBase, SectionKind, SectionTitleKind } from '../mg-input-checkbox.conf';\nimport { MgInputCheckboxList } from '../MgInputCheckboxList';\n\n/**\n * Internal component use to manage sections instances\n */\n@Component({\n  tag: 'mg-input-checkbox-paginated',\n  shadow: false,\n  scoped: true,\n})\nexport class MgInputCheckboxPaginated implements IMgInputCheckboxBase {\n  /*************\n   * Constantes *\n   *************/\n  private readonly offset = 10;\n\n  /*************\n   * Decorators *\n   *************/\n\n  /**\n   * Define if mg-input-checkbox-list is readonly\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Define if mg-input-checkbox-list is disabled\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Define mg-input-checkbox input name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Define mg-input-checkbox input invalid\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Current page\n   */\n  @Prop({ mutable: true }) currentPage = 1;\n\n  /**\n   * Define checkboxes to paginate\n   */\n  @Prop() checkboxes: CheckboxItem[] = [];\n  @Watch('checkboxes')\n  validateCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue: MgInputCheckboxPaginated['checkboxes']): void {\n    const pageCountNewValue = this.getPageCount(newValue);\n    const pageCountOldValue = this.getPageCount(oldValue);\n    // after each array.length update we reset pagination\n    // when items fill on page, we set current page to 1\n    if (pageCountNewValue === 1 || (pageCountNewValue !== 0 && this.currentPage === 0)) {\n      this.currentPage = 1;\n    }\n    // when old items page numbers match the current page AND new items page number is lower than current page, we set the new last page\n    else if (pageCountOldValue === this.currentPage && pageCountNewValue < this.currentPage) {\n      this.currentPage--;\n    }\n  }\n\n  /**\n   * Define section kind\n   */\n  @Prop() sectionKind?: SectionKind;\n  @Watch('sectionKind')\n  validateSectionKind(newValue: MgInputCheckboxPaginated['sectionKind']): void {\n    if (newValue === SectionKind.SELECTED) this.titleKind = SectionTitleKind.BUTTON;\n    else this.titleKind = SectionTitleKind.TEXT;\n  }\n\n  /**\n   * Define component message\n   */\n  @Prop() messages: Record<string, string>;\n\n  /**\n   * Emit 'mass-action' event\n   * used to informe that select-all/unselect-all button listner is triggered\n   */\n  @Event({ eventName: 'mass-action' }) massAction: EventEmitter<HTMLMgInputCheckboxPaginatedElement['sectionKind']>;\n\n  /**\n   * Define section title\n   */\n  @State() titleKind: SectionTitleKind;\n\n  /**\n   * Is checked items values expanded\n   */\n  @State() expanded = true;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * Mass action handler\n   */\n  private massActionHandler = (): void => {\n    this.massAction.emit(this.sectionKind);\n  };\n\n  /**\n   * Toggle items button handler\n   */\n  private handleToggleClick = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  /**\n   * Method to get a array range\n   * @param from - array start index\n   * @param to - array end index\n   * @returns array's range\n   */\n  private getArrayRange = <ItemType,>(array: ItemType[], from: number, to: number): ItemType[] => array.slice(from, to);\n\n  /**\n   * Get from and to index\n   * @returns [from,to] index\n   */\n  private getFromToIndexes(): number[] {\n    const isFirstPage = this.currentPage === 1;\n    const from = isFirstPage ? 0 : (this.currentPage - 1) * this.offset;\n    const to = isFirstPage ? this.offset : this.currentPage * this.offset;\n    return [from, to];\n  }\n\n  /**\n   * Method to get page count from items\n   * @param items - items to count\n   * @returns page count from items\n   */\n  private getPageCount = (item: unknown[]): number => Math.ceil(item.length / this.offset);\n\n  /**\n   * Handle mg-pagination current page change event\n   * @param event - pagination current page change event\n   */\n  private handleCurrentPageChange = (event: CustomEvent): void => {\n    this.currentPage = Number(event.detail);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateSectionKind(this.sectionKind);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const getText = (checkboxes: CheckboxItem[]): HTMLElement => (\n      <em class=\"mg-c-input__section-header-title-label\">{`${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`}</em>\n    );\n    const [from, to] = this.getFromToIndexes();\n    const itemsContainerId = `items-${this.sectionKind}-container`;\n\n    return (\n      <Host hidden={this.checkboxes.length < 1}>\n        <div class=\"mg-c-input__section-header\">\n          {this.titleKind === SectionTitleKind.BUTTON ? (\n            <mg-button variant=\"flat\" onClick={this.handleToggleClick} aria-controls={itemsContainerId} aria-expanded={this.expanded.toString()}>\n              <mg-icon icon={this.expanded ? 'chevron-up' : 'chevron-down'} size=\"small\"></mg-icon>\n              <span class=\"mg-c-input__section-header-title\">{getText(this.checkboxes)}</span>\n            </mg-button>\n          ) : (\n            <p class=\"mg-c-input__section-header-title mg-c-input__section-header-title--static\">{getText(this.checkboxes)}</p>\n          )}\n          {((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (\n            <mg-tooltip class=\"mg-c-input__section-header-tootlip\" message={this.messages.tooltip} data-popper-strategy=\"absolute\">\n              <mg-button variant=\"link\" onClick={this.massActionHandler}>\n                {this.messages.action}\n              </mg-button>\n            </mg-tooltip>\n          )}\n          {this.expanded && this.getPageCount(this.checkboxes) > 1 && (\n            <mg-pagination\n              key=\"search-pagination\"\n              totalPages={this.getPageCount(this.checkboxes)}\n              currentPage={this.currentPage}\n              onCurrent-page-change={this.handleCurrentPageChange}\n              hideNavigationLabels={true}\n              hidePageCount={true}\n              identifier={`input-checkbox-pagination-${this.sectionKind}`}\n            ></mg-pagination>\n          )}\n        </div>\n        <div hidden={!this.expanded} id={itemsContainerId} class=\"mg-c-input__section-content\">\n          <MgInputCheckboxList\n            checkboxes={this.getArrayRange(this.checkboxes, from, to)}\n            displaySearchInput={true}\n            messages={this.messages}\n            id={`items-${this.sectionKind}`}\n            disabled={this.disabled}\n            name={this.name}\n            invalid={this.invalid}\n          ></MgInputCheckboxList>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { N as Ne, M as Me, B as Be } from './index.es.js';
+import { U as Ue, O as Oe, N as Ne } from './index.es.js';
 import { d as defineCustomElement$a, S as SelectValuesButtonKey, c as checkboxTypes, a as SectionKind, M as MgInputCheckboxList } from './mg-input-checkbox-paginated2.js';
 import { d as defineCustomElement$b, H as Handler, c as classFieldset, a as classVerticalList, b as classReadonly, e as classDisabled } from './mg-input2.js';
 import { i as initLocales } from './index2.js';
@@ -150,7 +150,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
          * Method to update searchResults
          */
         this.updateSearchResults = () => {
-            this.searchResults = this.checkboxItems.filter(item => Ne(item.title).includes(Ne(this.searchValue)));
+            this.searchResults = this.checkboxItems.filter(item => Ue(item.title).includes(Ue(this.searchValue)));
         };
         /**
          * Method to validate if one of inputs value is checked id required
@@ -224,7 +224,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new Me([this.baseClassName, classFieldset]);
+        this.classCollection = new Oe([this.baseClassName, classFieldset]);
         this.errorMessage = undefined;
         this.checkboxItems = [];
         this.displaySearchInput = undefined;
@@ -332,7 +332,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
         }
-        else if (!Be(errorMessage)) {
+        else if (!Ne(errorMessage)) {
             throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -445,7 +445,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '97f239b0bb233a2ea1afb4124f810a54c0be09f9', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonlyValue: this.value.filter(({ value }) => value).map(({ title }) => title), tooltip: !this.readonly ? this.tooltip : undefined, tooltipPosition: this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, this.type === 'checkbox' || this.readonly ? (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })) : (this.renderCheckboxMulti())));
+        return (h("mg-input", { key: 'b695390b3a9525ba849c4442c6c6b0e643ec7348', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonlyValue: this.value.filter(({ value }) => value).map(({ title }) => title), tooltip: !this.readonly ? this.tooltip : undefined, tooltipPosition: this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, this.type === 'checkbox' || this.readonly ? (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })) : (this.renderCheckboxMulti())));
     }
     get element() { return this; }
     static get watchers() { return {

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { B as Be, g as ge, W as We, P as Pe, M as Me, d as de } from './index.es.js';
+import { N as Ne, g as ge, p as pe, z as ze, W as We, O as Oe } from './index.es.js';
 import { d as defineCustomElement$5, H as Handler, b as classReadonly, e as classDisabled } from './mg-input2.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$6 } from './mg-icon2.js';
@@ -13,6 +13,7 @@ var InputError;
     InputError["MAX"] = "max";
     InputError["MINMAX"] = "minMax";
     InputError["REQUIRED"] = "required";
+    InputError["PATTERN"] = "badInput";
 })(InputError || (InputError = {}));
 
 const mgInputDateCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__input-container{width:100%;flex:1 auto}.mg-c-input__box.mg-c-input__box--width{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-2 .mg-c-input__with-character-left{max-width:5rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-4 .mg-c-input__with-character-left{max-width:7rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__box,.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-16 .mg-c-input__with-character-left{max-width:21rem}.mg-c-input.mg-c-input--label-on-top.mg-c-input--width-full .mg-c-input__box{width:100%;max-width:100%}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-input-check-size);height:var(--mg-input-check-size);flex-shrink:0;margin:calc((var(--font-size)*var(--line-height) - var(--mg-input-check-size))/2) .6rem 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);gap:1rem 2.3rem;list-style:none}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:.7rem}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi)) .mg-c-input__input-container mg-tooltip{margin-left:3rem}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input{display:flex;min-height:var(--default-size);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled),.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:1.2rem;text-align:start}.mg-c-input__help-text+.mg-c-input__error{margin-top:.2rem}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:.5rem}.mg-c-input.mg-c-input--readonly>*:not([slot=label],[name=append-input]),.mg-c-input.mg-c-input--readonly ::slotted(mg-button[slot=append-input]){display:none}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}:host(.mg-c-input){display:flex}:host(.mg-c-input.mg-c-input--textarea.mg-c-input--readonly) .mg-c-input__input-container{white-space:pre-line}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}";
@@ -27,6 +28,12 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
         this.inputValid = createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        /**
+         * Method to validate date pattern string
+         * @param value - value to test
+         * @returns truthy when value match the pattern
+         */
+        this.isValidPattern = (value) => Ne(value) && ge.test(value);
         /**
          * Format help text to display
          * @param helpText - help text format
@@ -34,10 +41,10 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
          */
         this.formatHelpText = (helpText) => {
             const defaultHelpTextVariable = '{defaultHelpText}';
-            let text = Be(helpText) ? helpText : this.messages.input.date.helpText;
+            let text = Ne(helpText) ? helpText : this.messages.input.date.helpText;
             if (text.includes(defaultHelpTextVariable))
                 text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));
-            return text.replace('{pattern}', this.renderPattern()).replace('{date}', ge(We(new Date('2023-12-24')), this.systemLocale));
+            return text.replace('{pattern}', this.renderPattern()).replace('{date}', pe(ze(new Date('2023-12-24')), this.systemLocale));
         };
         /**
          * Handle input event
@@ -59,32 +66,52 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
                 this.handlerInProgress = undefined;
             });
         };
+        /**
+         * Handle keydown event
+         * @param event - input keydown event
+         */
+        this.handleKeyDown = (event) => {
+            // bypass the native "Delete" action wich trigger an "input" event with "checkValidty() => false" with a falsy badInput = true,
+            // when we reset the field we need to test a blank value.
+            if (['Delete', 'Backspace'].includes(event.key)) {
+                event.preventDefault();
+                this.value = '';
+                this.checkValidity();
+                if (this.hasDisplayedError) {
+                    this.setErrorMessage();
+                }
+            }
+        };
         /**
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || this.input.checkValidity());
+            this.setValidity(this.readonly || this.disabled || (this.input.checkValidity() && (!this.value || this.isValidPattern(this.value))));
         };
         /**
          * get input error code
          * @returns error code
          */
         this.getInputError = () => {
-            var _a, _b;
+            var _a;
             let inputError = null;
             // required
             if (this.input.validity.valueMissing) {
                 inputError = InputError.REQUIRED;
             }
+            // pattern
+            else if (this.value && !this.isValidPattern(this.value)) {
+                inputError = InputError.PATTERN;
+            }
             // min & max
-            else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.max) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            else if ((this.input.validity.rangeUnderflow || this.input.validity.rangeOverflow) && ((_a = this.min) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.max !== '9999-12-31') {
                 inputError = InputError.MINMAX;
             }
             // min
             else if (this.input.validity.rangeUnderflow) {
                 inputError = InputError.MIN;
             }
-            //max
+            // max
             else if (this.input.validity.rangeOverflow) {
                 inputError = InputError.MAX;
             }
@@ -109,8 +136,8 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
                 // min, max & minMax
                 else if ([InputError.MIN, InputError.MAX, InputError.MINMAX].includes(inputError)) {
                     this.errorMessage = this.messages.errors.date[inputError]
-                        .replace('{min}', ge(this.min, this.systemLocale))
-                        .replace('{max}', ge(this.max, this.systemLocale));
+                        .replace('{min}', pe(this.min, this.systemLocale))
+                        .replace('{max}', pe(this.max, this.systemLocale));
                 }
                 // wrong date format
                 // element.validity.badInput is default error message
@@ -124,7 +151,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
          * @returns translated html pattern
          */
         this.renderPattern = () => {
-            let patternLocal = Pe(this.systemLocale);
+            let patternLocal = We(this.systemLocale);
             for (const key in this.messages.input.date.pattern) {
                 patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
             }
@@ -139,26 +166,30 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
         this.required = false;
         this.readonly = false;
         this.min = undefined;
-        this.max = undefined;
+        this.max = '9999-12-31';
         this.disabled = false;
         this.tooltip = undefined;
         this.tooltipPosition = 'input';
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new Me(['mg-c-input--date']);
+        this.classCollection = new Oe(['mg-c-input--date']);
         this.errorMessage = undefined;
     }
     validateValue(newValue) {
         // When the input is not fully completed or has been cleared, the value becomes an empty string.
         if (newValue === '')
             newValue = null;
-        if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !de.test(newValue))) {
-            throw new Error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
+        // check value validity
+        if (newValue && !Ne(newValue)) {
+            throw new Error("<mg-input-date> props 'value' must be a valid string");
         }
-        else {
+        else if (!newValue || (newValue && this.isValidPattern(newValue))) {
             this.valueChange.emit(newValue);
         }
+        else {
+            console.error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
+        }
     }
     watchReadonly(newValue) {
         if (newValue)
@@ -167,7 +198,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
             this.classCollection.delete(classReadonly);
     }
     validateMinMax(newValue) {
-        if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === 0 || ((newValue === null || newValue === void 0 ? void 0 : newValue.length) > 0 && !(typeof newValue === 'string' && de.test(newValue)))) {
+        if (newValue && !this.isValidPattern(newValue)) {
             throw new Error("<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd");
         }
     }
@@ -207,7 +238,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
         }
-        else if (!Be(errorMessage)) {
+        else if (!Ne(errorMessage)) {
             throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -261,7 +292,7 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class MgInputDate extends
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'b5eea353e13d76c1fe9569b3c237bf7e787774fe', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: ge(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, h("input", { key: '6e75312c774aadde75dc6dbd197b7224d08fd7ba', type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: 'f38d79cb71311149b4d15885b65cd8f025dde15d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: pe(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, h("input", { key: '67bf6f0ad58ee1a506ffd0d3d41d5954db68465c', type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } })));

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

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

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { z as ze, q as qe, M as Me, B as Be } from './index.es.js';
+import { q as qe, w as we, O as Oe, N as Ne } from './index.es.js';
 import { d as defineCustomElement$5, H as Handler, b as classReadonly, e as classDisabled, w as widths } from './mg-input2.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$6 } from './mg-icon2.js';
@@ -123,9 +123,9 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
         this.formatValue = (value) => {
             switch (this.format) {
                 case 'number':
-                    return qe(value, this.locale);
+                    return we(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'currency':
-                    return ze(value, this.locale, this.currency);
+                    return qe(value, this.locale, this.currency);
                 case 'none':
                     return value.toString();
             }
@@ -162,7 +162,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
         this.decimalLength = 2;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new Me(['mg-c-input--numeric']);
+        this.classCollection = new Oe(['mg-c-input--numeric']);
         this.errorMessage = undefined;
         this.hasFocus = undefined;
     }
@@ -258,7 +258,7 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
         }
-        else if (!Be(errorMessage)) {
+        else if (!Ne(errorMessage)) {
             throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -353,10 +353,10 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class MgInputNumeric e
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'ad31254b8cd13d07b07a1fc40ddd515047ddbfed', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("input", { key: '9d094501fa4f4a07eb9b3d50bda55f1344099fb9', type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: '52a1e1cc7a6f16290a62c258e099cd8c0cc30567', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("input", { key: 'a36bbe191ff0fcacbf7bd459ad7d743a623eba44', type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
-            } }), h("slot", { key: 'c1970cbf9e7fce07abd63382d401f4e2834bc4d0', name: "append-input" })));
+            } }), h("slot", { key: '6b6ae5ae8aa3de2c1d0360c2ddef962a7b3e6bc0', name: "append-input" })));
     }
     get element() { return this; }
     static get watchers() { return {