@taiga-ui/kit
Version:
Taiga UI Angular main components kit
436 lines (423 loc) • 33.2 kB
JavaScript
import { TuiLabel } from '@taiga-ui/core/components/label';
import * as i2 from '@taiga-ui/core/components/textfield';
import { TUI_TEXTFIELD_OPTIONS, tuiAsTextfieldContent, TuiTextfieldContent, TuiTextfieldComponent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
import { TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
import * as i0 from '@angular/core';
import { inject, input, computed, effect, Directive, untracked, Injectable, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import { maskitoNumberOptionsGenerator, maskitoStringifyNumber, maskitoCaretGuard, maskitoParseNumber } from '@maskito/kit';
import { WA_IS_IOS } from '@ng-web-apis/platform';
import { TuiValueTransformer, TUI_IDENTITY_VALUE_TRANSFORMER, TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import * as i1$1 from '@taiga-ui/core/components/input';
import { TuiInputDirective, TuiWithInput } from '@taiga-ui/core/components/input';
import * as i1 from '@maskito/angular';
import { MaskitoDirective } from '@maskito/angular';
import { maskitoTransform } from '@maskito/core';
import { tuiIsSafeToRound, tuiRoundWith, tuiRound, tuiSum, tuiClamp } from '@taiga-ui/cdk/utils/math';
import { TUI_NUMBER_FORMAT } from '@taiga-ui/core/tokens';
import { tuiMaskito } from '@taiga-ui/kit/utils';
import { CHAR_MINUS, TUI_VERSION } from '@taiga-ui/cdk/constants';
import { tuiCreateOptions, tuiProvide } from '@taiga-ui/cdk/utils/di';
import { TUI_FLOATING_PRECISION } from '@taiga-ui/core/components/slider';
import { tuiGetFractionPartPadded } from '@taiga-ui/core/utils/format';
import { identity, Subject, merge, fromEvent, switchMap, timer, expand, map, takeUntil } from 'rxjs';
import * as i1$2 from '@taiga-ui/kit/directives/appearance-proxy';
import { TuiAppearanceProxy } from '@taiga-ui/kit/directives/appearance-proxy';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { TuiButton } from '@taiga-ui/core/components/button';
import { DOCUMENT } from '@angular/common';
const TUI_INPUT_NUMBER_DEFAULT_OPTIONS = {
min: Number.MIN_SAFE_INTEGER,
max: Number.MAX_SAFE_INTEGER,
prefix: '',
postfix: '',
minusSign: CHAR_MINUS,
step: 0,
icons: {
increase: '@tui.plus',
decrease: '@tui.minus',
},
valueTransformer: null,
};
const [TUI_INPUT_NUMBER_OPTIONS, tuiInputNumberOptionsProvider] = tuiCreateOptions(TUI_INPUT_NUMBER_DEFAULT_OPTIONS);
class TuiNumberMask {
constructor() {
this.options = inject(TUI_INPUT_NUMBER_OPTIONS);
this.numberFormat = inject(TUI_NUMBER_FORMAT);
this.input = inject(TuiInputDirective);
this.prefix = input(this.options.prefix);
this.postfix = input(this.options.postfix);
this.maximumFractionDigits = computed((precision = this.numberFormat().precision) => Number.isNaN(precision) ? 2 : precision);
this.min = input(this.options.min, { transform: (x) => x ?? this.options.min });
this.max = input(this.options.max, { transform: (x) => x ?? this.options.max });
this.params = computed(() => {
const { decimalMode, ...numberFormat } = this.numberFormat();
const maximumFractionDigits = this.maximumFractionDigits();
return {
...numberFormat,
...this.options,
maximumFractionDigits,
min: this.min(),
max: this.max(),
prefix: this.prefix(),
postfix: this.postfix(),
minimumFractionDigits: decimalMode === 'always' ? maximumFractionDigits : 0,
};
});
this.mask = tuiMaskito(computed(() => this.computeMask(this.params())));
this.maskInitialCalibration = effect(() => {
const options = maskitoNumberOptionsGenerator({
...this.params(),
min: -Infinity,
max: Infinity,
});
this.input.value.update((x) => maskitoTransform(x, options));
});
}
stringify(value) {
const params = this.params();
const precision = params.maximumFractionDigits;
const rounded = typeof value === 'number' &&
Number.isFinite(precision) &&
tuiIsSafeToRound(value, precision)
? tuiRoundWith({
value,
precision,
method: this.numberFormat().rounding,
})
: value;
return maskitoStringifyNumber(rounded ?? null, {
...params,
minimumFractionDigits: String(rounded).includes(params.decimalSeparator) &&
this.numberFormat().decimalMode !== 'not-zero'
? params.maximumFractionDigits
: 0,
});
}
computeMask(params) {
const { prefix = '', postfix = '', negativePattern, minusSign } = params;
const { plugins, ...options } = maskitoNumberOptionsGenerator(params);
return {
...options,
plugins: [
...plugins,
maskitoCaretGuard((value) => [
minusSign &&
value.includes(minusSign) &&
negativePattern === 'minusFirst'
? 0
: prefix.length,
value.length - postfix.length,
]),
],
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNumberMask, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiNumberMask, isStandalone: true, inputs: { prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, postfix: { classPropertyName: "postfix", publicName: "postfix", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.MaskitoDirective }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNumberMask, decorators: [{
type: Directive,
args: [{ hostDirectives: [MaskitoDirective] }]
}] });
class TuiWithNumberMask {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiWithNumberMask, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiWithNumberMask, isStandalone: true, hostDirectives: [{ directive: TuiNumberMask, inputs: ["min", "min", "max", "max", "prefix", "prefix", "postfix", "postfix"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiWithNumberMask, decorators: [{
type: Directive,
args: [{
hostDirectives: [
{
directive: TuiNumberMask,
inputs: ['min', 'max', 'prefix', 'postfix'],
},
],
}]
}] });
class TuiQuantumValueTransformerBase extends TuiValueTransformer {
// eslint-disable-next-line @typescript-eslint/parameter-properties,@angular-eslint/prefer-inject
constructor(quantum = 0) {
super();
this.quantum = quantum;
this.fromControlValue = identity;
}
toControlValue(value) {
return value != null &&
this.quantum > 0 &&
tuiIsSafeToRound(value, tuiGetFractionPartPadded(this.quantum).length)
? tuiRound(Math.round(value / this.quantum) * this.quantum, TUI_FLOATING_PRECISION)
: value;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiQuantumValueTransformerBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiQuantumValueTransformerBase, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiQuantumValueTransformerBase, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: undefined }] });
class TuiQuantumValueTransformer extends TuiQuantumValueTransformerBase {
constructor() {
super(0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiQuantumValueTransformer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiQuantumValueTransformer, isStandalone: true, selector: "[tuiInputNumber][quantum]:not([bigint])", inputs: { quantum: "quantum" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiQuantumValueTransformer, decorators: [{
type: Directive,
args: [{
selector: '[tuiInputNumber][quantum]:not([bigint])',
inputs: ['quantum'],
}]
}], ctorParameters: () => [] });
class TuiBigIntQuantumValueTransformer extends TuiValueTransformer {
constructor() {
super(...arguments);
this.quantum = input(BigInt(0));
this.fromControlValue = identity;
}
toControlValue(value) {
if (!this.quantum() || !value) {
return value;
}
const floor = (value / this.quantum()) * this.quantum();
const remainder = value % this.quantum();
return (floor + (BigInt(2) * remainder >= this.quantum() ? this.quantum() : BigInt(0)));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiBigIntQuantumValueTransformer, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiBigIntQuantumValueTransformer, isStandalone: true, selector: "[tuiInputNumber][bigint][quantum]", inputs: { quantum: { classPropertyName: "quantum", publicName: "quantum", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiBigIntQuantumValueTransformer, decorators: [{
type: Directive,
args: [{ selector: '[tuiInputNumber][bigint][quantum]' }]
}] });
class TuiNumberValueTransformer extends TuiValueTransformer {
constructor() {
super(...arguments);
this.mask = inject(TuiNumberMask);
this.quantumTransformer = inject(TuiQuantumValueTransformer, { optional: true }) ??
TUI_IDENTITY_VALUE_TRANSFORMER;
this.optionsTransformer = inject(TUI_INPUT_NUMBER_OPTIONS).valueTransformer ??
TUI_IDENTITY_VALUE_TRANSFORMER;
}
toControlValue(textfieldValue) {
const parsed = maskitoParseNumber(textfieldValue ?? '', this.mask.params());
return this.optionsTransformer.toControlValue(this.quantumTransformer.toControlValue(Number.isNaN(parsed) ? null : parsed));
}
fromControlValue(controlValue) {
return this.mask.stringify(this.optionsTransformer.fromControlValue(controlValue));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNumberValueTransformer, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiNumberValueTransformer, isStandalone: true, providers: [tuiProvide(TuiValueTransformer, TuiNumberValueTransformer)], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNumberValueTransformer, decorators: [{
type: Directive,
args: [{ providers: [tuiProvide(TuiValueTransformer, TuiNumberValueTransformer)] }]
}] });
const DEFAULT_MAX_LENGTH = 18;
class TuiInputNumberDirective extends TuiControl {
constructor() {
super(...arguments);
this.mask = inject(TuiNumberMask);
this.input = inject(TuiInputDirective);
this.isIOS = inject(WA_IS_IOS);
this.element = tuiInjectElement();
this.inputMode = computed(() => {
if (this.isIOS) {
return this.mask.min() < 0
? 'text' // iPhone does not have minus sign if inputMode is equal to 'numeric' / 'decimal'
: 'decimal';
}
/**
* Samsung Keyboard does not have minus sign for `inputmode=decimal`
* @see https://github.com/taiga-family/taiga-ui/issues/11061#issuecomment-2939103792
*/
return 'numeric';
});
this.defaultMaxLength = computed(() => {
const { decimalSeparator, thousandSeparator, maximumFractionDigits, prefix, postfix, min, max, } = this.mask.params();
if (!Number.isFinite(min) || !Number.isFinite(max)) {
return -1;
}
const decimalPart = !!maximumFractionDigits && this.input.value().includes(decimalSeparator);
const precision = decimalPart ? Math.min(maximumFractionDigits + 1, 20) : 0;
const takeThousand = thousandSeparator.repeat(5).length;
const affixes = prefix.length + postfix.length;
return DEFAULT_MAX_LENGTH + precision + takeThousand + affixes;
});
this.parsed = computed(() => this.parse(this.input.value()));
this.onChangeEffect = effect(() => {
const decorations = untracked(({ decimalSeparator, minusSign } = this.mask.params()) => new RegExp(`[^\\d\\${minusSign}\\${decimalSeparator}]`, 'g'));
const changed = !Object.is(this.input.value().replaceAll(decorations, ''), untracked(() => this.value()?.replaceAll(decorations, '')) ?? '');
const value = this.parsed();
const valid = Number.isNaN(value) || (value >= this.mask.min() && value <= this.mask.max());
if (changed && valid) {
this.onChange(this.input.value());
}
});
}
writeValue(value) {
const reset = this.control.pristine && this.control.untouched && !value;
const changed = untracked(() => value !== this.transformer.toControlValue(this.value()));
if (changed || reset) {
super.writeValue(value);
untracked(() => this.input.value.set(this.value()));
}
}
setValue(value) {
this.input.value.set(typeof value === 'string' ? value : this.mask.stringify(value));
}
onFocus() {
if (!this.input.value() && !this.readOnly()) {
this.input.value.set(`${this.mask.prefix()}${this.mask.postfix()}`);
}
}
onBlur() {
setTimeout(() => this.setValue(this.transformer.fromControlValue(this.control.value)));
}
parse(value) {
const params = this.mask.params();
const possibleTooBig = !Number.isFinite(this.mask.min()) || !Number.isFinite(this.mask.max());
return (maskitoParseNumber(value, {
...params,
bigint: !value.includes(params.decimalSeparator) && possibleTooBig,
}) ?? Number.NaN);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputNumberDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiInputNumberDirective, isStandalone: true, selector: "input[tuiInputNumber]", host: { listeners: { "blur": "onBlur()", "focus": "onFocus()" }, properties: { "attr.inputMode": "inputMode()", "attr.maxLength": "element.maxLength > 0 ? element.maxLength : defaultMaxLength()", "disabled": "disabled()" } }, providers: [tuiAsControl(TuiInputNumberDirective)], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiWithInput }, { directive: TuiWithNumberMask }, { directive: TuiNumberValueTransformer }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputNumberDirective, decorators: [{
type: Directive,
args: [{
selector: 'input[tuiInputNumber]',
providers: [tuiAsControl(TuiInputNumberDirective)],
hostDirectives: [TuiWithInput, TuiWithNumberMask, TuiNumberValueTransformer],
host: {
'[attr.inputMode]': 'inputMode()',
'[attr.maxLength]': 'element.maxLength > 0 ? element.maxLength : defaultMaxLength()',
'[disabled]': 'disabled()',
'(blur)': 'onBlur()',
'(focus)': 'onFocus()',
},
}]
}] });
const INITIAL_DELAY = 300;
const DELAY_DECREMENT = 15;
const MIN_DELAY = 100;
function getDelay(index) {
return Math.max(INITIAL_DELAY - index * DELAY_DECREMENT, MIN_DELAY);
}
class TuiInputNumberStepService {
constructor() {
this.doc = inject(DOCUMENT);
this.start$ = new Subject();
this.stop$ = merge(fromEvent(this.doc, 'pointerup'), fromEvent(this.doc, 'pointerleave'), fromEvent(this.doc, 'pointercancel'));
this.steps$ = this.start$.pipe(switchMap((value) => timer(INITIAL_DELAY).pipe(expand((_, index) => timer(getDelay(index))), map(() => value), takeUntil(this.stop$))));
}
next(value) {
this.start$.next(value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputNumberStepService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputNumberStepService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputNumberStepService, decorators: [{
type: Injectable
}] });
class TuiInputNumberStepButtons {
constructor() {
this.mask = inject(TuiNumberMask);
this.input = inject(TuiInputNumberDirective);
this.options = inject(TUI_INPUT_NUMBER_OPTIONS);
this.directive = inject(TuiInputNumberStep);
this.appearance = inject(TUI_TEXTFIELD_OPTIONS).appearance;
this.hold = inject((TuiInputNumberStepService));
this.$ = this.hold.steps$
.pipe(takeUntilDestroyed())
.subscribe((value) => this.directive.onStep(value));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputNumberStepButtons, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiInputNumberStepButtons, isStandalone: true, selector: "ng-component", host: { attributes: { "data-tui-version": "5.7.0" }, properties: { "style.border-radius": "\"inherit\"", "style.display": "\"contents\"" } }, providers: [TuiInputNumberStepService], ngImport: i0, template: "@if (directive.step()) {\n <section class=\"t-input-number-buttons\">\n <button\n size=\"s\"\n tabindex=\"-1\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [appearance]=\"appearance()\"\n [disabled]=\"!input.interactive() || input.parsed() >= mask.max()\"\n [iconStart]=\"options.icons.increase\"\n (click.prevent)=\"directive.onStep(directive.step())\"\n (pointerdown.prevent)=\"hold.next(directive.step())\"\n >\n +\n </button>\n <button\n size=\"s\"\n tabindex=\"-1\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [appearance]=\"appearance()\"\n [disabled]=\"!input.interactive() || input.parsed() <= mask.min()\"\n [iconStart]=\"options.icons.decrease\"\n (click.prevent)=\"directive.onStep(-directive.step())\"\n (pointerdown.prevent)=\"hold.next(-directive.step())\"\n >\n -\n </button>\n </section>\n}\n", styles: ["tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .t-input-number-buttons.t-input-number-buttons{position:absolute;display:flex;inset-inline-end:0;block-size:var(--t-height);flex-direction:column;gap:.125rem;border-radius:inherit}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .t-input-number-buttons.t-input-number-buttons>*{flex:1 1 0;border-radius:0}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .t-input-number-buttons.t-input-number-buttons>*:first-child{border-top-right-radius:inherit}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .t-input-number-buttons.t-input-number-buttons>*:last-child{border-bottom-right-radius:inherit}[dir=rtl] tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .t-input-number-buttons.t-input-number-buttons>*:first-child{border-radius:0;border-top-left-radius:inherit}[dir=rtl] tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .t-input-number-buttons.t-input-number-buttons>*:last-child{border-radius:0;border-bottom-left-radius:inherit}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=l]{--t-input-number-offset-end: calc(var(--tui-height-m) + .125rem)}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=l] .t-input-number-buttons.t-input-number-buttons>*{inline-size:var(--tui-height-m)}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=m]{--t-input-number-offset-end: calc(var(--tui-height-s) + .125rem)}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{--t-input-number-offset-end: calc(2 * var(--tui-height-s) + .25rem)}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=s] .t-input-number-buttons.t-input-number-buttons{flex-direction:row-reverse}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=s] .t-input-number-buttons.t-input-number-buttons>*:first-child{border-top-right-radius:inherit;border-bottom-right-radius:inherit}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=s] .t-input-number-buttons.t-input-number-buttons>*:last-child{border-radius:0}[tuiInputNumber]._with-buttons:where(*[data-tui-version=\"5.7.0\"]){border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] [tuiInputNumber]._with-buttons:where(*[data-tui-version=\"5.7.0\"]){border-radius:inherit;border-top-left-radius:0;border-bottom-left-radius:0}[tuiInputNumber]._with-buttons:where(*[data-tui-version=\"5.7.0\"]),[data-tui-version=\"5.7.0\"] [tuiInputNumber]._with-buttons~.t-template{inline-size:calc(100% - var(--t-input-number-offset-end));margin-inline-end:var(--t-input-number-offset-end)}[tuiInputNumber]:where(*[data-tui-version=\"5.7.0\"])._with-buttons~.t-content{margin-inline-end:var(--t-input-number-offset-end)}\n"], dependencies: [{ kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputNumberStepButtons, decorators: [{
type: Component,
args: [{ imports: [TuiButton], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiInputNumberStepService], host: {
'data-tui-version': TUI_VERSION,
'[style.border-radius]': '"inherit"',
'[style.display]': '"contents"',
}, template: "@if (directive.step()) {\n <section class=\"t-input-number-buttons\">\n <button\n size=\"s\"\n tabindex=\"-1\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [appearance]=\"appearance()\"\n [disabled]=\"!input.interactive() || input.parsed() >= mask.max()\"\n [iconStart]=\"options.icons.increase\"\n (click.prevent)=\"directive.onStep(directive.step())\"\n (pointerdown.prevent)=\"hold.next(directive.step())\"\n >\n +\n </button>\n <button\n size=\"s\"\n tabindex=\"-1\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [appearance]=\"appearance()\"\n [disabled]=\"!input.interactive() || input.parsed() <= mask.min()\"\n [iconStart]=\"options.icons.decrease\"\n (click.prevent)=\"directive.onStep(-directive.step())\"\n (pointerdown.prevent)=\"hold.next(-directive.step())\"\n >\n -\n </button>\n </section>\n}\n", styles: ["tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .t-input-number-buttons.t-input-number-buttons{position:absolute;display:flex;inset-inline-end:0;block-size:var(--t-height);flex-direction:column;gap:.125rem;border-radius:inherit}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .t-input-number-buttons.t-input-number-buttons>*{flex:1 1 0;border-radius:0}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .t-input-number-buttons.t-input-number-buttons>*:first-child{border-top-right-radius:inherit}tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .t-input-number-buttons.t-input-number-buttons>*:last-child{border-bottom-right-radius:inherit}[dir=rtl] tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .t-input-number-buttons.t-input-number-buttons>*:first-child{border-radius:0;border-top-left-radius:inherit}[dir=rtl] tui-textfield:where(*[data-tui-version=\"5.7.0\"]) .t-input-number-buttons.t-input-number-buttons>*:last-child{border-radius:0;border-bottom-left-radius:inherit}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=l]{--t-input-number-offset-end: calc(var(--tui-height-m) + .125rem)}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=l] .t-input-number-buttons.t-input-number-buttons>*{inline-size:var(--tui-height-m)}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=m]{--t-input-number-offset-end: calc(var(--tui-height-s) + .125rem)}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{--t-input-number-offset-end: calc(2 * var(--tui-height-s) + .25rem)}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=s] .t-input-number-buttons.t-input-number-buttons{flex-direction:row-reverse}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=s] .t-input-number-buttons.t-input-number-buttons>*:first-child{border-top-right-radius:inherit;border-bottom-right-radius:inherit}tui-textfield:where(*[data-tui-version=\"5.7.0\"])[data-size=s] .t-input-number-buttons.t-input-number-buttons>*:last-child{border-radius:0}[tuiInputNumber]._with-buttons:where(*[data-tui-version=\"5.7.0\"]){border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] [tuiInputNumber]._with-buttons:where(*[data-tui-version=\"5.7.0\"]){border-radius:inherit;border-top-left-radius:0;border-bottom-left-radius:0}[tuiInputNumber]._with-buttons:where(*[data-tui-version=\"5.7.0\"]),[data-tui-version=\"5.7.0\"] [tuiInputNumber]._with-buttons~.t-template{inline-size:calc(100% - var(--t-input-number-offset-end));margin-inline-end:var(--t-input-number-offset-end)}[tuiInputNumber]:where(*[data-tui-version=\"5.7.0\"])._with-buttons~.t-content{margin-inline-end:var(--t-input-number-offset-end)}\n"] }]
}] });
class TuiInputNumberStep {
constructor() {
this.el = tuiInjectElement();
this.input = inject(TuiInputNumberDirective, { self: true });
this.mask = inject(TuiNumberMask, { self: true });
this.step = input(inject(TUI_INPUT_NUMBER_OPTIONS).step);
}
onStep(step) {
const current = this.input.parsed() || 0;
const updated = tuiSum(current, typeof current === 'bigint' ? BigInt(step) : Number(step));
this.input.setValue(tuiClamp(updated, this.mask.min(), this.mask.max()));
setTimeout((end = Number.MAX_SAFE_INTEGER) => {
this.el.setSelectionRange(end, end);
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputNumberStep, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiInputNumberStep, isStandalone: true, selector: "input[tuiInputNumber][step]", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-tui-version": "5.7.0" }, listeners: { "keydown.arrowDown.prevent": "onStep(-step())", "keydown.arrowUp.prevent": "onStep(step())" }, properties: { "class._with-buttons": "step()" } }, providers: [tuiAsTextfieldContent(TuiInputNumberStepButtons)], hostDirectives: [{ directive: i1$2.TuiAppearanceProxy }, { directive: i2.TuiTextfieldContent }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputNumberStep, decorators: [{
type: Directive,
args: [{
selector: 'input[tuiInputNumber][step]',
providers: [tuiAsTextfieldContent(TuiInputNumberStepButtons)],
hostDirectives: [TuiAppearanceProxy, TuiTextfieldContent],
host: {
'data-tui-version': TUI_VERSION,
'[class._with-buttons]': 'step()',
'(keydown.arrowDown.prevent)': 'onStep(-step())',
'(keydown.arrowUp.prevent)': 'onStep(step())',
},
}]
}] });
class TuiBigIntValueTransformer extends TuiValueTransformer {
constructor() {
super(...arguments);
this.quantumTransformer = inject(TuiBigIntQuantumValueTransformer, { optional: true }) ??
TUI_IDENTITY_VALUE_TRANSFORMER;
this.optionsTransformer = inject(TUI_INPUT_NUMBER_OPTIONS).valueTransformer ??
TUI_IDENTITY_VALUE_TRANSFORMER;
this.mask = inject(TuiNumberMask);
}
toControlValue(textfieldValue) {
return this.optionsTransformer.toControlValue(this.quantumTransformer.toControlValue(maskitoParseNumber(textfieldValue ?? '', {
...this.mask.params(),
bigint: true,
})));
}
fromControlValue(controlValue) {
return this.mask.stringify(this.optionsTransformer.fromControlValue(controlValue));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiBigIntValueTransformer, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiBigIntValueTransformer, isStandalone: true, selector: "[tuiInputNumber][bigint]", providers: [tuiProvide(TuiValueTransformer, TuiBigIntValueTransformer)], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiBigIntValueTransformer, decorators: [{
type: Directive,
args: [{
selector: '[tuiInputNumber][bigint]',
providers: [tuiProvide(TuiValueTransformer, TuiBigIntValueTransformer)],
}]
}] });
const TuiInputNumber = [
TuiInputNumberDirective,
TuiNumberMask,
TuiInputNumberStep,
TuiBigIntValueTransformer,
TuiQuantumValueTransformer,
TuiBigIntQuantumValueTransformer,
TuiLabel,
TuiTextfieldComponent,
TuiTextfieldOptionsDirective,
TuiDropdownContent,
];
/**
* Generated bundle index. Do not edit.
*/
export { TUI_INPUT_NUMBER_DEFAULT_OPTIONS, TUI_INPUT_NUMBER_OPTIONS, TuiBigIntQuantumValueTransformer, TuiBigIntValueTransformer, TuiInputNumber, TuiInputNumberDirective, TuiInputNumberStep, TuiInputNumberStepButtons, TuiInputNumberStepService, TuiNumberMask, TuiNumberValueTransformer, TuiQuantumValueTransformer, TuiQuantumValueTransformerBase, TuiWithNumberMask, tuiInputNumberOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-input-number.mjs.map