@taiga-ui/kit
Version:
Taiga UI Angular main components kit
240 lines (235 loc) • 11 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, Input, ViewChild, HostBinding, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { AbstractTuiControl, isNativeFocused, isPresent, setNativeFocused, CHAR_NO_BREAK_SPACE, clamp, TUI_IS_MOBILE, tuiDefaultProp, tuiPure, TUI_FOCUSABLE_ITEM_ACCESSOR } from '@taiga-ui/cdk';
import { tuiCreateNumberMask, formatNumber, TUI_TEXTFIELD_APPEARANCE, TuiTextfieldSizeDirective, TUI_TEXTFIELD_SIZE, TuiPrimitiveTextfieldComponent, TuiButtonModule, TuiPrimitiveTextfieldModule, TuiTextfieldControllerModule } from '@taiga-ui/core';
import { TUI_PLUS_MINUS_TEXTS } from '@taiga-ui/kit/tokens';
import { Observable } from 'rxjs';
import { CommonModule } from '@angular/common';
import { TuiValueAccessorModule } from '@taiga-ui/kit/directives';
import { TextMaskModule } from 'angular2-text-mask';
var TuiInputCountComponent_1;
// @dynamic
let TuiInputCountComponent = TuiInputCountComponent_1 = class TuiInputCountComponent extends AbstractTuiControl {
constructor(control, changeDetectorRef, appearance, textfieldSize, minusTexts$, isMobile) {
super(control, changeDetectorRef);
this.appearance = appearance;
this.textfieldSize = textfieldSize;
this.minusTexts$ = minusTexts$;
this.isMobile = isMobile;
this.step = 1;
this.min = 0;
this.max = Infinity;
this.hideButtons = false;
this.postfix = '';
}
getMask(allowNegative) {
return { mask: tuiCreateNumberMask({ allowNegative }), guide: false };
}
get nativeFocusableElement() {
return !this.primitiveTextfield || this.computedDisabled
? null
: this.primitiveTextfield.nativeFocusableElement;
}
get size() {
return this.textfieldSize.size;
}
get focused() {
return isNativeFocused(this.nativeFocusableElement);
}
get hasButtons() {
return !this.hideButtons && this.appearance !== "table" /* Table */;
}
get exampleText() {
return String(this.min);
}
get computedValue() {
return formatNumber(this.value);
}
get minusButtonDisabled() {
return (this.disabled ||
this.readOnly ||
(isPresent(this.value) && this.value <= this.min));
}
get plusButtonDisabled() {
return (this.disabled ||
this.readOnly ||
(isPresent(this.value) && this.value >= this.max));
}
onButtonMouseDown(event, disabled = false) {
if (disabled || !this.nativeFocusableElement || this.isMobile) {
return;
}
event.preventDefault();
setNativeFocused(this.nativeFocusableElement);
}
onFocused(focused) {
if (!focused) {
this.onBlur();
}
this.updateFocused(focused);
}
onHovered(hovered) {
this.updateHovered(hovered);
}
onPressed(pressed) {
this.updatePressed(pressed);
}
onValueChange() {
const capped = this.capValue(this.nativeNumberValue);
if (capped === null || isNaN(capped)) {
return;
}
const newValue = formatNumber(capped);
if (this.nativeValue !== newValue) {
this.nativeValue = newValue;
}
this.updateValue(capped);
}
decreaseValue() {
if (this.readOnly) {
return;
}
const newValue = (this.value || 0) - this.step;
this.safeUpdateValue(newValue);
}
increaseValue() {
if (this.readOnly) {
return;
}
const newValue = (this.value || 0) + this.step;
this.safeUpdateValue(newValue);
}
onKeydown(event) {
switch (event.key) {
case 'ArrowUp':
case 'Up':
this.increaseValue();
event.preventDefault();
break;
case 'ArrowDown':
case 'Down':
this.decreaseValue();
event.preventDefault();
break;
default:
break;
}
}
getFallbackValue() {
return 0;
}
get nativeNumberValue() {
return parseInt(this.nativeValue.split(CHAR_NO_BREAK_SPACE).join(''), 10);
}
get nativeValue() {
return this.nativeFocusableElement ? this.nativeFocusableElement.value : '';
}
set nativeValue(value) {
if (!this.nativeFocusableElement) {
return;
}
this.nativeFocusableElement.value = value;
}
safeUpdateValue(newValue) {
const value = clamp(newValue, this.min, this.max);
this.updateValue(value);
this.nativeValue = formatNumber(value);
}
capValue(value) {
const capped = Math.min(value, this.max);
return isNaN(capped) || capped < this.min ? null : capped;
}
onBlur() {
const value = Math.max(this.nativeNumberValue || 0, this.min);
const formattedValue = formatNumber(value);
this.nativeValue = formattedValue;
this.updateValue(value);
if (this.primitiveTextfield) {
this.primitiveTextfield.value = formattedValue;
}
}
};
TuiInputCountComponent.ctorParameters = () => [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: String, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_APPEARANCE,] }] },
{ type: TuiTextfieldSizeDirective, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_SIZE,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_PLUS_MINUS_TEXTS,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_MOBILE,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiInputCountComponent.prototype, "step", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputCountComponent.prototype, "min", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputCountComponent.prototype, "max", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputCountComponent.prototype, "hideButtons", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputCountComponent.prototype, "postfix", void 0);
__decorate([
tuiPure
], TuiInputCountComponent.prototype, "getMask", null);
__decorate([
ViewChild(TuiPrimitiveTextfieldComponent)
], TuiInputCountComponent.prototype, "primitiveTextfield", void 0);
__decorate([
HostBinding('attr.data-tui-host-size')
], TuiInputCountComponent.prototype, "size", null);
__decorate([
HostBinding('class._has-buttons')
], TuiInputCountComponent.prototype, "hasButtons", null);
TuiInputCountComponent = TuiInputCountComponent_1 = __decorate([
Component({
selector: 'tui-input-count',
template: "<tui-primitive-textfield\n class=\"textfield\"\n tuiValueAccessor\n tuiTextfieldAutocomplete=\"off\"\n tuiTextfieldInputMode=\"numeric\"\n [tuiTextfieldMaxLength]=\"18\"\n [pseudoFocused]=\"pseudoFocused\"\n [pseudoHovered]=\"pseudoHovered\"\n [pseudoPressed]=\"pseudoPressed\"\n [focusable]=\"focusable\"\n [nativeId]=\"nativeId\"\n [postfix]=\"postfix\"\n [disabled]=\"disabled\"\n [readOnly]=\"readOnly\"\n [textMask]=\"getMask(min < 0)\"\n [invalid]=\"computedInvalid\"\n [value]=\"computedValue\"\n (valueChange)=\"onValueChange()\"\n (keydown)=\"onKeydown($event)\"\n (focusedChange)=\"onFocused($event)\"\n (hoveredChange)=\"onHovered($event)\"\n (pressedChange)=\"onPressed($event)\"\n>\n <ng-content></ng-content>\n</tui-primitive-textfield>\n<ng-container *ngIf=\"hasButtons && (minusTexts$ | async) as texts\">\n <section class=\"buttons\">\n <button\n tuiIconButton\n type=\"button\"\n automation-id=\"tui-input-count__plus-button\"\n size=\"s\"\n icon=\"tuiIconPlus\"\n class=\"button button_plus\"\n appearance=\"textfield\"\n [title]=\"texts[0]\"\n [disabled]=\"plusButtonDisabled\"\n [focusable]=\"false\"\n (mousedown)=\"onButtonMouseDown($event, plusButtonDisabled)\"\n (click)=\"increaseValue()\"\n ></button>\n <button\n tuiIconButton\n type=\"button\"\n automation-id=\"tui-input-count__minus-button\"\n size=\"s\"\n icon=\"tuiIconMinus\"\n class=\"button button_minus\"\n appearance=\"textfield\"\n [disabled]=\"minusButtonDisabled\"\n [focusable]=\"false\"\n [title]=\"texts[1]\"\n (mousedown)=\"onButtonMouseDown($event, minusButtonDisabled)\"\n (click)=\"decreaseValue()\"\n ></button>\n </section>\n</ng-container>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(() => TuiInputCountComponent_1),
},
],
styles: [":host{font:var(--tui-font-text-s);display:flex;border-radius:var(--tui-radius-m);height:var(--tui-height-m);color:var(--tui-text-01)}:host._disabled{pointer-events:none}:host[data-tui-host-size='l']{font:var(--tui-font-text-m);height:var(--tui-height-l)}.textfield{position:relative;border-radius:inherit;width:100%}:host._has-buttons .textfield{border-top-right-radius:0;border-bottom-right-radius:0}.buttons{display:flex;flex-direction:column;margin-left:2px;height:100%}.button.button{display:flex;width:calc(var(--tui-height-m) * .75);height:calc(50% - 1px)}.button.button_plus{margin-bottom:2px;border-radius:0 var(--tui-radius-m) 0 0}.button.button_minus{border-radius:0 0 var(--tui-radius-m)}:host[data-tui-host-size='l'] .button.button{width:calc(var(--tui-height-l) * .75)}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Inject(TUI_TEXTFIELD_APPEARANCE)),
__param(3, Inject(TUI_TEXTFIELD_SIZE)),
__param(4, Inject(TUI_PLUS_MINUS_TEXTS)),
__param(5, Inject(TUI_IS_MOBILE))
], TuiInputCountComponent);
let TuiInputCountModule = class TuiInputCountModule {
};
TuiInputCountModule = __decorate([
NgModule({
imports: [
CommonModule,
TextMaskModule,
TuiButtonModule,
TuiPrimitiveTextfieldModule,
TuiTextfieldControllerModule,
TuiValueAccessorModule,
],
declarations: [TuiInputCountComponent],
exports: [TuiInputCountComponent],
})
], TuiInputCountModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputCountComponent, TuiInputCountModule };
//# sourceMappingURL=taiga-ui-kit-components-input-count.js.map