@taiga-ui/kit
Version:
Taiga UI Angular main components kit
247 lines (242 loc) • 9.81 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, Input, ViewChild, HostListener, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { AbstractTuiNullableControl, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiMapperPipeModule } from '@taiga-ui/cdk';
import { tuiCreateNumberMask, tuiCreateAutoCorrectedNumberPipe, formatNumber, maskedMoneyValueIsEmpty, maskedNumberStringToNumber, TuiPrimitiveTextfieldComponent, TuiPrimitiveTextfieldModule, TuiTextfieldControllerModule } from '@taiga-ui/core';
import { TuiValueAccessorModule } from '@taiga-ui/kit/directives';
import { TextMaskModule } from 'angular2-text-mask';
var TuiInputNumberComponent_1;
const DEFAULT_MAX_LENGTH = 18;
// @dynamic
let TuiInputNumberComponent = TuiInputNumberComponent_1 = class TuiInputNumberComponent extends AbstractTuiNullableControl {
constructor(control, changeDetectorRef) {
super(control, changeDetectorRef);
this.min = -Infinity;
this.max = Infinity;
this.decimal = "not-zero" /* NotZero */;
this.precision = 2;
this.postfix = '';
this.mask = (allowNegative, decimal, precision, nativeFocusableElement) => ({
mask: tuiCreateNumberMask({
allowNegative: allowNegative,
allowDecimal: decimal !== 'never',
decimalLimit: precision,
requireDecimal: decimal === 'always',
}),
pipe: tuiCreateAutoCorrectedNumberPipe(decimal === 'always' ? precision : 0, ',', nativeFocusableElement || undefined),
guide: false,
});
}
get nativeFocusableElement() {
return !this.primitiveTextfield || this.computedDisabled
? null
: this.primitiveTextfield.nativeFocusableElement;
}
get focused() {
return !!this.primitiveTextfield && this.primitiveTextfield.focused;
}
get isNegativeAllowed() {
return this.min < 0;
}
get inputMode() {
return this.decimal === 'never' ? "numeric" /* Numeric */ : "decimal" /* Decimal */;
}
get calculatedMaxLength() {
return (DEFAULT_MAX_LENGTH +
(this.decimal !== "never" /* Never */ && this.nativeValue.includes(',')
? this.precision + 1
: 0));
}
get formattedValue() {
const value = this.value || 0;
const absValue = Math.abs(value);
const hasFraction = absValue % 1 > 0;
let limit = this.decimal === 'always' || hasFraction ? this.precision : 0;
const fraction = hasFraction
? value.toString().split('.')[1].substr(0, this.precision)
: '';
if (this.focused && this.decimal !== 'always') {
limit = fraction.length;
}
return formatNumber(value, limit);
}
get computedValue() {
if (this.focused || !this.isNativeValueInLimit) {
return this.nativeValue;
}
if (this.value === null) {
return maskedMoneyValueIsEmpty(this.nativeValue) ? this.nativeValue : '';
}
return this.formattedValue;
}
onValue(value) {
if (maskedMoneyValueIsEmpty(value)) {
this.updateValue(null);
return;
}
if (this.isNativeValueNotFinished) {
return;
}
const capped = this.absoluteCapInputValue(value);
if (capped === null || isNaN(capped)) {
return;
}
this.updateValue(capped);
if (capped !== maskedNumberStringToNumber(value)) {
this.nativeValue = this.formattedValue;
}
}
onKeyDown(event) {
if (event.key !== ',' && event.key !== '.') {
return;
}
if (this.decimal === 'never') {
event.preventDefault();
return;
}
if (this.nativeValue.includes(',')) {
event.preventDefault();
this.setCaretAfterComma();
}
}
onFocused(focused) {
this.updateFocused(focused);
if (focused) {
return;
}
const nativeNumberValue = maskedNumberStringToNumber(this.nativeValue);
if (isNaN(nativeNumberValue)) {
this.clear();
return;
}
const clamped = Math.min(this.max, Math.max(this.min, nativeNumberValue));
this.updateValue(clamped);
this.nativeValue = this.formattedValue;
}
onHovered(hovered) {
this.updateHovered(hovered);
}
onPressed(pressed) {
this.updatePressed(pressed);
}
onZero(event) {
const decimal = this.nativeValue.split(',')[1] || '';
const { nativeFocusableElement } = this;
if (decimal.length < this.precision ||
!nativeFocusableElement ||
!nativeFocusableElement.selectionStart ||
this.nativeValue[nativeFocusableElement.selectionStart] !== '0') {
return;
}
event.preventDefault();
nativeFocusableElement.selectionStart++;
}
get isNativeValueInLimit() {
if (this.nativeValue === '') {
return true;
}
const nativeNumberValue = maskedNumberStringToNumber(this.nativeValue);
return nativeNumberValue >= this.min && nativeNumberValue <= this.max;
}
get isNativeValueNotFinished() {
const nativeNumberValue = maskedNumberStringToNumber(this.nativeValue);
return nativeNumberValue < 0
? nativeNumberValue > this.max
: nativeNumberValue < this.min;
}
get nativeValue() {
return this.nativeFocusableElement ? this.nativeFocusableElement.value : '';
}
set nativeValue(value) {
if (!this.primitiveTextfield || !this.nativeFocusableElement) {
return;
}
this.primitiveTextfield.value = value;
this.nativeFocusableElement.value = value;
}
clear() {
this.nativeValue = '';
this.updateValue(null);
}
absoluteCapInputValue(inputValue) {
const value = maskedNumberStringToNumber(inputValue);
const capped = value < 0 ? Math.max(this.min, value) : Math.min(value, this.max);
const ineligibleValue = isNaN(capped) || capped < this.min || capped > this.max;
return ineligibleValue ? null : capped;
}
setCaretAfterComma() {
if (!this.nativeFocusableElement) {
return;
}
const afterCommaPosition = this.nativeValue.length - this.precision;
this.nativeFocusableElement.setSelectionRange(afterCommaPosition, afterCommaPosition);
}
};
TuiInputNumberComponent.ctorParameters = () => [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiInputNumberComponent.prototype, "min", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputNumberComponent.prototype, "max", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputNumberComponent.prototype, "decimal", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputNumberComponent.prototype, "precision", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputNumberComponent.prototype, "postfix", void 0);
__decorate([
ViewChild(TuiPrimitiveTextfieldComponent)
], TuiInputNumberComponent.prototype, "primitiveTextfield", void 0);
__decorate([
HostListener('keydown.0', ['$event'])
], TuiInputNumberComponent.prototype, "onZero", null);
TuiInputNumberComponent = TuiInputNumberComponent_1 = __decorate([
Component({
selector: 'tui-input-number',
template: "<tui-primitive-textfield\n class=\"textfield\"\n tuiValueAccessor\n tuiTextfieldInputMode=\"decimal\"\n [pseudoHovered]=\"pseudoHovered\"\n [pseudoFocused]=\"computedFocused\"\n [invalid]=\"computedInvalid\"\n [tuiTextfieldMaxLength]=\"calculatedMaxLength\"\n [readOnly]=\"readOnly\"\n [disabled]=\"computedDisabled\"\n [textMask]=\"isNegativeAllowed | tuiMapper: mask:decimal:precision:nativeFocusableElement\"\n [value]=\"computedValue\"\n [postfix]=\"postfix\"\n [focusable]=\"focusable\"\n (valueChange)=\"onValue($event)\"\n (hoveredChange)=\"onHovered($event)\"\n (focusedChange)=\"onFocused($event)\"\n (pressedChange)=\"onPressed($event)\"\n (keydown)=\"onKeyDown($event)\"\n>\n <ng-content></ng-content>\n</tui-primitive-textfield>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(() => TuiInputNumberComponent_1),
},
],
styles: [":host{display:block;border-radius:var(--tui-radius-m)}.textfield{border-radius:inherit}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef))
], TuiInputNumberComponent);
let TuiInputNumberModule = class TuiInputNumberModule {
};
TuiInputNumberModule = __decorate([
NgModule({
imports: [
TextMaskModule,
TuiMapperPipeModule,
TuiPrimitiveTextfieldModule,
TuiTextfieldControllerModule,
TuiValueAccessorModule,
],
declarations: [TuiInputNumberComponent],
exports: [TuiInputNumberComponent],
})
], TuiInputNumberModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputNumberComponent, TuiInputNumberModule };
//# sourceMappingURL=taiga-ui-kit-components-input-number.js.map