@taiga-ui/kit
Version:
Taiga UI Angular main components kit
142 lines (135 loc) • 9.18 kB
JavaScript
import { TuiCalendarMonth } from '@taiga-ui/kit/components/calendar-month';
import { NgIf } from '@angular/common';
import * as i0 from '@angular/core';
import { InjectionToken, inject, computed, effect, Directive, signal, Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
import { TUI_ALLOW_SIGNAL_WRITES } from '@taiga-ui/cdk/constants';
import { TUI_FIRST_DAY, TUI_LAST_DAY, TuiMonth } from '@taiga-ui/cdk/date-time';
import * as i1 from '@taiga-ui/core/components/textfield';
import { TuiTextfieldDirective, tuiTextfieldIconBinding, tuiInjectAuxiliary, TuiWithTextfield, TuiSelectLike, TuiTextfieldContent } from '@taiga-ui/core/components/textfield';
import { toSignal } from '@angular/core/rxjs-interop';
import { TUI_IDENTITY_VALUE_TRANSFORMER, TuiControl, tuiAsControl, tuiValueTransformerFrom } from '@taiga-ui/cdk/classes';
import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
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_OPTIONS_NEW, TUI_INPUT_DATE_DEFAULT_OPTIONS_NEW } from '@taiga-ui/kit/components/input-date';
/**
* @deprecated remove in v5
*/
const TUI_INPUT_MONTH_DEFAULT_OPTIONS = {
icon: () => '@tui.calendar',
valueTransformer: TUI_IDENTITY_VALUE_TRANSFORMER,
};
const TUI_INPUT_MONTH_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_INPUT_MONTH_OPTIONS' : '', {
factory: () => ({
...inject(TUI_INPUT_DATE_OPTIONS_NEW),
valueTransformer: TUI_IDENTITY_VALUE_TRANSFORMER,
}),
});
const tuiInputMonthOptionsProvider = (options) => tuiProvideOptions(TUI_INPUT_MONTH_OPTIONS, options, TUI_INPUT_DATE_DEFAULT_OPTIONS_NEW);
class TuiInputMonthDirective extends TuiControl {
constructor() {
super(...arguments);
this.textfield = inject(TuiTextfieldDirective);
this.formatter = toSignal(inject(TUI_MONTH_FORMATTER));
this.open = tuiDropdownOpen();
this.icon = tuiTextfieldIconBinding(TUI_INPUT_MONTH_OPTIONS);
this.dropdownEnabled = tuiDropdownEnabled(computed(() => !this.native && this.interactive()));
this.valueEffect = effect(() => {
this.textfield.value.set(this.formatter()?.(this.value()) || '');
}, TUI_ALLOW_SIGNAL_WRITES);
this.calendarIn = effect(() => {
this.calendar()?.value.set(this.value());
}, TUI_ALLOW_SIGNAL_WRITES);
this.calendarOut = effect((onCleanup) => {
const subscription = this.calendar()?.monthClick.subscribe((month) => {
this.onChange(month);
this.open.set(false);
});
onCleanup(() => subscription?.unsubscribe());
});
this.calendar = tuiInjectAuxiliary((x) => x instanceof TuiCalendarMonth);
this.native = tuiInjectElement().type === 'month' && inject(TUI_IS_MOBILE);
}
clear() {
this.onChange(null);
this.open.set(this.dropdownEnabled());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputMonthDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputMonthDirective, isStandalone: true, selector: "input[tuiInputMonth]", host: { listeners: { "input": "$event.inputType?.includes(\"delete\") && clear()" }, properties: { "disabled": "disabled()" } }, providers: [
tuiAsControl(TuiInputMonthDirective),
tuiValueTransformerFrom(TUI_INPUT_MONTH_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: TuiInputMonthDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'input[tuiInputMonth]',
providers: [
tuiAsControl(TuiInputMonthDirective),
tuiValueTransformerFrom(TUI_INPUT_MONTH_OPTIONS),
],
hostDirectives: [TuiWithTextfield, TuiSelectLike, TuiDropdownAuto],
host: {
'[disabled]': 'disabled()',
'(input)': '$event.inputType?.includes("delete") && clear()',
},
}]
}] });
class TuiInputMonthComponent {
constructor() {
this.host = inject(TuiInputMonthDirective);
this.min = signal(null);
this.max = signal(null);
this.calendarSync = effect(() => {
const calendar = this.host.calendar();
if (calendar) {
calendar.min.set(this.min() ?? TUI_FIRST_DAY); // TODO(v5): remove TUI_FIRST_DAY fallback
calendar.max.set(this.max() ?? TUI_LAST_DAY); // TODO(v5): remove TUI_LAST_DAY fallback
}
}, TUI_ALLOW_SIGNAL_WRITES);
}
// TODO(v5): use signal inputs
set minSetter(x) {
this.min.set(x);
}
// TODO(v5): use signal inputs
set maxSetter(x) {
this.max.set(x);
}
onInput(value) {
if (!value) {
return this.host.onChange(null);
}
const [year = 0, month = 0] = value.split('-').map(Number);
this.host.onChange(new TuiMonth(year, month - 1));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputMonthComponent, isStandalone: true, selector: "input[tuiInputMonth][type=\"month\"]", inputs: { minSetter: ["min", "minSetter"], maxSetter: ["max", "maxSetter"] }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "type": "\"text\"" } }, ngImport: i0, template: "<ng-container *ngIf=\"host.native\">\n <input\n *tuiTextfieldContent\n type=\"month\"\n [max]=\"max()?.toJSON()\"\n [min]=\"min()?.toJSON()\"\n [value]=\"host.value()?.toJSON()\"\n (click.stop.zoneless)=\"(0)\"\n (input)=\"onInput($any($event.target).value)\"\n (pointerdown.stop.zoneless)=\"(0)\"\n />\n</ng-container>\n", styles: ["tui-textfield input[tuiInputMonth]~.t-content input[type=month]{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0}tui-textfield input[tuiInputMonth]~.t-content input[type=month]::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;inline-size:100%;block-size:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputMonthComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'input[tuiInputMonth][type="month"]', imports: [NgIf, TuiTextfieldContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
ngSkipHydration: 'true',
'[type]': '"text"',
}, template: "<ng-container *ngIf=\"host.native\">\n <input\n *tuiTextfieldContent\n type=\"month\"\n [max]=\"max()?.toJSON()\"\n [min]=\"min()?.toJSON()\"\n [value]=\"host.value()?.toJSON()\"\n (click.stop.zoneless)=\"(0)\"\n (input)=\"onInput($any($event.target).value)\"\n (pointerdown.stop.zoneless)=\"(0)\"\n />\n</ng-container>\n", styles: ["tui-textfield input[tuiInputMonth]~.t-content input[type=month]{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0}tui-textfield input[tuiInputMonth]~.t-content input[type=month]::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;inline-size:100%;block-size:100%}\n"] }]
}], propDecorators: { minSetter: [{
type: Input,
args: ['min']
}], maxSetter: [{
type: Input,
args: ['max']
}] } });
const TuiInputMonth = [
TuiInputMonthComponent,
TuiInputMonthDirective,
TuiCalendarMonth,
];
/**
* Generated bundle index. Do not edit.
*/
export { TUI_INPUT_MONTH_DEFAULT_OPTIONS, TUI_INPUT_MONTH_OPTIONS, TuiInputMonth, TuiInputMonthComponent, TuiInputMonthDirective, tuiInputMonthOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-input-month.mjs.map