@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 { TuiLabel } from '@taiga-ui/core/components/label';
import { tuiInjectAuxiliary, TuiTextfieldComponent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
import * as i3 from '@taiga-ui/core/portals/dropdown';
import { TuiDropdownOpen, tuiDropdownEnabled, TuiDropdownAuto, TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
import * as i0 from '@angular/core';
import { InjectionToken, inject, computed, effect, input, Directive } 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 { tuiSetSignal } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i1 from '@taiga-ui/core/components/input';
import { TuiInputDirective, TuiWithInput } from '@taiga-ui/core/components/input';
import { tuiIconEnd } from '@taiga-ui/core/directives/icons';
import { tuiMaskito } from '@taiga-ui/kit/utils';
import { tuiProvideOptions } from '@taiga-ui/cdk/utils/di';
import { TUI_INPUT_DATE_OPTIONS, TUI_INPUT_DATE_DEFAULT_OPTIONS } 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),
        valueTransformer: TUI_IDENTITY_VALUE_TRANSFORMER,
    }),
});
const tuiInputInputYearOptionsProvider = (options) => tuiProvideOptions(TUI_INPUT_YEAR_OPTIONS, options, TUI_INPUT_DATE_DEFAULT_OPTIONS);

class TuiInputYearDirective extends TuiControl {
    constructor() {
        super(...arguments);
        this.options = inject(TUI_INPUT_YEAR_OPTIONS);
        this.input = inject(TuiInputDirective);
        this.open = inject(TuiDropdownOpen).open;
        this.initialItem = computed(() => this.value() ?? this.calendar()?.initialItem() ?? null);
        this.dropdownEnabled = tuiDropdownEnabled(this.interactive);
        this.icon = tuiIconEnd(this.options.icon);
        this.calendar = tuiInjectAuxiliary((x) => x instanceof TuiCalendarYear);
        /**
         * TODO: move to [value]="value()" after update to Angular 17+
         * something wrong with change detection on host binding
         */
        this.valueEffect = effect(() => this.input.value.set(this.value()?.toString() ?? ''));
        this.mask = tuiMaskito(computed(() => maskitoNumberOptionsGenerator({
            min: this.min(),
            max: this.max(),
            thousandSeparator: '',
        })));
        this.calendarInEffect = effect(() => {
            const calendar = this.calendar();
            if (calendar) {
                tuiSetSignal(calendar.initialItem, this.initialItem());
                tuiSetSignal(calendar.value, this.value());
                tuiSetSignal(calendar.min, this.min());
                tuiSetSignal(calendar.max, this.max());
            }
        });
        this.calendarOutEffect = effect((onCleanup) => {
            const subscription = this.calendar()?.yearClick.subscribe((year) => {
                this.onChange(year);
                this.open.set(false);
            });
            onCleanup(() => subscription?.unsubscribe());
        });
        this.min = input(this.options.min.year);
        this.max = input(this.options.max.year);
    }
    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: "19.2.21", ngImport: i0, type: TuiInputYearDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiInputYearDirective, isStandalone: true, selector: "input[tuiInputYear]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "inputmode": "numeric", "maxlength": "4" }, listeners: { "click": "toggle()", "input": "onInput($event.target.value)" }, properties: { "disabled": "disabled()" } }, providers: [
            tuiAsControl(TuiInputYearDirective),
            tuiValueTransformerFrom(TUI_INPUT_YEAR_OPTIONS),
        ], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithInput }, { directive: i2.MaskitoDirective }, { directive: i3.TuiDropdownAuto }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputYearDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'input[tuiInputYear]',
                    providers: [
                        tuiAsControl(TuiInputYearDirective),
                        tuiValueTransformerFrom(TUI_INPUT_YEAR_OPTIONS),
                    ],
                    hostDirectives: [TuiWithInput, MaskitoDirective, TuiDropdownAuto],
                    host: {
                        inputmode: 'numeric',
                        maxlength: '4',
                        '[disabled]': 'disabled()',
                        '(click)': 'toggle()',
                        '(input)': 'onInput($event.target.value)',
                    },
                }]
        }] });

const TuiInputYear = [
    TuiInputYearDirective,
    TuiCalendarYear,
    TuiLabel,
    TuiTextfieldComponent,
    TuiTextfieldOptionsDirective,
    TuiDropdownContent,
];

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

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