@taiga-ui/kit
Version:
Taiga UI Angular main components kit
157 lines (151 loc) • 7.79 kB
JavaScript
import { TuiCalendar } from '@taiga-ui/core/components/calendar';
import { TuiInputChipDirective, TuiInputChip } from '@taiga-ui/kit/components/input-chip';
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 { maskitoDateOptionsGenerator } from '@maskito/kit';
import { tuiAsControl, tuiValueTransformerFrom } from '@taiga-ui/cdk/classes';
import { TuiMonth, DATE_FILLER_LENGTH, TuiDay } from '@taiga-ui/cdk/date-time';
import { tuiFallbackValueProvider } from '@taiga-ui/cdk/tokens';
import { tuiDirectiveBinding } from '@taiga-ui/cdk/utils/di';
import { tuiSetSignal, tuiArrayToggle } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiInjectAuxiliary, tuiAsTextfieldAccessor } from '@taiga-ui/core/components/textfield';
import { TuiAppearance } from '@taiga-ui/core/directives/appearance';
import { tuiIconEnd } from '@taiga-ui/core/directives/icons';
import { TuiItemsHandlersDirective } from '@taiga-ui/core/directives/items-handlers';
import * as i1 from '@taiga-ui/core/portals/dropdown';
import { TuiDropdownAuto } from '@taiga-ui/core/portals/dropdown';
import { TUI_DATE_FORMAT } from '@taiga-ui/core/tokens';
import { TUI_INPUT_DATE_OPTIONS, tuiWithDateFiller } from '@taiga-ui/kit/components/input-date';
import { tuiMaskito } from '@taiga-ui/kit/utils';
const TUI_INPUT_DATE_MULTI_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_INPUT_DATE_MULTI_OPTIONS' : '');
function tuiInputDateMultiOptionsFactory() {
const options = inject(TUI_INPUT_DATE_OPTIONS);
return {
...options,
valueTransformer: {
fromControlValue: (value) => Array.isArray(value)
? value
.map((item) => options.valueTransformer.fromControlValue(item))
.filter((item) => item !== null)
: [],
toControlValue: (value) => value.map((item) => options.valueTransformer.toControlValue(item)),
},
};
}
function tuiInjectInputDateMultiOptions() {
return (inject(TUI_INPUT_DATE_MULTI_OPTIONS, { optional: true, skipSelf: true }) ??
tuiInputDateMultiOptionsFactory());
}
const tuiInputDateMultiOptionsProvider = (options) => ({
provide: TUI_INPUT_DATE_MULTI_OPTIONS,
useFactory: () => ({
...tuiInjectInputDateMultiOptions(),
...options,
}),
});
class TuiInputDateMultiDirective extends TuiInputChipDirective {
constructor() {
super(...arguments);
this.dateMultiOptions = inject(TUI_INPUT_DATE_MULTI_OPTIONS);
this.icon = tuiIconEnd(this.dateMultiOptions.icon);
this.filler = tuiWithDateFiller();
this.format = inject(TUI_DATE_FORMAT);
this.stringify = tuiDirectiveBinding(TuiItemsHandlersDirective, 'stringify', (item) => this.dateMultiOptions.valueTransformer
.fromControlValue([item])[0]
?.toString(this.format().mode, this.format().separator) ?? '', {});
this.mask = tuiMaskito(computed(() => maskitoDateOptionsGenerator({
separator: this.format().separator,
mode: this.format().mode,
min: (this.min() ?? this.dateMultiOptions.min).toLocalNativeDate(),
max: (this.max() ?? this.dateMultiOptions.max).toLocalNativeDate(),
})));
this.calendar = tuiInjectAuxiliary((x) => x instanceof TuiCalendar);
this.calendarIn = effect(() => {
const calendar = this.calendar();
if (calendar) {
this.processCalendar(calendar);
}
});
this.calendarOut = effect((onCleanup) => {
const subscription = this.calendar()?.dayClick.subscribe((day) => {
this.updateValue(day);
});
onCleanup(() => subscription?.unsubscribe());
});
this.min = input(this.dateMultiOptions.min);
this.max = input(this.dateMultiOptions.max);
}
processCalendar(calendar) {
tuiSetSignal(calendar.value, this.value());
tuiSetSignal(calendar.min, this.min());
tuiSetSignal(calendar.max, this.max());
calendar.month.set(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: "19.2.21", ngImport: i0, type: TuiInputDateMultiDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiInputDateMultiDirective, isStandalone: true, selector: "input[tuiInputDateMulti]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter.prevent": "0" } }, providers: [
tuiAsControl(TuiInputDateMultiDirective),
tuiFallbackValueProvider([]),
tuiAsTextfieldAccessor(TuiInputDateMultiDirective),
{
provide: TuiAppearance,
useFactory: () => inject(TuiAppearance, { skipSelf: true }),
},
{
provide: TUI_INPUT_DATE_MULTI_OPTIONS,
useFactory: tuiInjectInputDateMultiOptions,
},
tuiValueTransformerFrom(TUI_INPUT_DATE_MULTI_OPTIONS),
], usesInheritance: true, hostDirectives: [{ directive: i1.TuiDropdownAuto }, { directive: i2.MaskitoDirective }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputDateMultiDirective, decorators: [{
type: Directive,
args: [{
selector: 'input[tuiInputDateMulti]',
providers: [
tuiAsControl(TuiInputDateMultiDirective),
tuiFallbackValueProvider([]),
tuiAsTextfieldAccessor(TuiInputDateMultiDirective),
{
provide: TuiAppearance,
useFactory: () => inject(TuiAppearance, { skipSelf: true }),
},
{
provide: TUI_INPUT_DATE_MULTI_OPTIONS,
useFactory: tuiInjectInputDateMultiOptions,
},
tuiValueTransformerFrom(TUI_INPUT_DATE_MULTI_OPTIONS),
],
hostDirectives: [TuiDropdownAuto, MaskitoDirective],
host: { '(keydown.enter.prevent)': '0' },
}]
}] });
const TuiInputDateMulti = [
TuiInputDateMultiDirective,
TuiCalendar,
...TuiInputChip,
];
/**
* Generated bundle index. Do not edit.
*/
export { TUI_INPUT_DATE_MULTI_OPTIONS, TuiInputDateMulti, TuiInputDateMultiDirective, tuiInjectInputDateMultiOptions, tuiInputDateMultiOptionsFactory, tuiInputDateMultiOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-input-date-multi.mjs.map