@taiga-ui/kit
Version:
Taiga UI Angular main components kit
177 lines (172 loc) • 9.35 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { EventEmitter, Inject, Optional, ChangeDetectorRef, Input, Output, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { TuiMonth, ALWAYS_FALSE_HANDLER, TUI_FIRST_DAY, TUI_LAST_DAY, watch, TuiDayRange, nullableSame, TuiDestroyService, tuiDefaultProp, tuiPure, TuiMapperPipeModule, TuiPreventDefaultModule } from '@taiga-ui/cdk';
import { TUI_DEFAULT_MARKER_HANDLER, TuiCalendarModule, TuiSvgModule, TuiDataListModule } from '@taiga-ui/core';
import { MAX_DAY_RANGE_LENGTH_MAPPER } from '@taiga-ui/kit/constants';
import { TUI_CALENDAR_DATA_STREAM, TUI_OTHER_DATE_TEXT } from '@taiga-ui/kit/tokens';
import { Observable } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { TuiPrimitiveCalendarRangeModule } from '@taiga-ui/kit/internal/primitive-calendar-range';
let TuiCalendarRangeComponent = class TuiCalendarRangeComponent {
constructor(valueChanges, changeDetectorRef, destroy$, otherDateText$) {
this.otherDateText$ = otherDateText$;
this.defaultViewedMonth = TuiMonth.currentLocal();
this.disabledItemHandler = ALWAYS_FALSE_HANDLER;
this.markerHandler = TUI_DEFAULT_MARKER_HANDLER;
this.items = [];
this.min = TUI_FIRST_DAY;
this.max = TUI_LAST_DAY;
this.minLength = null;
this.maxLength = null;
this.rangeChange = new EventEmitter();
this.value = null;
this.maxLengthMapper = MAX_DAY_RANGE_LENGTH_MAPPER;
this.monthShiftMapper = item => item.append({ month: 1 });
this.mapper = (items, min, max, minLength, otherDateText) => [
...items.filter(item => (minLength === null ||
item.range.from.append(minLength).daySameOrBefore(item.range.to)) &&
item.range.to.daySameOrAfter(min) &&
(max === null || item.range.from.daySameOrBefore(max))),
otherDateText,
];
if (!valueChanges) {
return;
}
valueChanges
.pipe(watch(changeDetectorRef), takeUntil(destroy$))
.subscribe(value => {
this.value = value;
});
}
get calculatedDisabledItemHandler() {
return this.calculateDisabledItemHandler(this.disabledItemHandler, this.value, this.minLength);
}
get computedMonth() {
return this.value ? this.value.to : this.defaultViewedMonth;
}
isItemActive(item) {
const { activePeriod } = this;
return ((typeof item === 'string' && activePeriod === null) || activePeriod === item);
}
onRangeChange(dayRange) {
this.updateValue(dayRange);
}
onDayClick(day) {
const { value } = this;
if (value === null || !value.isSingleDay) {
this.value = new TuiDayRange(day, day);
return;
}
this.updateValue(TuiDayRange.sort(value.from, day));
}
onItemSelect(item) {
if (typeof item !== 'string') {
this.updateValue(item.range.dayLimit(this.min, this.max));
return;
}
if (this.activePeriod !== null) {
this.updateValue(null);
}
}
updateValue(value) {
this.value = value;
this.rangeChange.emit(value);
}
get activePeriod() {
return (this.items.find(item => nullableSame(this.value, item.range, (a, b) => a.from.daySame(b.from.dayLimit(this.min, this.max)) &&
a.to.daySame(b.to.dayLimit(this.min, this.max)))) || null);
}
calculateDisabledItemHandler(disabledItemHandler, value, minLength) {
return item => {
if (!value || !value.isSingleDay || !minLength) {
return disabledItemHandler(item);
}
const disabledBefore = value.from.append(minLength, true).append({ day: 1 });
const disabledAfter = value.from.append(minLength).append({ day: -1 });
const inDisabledRange = disabledBefore.dayBefore(item) && disabledAfter.dayAfter(item);
return inDisabledRange || disabledItemHandler(item);
};
}
};
TuiCalendarRangeComponent.ctorParameters = () => [
{ type: Observable, decorators: [{ type: Inject, args: [TUI_CALENDAR_DATA_STREAM,] }, { type: Optional }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: TuiDestroyService, decorators: [{ type: Inject, args: [TuiDestroyService,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_OTHER_DATE_TEXT,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiCalendarRangeComponent.prototype, "defaultViewedMonth", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiCalendarRangeComponent.prototype, "disabledItemHandler", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiCalendarRangeComponent.prototype, "markerHandler", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiCalendarRangeComponent.prototype, "items", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiCalendarRangeComponent.prototype, "min", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiCalendarRangeComponent.prototype, "max", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiCalendarRangeComponent.prototype, "minLength", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiCalendarRangeComponent.prototype, "maxLength", void 0);
__decorate([
Output()
], TuiCalendarRangeComponent.prototype, "rangeChange", void 0);
__decorate([
tuiPure
], TuiCalendarRangeComponent.prototype, "calculateDisabledItemHandler", null);
TuiCalendarRangeComponent = __decorate([
Component({
selector: 'tui-calendar-range',
template: "<tui-primitive-calendar-range\n *ngIf=\"!items.length; else presets\"\n automation-id=\"tui-calendar-range__calendars\"\n tuiPreventDefault=\"mousedown\"\n [markerHandler]=\"markerHandler\"\n [min]=\"min | tuiMapper: maxLengthMapper: value: maxLength: true\"\n [max]=\"max | tuiMapper: maxLengthMapper: value: maxLength: false\"\n [defaultViewedMonthFirst]=\"defaultViewedMonth\"\n [defaultViewedMonthSecond]=\"defaultViewedMonth | tuiMapper : monthShiftMapper\"\n [disabledItemHandler]=\"calculatedDisabledItemHandler\"\n [value]=\"value\"\n (dayClick)=\"onDayClick($event)\"\n></tui-primitive-calendar-range>\n<ng-template #presets>\n <div class=\"wrapper\">\n <tui-calendar\n automation-id=\"tui-calendar-range__calendar\"\n tuiPreventDefault=\"mousedown\"\n [value]=\"value\"\n [markerHandler]=\"markerHandler\"\n [min]=\"min | tuiMapper: maxLengthMapper: value: maxLength: true\"\n [max]=\"max | tuiMapper: maxLengthMapper: value: maxLength: false\"\n [month]=\"computedMonth\"\n [disabledItemHandler]=\"calculatedDisabledItemHandler\"\n (dayClick)=\"onDayClick($event)\"\n ></tui-calendar>\n <tui-data-list\n role=\"menu\"\n automation-id=\"tui-calendar-range__menu\"\n class=\"menu\"\n >\n <button\n *ngFor=\"let item of items | tuiMapper : mapper : min : max : minLength : (otherDateText$ | async)\"\n tuiOption\n tuiPreventDefault=\"mousedown\"\n role=\"menuitemradio\"\n automation-id=\"tui-calendar-range__menu__item\"\n [attr.aria-checked]=\"isItemActive(item)\"\n (keydown.enter.prevent)=\"onItemSelect(item)\"\n (keydown.space.prevent)=\"onItemSelect(item)\"\n (click)=\"onItemSelect(item)\"\n >\n {{item}}\n <tui-svg\n *ngIf=\"isItemActive(item)\"\n automation-id=\"tui-calendar-range__checkmark\"\n class=\"checkmark\"\n src=\"tuiIconCheck\"\n ></tui-svg>\n </button>\n </tui-data-list>\n </div>\n</ng-template>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [TuiDestroyService],
styles: [":host{display:block}.wrapper{display:flex}.menu{width:176px;border-left:1px solid var(--tui-base-03)}.checkmark{margin-left:auto;width:16px;height:16px}"]
}),
__param(0, Inject(TUI_CALENDAR_DATA_STREAM)),
__param(0, Optional()),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Inject(TuiDestroyService)),
__param(3, Inject(TUI_OTHER_DATE_TEXT))
], TuiCalendarRangeComponent);
let TuiCalendarRangeModule = class TuiCalendarRangeModule {
};
TuiCalendarRangeModule = __decorate([
NgModule({
imports: [
CommonModule,
TuiMapperPipeModule,
TuiPreventDefaultModule,
TuiCalendarModule,
TuiCalendarModule,
TuiSvgModule,
TuiDataListModule,
TuiPrimitiveCalendarRangeModule,
],
declarations: [TuiCalendarRangeComponent],
exports: [TuiCalendarRangeComponent],
})
], TuiCalendarRangeModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiCalendarRangeComponent, TuiCalendarRangeModule };
//# sourceMappingURL=taiga-ui-kit-components-calendar-range.js.map