@taiga-ui/kit
Version:
Taiga UI Angular main components kit
136 lines (131 loc) • 6.56 kB
JavaScript
import { TuiCalendar } from '@taiga-ui/core/components/calendar';
import { TuiInputChipBaseDirective, TuiInputChipComponent } from '@taiga-ui/kit/components/input-chip';
import * as i0 from '@angular/core';
import { inject, computed, effect, signal, Directive, Input } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import * as i3 from '@maskito/angular';
import { MaskitoDirective } from '@maskito/angular';
import { maskitoDateOptionsGenerator } from '@maskito/kit';
import { tuiAsControl } from '@taiga-ui/cdk/classes';
import { TUI_ALLOW_SIGNAL_WRITES } from '@taiga-ui/cdk/constants';
import { TuiMonth, DATE_FILLER_LENGTH, TuiDay } from '@taiga-ui/cdk/date-time';
import * as i1 from '@taiga-ui/cdk/directives/native-validator';
import { TuiNativeValidator } from '@taiga-ui/cdk/directives/native-validator';
import { tuiFallbackValueProvider } from '@taiga-ui/cdk/tokens';
import { tuiArrayToggle } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i4 from '@taiga-ui/core/components/textfield';
import { tuiTextfieldIconBinding, tuiInjectAuxiliary, tuiAsTextfieldAccessor, TuiTextfieldBase } from '@taiga-ui/core/components/textfield';
import * as i2 from '@taiga-ui/core/directives/dropdown';
import { TuiDropdownAuto } from '@taiga-ui/core/directives/dropdown';
import { TUI_DATE_FORMAT, TUI_DEFAULT_DATE_FORMAT } from '@taiga-ui/core/tokens';
import { TUI_INPUT_DATE_OPTIONS_NEW, tuiWithDateFiller, TUI_DATE_ADAPTER } from '@taiga-ui/kit/components/input-date';
import { tuiMaskito } from '@taiga-ui/kit/utils';
class TuiInputDateMultiDirective extends TuiInputChipBaseDirective {
constructor() {
super(...arguments);
this.dateOptions = inject(TUI_INPUT_DATE_OPTIONS_NEW);
this.icon = tuiTextfieldIconBinding(TUI_INPUT_DATE_OPTIONS_NEW);
this.filler = tuiWithDateFiller();
this.stringify = this.handlers.stringify.set((item) => item.toString(this.format().mode, this.format().separator));
this.mask = tuiMaskito(computed(() => maskitoDateOptionsGenerator({
separator: this.format().separator,
mode: TUI_DATE_ADAPTER[this.format().mode],
min: this.min().toLocalNativeDate(),
max: this.max().toLocalNativeDate(),
})));
this.format = toSignal(inject(TUI_DATE_FORMAT), {
initialValue: TUI_DEFAULT_DATE_FORMAT,
});
this.calendarIn = effect(() => {
if (this.calendar()) {
this.processCalendar(this.calendar());
}
}, TUI_ALLOW_SIGNAL_WRITES);
this.calendarOut = effect((onCleanup) => {
const subscription = this.calendar()?.dayClick.subscribe((day) => {
this.updateValue(day);
});
onCleanup(() => subscription?.unsubscribe());
});
this.min = signal(this.dateOptions.min);
this.max = signal(this.dateOptions.max);
this.calendar = tuiInjectAuxiliary((x) => x instanceof TuiCalendar);
}
set minSetter(min) {
this.min.set(min || this.dateOptions.min);
}
set maxSetter(max) {
this.max.set(max || this.dateOptions.max);
}
processCalendar(calendar) {
calendar.value = this.value();
calendar.min = this.min();
calendar.max = this.max();
calendar.month =
this.value()?.[this.value().length - 1] ?? TuiMonth.currentLocal();
}
onClick() {
this.open.update((open) => !open);
}
onValueChange(value) {
const newValue = value.length === DATE_FILLER_LENGTH
? TuiDay.normalizeParse(value, this.format().mode)
: null;
if (newValue && !this.handlers.disabledItemHandler()(newValue)) {
this.updateValue(newValue);
}
}
onEnter() {
this.onValueChange(this.textfield.value().trim());
this.scrollTo();
}
updateValue(day) {
this.setValue(tuiArrayToggle(this.value(), day, (a, b) => a.daySame(b)));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputDateMultiDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputDateMultiDirective, isStandalone: true, selector: "input[tuiInputDateMulti]", inputs: { minSetter: ["min", "minSetter"], maxSetter: ["max", "maxSetter"] }, host: { listeners: { "keydown.enter.prevent": "0" } }, providers: [
tuiAsControl(TuiInputDateMultiDirective),
tuiFallbackValueProvider([]),
tuiAsTextfieldAccessor(TuiInputDateMultiDirective),
], usesInheritance: true, hostDirectives: [{ directive: i1.TuiNativeValidator }, { directive: i2.TuiDropdownAuto }, { directive: i3.MaskitoDirective }, { directive: i4.TuiTextfieldBase, inputs: ["invalid", "invalid", "focused", "focused", "readOnly", "readOnly", "state", "state"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputDateMultiDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'input[tuiInputDateMulti]',
providers: [
tuiAsControl(TuiInputDateMultiDirective),
tuiFallbackValueProvider([]),
tuiAsTextfieldAccessor(TuiInputDateMultiDirective),
],
hostDirectives: [
TuiNativeValidator,
TuiDropdownAuto,
MaskitoDirective,
{
directive: TuiTextfieldBase,
inputs: ['invalid', 'focused', 'readOnly', 'state'],
},
],
host: {
'(keydown.enter.prevent)': '0',
},
}]
}], propDecorators: { minSetter: [{
type: Input,
args: ['min']
}], maxSetter: [{
type: Input,
args: ['max']
}] } });
const TuiInputDateMulti = [
TuiInputDateMultiDirective,
TuiCalendar,
TuiInputChipComponent,
];
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputDateMulti, TuiInputDateMultiDirective };
//# sourceMappingURL=taiga-ui-kit-components-input-date-multi.mjs.map