File

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

Description

Represents an input component for handling numeric values.

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

Example :

<sq-input-number [(value)]='number' [name]="'number-input'" [id]="'number-input'"></sq-input-number>

Extends

SqInputComponent

Metadata

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

Index

Constructor

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

Defined in src/components/sq-input-number/sq-input-number.component.ts:101

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

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

leadZero
Type : `boolean`
Default value : `false`
Defined in src/components/sq-input-number/sq-input-number.component.ts:53
Whether to add a leading zero for single-digit numbers (e.g., '01' instead of '1').

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

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

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

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

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

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

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.

Outputs

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

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.

Methods

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

Async validate

validate(isBlur)

Inherited from SqInputComponent

Defined in SqInputComponent:259

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-number/sq-input-number.component.ts:96

Reference to a label template.

leftLabelOverwrite

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('leftLabelOverwrite')

Defined in src/components/sq-input-number/sq-input-number.component.ts:84

Content child template for the left label override.

nativeElement

Type : ElementRef

Inherited from SqInputComponent

Defined in SqInputComponent:101

Reference to the native element.

rightLabelOverwrite

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('rightLabelOverwrite')

Defined in src/components/sq-input-number/sq-input-number.component.ts:90

Content child template for the right label override.

Public translate

Type : TranslateService

Decorators :


                            @Optional()

Inherited from SqInputComponent

Defined in SqInputComponent:112

- The TranslateService for translation support (optional).

Public validatorHelper

Type : ValidatorHelper

Inherited from SqInputComponent

Defined in SqInputComponent:110

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

labelTemplate

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('labelTemplate')

Inherited from SqInputComponent

Defined in SqInputComponent:219

Reference to a label template.

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.

Accessors

value

getvalue()

Defined in src/components/sq-input-number/sq-input-number.component.ts:31

setvalue(value: any)

Defined in src/components/sq-input-number/sq-input-number.component.ts:24

The value of the input element.

Parameters :

Name	Type	Optional
value	`any`	No

Returns : void

import { Component, ContentChild, ElementRef, EventEmitter, Input, Optional, Output, 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 component for handling numeric values.
 *
 * This component extends the {@link SqInputComponent} and adds additional properties and behavior for handling numeric input.
 *
 * @example
 * <sq-input-number [(value)]='number' [name]="'number-input'" [id]="'number-input'"></sq-input-number>
 */
@Component({
  selector: 'sq-input-number',
  templateUrl: './sq-input-number.component.html',
  styleUrls: ['./sq-input-number.component.scss']
})
export class SqInputNumberComponent extends SqInputComponent {
  /**
   * 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

  /**
   * Whether to add a leading zero for single-digit numbers (e.g., '01' instead of '1').
   */
  @Input() leadZero = false

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

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

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

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

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

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

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

<sq-input-mask
  [value]="_value"
  [id]="id"
  [name]="name"
  mask="separator"
  [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]="leadZero"
  [showMaskTyped]="showMaskTyped"
  [labelColor]="labelColor"
  [maxValue]="maxValue"
  [minValue]="minValue"
  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()"
>
<ng-container *ngIf="labelTemplateOverwrite">
  <ng-template #labelTemplate>
    <ng-container *ngTemplateOutlet="labelTemplateOverwrite"></ng-container>
  </ng-template>
</ng-container>
  <ng-container *ngIf="leftLabelOverwrite">
    <ng-template #leftLabel>
      <ng-container *ngTemplateOutlet="leftLabelOverwrite"></ng-container>
    </ng-template>
  </ng-container>
  <ng-container *ngIf="rightLabelOverwrite">
    <ng-template #rightLabel>
      <ng-container *ngTemplateOutlet="rightLabelOverwrite"></ng-container>
    </ng-template>
  </ng-container>
</sq-input-mask>

./sq-input-number.component.scss

Legend

Html element

Component

Html element with directive

File

Description

Extends

Metadata

Index

Properties

Methods

Inputs

Outputs

Accessors

Constructor

Inputs

Outputs

Methods

Properties

Accessors

results matching ""

No results matching ""