@taiga-ui/kit/fesm2022/taiga-ui-kit-components-input-year.mjs

Taiga UI Angular main components kit

import { TuiCalendarYear } from '@taiga-ui/core/components/calendar';
import * as i0 from '@angular/core';
import { InjectionToken, inject, computed, signal, effect, Directive, Input } from '@angular/core';
import * as i2 from '@maskito/angular';
import { MaskitoDirective } from '@maskito/angular';
import { maskitoNumberOptionsGenerator } from '@maskito/kit';
import { TUI_IDENTITY_VALUE_TRANSFORMER, TuiControl, tuiAsControl, tuiValueTransformerFrom } from '@taiga-ui/cdk/classes';
import { TUI_ALLOW_SIGNAL_WRITES } from '@taiga-ui/cdk/constants';
import * as i1 from '@taiga-ui/core/components/textfield';
import { TuiTextfieldDirective, tuiInjectAuxiliary, tuiTextfieldIconBinding, TuiWithTextfield } from '@taiga-ui/core/components/textfield';
import * as i3 from '@taiga-ui/core/directives/dropdown';
import { tuiDropdownOpen, tuiDropdownEnabled, TuiDropdownAuto } from '@taiga-ui/core/directives/dropdown';
import { tuiMaskito } from '@taiga-ui/kit/utils';
import { tuiProvideOptions } from '@taiga-ui/cdk/utils/miscellaneous';
import { TUI_INPUT_DATE_OPTIONS_NEW, TUI_INPUT_DATE_DEFAULT_OPTIONS_NEW } from '@taiga-ui/kit/components/input-date';

const TUI_INPUT_YEAR_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_INPUT_YEAR_OPTIONS' : '', {
    factory: () => ({
        ...inject(TUI_INPUT_DATE_OPTIONS_NEW),
        valueTransformer: TUI_IDENTITY_VALUE_TRANSFORMER,
    }),
});
const tuiInputInputYearOptionsProvider = (options) => tuiProvideOptions(TUI_INPUT_YEAR_OPTIONS, options, TUI_INPUT_DATE_DEFAULT_OPTIONS_NEW);

class TuiInputYearDirective extends TuiControl {
    constructor() {
        super(...arguments);
        this.options = inject(TUI_INPUT_YEAR_OPTIONS);
        this.textfield = inject(TuiTextfieldDirective);
        this.open = tuiDropdownOpen();
        this.initialItem = computed(() => this.value() ?? this.calendar()?.initialItem() ?? null);
        this.calendar = tuiInjectAuxiliary((x) => x instanceof TuiCalendarYear);
        this.dropdownEnabled = tuiDropdownEnabled(this.interactive);
        this.icon = tuiTextfieldIconBinding(TUI_INPUT_YEAR_OPTIONS);
        this.min = signal(this.options.min.year);
        this.max = signal(this.options.max.year);
        /**
         * TODO: move to [value]="value()" after update to Angular 17+
         * something wrong with change detection on host binding
         */
        this.valueEffect = effect(() => this.textfield.value.set(this.value()?.toString() ?? ''), TUI_ALLOW_SIGNAL_WRITES);
        this.mask = tuiMaskito(computed(() => maskitoNumberOptionsGenerator({
            min: this.min(),
            max: this.max(),
            thousandSeparator: '',
        })));
        this.calendarInEffect = effect(() => {
            const calendar = this.calendar();
            if (calendar) {
                calendar.initialItemSetter = this.initialItem();
                calendar.value.set(this.value());
                calendar.min.set(this.min());
                calendar.max.set(this.max());
            }
        }, TUI_ALLOW_SIGNAL_WRITES);
        this.calendarOutEffect = effect((onCleanup) => {
            const subscription = this.calendar()?.yearClick.subscribe((year) => {
                this.onChange(year);
                this.open.set(false);
            });
            onCleanup(() => subscription?.unsubscribe());
        });
    }
    // TODO(v5): use signal inputs
    set minSetter(x) {
        this.min.set(x);
    }
    // TODO(v5): use signal inputs
    set maxSetter(x) {
        this.max.set(x);
    }
    toggle() {
        if (this.interactive()) {
            this.open.update((x) => !x);
        }
    }
    onInput(raw) {
        const value = Number(raw);
        this.onChange(!raw || Number.isNaN(value) ? null : value);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputYearDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputYearDirective, isStandalone: true, selector: "input[tuiInputYear]", inputs: { minSetter: ["min", "minSetter"], maxSetter: ["max", "maxSetter"] }, host: { attributes: { "maxlength": "4", "inputmode": "numeric" }, listeners: { "click": "toggle()", "input": "onInput($event.target.value)" }, properties: { "disabled": "disabled()" } }, providers: [
            tuiAsControl(TuiInputYearDirective),
            tuiValueTransformerFrom(TUI_INPUT_YEAR_OPTIONS),
        ], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithTextfield }, { directive: i2.MaskitoDirective }, { directive: i3.TuiDropdownAuto }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputYearDirective, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: 'input[tuiInputYear]',
                    providers: [
                        tuiAsControl(TuiInputYearDirective),
                        tuiValueTransformerFrom(TUI_INPUT_YEAR_OPTIONS),
                    ],
                    hostDirectives: [TuiWithTextfield, MaskitoDirective, TuiDropdownAuto],
                    host: {
                        maxlength: '4',
                        inputmode: 'numeric',
                        '[disabled]': 'disabled()',
                        '(click)': 'toggle()',
                        '(input)': 'onInput($event.target.value)',
                    },
                }]
        }], propDecorators: { minSetter: [{
                type: Input,
                args: ['min']
            }], maxSetter: [{
                type: Input,
                args: ['max']
            }] } });

const TuiInputYear = [TuiInputYearDirective, TuiCalendarYear];

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

export { TUI_INPUT_YEAR_OPTIONS, TuiInputYear, TuiInputYearDirective, tuiInputInputYearOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-input-year.mjs.map