@taiga-ui/kit/fesm2022/taiga-ui-kit-components-input-month-range.mjs

Taiga UI Angular main components kit

import { TuiCalendarMonth } from '@taiga-ui/kit/components/calendar-month';
import * as i0 from '@angular/core';
import { InjectionToken, inject, signal, effect, Directive } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { TUI_IDENTITY_VALUE_TRANSFORMER, TuiControl, tuiAsControl, tuiValueTransformerFrom } from '@taiga-ui/cdk/classes';
import { TUI_ALLOW_SIGNAL_WRITES } from '@taiga-ui/cdk/constants';
import { RANGE_SEPARATOR_CHAR, TuiMonthRange } from '@taiga-ui/cdk/date-time';
import * as i1 from '@taiga-ui/core/components/textfield';
import { TuiTextfieldDirective, tuiInjectAuxiliary, tuiTextfieldIconBinding, TuiWithTextfield, TuiSelectLike } from '@taiga-ui/core/components/textfield';
import * as i2 from '@taiga-ui/core/directives/dropdown';
import { tuiDropdownOpen, tuiDropdownEnabled, TuiDropdownAuto } from '@taiga-ui/core/directives/dropdown';
import { TUI_MONTH_FORMATTER } from '@taiga-ui/kit/tokens';
import { tuiProvideOptions } from '@taiga-ui/cdk/utils/miscellaneous';
import { TUI_INPUT_DATE_DEFAULT_OPTIONS_NEW } from '@taiga-ui/kit/components/input-date';
import { TUI_INPUT_MONTH_OPTIONS } from '@taiga-ui/kit/components/input-month';

const TUI_INPUT_MONTH_RANGE_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_INPUT_MONTH_RANGE_OPTIONS' : '', {
    factory: () => ({
        ...inject(TUI_INPUT_MONTH_OPTIONS),
        valueTransformer: TUI_IDENTITY_VALUE_TRANSFORMER,
    }),
});
const tuiInputMonthRangeOptionsProvider = (options) => tuiProvideOptions(TUI_INPUT_MONTH_RANGE_OPTIONS, options, TUI_INPUT_DATE_DEFAULT_OPTIONS_NEW);

class TuiInputMonthRangeDirective extends TuiControl {
    constructor() {
        super(...arguments);
        this.textfield = inject(TuiTextfieldDirective);
        this.formatter = toSignal(inject(TUI_MONTH_FORMATTER));
        this.open = tuiDropdownOpen();
        this.intermediateValue = signal(null);
        this.calendar = tuiInjectAuxiliary((x) => x instanceof TuiCalendarMonth);
        this.icon = tuiTextfieldIconBinding(TUI_INPUT_MONTH_RANGE_OPTIONS);
        this.dropdownEnabled = tuiDropdownEnabled(this.interactive);
        this.valueEffect = effect(() => {
            const value = this.value();
            const format = this.formatter() || (() => '');
            const string = value
                ? format(value.from) + RANGE_SEPARATOR_CHAR + format(value.to)
                : '';
            this.textfield.value.set(string);
        }, TUI_ALLOW_SIGNAL_WRITES);
        this.calendarInit = effect(() => {
            const calendar = this.calendar();
            if (calendar) {
                calendar.options.rangeMode = true;
            }
        });
        this.calendarSync = effect(() => {
            this.calendar()?.value.set(this.intermediateValue() ?? this.value());
        }, TUI_ALLOW_SIGNAL_WRITES);
        // TODO: use linked signal (Angular 19+)
        this.resetIntermediateValue = effect(() => {
            this.intermediateValue.set(this.value() && null);
        }, TUI_ALLOW_SIGNAL_WRITES);
        this.onMonthClickEffect = effect((onCleanup) => {
            const subscription = this.calendar()?.monthClick.subscribe((month) => {
                const intermediateValue = this.intermediateValue();
                if (!intermediateValue) {
                    this.intermediateValue.set(month);
                }
                else {
                    this.onChange(TuiMonthRange.sort(intermediateValue, month));
                    this.open.set(false);
                }
            });
            onCleanup(() => subscription?.unsubscribe());
        });
    }
    clear() {
        this.onChange(null);
        this.open.set(true);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputMonthRangeDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputMonthRangeDirective, isStandalone: true, selector: "input[tuiInputMonthRange]", host: { listeners: { "input": "$event.inputType?.includes(\"delete\") && clear()" }, properties: { "disabled": "disabled()" } }, providers: [
            tuiAsControl(TuiInputMonthRangeDirective),
            tuiValueTransformerFrom(TUI_INPUT_MONTH_RANGE_OPTIONS),
        ], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithTextfield }, { directive: i1.TuiSelectLike }, { directive: i2.TuiDropdownAuto }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputMonthRangeDirective, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: 'input[tuiInputMonthRange]',
                    providers: [
                        tuiAsControl(TuiInputMonthRangeDirective),
                        tuiValueTransformerFrom(TUI_INPUT_MONTH_RANGE_OPTIONS),
                    ],
                    hostDirectives: [TuiWithTextfield, TuiSelectLike, TuiDropdownAuto],
                    host: {
                        '[disabled]': 'disabled()',
                        '(input)': '$event.inputType?.includes("delete") && clear()',
                    },
                }]
        }] });

const TuiInputMonthRange = [
    TuiInputMonthRangeDirective,
    TuiCalendarMonth,
];

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

export { TUI_INPUT_MONTH_RANGE_OPTIONS, TuiInputMonthRange, TuiInputMonthRangeDirective, tuiInputMonthRangeOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-input-month-range.mjs.map