@taiga-ui/kit/fesm5/taiga-ui-kit-components-input-count.js

Taiga UI Angular main components kit

import { __extends, __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 { isNativeFocused, isPresent, setNativeFocused, CHAR_NO_BREAK_SPACE, clamp, TUI_IS_MOBILE, tuiDefaultProp, tuiPure, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiControl } 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';

// @dynamic
var TuiInputCountComponent = /** @class */ (function (_super) {
    __extends(TuiInputCountComponent, _super);
    function TuiInputCountComponent(control, changeDetectorRef, appearance, textfieldSize, minusTexts$, isMobile) {
        var _this = _super.call(this, control, changeDetectorRef) || this;
        _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 = '';
        return _this;
    }
    TuiInputCountComponent_1 = TuiInputCountComponent;
    TuiInputCountComponent.prototype.getMask = function (allowNegative) {
        return { mask: tuiCreateNumberMask({ allowNegative: allowNegative }), guide: false };
    };
    Object.defineProperty(TuiInputCountComponent.prototype, "nativeFocusableElement", {
        get: function () {
            return !this.primitiveTextfield || this.computedDisabled
                ? null
                : this.primitiveTextfield.nativeFocusableElement;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiInputCountComponent.prototype, "size", {
        get: function () {
            return this.textfieldSize.size;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiInputCountComponent.prototype, "focused", {
        get: function () {
            return isNativeFocused(this.nativeFocusableElement);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiInputCountComponent.prototype, "hasButtons", {
        get: function () {
            return !this.hideButtons && this.appearance !== "table" /* Table */;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiInputCountComponent.prototype, "exampleText", {
        get: function () {
            return String(this.min);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiInputCountComponent.prototype, "computedValue", {
        get: function () {
            return formatNumber(this.value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiInputCountComponent.prototype, "minusButtonDisabled", {
        get: function () {
            return (this.disabled ||
                this.readOnly ||
                (isPresent(this.value) && this.value <= this.min));
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiInputCountComponent.prototype, "plusButtonDisabled", {
        get: function () {
            return (this.disabled ||
                this.readOnly ||
                (isPresent(this.value) && this.value >= this.max));
        },
        enumerable: true,
        configurable: true
    });
    TuiInputCountComponent.prototype.onButtonMouseDown = function (event, disabled) {
        if (disabled === void 0) { disabled = false; }
        if (disabled || !this.nativeFocusableElement || this.isMobile) {
            return;
        }
        event.preventDefault();
        setNativeFocused(this.nativeFocusableElement);
    };
    TuiInputCountComponent.prototype.onFocused = function (focused) {
        if (!focused) {
            this.onBlur();
        }
        this.updateFocused(focused);
    };
    TuiInputCountComponent.prototype.onHovered = function (hovered) {
        this.updateHovered(hovered);
    };
    TuiInputCountComponent.prototype.onPressed = function (pressed) {
        this.updatePressed(pressed);
    };
    TuiInputCountComponent.prototype.onValueChange = function () {
        var capped = this.capValue(this.nativeNumberValue);
        if (capped === null || isNaN(capped)) {
            return;
        }
        var newValue = formatNumber(capped);
        if (this.nativeValue !== newValue) {
            this.nativeValue = newValue;
        }
        this.updateValue(capped);
    };
    TuiInputCountComponent.prototype.decreaseValue = function () {
        if (this.readOnly) {
            return;
        }
        var newValue = (this.value || 0) - this.step;
        this.safeUpdateValue(newValue);
    };
    TuiInputCountComponent.prototype.increaseValue = function () {
        if (this.readOnly) {
            return;
        }
        var newValue = (this.value || 0) + this.step;
        this.safeUpdateValue(newValue);
    };
    TuiInputCountComponent.prototype.onKeydown = function (event) {
        switch (event.key) {
            case 'ArrowUp':
            case 'Up':
                this.increaseValue();
                event.preventDefault();
                break;
            case 'ArrowDown':
            case 'Down':
                this.decreaseValue();
                event.preventDefault();
                break;
            default:
                break;
        }
    };
    TuiInputCountComponent.prototype.getFallbackValue = function () {
        return 0;
    };
    Object.defineProperty(TuiInputCountComponent.prototype, "nativeNumberValue", {
        get: function () {
            return parseInt(this.nativeValue.split(CHAR_NO_BREAK_SPACE).join(''), 10);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiInputCountComponent.prototype, "nativeValue", {
        get: function () {
            return this.nativeFocusableElement ? this.nativeFocusableElement.value : '';
        },
        set: function (value) {
            if (!this.nativeFocusableElement) {
                return;
            }
            this.nativeFocusableElement.value = value;
        },
        enumerable: true,
        configurable: true
    });
    TuiInputCountComponent.prototype.safeUpdateValue = function (newValue) {
        var value = clamp(newValue, this.min, this.max);
        this.updateValue(value);
        this.nativeValue = formatNumber(value);
    };
    TuiInputCountComponent.prototype.capValue = function (value) {
        var capped = Math.min(value, this.max);
        return isNaN(capped) || capped < this.min ? null : capped;
    };
    TuiInputCountComponent.prototype.onBlur = function () {
        var value = Math.max(this.nativeNumberValue || 0, this.min);
        var formattedValue = formatNumber(value);
        this.nativeValue = formattedValue;
        this.updateValue(value);
        if (this.primitiveTextfield) {
            this.primitiveTextfield.value = formattedValue;
        }
    };
    var TuiInputCountComponent_1;
    TuiInputCountComponent.ctorParameters = function () { return [
        { 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(function () { return 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);
    return TuiInputCountComponent;
}(AbstractTuiControl));

var TuiInputCountModule = /** @class */ (function () {
    function TuiInputCountModule() {
    }
    TuiInputCountModule = __decorate([
        NgModule({
            imports: [
                CommonModule,
                TextMaskModule,
                TuiButtonModule,
                TuiPrimitiveTextfieldModule,
                TuiTextfieldControllerModule,
                TuiValueAccessorModule,
            ],
            declarations: [TuiInputCountComponent],
            exports: [TuiInputCountComponent],
        })
    ], TuiInputCountModule);
    return TuiInputCountModule;
}());

/**
 * Generated bundle index. Do not edit.
 */

export { TuiInputCountComponent, TuiInputCountModule };
//# sourceMappingURL=taiga-ui-kit-components-input-count.js.map