File

src/components/sq-input-mask/sq-input-mask.component.ts

Description

Represents an input field with mask functionality that extends SqInputComponent.

This component uses ngx-mask library See https://github.com/JsDaddy/ngx-mask

This component extends the SqInputComponent and adds additional properties and behavior for handling money input.

Example :

<sq-input-mask [(value)]='phone' [name]="'masked-input'" [id]="'masked-input'" [label]="'Masked Input'" [mask]="'(999) 999-9999'"></sq-input-mask>

Extends

SqInputComponent

Metadata

selector	`sq-input-mask`
styleUrls	`./sq-input-mask.component.scss`
templateUrl	`./sq-input-mask.component.html`

Index

Constructor

constructor(validatorHelper: ValidatorHelper, element: ElementRef, translate: TranslateService)

Defined in src/components/sq-input-mask/sq-input-mask.component.ts:87

Constructs a new instance of SqInputMaskComponent.

Parameters :

Name	Type	Optional	Description
validatorHelper	`ValidatorHelper`	No	The ValidatorHelper service for input validation.
element	`ElementRef`	No	Reference to the native element.
translate	`TranslateService`	No	The TranslateService for translation support (optional).

Inputs

allowNegativeNumbers
Type : `boolean`
Default value : `false`
Defined in src/components/sq-input-mask/sq-input-mask.component.ts:51
Indicates whether negative numbers are allowed.

decimalMarker
Type : `"." \| "," \|`
Default value : `[".", ","]`
Defined in src/components/sq-input-mask/sq-input-mask.component.ts:56
The decimal marker character or an array of characters to represent decimal values.

leadZero
Type : `boolean`
Default value : `false`
Defined in src/components/sq-input-mask/sq-input-mask.component.ts:66
Indicates whether leading zeros should be preserved.

mask
Type : `string`
Default value : `''`
Defined in src/components/sq-input-mask/sq-input-mask.component.ts:26
The mask pattern for input validation and formatting.

maxValue
Type : `number`
Defined in src/components/sq-input-mask/sq-input-mask.component.ts:76
Defines the maximum value that can be accepted as input.

minValue
Type : `number`
Defined in src/components/sq-input-mask/sq-input-mask.component.ts:71
Defines the minimum value that can be accepted as input.

placeHolderCharacter
Type : `string`
Default value : `''`
Defined in src/components/sq-input-mask/sq-input-mask.component.ts:61
The character to use as a placeholder in empty mask slots.

prefix
Type : `string`
Default value : `''`
Defined in src/components/sq-input-mask/sq-input-mask.component.ts:41
The prefix to be prepended to the input value.

showMaskTyped
Type : `boolean`
Default value : `false`
Defined in src/components/sq-input-mask/sq-input-mask.component.ts:46
Indicates whether the mask should be visible while typing.

suffix
Type : `string`
Default value : `''`
Defined in src/components/sq-input-mask/sq-input-mask.component.ts:36
The suffix to be appended to the input value.

thousandSeparator
Type : `string`
Default value : `''`
Defined in src/components/sq-input-mask/sq-input-mask.component.ts:31
The character used as a thousand separator in numeric input.

backgroundColor
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:141`
Background color of the input element.

borderColor
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:146`
Border color of the input element.

customClass
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:60`
Custom CSS class for the input element.

disabled
Type : `boolean`
Default value : `false`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:101`
Flag to disable the input element.

errorSpan
Type : `boolean`
Default value : `true`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:96`
Flag to display an error span.

externalError
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:70`
External error message to display.

externalIcon
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:75`
External icon to display.

id
Type : `string`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:50`
The id attribute for the input element.

inputMode
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:171`
Input mode for mobile devices.

label
Type : `string`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:55`
An optional label for the input.

labelColor
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:151`
Color of the input label.

maxLength
Type : `number \| null`
Default value : `null`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:161`
Maximum length for the input element.

name
Type : `string`
Default value : `random-name-${(1 + Date.now() + Math.random()).toString().replace('.', '')}`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:45`
The name attribute for the input element.

pattern
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:166`
Regular expression pattern for input validation.

