@mgdis/mg-components 5.19.2 → 5.20.0

package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-input-radio.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-radio/mg-input-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsx-a11y/no-redundant-roles */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, Event, h, Prop, EventEmitter, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString, isValidString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\nimport { RadioOption } from './mg-input-radio.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns radio option type is valid\n */\nconst isOption = (option: RadioOption): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\n\n@Component({\n  tag: 'mg-input-radio',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-radio.css',\n  shadow: true,\n})\nexport class MgInputRadio {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private inputs: HTMLInputElement[] = [];\n\n  // Locales\n  private messages;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputRadioElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true }) value: any;\n  @Watch('value')\n  handleValue(newValue: any): void {\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Items are the possible options to select\n   */\n  @Prop() items!: string[] | RadioOption[];\n  @Watch('items')\n  validateItems(newValue: string[] | RadioOption[]): void {\n    // Validate if items have required min length\n    if (typeof newValue === 'object' && newValue.length < 2) {\n      throw new Error('<mg-input-radio> prop \"items\" require at least 2 items.');\n    }\n    // String array\n    else if (allItemsAreString(newValue as string[])) {\n      this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));\n    }\n    // Object array\n    else if (newValue && (newValue as RadioOption[]).every(item => isOption(item))) {\n      this.options = newValue as RadioOption[];\n    } else {\n      throw new Error('<mg-input-radio> prop \"items\" is required and all items must be the same type, string or RadioOption.');\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop = false;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if inputs are display verticaly\n   */\n  @Prop() inputVerticalList = false;\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    this.inputs.forEach(input => {\n      input[prop] = newValue;\n    });\n    this.checkValidity();\n    if (this.hasDisplayedError) {\n      this.setErrorMessage();\n      this.hasDisplayedError = false;\n    }\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText: string;\n\n  /**\n   * Define input valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--radio']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Formated items for display\n   */\n  @State() options: RadioOption[];\n\n  /**\n   * Emitted event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<any>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n  /**\n   * 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: MgInputRadio['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-radio> method \"setError()\" param \"valid\" must be a boolean');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-radio> method \"setError()\" param \"errorMessage\" must be a string');\n    } else {\n      this.setValidity(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n      this.hasDisplayedError = this.invalid;\n    }\n  }\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputRadio['valid']) {\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    this.inputValid.emit(this.valid);\n  }\n\n  /**\n   * Handle input event\n   * @param event - input event\n   */\n  private handleInput = (event: InputEvent & { target: HTMLInputElement }) => {\n    this.checkValidity();\n    this.value = this.options[event.target.value].value;\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    this.checkValidity();\n    this.setErrorMessage();\n  };\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || this.getInvalidElement() === undefined);\n  };\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    const invalidElement = this.getInvalidElement();\n\n    // Set error message\n    this.errorMessage = undefined;\n    if (!this.valid) {\n      if (errorMessage !== undefined) {\n        this.errorMessage = errorMessage;\n      } else if (invalidElement.validity.valueMissing) {\n        this.errorMessage = this.messages.errors.required;\n      }\n    }\n  };\n\n  /**\n   * get invalid element\n   * @returns element\n   */\n  private getInvalidElement = (): HTMLInputElement => this.inputs.find((input: HTMLInputElement) => !input.disabled && !input.readOnly && !input.checkValidity());\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   * @returns timeout\n   */\n  componentWillLoad(): ReturnType<typeof setTimeout> {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateItems(this.items);\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <MgInput\n        identifier={this.identifier}\n        classCollection={this.classCollection}\n        ariaDescribedbyIDs={[]}\n        label={this.label}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        mgWidth={undefined}\n        value={this.value as string}\n        readonlyValue={this.value as string}\n        tooltip={this.tooltip}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n        isFieldset={true}\n      >\n        <ul class={{ 'mg-c-input__input-group-container': true, 'mg-c-input__input-group-container--vertical': this.inputVerticalList }} role=\"list\">\n          {this.options.map((input, index) => (\n            <li key={input.title} class={{ 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled }}>\n              <input\n                type=\"radio\"\n                id={this.identifier + '_' + index}\n                name={this.identifier}\n                value={index}\n                checked={JSON.stringify(this.value) === JSON.stringify(this.options[index].value)}\n                disabled={this.disabled || input.disabled}\n                required={this.required}\n                onBlur={this.handleBlur}\n                onInput={this.handleInput}\n                ref={(el: HTMLInputElement) => {\n                  if (el !== null) this.inputs[index] = el;\n                }}\n              />\n              <label htmlFor={this.identifier + '_' + index}>{input.title}</label>\n            </li>\n          ))}\n        </ul>\n      </MgInput>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-input-radio.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-radio/mg-input-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsx-a11y/no-redundant-roles */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, Event, h, Prop, EventEmitter, State, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString, isValidString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\nimport { RadioOption } from './mg-input-radio.conf';\nimport { Handler } from '../MgInput.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns radio option type is valid\n */\nconst isOption = (option: RadioOption): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\n\n@Component({\n  tag: 'mg-input-radio',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-radio.css',\n  shadow: true,\n})\nexport class MgInputRadio {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private inputs: HTMLInputElement[] = [];\n\n  // Locales\n  private messages;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n  private handlerInProgress: Handler;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputRadioElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true }) value: any;\n  @Watch('value')\n  handleValue(newValue: any): void {\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Items are the possible options to select\n   */\n  @Prop() items!: string[] | RadioOption[];\n  @Watch('items')\n  validateItems(newValue: string[] | RadioOption[]): void {\n    // Validate if items have required min length\n    if (typeof newValue === 'object' && newValue.length < 2) {\n      throw new Error('<mg-input-radio> prop \"items\" require at least 2 items.');\n    }\n    // String array\n    else if (allItemsAreString(newValue as string[])) {\n      this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));\n    }\n    // Object array\n    else if (newValue && (newValue as RadioOption[]).every(item => isOption(item))) {\n      this.options = newValue as RadioOption[];\n    } else {\n      throw new Error('<mg-input-radio> prop \"items\" is required and all items must be the same type, string or RadioOption.');\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop = false;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if inputs are display verticaly\n   */\n  @Prop() inputVerticalList = false;\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    this.inputs.forEach(input => {\n      input[prop] = newValue;\n    });\n    this.checkValidity();\n    if (this.hasDisplayedError) {\n      this.setErrorMessage();\n      this.hasDisplayedError = false;\n    }\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText: string;\n\n  /**\n   * Define input valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--radio']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Formated items for display\n   */\n  @State() options: RadioOption[];\n\n  /**\n   * Emitted event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputRadioElement['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputRadioElement['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: MgInputRadio['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-radio> method \"setError()\" param \"valid\" must be a boolean');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-radio> method \"setError()\" param \"errorMessage\" must be a string');\n    } else {\n      this.setValidity(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n      this.hasDisplayedError = this.invalid;\n    }\n  }\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputRadio['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   * @param event - input event\n   */\n  private handleInput = (event: InputEvent & { target: HTMLInputElement }) => {\n    this.checkValidity();\n    this.value = this.options[event.target.value].value;\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    this.handlerInProgress = Handler.BLUR;\n    this.checkValidity();\n    this.setErrorMessage();\n    // reset guard\n    this.handlerInProgress = undefined;\n  };\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || this.getInvalidElement() === undefined);\n  };\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    const invalidElement = this.getInvalidElement();\n\n    // Set error message\n    this.errorMessage = undefined;\n    if (!this.valid) {\n      if (errorMessage !== undefined) {\n        this.errorMessage = errorMessage;\n      } else if (invalidElement.validity.valueMissing) {\n        this.errorMessage = this.messages.errors.required;\n      }\n    }\n  };\n\n  /**\n   * get invalid element\n   * @returns element\n   */\n  private getInvalidElement = (): HTMLInputElement => this.inputs.find((input: HTMLInputElement) => !input.disabled && !input.readOnly && !input.checkValidity());\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   * @returns timeout\n   */\n  componentWillLoad(): ReturnType<typeof setTimeout> {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateItems(this.items);\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <MgInput\n        identifier={this.identifier}\n        classCollection={this.classCollection}\n        ariaDescribedbyIDs={[]}\n        label={this.label}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        mgWidth={undefined}\n        value={this.value as string}\n        readonlyValue={this.value as string}\n        tooltip={this.tooltip}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n        isFieldset={true}\n      >\n        <ul class={{ 'mg-c-input__input-group-container': true, 'mg-c-input__input-group-container--vertical': this.inputVerticalList }} role=\"list\">\n          {this.options.map((input, index) => (\n            <li key={input.title} class={{ 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled }}>\n              <input\n                type=\"radio\"\n                id={this.identifier + '_' + index}\n                name={this.identifier}\n                value={index}\n                checked={JSON.stringify(this.value) === JSON.stringify(this.options[index].value)}\n                disabled={this.disabled || input.disabled}\n                required={this.required}\n                onBlur={this.handleBlur}\n                onInput={this.handleInput}\n                ref={(el: HTMLInputElement) => {\n                  if (el !== null) this.inputs[index] = el;\n                }}\n              />\n              <label htmlFor={this.identifier + '_' + index}>{input.title}</label>\n            </li>\n          ))}\n        </ul>\n      </MgInput>\n    );\n  }\n}\n"]}