@taiga-ui/kit
Version:
Taiga UI Angular main components kit
224 lines (219 loc) • 12.5 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { EventEmitter, Inject, Input, Output, HostBinding, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { TuiDay, ALWAYS_FALSE_HANDLER, TUI_FIRST_DAY, TUI_LAST_DAY, TuiMonth, TuiMonthRange, nullableSame, tuiDefaultProp, tuiPure, TuiLetModule, TuiHoveredModule, TuiPressedModule, TuiFocusableModule } from '@taiga-ui/cdk';
import { TUI_CALENDAR_MONTHS } from '@taiga-ui/kit/tokens';
import { Observable } from 'rxjs';
import { CommonModule } from '@angular/common';
import { TuiPrimitiveYearPickerModule, TuiPrimitiveSpinButtonModule, TuiScrollbarModule, TuiLinkModule } from '@taiga-ui/core';
const TODAY = TuiDay.currentLocal();
// @dynamic
let TuiCalendarMonthComponent = class TuiCalendarMonthComponent {
constructor(months$) {
this.months$ = months$;
this.value = null;
this.year = TODAY;
this.disabledItemHandler = ALWAYS_FALSE_HANDLER;
this.min = TUI_FIRST_DAY;
this.max = TUI_LAST_DAY;
this.monthClick = new EventEmitter();
this.hoveredItemChange = new EventEmitter();
this.yearChange = new EventEmitter();
this.isYearPickerShown = false;
this.hoveredItem = null;
this.pressedItem = null;
}
get isSingle() {
return (this.value !== null &&
(this.value instanceof TuiMonth || this.value.isSingleMonth));
}
get previousYearDisabled() {
return this.year.yearSameOrBefore(this.min);
}
get nextYearDisabled() {
return this.year.yearSameOrAfter(this.max);
}
getItemState(item) {
const { disabledItemHandlerWithMinMax, pressedItem, hoveredItem } = this;
if (disabledItemHandlerWithMinMax(item)) {
return "disabled" /* Disabled */;
}
if (pressedItem !== null && pressedItem.monthSame(item)) {
return "pressed" /* Pressed */;
}
if (hoveredItem !== null && hoveredItem.monthSame(item)) {
return "hovered" /* Hovered */;
}
return null;
}
getItemRange(item) {
const { value, hoveredItem } = this;
if (value === null) {
return null;
}
if (value instanceof TuiMonth) {
return value.monthSame(item) ? "single" /* Single */ : null;
}
const theFirstOfRange = value.from.monthSame(item) && !value.isSingleMonth;
const hoveredItemAfterFrom = hoveredItem !== null &&
hoveredItem.monthAfter(value.from) &&
value.from.monthSame(item) &&
value.isSingleMonth;
const hoveredItemIsCandidatToBeFrom = hoveredItem !== null &&
hoveredItem.monthSame(item) &&
hoveredItem.monthBefore(value.from) &&
value.isSingleMonth;
if (theFirstOfRange || hoveredItemAfterFrom || hoveredItemIsCandidatToBeFrom) {
return "start" /* Start */;
}
const theLastOfRange = value.to.monthSame(item) && !value.isSingleMonth;
const hoveredItemBeforeTo = value.to.monthSame(item) && !value.isSingleMonth;
const hoveredItemIsCandidatToBeTo = hoveredItem !== null &&
hoveredItem.monthSame(item) &&
hoveredItem.monthAfter(value.from) &&
value.isSingleMonth;
if (theLastOfRange || hoveredItemBeforeTo || hoveredItemIsCandidatToBeTo) {
return "end" /* End */;
}
return value.isSingleMonth && value.from.monthSame(item)
? "single" /* Single */
: null;
}
getTuiMonth(monthNumber, yearNumber) {
return new TuiMonth(yearNumber, monthNumber);
}
isItemToday(item) {
return TODAY.monthSame(item);
}
isItemInsideRange(month) {
const { value, hoveredItem } = this;
if (value === null || value instanceof TuiMonth) {
return false;
}
if (!value.isSingleMonth) {
return value.from.monthSameOrBefore(month) && value.to.monthAfter(month);
}
if (hoveredItem === null) {
return false;
}
const range = TuiMonthRange.sort(value.from, hoveredItem);
return range.from.monthSameOrBefore(month) && range.to.monthAfter(month);
}
onPickerYearClick(year) {
this.isYearPickerShown = false;
if (this.year.yearSame(year)) {
return;
}
this.year = year;
this.yearChange.emit(year);
}
onItemClick(month) {
if (this.disabledItemHandlerWithMinMax(month)) {
return;
}
this.monthClick.emit(month);
}
onYearClick() {
this.isYearPickerShown = true;
}
onNextYear() {
this.year = this.year.append({ year: 1 });
}
onPreviousYear() {
this.year = this.year.append({ year: -1 });
}
onItemHovered(hovered, item) {
this.updateHoveredItem(hovered ? item : null);
}
onItemPressed(pressed, item) {
this.updatePressedItem(pressed ? item : null);
}
get disabledItemHandlerWithMinMax() {
return this.calculateDisabledItemHandlerWithMinMax(this.disabledItemHandler, this.value, this.min, this.max);
}
updateHoveredItem(month) {
if (nullableSame(this.hoveredItem, month, (a, b) => a.monthSame(b))) {
return;
}
this.hoveredItem = month;
this.hoveredItemChange.emit(month);
}
updatePressedItem(item) {
this.pressedItem = item;
}
calculateDisabledItemHandlerWithMinMax(disabledItemHandler, value, min, max) {
return item => item.monthBefore(min) ||
item.monthAfter(max) ||
disabledItemHandler(item, { value });
}
};
TuiCalendarMonthComponent.ctorParameters = () => [
{ type: Observable, decorators: [{ type: Inject, args: [TUI_CALENDAR_MONTHS,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiCalendarMonthComponent.prototype, "value", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiCalendarMonthComponent.prototype, "year", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiCalendarMonthComponent.prototype, "disabledItemHandler", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiCalendarMonthComponent.prototype, "min", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiCalendarMonthComponent.prototype, "max", void 0);
__decorate([
Output()
], TuiCalendarMonthComponent.prototype, "monthClick", void 0);
__decorate([
Output()
], TuiCalendarMonthComponent.prototype, "hoveredItemChange", void 0);
__decorate([
Output()
], TuiCalendarMonthComponent.prototype, "yearChange", void 0);
__decorate([
HostBinding('class._single')
], TuiCalendarMonthComponent.prototype, "isSingle", null);
__decorate([
tuiPure
], TuiCalendarMonthComponent.prototype, "calculateDisabledItemHandlerWithMinMax", null);
TuiCalendarMonthComponent = __decorate([
Component({
selector: 'tui-calendar-month',
template: "<tui-scrollbar *ngIf=\"isYearPickerShown; else monthSelect\" class=\"scrollbar\">\n <tui-primitive-year-picker\n [min]=\"min\"\n [max]=\"max\"\n [initialItem]=\"year\"\n [value]=\"value\"\n (yearClick)=\"onPickerYearClick($event)\"\n ></tui-primitive-year-picker>\n</tui-scrollbar>\n<ng-template #monthSelect>\n <tui-primitive-spin-button\n [focusable]=\"false\"\n [leftDisabled]=\"previousYearDisabled\"\n [rightDisabled]=\"nextYearDisabled\"\n (leftClick)=\"onPreviousYear()\"\n (rightClick)=\"onNextYear()\"\n >\n <button tuiLink [tuiFocusable]=\"false\" (click)=\"onYearClick()\">\n {{year.formattedYear}}\n </button>\n </tui-primitive-spin-button>\n <div class=\"row\">\n <ng-container\n *ngFor=\"let month of (months$ | async); let index = index\"\n >\n <div\n *tuiLet=\"getTuiMonth(index, year.year) as item\"\n class=\"cell\"\n [class.cell_today]=\"isItemToday(item)\"\n [class.cell_interval]=\"isItemInsideRange(item)\"\n [attr.data-tui-element-range]=\"getItemRange(item)\"\n [attr.data-tui-element-state]=\"getItemState(item)\"\n (tuiHoveredChange)=\"onItemHovered($event, item)\"\n (tuiPressedChange)=\"onItemHovered($event, item)\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"item\">{{month}}</div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host{font:var(--tui-font-text-m)}.row{position:relative;z-index:0;display:flex;justify-content:space-between;height:36px}.item{position:relative;flex:1;line-height:32px;border-radius:var(--tui-radius-m)}.item:after,.item:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;border-radius:var(--tui-radius-m)}.cell{position:relative;display:flex;align-items:center;justify-content:center;width:59px;text-align:center;outline:0;cursor:pointer;background-clip:content-box;box-sizing:border-box;border:2px solid transparent;box-sizing:content-box}.cell:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;border-radius:var(--tui-radius-m)}.cell_today:after{position:absolute;left:50%;transform:translate(-50%,0);content:'';bottom:5px;height:2px;width:12px;border-radius:6px;background-color:var(--tui-text-02)}.cell_interval:before{background:var(--tui-base-02)}:host._single .cell_interval:before{background:var(--tui-secondary-hover)}.cell_interval:not(:last-child):before{right:-59px}.cell_interval:last-child:first-child:before{right:0}.cell_interval:first-child>.item{border-top-left-radius:var(--tui-radius-m);border-bottom-left-radius:var(--tui-radius-m)}.cell_interval:last-child>.item{border-top-right-radius:var(--tui-radius-m);border-bottom-right-radius:var(--tui-radius-m)}.cell_interval>.item{border-radius:0}.cell[data-tui-element-range]:after{background-color:var(--tui-primary-text)}.cell[data-tui-element-range]>.item{color:var(--tui-primary-text)}.cell[data-tui-element-range]>.item:after,.cell[data-tui-element-range]>.item:before{background-color:var(--tui-primary)}.cell[data-tui-element-range][data-tui-element-state=hovered]>.item:after,.cell[data-tui-element-range][data-tui-element-state=hovered]>.item:before{background-color:var(--tui-primary-hover)}.cell[data-tui-element-range][data-tui-element-state=pressed]>.item:after,.cell[data-tui-element-range][data-tui-element-state=pressed]>.item:before{background-color:var(--tui-primary-active)}.cell[data-tui-element-range=end]>.item:before{left:4px}.cell[data-tui-element-range=end]>.item:after{left:-32px;right:100%;transform:translateX(23px) scaleY(.6) scaleX(.4) rotate(45deg)}.cell[data-tui-element-range=start]>.item:before{right:4px}.cell[data-tui-element-range=start]>.item:after{left:100%;right:-32px;transform:translateX(-23px) scaleY(.6) scaleX(.4) rotate(45deg)}.cell[data-tui-element-state=disabled]{pointer-events:none}.cell[data-tui-element-state=disabled]>.item{opacity:.36}.cell[data-tui-element-state=hovered]:hover:not([data-tui-element-range])>.item{background-color:var(--tui-secondary-hover)}.cell[data-tui-element-state=pressed]:hover:not([data-tui-element-range])>.item{background-color:var(--tui-secondary-active)}:host{display:block;height:218px;width:252px;padding:18px;box-sizing:content-box}.row{flex-wrap:wrap;margin-top:23px}.cell:nth-child(n+5){margin-top:28px}.cell_interval:nth-child(4n):before{right:0}.scrollbar{height:inherit;width:inherit}"]
}),
__param(0, Inject(TUI_CALENDAR_MONTHS))
], TuiCalendarMonthComponent);
let TuiCalendarMonthModule = class TuiCalendarMonthModule {
};
TuiCalendarMonthModule = __decorate([
NgModule({
imports: [
CommonModule,
TuiPrimitiveYearPickerModule,
TuiPrimitiveSpinButtonModule,
TuiScrollbarModule,
TuiLinkModule,
TuiLetModule,
TuiHoveredModule,
TuiPressedModule,
TuiFocusableModule,
],
declarations: [TuiCalendarMonthComponent],
exports: [TuiCalendarMonthComponent],
})
], TuiCalendarMonthModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiCalendarMonthComponent, TuiCalendarMonthModule };
//# sourceMappingURL=taiga-ui-kit-components-calendar-month.js.map