@taiga-ui/kit
Version:
Taiga UI Angular main components kit
206 lines (199 loc) • 12.7 kB
JavaScript
import { TuiCalendar } from '@taiga-ui/core/components/calendar';
import { NgIf } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, computed, effect, signal, Directive, Input, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { TUI_FIRST_DAY, TUI_LAST_DAY, DATE_FILLER_LENGTH, TuiDay } from '@taiga-ui/cdk/date-time';
import * as i1 from '@taiga-ui/core/components/textfield';
import { TuiTextfieldDirective, tuiInjectAuxiliary, TuiTextfieldComponent, tuiTextfieldIconBinding, TuiWithTextfield, TuiTextfieldContent } from '@taiga-ui/core/components/textfield';
import { toSignal } from '@angular/core/rxjs-interop';
import * as i4 from '@maskito/angular';
import { MaskitoDirective } from '@maskito/angular';
import { maskitoDateOptionsGenerator } from '@maskito/kit';
import { TUI_IDENTITY_VALUE_TRANSFORMER, TuiControl, tuiAsControl, tuiValueTransformerFrom } from '@taiga-ui/cdk/classes';
import { TUI_ALLOW_SIGNAL_WRITES } from '@taiga-ui/cdk/constants';
import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiDirectiveBinding, changeDateSeparator } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiAsOptionContent } from '@taiga-ui/core/components/data-list';
import * as i2 from '@taiga-ui/core/directives/dropdown';
import { tuiDropdownOpen, tuiDropdownEnabled, TuiDropdownAuto } from '@taiga-ui/core/directives/dropdown';
import * as i3 from '@taiga-ui/core/directives/items-handlers';
import { TuiItemsHandlersDirective, TUI_ITEMS_HANDLERS, TuiItemsHandlersValidator } from '@taiga-ui/core/directives/items-handlers';
import { TUI_DATE_FORMAT, TUI_DEFAULT_DATE_FORMAT } from '@taiga-ui/core/tokens';
import { TuiCalendarRange } from '@taiga-ui/kit/components/calendar-range';
import { TuiSelectOption } from '@taiga-ui/kit/components/select';
import { TUI_DATE_TEXTS } from '@taiga-ui/kit/tokens';
import { tuiMaskito } from '@taiga-ui/kit/utils';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
const TUI_INPUT_DATE_DEFAULT_OPTIONS_NEW = {
icon: () => '@tui.calendar',
min: TUI_FIRST_DAY,
max: TUI_LAST_DAY,
valueTransformer: TUI_IDENTITY_VALUE_TRANSFORMER,
};
const [TUI_INPUT_DATE_OPTIONS_NEW, tuiInputDateOptionsProviderNew] = tuiCreateOptions(TUI_INPUT_DATE_DEFAULT_OPTIONS_NEW);
const TUI_DATE_ADAPTER = {
DMY: 'dd/mm/yyyy',
MDY: 'mm/dd/yyyy',
YMD: 'yyyy/mm/dd',
};
class TuiInputDateBase extends TuiControl {
constructor() {
super(...arguments);
this.el = tuiInjectElement();
this.options = inject(TUI_INPUT_DATE_OPTIONS_NEW);
this.handlers = inject(TuiItemsHandlersDirective);
this.textfield = inject(TuiTextfieldDirective);
this.texts = toSignal(inject(TUI_DATE_TEXTS));
this.calendar = tuiInjectAuxiliary((x) => x instanceof TuiCalendar || x instanceof TuiCalendarRange);
this.filler = tuiDirectiveBinding(TuiTextfieldComponent, 'fillerSetter', computed(() => {
const { mode, separator } = this.format();
const texts = this.texts() || '';
return texts && changeDateSeparator(texts[mode], separator);
}), {});
this.mobile = inject(TUI_IS_MOBILE);
this.open = tuiDropdownOpen();
this.icon = tuiTextfieldIconBinding(TUI_INPUT_DATE_OPTIONS_NEW);
this.dropdownEnabled = tuiDropdownEnabled(computed(() => !this.native && this.interactive()));
this.format = toSignal(inject(TUI_DATE_FORMAT), {
initialValue: TUI_DEFAULT_DATE_FORMAT,
});
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.valueEffect = effect(() => {
const value = this.value()?.toString(this.format().mode, this.format().separator) ??
(this.filler().length === this.el.value.length ? '' : this.el.value);
this.textfield.value.set(value);
}, TUI_ALLOW_SIGNAL_WRITES);
this.calendarIn = effect(() => {
if (this.calendar()) {
this.processCalendar(this.calendar());
}
}, TUI_ALLOW_SIGNAL_WRITES);
this.calendarOut = effect((onCleanup) => {
const subscription = this.calendar()?.valueChange.subscribe((value) => {
this.onChange(value);
this.open.set(false);
if (!this.el.closest('tui-dropdown')) {
this.el.blur();
}
});
onCleanup(() => subscription?.unsubscribe());
});
this.native = this.el.type === 'date' && this.mobile;
this.min = signal(this.options.min);
this.max = signal(this.options.max);
}
set minSetter(min) {
this.min.set(min || this.options.min);
}
set maxSetter(max) {
this.max.set(max || this.options.max);
}
processCalendar(calendar) {
calendar.value = this.value();
calendar.disabledItemHandler = this.handlers.disabledItemHandler();
calendar.min = this.min();
calendar.max = this.max();
}
onClick() {
if (!this.mobile) {
this.open.update((open) => !open);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputDateBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputDateBase, isStandalone: true, inputs: { minSetter: ["min", "minSetter"], maxSetter: ["max", "maxSetter"] }, host: { listeners: { "input": "onValueChange($event.target.value)", "click.capture.stop": "onClick()" }, properties: { "attr.inputmode": "mobile && open() ? \"none\" : \"numeric\"", "disabled": "disabled()" } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputDateBase, decorators: [{
type: Directive,
args: [{
standalone: true,
host: {
'[attr.inputmode]': 'mobile && open() ? "none" : "numeric"',
'[disabled]': 'disabled()',
'(input)': 'onValueChange($event.target.value)',
'(click.capture.stop)': 'onClick()',
},
}]
}], propDecorators: { minSetter: [{
type: Input,
args: ['min']
}], maxSetter: [{
type: Input,
args: ['max']
}] } });
class TuiInputDateDirective extends TuiInputDateBase {
constructor() {
super(...arguments);
this.identity = inject(TUI_ITEMS_HANDLERS).identityMatcher.set((a, b) => a.daySame(b));
}
onValueChange(value) {
this.control?.control?.updateValueAndValidity({ emitEvent: false });
this.onChange(value.length === DATE_FILLER_LENGTH
? TuiDay.normalizeParse(value, this.format().mode)
: null);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputDateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputDateDirective, isStandalone: true, selector: "input[tuiInputDate]", providers: [
tuiAsOptionContent(TuiSelectOption),
tuiAsControl(TuiInputDateDirective),
tuiValueTransformerFrom(TUI_INPUT_DATE_OPTIONS_NEW),
], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithTextfield }, { directive: i2.TuiDropdownAuto }, { directive: i3.TuiItemsHandlersValidator }, { directive: i4.MaskitoDirective }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputDateDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'input[tuiInputDate]',
providers: [
tuiAsOptionContent(TuiSelectOption),
tuiAsControl(TuiInputDateDirective),
tuiValueTransformerFrom(TUI_INPUT_DATE_OPTIONS_NEW),
],
hostDirectives: [
TuiWithTextfield,
TuiDropdownAuto,
TuiItemsHandlersValidator,
MaskitoDirective,
],
}]
}] });
class TuiInputDateComponent {
constructor() {
this.host = inject(TuiInputDateDirective);
this.list = null;
}
onInput(value) {
if (!value) {
return this.host.onChange(null);
}
const [year = 0, month = 0, day = 0] = value.split('-').map(Number);
this.host.onChange(new TuiDay(year, month - 1, day));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputDateComponent, isStandalone: true, selector: "input[tuiInputDate][type=\"date\"]", inputs: { list: "list" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "type": "\"text\"", "attr.list": "null" } }, ngImport: i0, template: "<ng-container *ngIf=\"host.native\">\n <input\n *tuiTextfieldContent\n type=\"date\"\n [attr.list]=\"list\"\n [max]=\"host.max().toJSON()\"\n [min]=\"host.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[tuiInputDate]~.t-content input[type=date]{position:absolute;top:0;left:auto;right:0;bottom:0;inline-size:2.5rem;padding:0;opacity:0}tui-textfield input[tuiInputDate]~.t-content input[type=date]::-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: TuiInputDateComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'input[tuiInputDate][type="date"]', imports: [NgIf, TuiTextfieldContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
ngSkipHydration: 'true',
'[type]': '"text"',
'[attr.list]': 'null',
}, template: "<ng-container *ngIf=\"host.native\">\n <input\n *tuiTextfieldContent\n type=\"date\"\n [attr.list]=\"list\"\n [max]=\"host.max().toJSON()\"\n [min]=\"host.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[tuiInputDate]~.t-content input[type=date]{position:absolute;top:0;left:auto;right:0;bottom:0;inline-size:2.5rem;padding:0;opacity:0}tui-textfield input[tuiInputDate]~.t-content input[type=date]::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;inline-size:100%;block-size:100%}\n"] }]
}], propDecorators: { list: [{
type: Input
}] } });
const TuiInputDate = [
TuiInputDateDirective,
TuiInputDateComponent,
TuiCalendar,
];
/**
* Generated bundle index. Do not edit.
*/
export { TUI_DATE_ADAPTER, TUI_INPUT_DATE_DEFAULT_OPTIONS_NEW, TUI_INPUT_DATE_OPTIONS_NEW, TuiInputDate, TuiInputDateBase, TuiInputDateComponent, TuiInputDateDirective, tuiInputDateOptionsProviderNew };
//# sourceMappingURL=taiga-ui-kit-components-input-date.mjs.map