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`
standalone	`true`
imports	`NgClass` `NgStyle` `NgTemplateOutlet` `FormsModule` `NgxMaskDirective` `SqTooltipComponent` `UniversalSafePipe`
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:94

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:58
Indicates whether negative numbers are allowed.

decimalMarker
Type : `"." \| "," \|`
Default value : `['.', ',']`
Defined in src/components/sq-input-mask/sq-input-mask.component.ts:63
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:73
Indicates whether leading zeros should be preserved.

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

maxValue
Type : `number`
Defined in src/components/sq-input-mask/sq-input-mask.component.ts:83
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:78
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:68
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:48
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:53
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:43
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:38
The character used as a thousand separator in numeric input.

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

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

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

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

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

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

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

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

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

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

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

maxLength
Type : `number \| null`
Default value : `null`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:167`
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:51`
The name attribute for the input element.

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

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

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

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

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

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

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

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

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

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

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

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

Outputs

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

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

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

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

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

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

Methods

Async validate

validate(isBlur)

Inherited from SqInputComponent

Defined in SqInputComponent:115

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:309

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:335

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:343

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:325

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:89

Reference to a label template.

nativeElement

Type : ElementRef

Inherited from SqInputComponent

Defined in SqInputComponent:94

Reference to the native element.

Public translate

Type : TranslateService

Decorators :


                            @Optional()

Inherited from SqInputComponent

Defined in SqInputComponent:105

- The TranslateService for translation support (optional).

Public validatorHelper

Type : ValidatorHelper

Inherited from SqInputComponent

Defined in SqInputComponent:103

- The ValidatorHelper service for input validation.

_value

Type : any

Default value : ''

Inherited from SqInputComponent

Defined in SqInputComponent:230

The internal value of the input element.

error

Type : boolean | string

Default value : false

Inherited from SqInputComponent

Defined in SqInputComponent:235

Error message to display.

leftLabel

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('leftLabel')

Inherited from SqInputComponent

Defined in SqInputComponent:213

Reference to a left-aligned label template.

rightLabel

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('rightLabel')

Inherited from SqInputComponent

Defined in SqInputComponent:219

Reference to a right-aligned label template.

timeoutInput

Type : ReturnType<>

Inherited from SqInputComponent

Defined in SqInputComponent:245

Timeout for input changes.

import { Component, ContentChild, ElementRef, Input, Optional, TemplateRef } from '@angular/core';
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgxMaskDirective } from 'ngx-mask';
import { ValidatorHelper } from '../../helpers/validator.helper';
import { TranslateService } from '@ngx-translate/core';
import { SqInputComponent } from '../sq-input/sq-input.component';
import { SqTooltipComponent } from '../sq-tooltip/sq-tooltip.component';
import { UniversalSafePipe } from '../../pipes/universal-safe/universal-safe.pipe';

/**
 * 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'],
  standalone: true,
  imports: [NgClass, NgStyle, NgTemplateOutlet, FormsModule, NgxMaskDirective, SqTooltipComponent, UniversalSafePipe],
})
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 }}">
  @if (label?.length || tooltipMessage || labelTemplate) {
    <label
      class="display-flex"
      [ngClass]="{
        readonly: readonly,
      }"
      [for]="id"
    >
      @if (label && !labelTemplate) {
        <div [ngStyle]="{ color: labelColor }" [innerHtml]="label | universalSafe"></div>
      }
      @if (labelTemplate) {
        <div>
          <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
        </div>
      }
      @if (tooltipMessage) {
        <sq-tooltip
          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,
    }"
  >
    @if (leftLabel) {
      <span class="input-group-text m-0">
        <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]="type"
      [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
    />
    @if (rightLabel) {
      <span class="input-group-text m-0">
        <ng-container *ngTemplateOutlet="rightLabel"></ng-container>
      </span>
    }
  </div>
  @if (externalIcon) {
    <span
      class="icon icon-external textarea-icon"
      [ngClass]="{
        'no-label': !label?.length,
      }"
      [innerHtml]="externalIcon || '' | universalSafe"
    ></span>
  }
  @if (errorSpan) {
    <div
      class="box-validation box-invalid show"
      [ngClass]="{
        'has-max-length': maxLength,
      }"
    >
      <i
        [ngClass]="{
          'visibility-hidden-force': !error && !externalError,
        }"
        class="fa-solid fa-triangle-exclamation"
      ></i>
      {{ externalError ? externalError : '' }}
      {{ error && !externalError ? error : '' }}
      @if (maxLength) {
        <span
          class="max-length-name"
          [ngClass]="{
            'visibility-hidden-force': disabled || readonly,
          }"
        >
          {{ 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 ""