placeholder
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:65`
Placeholder text for the input element.

readonly
Type : `boolean`
Default value : `false`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:106`
Flag to make the input element readonly.

required
Type : `boolean`
Default value : `false`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:111`
Flag to mark the input as required.

timeToChange
Type : `number`
Default value : `0`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:91`
Time in milliseconds before triggering input timeout.

tooltipColor
Type : `string`
Default value : `'inherit'`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:131`
Color of the tooltip.

tooltipIcon
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:136`
Icon for the tooltip.

tooltipMessage
Type : `string`
Default value : `''`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:121`
Tooltip message to display.

tooltipPlacement
Type : `"center top" \| "center bottom" \| "left center" \| "right center"`
Default value : `'right center'`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:126`
Placement of the tooltip.

type
Type : `"text" \| "email" \| "hidden" \| "password" \| "tel" \| "url" \| "file"`
Default value : `'text'`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:156`
Type of the input element (e.g., text, email, password).

useFormErrors
Type : `boolean`
Default value : `true`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:116`
Flag to use form errors for validation messages.

value
Type : `any`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:81`
The value of the input element.

Outputs

emitFocus
Type : `EventEmitter<Event>`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:201`
Event emitter for focus input changes.

inFocus
Type : `EventEmitter<boolean>`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:186`
Event emitter for input focus events.

keyPressDown
Type : `EventEmitter<KeyboardEvent>`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:176`
Event emitter for keydown events.

keyPressUp
Type : `EventEmitter<KeyboardEvent>`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:181`
Event emitter for keyup events.

valid
Type : `EventEmitter<boolean>`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:191`
Event emitter for validation status.

