@taiga-ui/kit
Version:
Taiga UI Angular main components kit
225 lines (217 loc) • 13.9 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, computed, effect, untracked, Directive, input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import { tuiDirectiveBinding, tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
import * as i1$1 from '@taiga-ui/core/components/textfield';
import { TuiTextfieldComponent, tuiInjectAuxiliary, TuiWithNativePicker, TuiTextfieldContent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
import { TUI_DATE_FORMAT } from '@taiga-ui/core/tokens';
import { TUI_DATE_TEXTS } from '@taiga-ui/kit/tokens';
import { identity } from 'rxjs';
import { TuiCalendar } from '@taiga-ui/core/components/calendar';
import { TuiLabel } from '@taiga-ui/core/components/label';
import * as i2 from '@taiga-ui/core/portals/dropdown';
import { TuiDropdownOpen, tuiDropdownEnabled, TuiDropdownAuto, TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
import { TUI_VERSION } from '@taiga-ui/cdk/constants';
import { TUI_LAST_DAY, TUI_FIRST_DAY, TuiDay, DATE_FILLER_LENGTH } from '@taiga-ui/cdk/date-time';
import * as i4 from '@maskito/angular';
import { MaskitoDirective } from '@maskito/angular';
import { maskitoDateOptionsGenerator } from '@maskito/kit';
import { WA_IS_MOBILE } from '@ng-web-apis/platform';
import { TUI_IDENTITY_VALUE_TRANSFORMER, TuiControl, tuiAsControl, tuiValueTransformerFrom } from '@taiga-ui/cdk/classes';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiSetSignal } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiAsOptionContent } from '@taiga-ui/core/components/data-list';
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 * as i3 from '@taiga-ui/core/directives/items-handlers';
import { TuiItemsHandlersDirective, TuiItemsHandlersValidator } from '@taiga-ui/core/directives/items-handlers';
import { TuiCalendarRange } from '@taiga-ui/kit/components/calendar-range';
import { TuiSelectOption } from '@taiga-ui/kit/components/select';
import { tuiMaskito } from '@taiga-ui/kit/utils';
function changeDateSeparator(dateString, newDateSeparator) {
return dateString.replaceAll(/[^0-9A-ZА-Я]/gi, newDateSeparator);
}
function tuiWithDateFiller(fn = identity) {
const texts = inject(TUI_DATE_TEXTS);
const format = inject(TUI_DATE_FORMAT);
return tuiDirectiveBinding(TuiTextfieldComponent, 'filler', computed(() => {
const { mode, separator } = format();
const fillersMap = texts() ?? '';
const filler = fillersMap && changeDateSeparator(fillersMap[mode], separator);
return fn(filler);
}), {});
}
const TUI_INPUT_DATE_DEFAULT_OPTIONS = {
icon: '@tui.calendar',
min: TUI_FIRST_DAY,
max: TUI_LAST_DAY,
valueTransformer: TUI_IDENTITY_VALUE_TRANSFORMER,
};
const [TUI_INPUT_DATE_OPTIONS, tuiInputDateOptionsProvider] = tuiCreateOptions(TUI_INPUT_DATE_DEFAULT_OPTIONS);
class TuiInputDateBase extends TuiControl {
constructor() {
super(...arguments);
this.calendar = tuiInjectAuxiliary((x) => x instanceof TuiCalendar || x instanceof TuiCalendarRange);
this.options = inject(TUI_INPUT_DATE_OPTIONS);
this.el = tuiInjectElement();
this.input = inject(TuiInputDirective);
this.filler = tuiWithDateFiller();
this.mobile = inject(WA_IS_MOBILE);
this.open = inject(TuiDropdownOpen).open;
this.icon = tuiIconEnd(this.options.icon);
this.handlers = inject(TuiItemsHandlersDirective);
this.format = inject(TUI_DATE_FORMAT);
this.dropdownEnabled = tuiDropdownEnabled(computed(() => !this.native && this.interactive()));
this.identity = tuiDirectiveBinding(TuiItemsHandlersDirective, 'identityMatcher', (a, b) => a.daySame(b), {});
this.valueEffect = effect(() => {
const value = this.stringify(this.value()) ||
(this.filler().length === this.el.value.length ? '' : this.el.value);
this.input.value.set(value);
});
this.calendarIn = effect(() => {
const calendar = this.calendar();
if (calendar) {
this.processCalendar(calendar);
}
});
this.calendarOut = effect(() => {
const value = this.calendar()?.value();
const changed = untracked(() => value !== this.toCalendarValue(this.value()));
if (value && changed) {
this.setDate(value);
}
});
this.native = !!inject(TuiWithNativePicker, { optional: true }) && this.mobile;
}
writeValue(value) {
const reset = this.control.pristine && this.control.untouched && !value;
const changed = untracked(() => value !== this.value());
if (changed || reset) {
super.writeValue(value);
this.input.value.set(this.stringify(this.value()));
}
}
setDate(value) {
this.onChange(value);
this.open.set(false);
if (!this.el.closest('tui-dropdown')) {
this.el.blur();
}
}
processCalendar(calendar) {
tuiSetSignal(calendar.value, this.toCalendarValue(this.value()));
tuiSetSignal(calendar.disabledItemHandler, this.handlers.disabledItemHandler());
tuiSetSignal(calendar.min, this.min());
tuiSetSignal(calendar.max, this.max());
}
onClick() {
if (!this.mobile && this.dropdownEnabled()) {
this.open.update((open) => !open);
}
}
stringify(value) {
return value?.toString(this.format().mode, this.format().separator) ?? '';
}
toCalendarValue(value) {
return Array.isArray(value)
? value[0]
: // https://github.com/microsoft/TypeScript/issues/17002
value;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputDateBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiInputDateBase, isStandalone: true, host: { listeners: { "click.capture.stop": "onClick()", "input": "onValueChange($event.target.value)" }, properties: { "attr.inputmode": "mobile && open() ? \"none\" : \"numeric\"", "disabled": "disabled()" } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputDateBase, decorators: [{
type: Directive,
args: [{
host: {
'[attr.inputmode]': 'mobile && open() ? "none" : "numeric"',
'[disabled]': 'disabled()',
'(click.capture.stop)': 'onClick()',
'(input)': 'onValueChange($event.target.value)',
},
}]
}] });
class TuiInputDateDirective extends TuiInputDateBase {
constructor() {
super(...arguments);
this.max = input(this.options.max, {
transform: (max) => max instanceof TuiDay ? max : TUI_LAST_DAY,
});
this.min = input(this.options.min, {
transform: (min) => min instanceof TuiDay ? min : TUI_FIRST_DAY,
});
this.mask = tuiMaskito(computed(() => maskitoDateOptionsGenerator({
separator: this.format().separator,
mode: this.format().mode,
min: this.min().toLocalNativeDate(),
max: this.max().toLocalNativeDate(),
})));
}
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: "19.2.21", ngImport: i0, type: TuiInputDateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiInputDateDirective, isStandalone: true, selector: "input[tuiInputDate]", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
tuiAsOptionContent(TuiSelectOption),
tuiAsControl(TuiInputDateDirective),
tuiValueTransformerFrom(TUI_INPUT_DATE_OPTIONS),
], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithInput }, { directive: i2.TuiDropdownAuto }, { directive: i3.TuiItemsHandlersValidator }, { directive: i4.MaskitoDirective }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputDateDirective, decorators: [{
type: Directive,
args: [{
selector: 'input[tuiInputDate]',
providers: [
tuiAsOptionContent(TuiSelectOption),
tuiAsControl(TuiInputDateDirective),
tuiValueTransformerFrom(TUI_INPUT_DATE_OPTIONS),
],
hostDirectives: [
TuiWithInput,
TuiDropdownAuto,
TuiItemsHandlersValidator,
MaskitoDirective,
],
}]
}] });
class TuiInputDateComponent {
constructor() {
this.host = inject(TuiInputDateDirective);
this.list = input();
}
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: "19.2.21", ngImport: i0, type: TuiInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiInputDateComponent, isStandalone: true, selector: "input[tuiInputDate][type=\"date\"]", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-tui-version": "5.7.0", "ngSkipHydration": "true" }, properties: { "attr.list": "null" } }, hostDirectives: [{ directive: i1$1.TuiWithNativePicker }], ngImport: i0, template: "@if (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}\n", styles: ["tui-textfield input[tuiInputDate]:where(*[data-tui-version=\"5.7.0\"])~.t-content input[type=date]{position:absolute;inset-block-start:0;inset-inline-start:auto;inset-inline-end:0;inset-block-end:0;inline-size:2.5rem;padding:0;opacity:0;pointer-events:auto}tui-textfield input[tuiInputDate]:where(*[data-tui-version=\"5.7.0\"])~.t-content input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%}\n"], dependencies: [{ kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputDateComponent, decorators: [{
type: Component,
args: [{ selector: 'input[tuiInputDate][type="date"]', imports: [TuiTextfieldContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiWithNativePicker], host: {
'data-tui-version': TUI_VERSION,
ngSkipHydration: 'true',
'[attr.list]': 'null',
}, template: "@if (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}\n", styles: ["tui-textfield input[tuiInputDate]:where(*[data-tui-version=\"5.7.0\"])~.t-content input[type=date]{position:absolute;inset-block-start:0;inset-inline-start:auto;inset-inline-end:0;inset-block-end:0;inline-size:2.5rem;padding:0;opacity:0;pointer-events:auto}tui-textfield input[tuiInputDate]:where(*[data-tui-version=\"5.7.0\"])~.t-content input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%}\n"] }]
}] });
const TuiInputDate = [
TuiInputDateDirective,
TuiInputDateComponent,
TuiCalendar,
TuiLabel,
TuiTextfieldComponent,
TuiTextfieldOptionsDirective,
TuiDropdownContent,
];
/**
* Generated bundle index. Do not edit.
*/
export { TUI_INPUT_DATE_DEFAULT_OPTIONS, TUI_INPUT_DATE_OPTIONS, TuiInputDate, TuiInputDateBase, TuiInputDateComponent, TuiInputDateDirective, tuiInputDateOptionsProvider, tuiWithDateFiller };
//# sourceMappingURL=taiga-ui-kit-components-input-date.mjs.map