UNPKG

@taiga-ui/kit

Version:

Taiga UI Angular main components kit

206 lines (199 loc) 12.7 kB
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