@taiga-ui/kit
Version:
Taiga UI Angular main components kit
202 lines (197 loc) • 10.9 kB
JavaScript
import { __spread, __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';
var TuiCalendarRangeComponent = /** @class */ (function () {
function TuiCalendarRangeComponent(valueChanges, changeDetectorRef, destroy$, otherDateText$) {
var _this = this;
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 = function (item) {
return item.append({ month: 1 });
};
this.mapper = function (items, min, max, minLength, otherDateText) { return __spread(items.filter(function (item) {
return (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(function (value) {
_this.value = value;
});
}
Object.defineProperty(TuiCalendarRangeComponent.prototype, "calculatedDisabledItemHandler", {
get: function () {
return this.calculateDisabledItemHandler(this.disabledItemHandler, this.value, this.minLength);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiCalendarRangeComponent.prototype, "computedMonth", {
get: function () {
return this.value ? this.value.to : this.defaultViewedMonth;
},
enumerable: true,
configurable: true
});
TuiCalendarRangeComponent.prototype.isItemActive = function (item) {
var activePeriod = this.activePeriod;
return ((typeof item === 'string' && activePeriod === null) || activePeriod === item);
};
TuiCalendarRangeComponent.prototype.onRangeChange = function (dayRange) {
this.updateValue(dayRange);
};
TuiCalendarRangeComponent.prototype.onDayClick = function (day) {
var value = this.value;
if (value === null || !value.isSingleDay) {
this.value = new TuiDayRange(day, day);
return;
}
this.updateValue(TuiDayRange.sort(value.from, day));
};
TuiCalendarRangeComponent.prototype.onItemSelect = function (item) {
if (typeof item !== 'string') {
this.updateValue(item.range.dayLimit(this.min, this.max));
return;
}
if (this.activePeriod !== null) {
this.updateValue(null);
}
};
TuiCalendarRangeComponent.prototype.updateValue = function (value) {
this.value = value;
this.rangeChange.emit(value);
};
Object.defineProperty(TuiCalendarRangeComponent.prototype, "activePeriod", {
get: function () {
var _this = this;
return (this.items.find(function (item) {
return nullableSame(_this.value, item.range, function (a, b) {
return a.from.daySame(b.from.dayLimit(_this.min, _this.max)) &&
a.to.daySame(b.to.dayLimit(_this.min, _this.max));
});
}) || null);
},
enumerable: true,
configurable: true
});
TuiCalendarRangeComponent.prototype.calculateDisabledItemHandler = function (disabledItemHandler, value, minLength) {
return function (item) {
if (!value || !value.isSingleDay || !minLength) {
return disabledItemHandler(item);
}
var disabledBefore = value.from.append(minLength, true).append({ day: 1 });
var disabledAfter = value.from.append(minLength).append({ day: -1 });
var inDisabledRange = disabledBefore.dayBefore(item) && disabledAfter.dayAfter(item);
return inDisabledRange || disabledItemHandler(item);
};
};
TuiCalendarRangeComponent.ctorParameters = function () { return [
{ 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);
return TuiCalendarRangeComponent;
}());
var TuiCalendarRangeModule = /** @class */ (function () {
function TuiCalendarRangeModule() {
}
TuiCalendarRangeModule = __decorate([
NgModule({
imports: [
CommonModule,
TuiMapperPipeModule,
TuiPreventDefaultModule,
TuiCalendarModule,
TuiCalendarModule,
TuiSvgModule,
TuiDataListModule,
TuiPrimitiveCalendarRangeModule,
],
declarations: [TuiCalendarRangeComponent],
exports: [TuiCalendarRangeComponent],
})
], TuiCalendarRangeModule);
return TuiCalendarRangeModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiCalendarRangeComponent, TuiCalendarRangeModule };
//# sourceMappingURL=taiga-ui-kit-components-calendar-range.js.map