valueChange
Type : `EventEmitter<any>`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:196`
Event emitter for input value changes.

Methods

Async validate

validate(isBlur)

Inherited from SqInputComponent

Defined in SqInputComponent:108

Asynchronously validate the date input value.

Parameters :

Name	Optional	Default value	Description
isBlur	No	`false`	Indicates if the input has lost focus.

Returns : any

Async change

change(event: any)

Inherited from SqInputComponent

Defined in SqInputComponent:288

Handle input value changes.

Parameters :

Name	Type	Optional	Description
event	`any`	No	The input change event.

Returns : any

keyDown

keyDown(event: KeyboardEvent)

Inherited from SqInputComponent

Defined in SqInputComponent:314

Handle keydown events.

Parameters :

Name	Type	Optional	Description
event	`KeyboardEvent`	No	The keydown event.

Returns : void

keyUp

keyUp(event: KeyboardEvent)

Inherited from SqInputComponent

Defined in SqInputComponent:322

Handle keyup events.

Parameters :

Name	Type	Optional	Description
event	`KeyboardEvent`	No	The keyup event.

Returns : void

Async setError

setError(key: string, interpolateParams: Object)

Inherited from SqInputComponent

Defined in SqInputComponent:304

Sets an error message.

Parameters :

Name	Type	Optional	Default value	Description
key	`string`	No		The translation key for the error message.
interpolateParams	`Object`	No	`{}`	Value to interpolate with translation.

Returns : any

Properties

labelTemplate

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('labelTemplate')

Inherited from SqInputComponent

Defined in SqInputComponent:82

Reference to a label template.

nativeElement

Type : ElementRef

Inherited from SqInputComponent

Defined in SqInputComponent:87

Reference to the native element.

Public translate

Type : TranslateService

Decorators :


                            @Optional()

Inherited from SqInputComponent

Defined in SqInputComponent:98

- The TranslateService for translation support (optional).

Public validatorHelper

Type : ValidatorHelper

Inherited from SqInputComponent

Defined in SqInputComponent:96

- The ValidatorHelper service for input validation.

_value

Type : any

Default value : ''

Inherited from SqInputComponent

Defined in SqInputComponent:224

The internal value of the input element.

error

Type : boolean | string

Default value : false

Inherited from SqInputComponent

Defined in SqInputComponent:229

Error message to display.

leftLabel

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('leftLabel')

Inherited from SqInputComponent

Defined in SqInputComponent:207

Reference to a left-aligned label template.

rightLabel

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('rightLabel')

Inherited from SqInputComponent

Defined in SqInputComponent:213

Reference to a right-aligned label template.

timeoutInput

Type : ReturnType<>

Inherited from SqInputComponent

Defined in SqInputComponent:239

Timeout for input changes.

import { Component, ContentChild, ElementRef, Input, Optional, TemplateRef } from "@angular/core"
import { ValidatorHelper } from '../../helpers/validator.helper'
import { TranslateService } from "@ngx-translate/core"
import { SqInputComponent } from "../sq-input/sq-input.component"

/**
 * Represents an input field with mask functionality that extends SqInputComponent.
 *
 * This component uses ngx-mask library
 * @see {@link https://github.com/JsDaddy/ngx-mask}
 *
 * This component extends the {@link SqInputComponent} and adds additional properties and behavior for handling money input.
 *
 * @example
 * <sq-input-mask [(value)]='phone' [name]="'masked-input'" [id]="'masked-input'" [label]="'Masked Input'" [mask]="'(999) 999-9999'"></sq-input-mask>
 */
@Component({
  selector: 'sq-input-mask',
  templateUrl: './sq-input-mask.component.html',
  styleUrls: ['./sq-input-mask.component.scss']
})
export class SqInputMaskComponent extends SqInputComponent {
  /**
   * The mask pattern for input validation and formatting.
   */
  @Input() mask = ''

  /**
   * The character used as a thousand separator in numeric input.
   */
  @Input() thousandSeparator = ''

  /**
   * The suffix to be appended to the input value.
   */
  @Input() suffix = ''

  /**
   * The prefix to be prepended to the input value.
   */
  @Input() prefix = ''

  /**
   * Indicates whether the mask should be visible while typing.
   */
  @Input() showMaskTyped = false

  /**
   * Indicates whether negative numbers are allowed.
   */
  @Input() allowNegativeNumbers = false

  /**
   * The decimal marker character or an array of characters to represent decimal values.
   */
  @Input() decimalMarker: "." | "," | [".", ","] = [".", ","]

  /**
   * The character to use as a placeholder in empty mask slots.
   */
  @Input() placeHolderCharacter = ''

  /**
   * Indicates whether leading zeros should be preserved.
   */
  @Input() leadZero = false

  /**
   * Defines the minimum value that can be accepted as input.
   */
  @Input() minValue?: number

  /**
   * Defines the maximum value that can be accepted as input.
   */
  @Input() maxValue?: number

  /**
   * Reference to a label template.
   */
  @ContentChild('labelTemplate')
  override labelTemplate: TemplateRef<HTMLElement> | null = null

  /**
   * Reference to the native element.
   */
  override nativeElement: ElementRef

  /**
   * Constructs a new instance of SqInputMaskComponent.
   * @param validatorHelper - The ValidatorHelper service for input validation.
   * @param element - Reference to the native element.
   * @param translate - The TranslateService for translation support (optional).
   */
  constructor(
    public override validatorHelper: ValidatorHelper,
    element: ElementRef,
    @Optional() public override translate: TranslateService,
  ) {
    super(validatorHelper, element, translate)
    this.nativeElement = element.nativeElement
  }

  /**
   * Asynchronously validate the date input value.
   * @param isBlur - Indicates if the input has lost focus.
   */
  override async validate(isBlur = false) {
    const numericValue = Number(this.value)

    if (this.externalError) {
      this.error = false
    } else if (this.required && (this.value === null || this.value === undefined || this.value === '')) {
      this.valid.emit(false)
      this.setError('forms.required')
    } else if (this.maxValue && numericValue > this.maxValue) {
      this.valid.emit(false)
      this.setError('forms.maxValueAllowed', { max: this.maxValue })
    } else if (this.minValue && numericValue < this.minValue) {
      this.valid.emit(false)
      this.setError('forms.minValueAllowed', { min: this.minValue })
    } else {
      this.valid.emit(true)
      this.error = ''
    }

    if (isBlur) {
      this.inFocus.emit(false)
    }
  }
}

<div class="wrapper-all-inside-input {{ customClass }}">
  <label
    class="display-flex"
    *ngIf="label?.length || tooltipMessage || labelTemplate"
    [ngClass]="{
      readonly: readonly
    }"
    [for]="id"
  >
    <div *ngIf="label && !labelTemplate" [ngStyle]="{ 'color': labelColor }" [innerHtml]="label | universalSafe"></div>
    <div *ngIf="labelTemplate">
      <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
    </div>
    <sq-tooltip
      *ngIf="tooltipMessage"
      class="ml-1"
      [message]="tooltipMessage"
      [placement]="tooltipPlacement"
      [color]="tooltipColor"
      [icon]="tooltipIcon"
    ></sq-tooltip>
  </label>
  <div
    class="p-0 wrapper-input wrapper-input-squid text-ellipsisarea"
    [ngClass]="{
      error: (externalError && externalError !== '') || (error && error !== ''),
      readonly: readonly
    }"
  >
    <span class="input-group-text m-0" *ngIf="leftLabel">
      <ng-container *ngTemplateOutlet="leftLabel"></ng-container>
    </span>
    <input
      class="col input"
      [ngClass]="{
        'has-icon': error || externalError,
        disabled: disabled,
        readonly: readonly
      }"
      [ngStyle]="{
        'background-color': backgroundColor,
        'border-color': borderColor
      }"
      [id]="id"
      [type]="'text'"
      [name]="name"
      [placeholder]="placeholder || ''"
      [required]="required"
      [disabled]="disabled"
      [readonly]="readonly"
      (blur)="validate(true)"
      [ngModel]="_value"
      [maxlength]="maxLength"
      (ngModelChange)="change($event)"
      (keydown)="keyDown($event)"
      (keyup)="keyUp($event)"
      [pattern]="pattern"
      [attr.inputmode]="inputMode"
      [mask]="mask"
      [showMaskTyped]="showMaskTyped"
      [thousandSeparator]="thousandSeparator"
      [suffix]="suffix"
      [prefix]="prefix"
      [allowNegativeNumbers]="allowNegativeNumbers"
      [decimalMarker]="decimalMarker"
      [placeHolderCharacter]="placeHolderCharacter"
      [leadZero]="leadZero"
      (focus)="emitFocus.emit($event)"
      ngDefaultControl
    />
    <span class="input-group-text m-0" *ngIf="rightLabel">
      <ng-container *ngTemplateOutlet="rightLabel"></ng-container>
    </span>
  </div>
  <span
    *ngIf="externalIcon"
    class="icon icon-external textarea-icon"
    [ngClass]="{
      'no-label': !label?.length
    }"
    [innerHtml]="externalIcon || '' | universalSafe"
  ></span>
  <div
    class="box-validation box-invalid show"
    *ngIf="errorSpan"
    [ngClass]="{
      'has-max-length': maxLength
    }"
  >
    <i [ngClass]="{
      'visibility-hidden-force': !error && !externalError
    }" class="fa-solid fa-triangle-exclamation"></i>
    {{ externalError ? externalError : '' }}
    {{ error && !externalError ? error : '' }}
    <span
      class="max-length-name"
      [ngClass]="{
        'visibility-hidden-force': disabled || readonly
      }"
      *ngIf="maxLength"
    >
      {{ maxLength - (value?.length || 0) }}
    </span>
  </div>
</div>

./sq-input-mask.component.scss

.wrapper-all-inside-input {
  .icon {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    position: absolute;
    right: 24px;
    top: 40px;
    &.no-label {
      top: 75px;
    }
  }
  .icon-external {
    color: inherit !important;
  }
  .max-length-name {
    font-size: inherit;
    float: right;
  }
}

Legend

Html element

Component

Html element with directive

File

Description

Extends

Metadata

Index

Properties

Methods

Inputs

Outputs

Constructor

Inputs

Outputs

Methods

Properties

results matching ""

No results matching ""