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

Taiga UI Angular main components kit

import { TuiLabel } from '@taiga-ui/core/components/label';
import * as i2 from '@taiga-ui/core/components/textfield';
import { tuiInjectAuxiliary, TuiSelectLike, 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 { TuiCalendarMonth } from '@taiga-ui/kit/components/calendar-month';
import * as i0 from '@angular/core';
import { InjectionToken, inject, signal, effect, Directive } from '@angular/core';
import { TUI_IDENTITY_VALUE_TRANSFORMER, TuiControl, tuiAsControl, tuiValueTransformerFrom } from '@taiga-ui/cdk/classes';
import { RANGE_SEPARATOR_CHAR, TuiMonthRange } from '@taiga-ui/cdk/date-time';
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 { TUI_MONTHS } from '@taiga-ui/core/tokens';
import { tuiProvideOptions } from '@taiga-ui/cdk/utils/di';
import { TUI_INPUT_DATE_DEFAULT_OPTIONS } 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);

class TuiInputMonthRangeDirective extends TuiControl {
    constructor() {
        super(...arguments);
        this.input = inject(TuiInputDirective);
        this.months = inject(TUI_MONTHS);
        this.open = inject(TuiDropdownOpen).open;
        this.intermediateValue = signal(null);
        this.calendar = tuiInjectAuxiliary((x) => x instanceof TuiCalendarMonth);
        this.icon = tuiIconEnd(inject(TUI_INPUT_MONTH_RANGE_OPTIONS).icon);
        this.dropdownEnabled = tuiDropdownEnabled(this.interactive);
        this.valueEffect = effect(() => {
            const value = this.value();
            const months = this.months();
            const format = ({ month, formattedYear }) => `${months[month] ?? ''} ${formattedYear}`;
            this.input.value.set(value
                ? `${format(value.from)}${RANGE_SEPARATOR_CHAR}${format(value.to)}`
                : '');
        });
        this.calendarInit = effect(() => {
            const calendar = this.calendar();
            if (calendar) {
                calendar.options.rangeMode = true;
            }
        });
        this.calendarSync = effect(() => {
            const calendar = this.calendar();
            calendar &&
                tuiSetSignal(calendar.value, this.intermediateValue() ?? this.value());
        });
        // TODO: use linked signal (Angular 19+)
        this.resetIntermediateValue = effect(() => {
            this.intermediateValue.set(this.value() && null);
        });
        this.onMonthClickEffect = effect((onCleanup) => {
            const subscription = this.calendar()?.monthClick.subscribe((month) => {
                const intermediateValue = this.intermediateValue();
                if (intermediateValue) {
                    this.onChange(TuiMonthRange.sort(intermediateValue, month));
                    this.open.set(false);
                }
                else {
                    this.intermediateValue.set(month);
                }
            });
            onCleanup(() => subscription?.unsubscribe());
        });
    }
    clear() {
        this.onChange(null);
        this.open.set(true);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputMonthRangeDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", 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.TuiWithInput }, { directive: i2.TuiSelectLike }, { directive: i3.TuiDropdownAuto }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputMonthRangeDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'input[tuiInputMonthRange]',
                    providers: [
                        tuiAsControl(TuiInputMonthRangeDirective),
                        tuiValueTransformerFrom(TUI_INPUT_MONTH_RANGE_OPTIONS),
                    ],
                    hostDirectives: [TuiWithInput, TuiSelectLike, TuiDropdownAuto],
                    host: {
                        '[disabled]': 'disabled()',
                        '(input)': '$event.inputType?.includes("delete") && clear()',
                    },
                }]
        }] });

const TuiInputMonthRange = [
    TuiInputMonthRangeDirective,
    TuiCalendarMonth,
    TuiLabel,
    TuiTextfieldComponent,
    TuiTextfieldOptionsDirective,
    TuiDropdownContent,
];

/**
 * 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