File

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

Description

Represents an input component for handling money values.

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-money [(value)]='payment' [name]="'money-input'" [id]="'money-input'" [label]="'Money Input'" currency='USD'></sq-input-money>

Extends

SqInputComponent

Implements

OnChanges

Metadata

selector	`sq-input-money`
standalone	`true`
imports	`SqInputMaskComponent`
styleUrls	`./sq-input-money.component.scss`
templateUrl	`./sq-input-money.component.html`

Index

Constructor

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

Defined in src/components/sq-input-money/sq-input-money.component.ts:109

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-money/sq-input-money.component.ts:67
Whether to allow negative numbers.

currency
Type : `string`
Default value : `'BRL'`
Defined in src/components/sq-input-money/sq-input-money.component.ts:82
The currency symbol (e.g., 'USD', 'EUR', 'BRL').

decimalMarker
Type : `"." \| "," \|`
Default value : `','`
Defined in src/components/sq-input-money/sq-input-money.component.ts:77
The character used as a decimal marker (e.g., ',' or '.').

placeHolderCharacter
Type : `string`
Default value : `''`
Defined in src/components/sq-input-money/sq-input-money.component.ts:72
The character used as a placeholder for empty positions.

showMaskTyped
Type : `boolean`
Default value : `false`
Defined in src/components/sq-input-money/sq-input-money.component.ts:62
Whether to display the input mask as the user types.

thousandSeparator
Type : `string`
Default value : `'.'`
Defined in src/components/sq-input-money/sq-input-money.component.ts:57
The character used for thousand separators (e.g., ',' or '.').

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

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.

Outputs

valueChange
Type : `EventEmitter<number>`
Inherited from `SqInputComponent`
Defined in `SqInputComponent:87`
Event emitter for changes in the money value.

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.

Methods

getCurrencyPrefix

getCurrencyPrefix()

Defined in src/components/sq-input-money/sq-input-money.component.ts:144

Get the currency prefix based on the current currency.

Returns : any

The currency prefix as a string.

ngOnChanges

ngOnChanges(changes: SimpleChanges)

Defined in src/components/sq-input-money/sq-input-money.component.ts:130

Lifecycle hook that is called when input property values change.

Parameters :

Name	Type	Optional	Description
changes	`SimpleChanges`	No	An object containing changed properties and their previous and current values.

Returns : void

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

Async validate

validate(isBlur)

Inherited from SqInputComponent

Defined in SqInputComponent:265

Asynchronously validate the input value.

Parameters :

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

Returns : any

Properties

labelTemplateOverwrite

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('labelTemplate')

Defined in src/components/sq-input-money/sq-input-money.component.ts:109

Reference to a label template.

nativeElement

Type : ElementRef

Inherited from SqInputComponent

Defined in SqInputComponent:92

Reference to the native element.

prefix

Default value : this.getCurrencyPrefix()

Defined in src/components/sq-input-money/sq-input-money.component.ts:97

The currency prefix based on the current currency.

rightLabelOverwrite

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('rightLabelOverwrite')

Defined in src/components/sq-input-money/sq-input-money.component.ts:103

Content child template for the right label override.

Public translate

Type : TranslateService

Decorators :


                            @Optional()

Inherited from SqInputComponent

Defined in SqInputComponent:120

- The TranslateService for translation support (optional).

Public validatorHelper

Type : ValidatorHelper

Inherited from SqInputComponent

Defined in SqInputComponent:118

- 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.

labelTemplate

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('labelTemplate')

Inherited from SqInputComponent

Defined in SqInputComponent:225

Reference to a label template.

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.

Accessors

value

getvalue()

Defined in src/components/sq-input-money/sq-input-money.component.ts:50

setvalue(value: any)

Defined in src/components/sq-input-money/sq-input-money.component.ts:43

The value of the input element.

Parameters :

Name	Type	Optional
value	`any`	No

Returns : void

import {
  Component,
  ContentChild,
  ElementRef,
  EventEmitter,
  Input,
  OnChanges,
  Optional,
  Output,
  SimpleChanges,
  TemplateRef,
} from '@angular/core';
import { ValidatorHelper } from '../../helpers/validator.helper';
import { TranslateService } from '@ngx-translate/core';
import { SqInputComponent } from '../sq-input/sq-input.component';
import { SqInputMaskComponent } from '../sq-input-mask/sq-input-mask.component';

/**
 * Represents an input component for handling money values.
 *
 * @implements {OnChanges}
 *
 * 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-money [(value)]='payment' [name]="'money-input'" [id]="'money-input'" [label]="'Money Input'" currency='USD'></sq-input-money>
 */
