@taiga-ui/kit
Version:
Taiga UI Angular main components kit
250 lines (245 loc) • 11.8 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, Injector, Type, Input, ViewChild, HostListener, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { AbstractTuiNullableControl, TUI_FIRST_DAY, TUI_LAST_DAY, ALWAYS_FALSE_HANDLER, TuiMonth, TuiDay, nullableSame, TUI_IS_MOBILE, TUI_DATE_FILLER, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiPreventDefaultModule } from '@taiga-ui/cdk';
import { TUI_DEFAULT_MARKER_HANDLER, sizeBigger, TuiDialogService, TuiTextfieldSizeDirective, TUI_TEXTFIELD_SIZE, TuiPrimitiveTextfieldComponent, TuiCalendarModule, TuiSvgModule, TuiLinkModule, TuiHostedDropdownModule, TuiPrimitiveTextfieldModule } from '@taiga-ui/core';
import { TUI_DATE_MASK, EMPTY_MASK } from '@taiga-ui/kit/constants';
import { LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER } from '@taiga-ui/kit/providers';
import { TUI_MOBILE_CALENDAR, TUI_CALENDAR_DATA_STREAM } from '@taiga-ui/kit/tokens';
import { tuiCreateAutoCorrectedDatePipe } from '@taiga-ui/kit/utils/mask';
import { TuiReplayControlValueChangesFactory } from '@taiga-ui/kit/utils/miscellaneous';
import { PolymorpheusComponent, PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
import { takeUntil } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { TuiValueAccessorModule } from '@taiga-ui/kit/directives';
import { TextMaskModule } from 'angular2-text-mask';
var TuiInputDateComponent_1;
const ɵ0 = TuiReplayControlValueChangesFactory;
let TuiInputDateComponent = TuiInputDateComponent_1 = class TuiInputDateComponent extends AbstractTuiNullableControl {
constructor(control, changeDetectorRef, injector, isMobile, dialogService, mobileCalendar, textfieldSize, filler) {
super(control, changeDetectorRef);
this.injector = injector;
this.isMobile = isMobile;
this.dialogService = dialogService;
this.mobileCalendar = mobileCalendar;
this.textfieldSize = textfieldSize;
this.filler = filler;
this.min = TUI_FIRST_DAY;
this.max = TUI_LAST_DAY;
this.disabledItemHandler = ALWAYS_FALSE_HANDLER;
this.markerHandler = TUI_DEFAULT_MARKER_HANDLER;
this.items = [];
this.defaultActiveYearMonth = TuiMonth.currentLocal();
this.open = false;
this.month = null;
this.textMaskOptions = {
mask: TUI_DATE_MASK,
pipe: tuiCreateAutoCorrectedDatePipe(this),
guide: false,
};
}
get nativeFocusableElement() {
return this.textfield ? this.textfield.nativeFocusableElement : null;
}
get focused() {
return !!this.textfield && this.textfield.focused;
}
get computedMobile() {
return this.isMobile && !!this.mobileCalendar;
}
get calendarIcon() {
return sizeBigger(this.textfieldSize.size)
? 'tuiIconCalendarLarge'
: 'tuiIconCalendar';
}
get computedFiller() {
return this.activeItem ? '' : this.filler;
}
get computedValue() {
const { value, nativeValue, activeItem } = this;
if (activeItem) {
return String(activeItem);
}
return value ? String(value) : nativeValue;
}
get computedActiveYearMonth() {
if (this.items[0] && this.value && this.value.daySame(this.items[0].day)) {
return this.items[0].displayDay;
}
return this.month || this.value || this.defaultActiveYearMonth;
}
get nativeValue() {
return this.nativeFocusableElement ? this.nativeFocusableElement.value : '';
}
set nativeValue(value) {
if (!this.nativeFocusableElement) {
return;
}
this.nativeFocusableElement.value = value;
}
get canOpen() {
return !this.computedDisabled && !this.readOnly && !this.computedMobile;
}
get computedMask() {
return this.activeItem ? EMPTY_MASK : this.textMaskOptions;
}
get activeItem() {
const { value } = this;
return (value && this.items.find(item => item.day.daySame(value))) || null;
}
onMobileClick() {
if (!this.mobileCalendar) {
this.open = !this.open;
return;
}
this.dialogService
.open(new PolymorpheusComponent(this.mobileCalendar, this.injector), {
size: 'fullscreen',
closeable: false,
data: {
single: true,
min: this.min,
max: this.max,
disabledItemHandler: this.disabledItemHandler,
},
})
.pipe(takeUntil(this.destroy$))
.subscribe(value => {
this.updateValue(value);
});
}
onClick() {
if (!this.isMobile) {
this.open = !this.open;
}
}
onValueChange(value) {
if (value && this.control) {
this.control.updateValueAndValidity();
}
this.updateValue(value.length !== this.filler.length ? null : TuiDay.normalizeParse(value));
}
onDayClick(value) {
this.updateValue(value);
this.open = false;
}
onHovered(hovered) {
this.updateHovered(hovered);
}
onMonthChange(month) {
this.month = month;
}
onOpenChange(open) {
this.open = open;
}
onFocused(focused) {
this.updateFocused(focused);
}
setDisabledState() {
super.setDisabledState();
this.open = false;
}
writeValue(value) {
super.writeValue(value);
this.nativeValue = value ? this.computedValue : '';
}
valueIdenticalComparator(oldValue, newValue) {
return nullableSame(oldValue, newValue, (a, b) => a.daySame(b));
}
};
TuiInputDateComponent.ctorParameters = () => [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: Injector, decorators: [{ type: Inject, args: [Injector,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_MOBILE,] }] },
{ type: TuiDialogService, decorators: [{ type: Inject, args: [TuiDialogService,] }] },
{ type: Type, decorators: [{ type: Optional }, { type: Inject, args: [TUI_MOBILE_CALENDAR,] }] },
{ type: TuiTextfieldSizeDirective, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_SIZE,] }] },
{ type: String, decorators: [{ type: Inject, args: [TUI_DATE_FILLER,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateComponent.prototype, "min", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateComponent.prototype, "max", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateComponent.prototype, "disabledItemHandler", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateComponent.prototype, "markerHandler", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateComponent.prototype, "items", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputDateComponent.prototype, "defaultActiveYearMonth", void 0);
__decorate([
ViewChild(TuiPrimitiveTextfieldComponent)
], TuiInputDateComponent.prototype, "textfield", void 0);
__decorate([
HostListener('click')
], TuiInputDateComponent.prototype, "onClick", null);
TuiInputDateComponent = TuiInputDateComponent_1 = __decorate([
Component({
selector: 'tui-input-date',
template: "<tui-hosted-dropdown\n class=\"hosted\"\n [canOpen]=\"canOpen\"\n [content]=\"dropdown\"\n [open]=\"open && canOpen\"\n (openChange)=\"onOpenChange($event)\"\n>\n <tui-primitive-textfield\n automation-id=\"tui-input-date-range__textfield\"\n class=\"textfield\"\n tuiValueAccessor\n [pseudoFocused]=\"pseudoFocused\"\n [pseudoHovered]=\"pseudoHovered\"\n [invalid]=\"computedInvalid\"\n [filler]=\"computedFiller\"\n [nativeId]=\"nativeId\"\n [readOnly]=\"readOnly\"\n [focusable]=\"computedFocusable\"\n [iconContent]=\"computedMobile ? iconContent : calendarIcon\"\n [disabled]=\"computedDisabled\"\n [textMask]=\"computedMask\"\n [value]=\"computedValue\"\n (valueChange)=\"onValueChange($event)\"\n (hoveredChange)=\"onHovered($event)\"\n (focusedChange)=\"onFocused($event)\"\n >\n <ng-content></ng-content>\n </tui-primitive-textfield>\n\n <ng-template #iconContent>\n <tui-svg\n automation-id=\"tui-input-date-range__icon\"\n [class.icon]=\"!computedDisabled\"\n [src]=\"calendarIcon\"\n (click)=\"onMobileClick()\"\n ></tui-svg>\n </ng-template>\n\n <ng-template #dropdown=\"polymorpheus\" polymorpheus>\n <tui-calendar\n tuiPreventDefault=\"mousedown\"\n automation-id=\"tui-input-date__calendar\"\n [min]=\"min\"\n [max]=\"max\"\n [markerHandler]=\"markerHandler\"\n [disabledItemHandler]=\"disabledItemHandler\"\n [month]=\"computedActiveYearMonth\"\n [value]=\"value\"\n (dayClick)=\"onDayClick($event)\"\n (monthChange)=\"onMonthChange($event)\"\n ></tui-calendar>\n <div\n *ngIf=\"items.length === 1\"\n tuiPreventDefault=\"mousedown\"\n class=\"button\"\n >\n <button tuiLink type=\"button\" (click)=\"onDayClick(items[0].day)\">\n {{items[0]}}\n </button>\n </div>\n </ng-template>\n</tui-hosted-dropdown>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(() => TuiInputDateComponent_1),
},
{
provide: TUI_CALENDAR_DATA_STREAM,
deps: [[new Optional(), new Self(), NgControl]],
useFactory: ɵ0,
},
LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER,
],
styles: [":host{display:block;border-radius:var(--tui-radius-m)}.hosted{display:block;border-radius:inherit}.textfield{border-radius:inherit}.icon{pointer-events:auto}.button{display:flex;height:44px;justify-content:center;box-shadow:inset 0 1px var(--tui-base-03)}.button button{flex:1;text-align:center}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Inject(Injector)),
__param(3, Inject(TUI_IS_MOBILE)),
__param(4, Inject(TuiDialogService)),
__param(5, Optional()),
__param(5, Inject(TUI_MOBILE_CALENDAR)),
__param(6, Inject(TUI_TEXTFIELD_SIZE)),
__param(7, Inject(TUI_DATE_FILLER))
], TuiInputDateComponent);
let TuiInputDateModule = class TuiInputDateModule {
};
TuiInputDateModule = __decorate([
NgModule({
imports: [
CommonModule,
TextMaskModule,
PolymorpheusModule,
TuiPreventDefaultModule,
TuiCalendarModule,
TuiSvgModule,
TuiLinkModule,
TuiHostedDropdownModule,
TuiPrimitiveTextfieldModule,
TuiValueAccessorModule,
],
declarations: [TuiInputDateComponent],
exports: [TuiInputDateComponent],
})
], TuiInputDateModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputDateComponent, TuiInputDateModule, ɵ0 };
//# sourceMappingURL=taiga-ui-kit-components-input-date.js.map