@Component({
  selector: 'sq-input-money',
  templateUrl: './sq-input-money.component.html',
  styleUrls: ['./sq-input-money.component.scss'],
  standalone: true,
  imports: [SqInputMaskComponent],
})
export class SqInputMoneyComponent extends SqInputComponent implements OnChanges {
  /**
   * The value of the input element.
   */
  @Input()
  public override set value(value: any) {
    if (typeof value === 'number') {
      this._value = value.toString();
    } else {
      this._value = value || '';
    }
  }
  public override get value(): any {
    return parseFloat(this._value);
  }

  /**
   * The character used for thousand separators (e.g., ',' or '.').
   */
  @Input() thousandSeparator = '.';

  /**
   * Whether to display the input mask as the user types.
   */
  @Input() showMaskTyped = false;

  /**
   * Whether to allow negative numbers.
   */
  @Input() allowNegativeNumbers = false;

  /**
   * The character used as a placeholder for empty positions.
   */
  @Input() placeHolderCharacter = '';

  /**
   * The character used as a decimal marker (e.g., ',' or '.').
   */
  @Input() decimalMarker: '.' | ',' | ['.', ','] = ',';

  /**
   * The currency symbol (e.g., 'USD', 'EUR', 'BRL').
   */
  @Input() currency = 'BRL';

  /**
   * Event emitter for changes in the money value.
   */
  @Output() override valueChange: EventEmitter<number> = new EventEmitter();

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

  /**
   * The currency prefix based on the current currency.
   */
  prefix = this.getCurrencyPrefix();

  /**
   * Content child template for the right label override.
   */
  @ContentChild('rightLabelOverwrite')
  rightLabelOverwrite: TemplateRef<HTMLElement> | null = null;

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

  /**
   * 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;
  }

  /**
   * Lifecycle hook that is called when input property values change.
   * @param changes - An object containing changed properties and their previous and current values.
   */
  ngOnChanges(changes: SimpleChanges) {
    if (
      changes['currency'] &&
      changes['currency'].currentValue !== changes['currency'].previousValue &&
      changes['currency'].currentValue
    ) {
      this.prefix = this.getCurrencyPrefix();
    }
  }

  /**
   * Get the currency prefix based on the current currency.
   * @returns The currency prefix as a string.
   */
  getCurrencyPrefix() {
    return Intl.NumberFormat(undefined, {
      style: 'currency',
      currency: this.currency,
    })
      .format(0)
      .replace(/\d/g, '')
      .replace('.', '')
      .replace(',', '');
  }
}

<sq-input-mask
  [value]="_value"
  [id]="id"
  [name]="name"
  mask="separator.2"
  [thousandSeparator]="thousandSeparator"
  [decimalMarker]="decimalMarker"
  [placeHolderCharacter]="placeHolderCharacter"
  [timeToChange]="timeToChange"
  [label]="label"
  [customClass]="customClass"
  [placeholder]="placeholder"
  [externalError]="externalError"
  [externalIcon]="externalIcon"
  [errorSpan]="errorSpan"
  [disabled]="disabled"
  [readonly]="readonly"
  [required]="required"
  [useFormErrors]="useFormErrors"
  [tooltipMessage]="tooltipMessage"
  [tooltipPlacement]="tooltipPlacement"
  [tooltipColor]="tooltipColor"
  [tooltipIcon]="tooltipIcon"
  [backgroundColor]="backgroundColor"
  [allowNegativeNumbers]="allowNegativeNumbers"
  [borderColor]="borderColor"
  [leadZero]="true"
  [showMaskTyped]="showMaskTyped"
  [labelColor]="labelColor"
  [borderColor]="borderColor"
  inputMode="numeric"
  pattern="[0-9]*"
  (valueChange)="change($event)"
  (valid)="valid.emit($event)"
  (inFocus)="inFocus.emit($event)"
  (keyPressUp)="keyPressUp.emit($event)"
  (keyPressDown)="keyPressDown.emit($event)"
  (onFocus)="emitFocus.emit($event)"
>
  @if (labelTemplateOverwrite) {
    <ng-container>
      <ng-template #labelTemplate>
        <ng-container *ngTemplateOutlet="labelTemplateOverwrite"></ng-container>
      </ng-template>
    </ng-container>
  }
  @if (prefix) {
    <ng-container>
      <ng-template #leftLabel>
        {{ prefix }}
      </ng-template>
    </ng-container>
  }
  @if (rightLabelOverwrite) {
    <ng-container>
      <ng-template #rightLabel>
        <ng-container *ngTemplateOutlet="rightLabelOverwrite"></ng-container>
      </ng-template>
    </ng-container>
  }
</sq-input-mask>

./sq-input-money.component.scss

Legend

Html element

Component

Html element with directive

File

Description

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Accessors

Constructor

Inputs

Outputs

Methods

Properties

Accessors

results matching ""

No results matching ""