sb-element
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.1. It is a component library constructed around the SCSS library [Sb-Theming](https://github.com/SeverinBuchser/SbTheming) and supports [Angular Schematics]
77 lines • 12.9 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import * as fns from "date-fns";
import { mixinFocus, mixinColor, mixinClassName, Color, mixinDisable } from "../../core";
import { MarkedDates } from "../marked-dates";
import * as i0 from "@angular/core";
import * as i1 from "../../core";
import * as i2 from "../date/calendar-date.component";
import * as i3 from "@angular/common";
const SbCalendarDatesCore = mixinDisable(mixinFocus(mixinColor(mixinClassName(class {
constructor(_elementRef, _themeService) {
this._elementRef = _elementRef;
this._themeService = _themeService;
}
}, 'sb-calendar-dates'), Color.PRIMARY)));
export class SbCalendarDatesComponent extends SbCalendarDatesCore {
constructor(elementRef, themeService) {
super(elementRef, themeService);
this.weekDayFormat = 'EEEEEE';
this.select = new EventEmitter();
this.markedDates = new MarkedDates();
this._showingMonthStart = fns.startOfMonth(new Date());
this.weekDays = new Array();
this.updateCalendarDates();
this.createWeekDays();
}
handleSelect(date) {
if (fns.isSameMonth(this.showingMonthStart, date)) {
this.select.emit(date);
}
}
set showingMonthStart(date) {
this._showingMonthStart = fns.startOfMonth(date);
this.updateCalendarDates();
}
get showingMonthStart() {
return this._showingMonthStart;
}
createWeekDays() {
let date = fns.setDay(new Date(), 1);
for (let weekDay = 1; weekDay <= 7; weekDay++) {
this.weekDays.push(fns.format(date, this.weekDayFormat));
date = fns.addDays(date, 1);
}
}
updateCalendarDates() {
this.calendarDates = new Array();
let calendarMonthStart = this.showingMonthStart;
if (fns.isMonday(this.showingMonthStart)) {
calendarMonthStart = fns.subWeeks(this.showingMonthStart, 1);
}
calendarMonthStart = fns.startOfWeek(calendarMonthStart, { weekStartsOn: 1 });
for (let day = 0; day < 42; day++) {
this.calendarDates.push(fns.addDays(calendarMonthStart, day));
}
}
}
SbCalendarDatesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbCalendarDatesComponent, deps: [{ token: i0.ElementRef }, { token: i1.SbThemeService }], target: i0.ɵɵFactoryTarget.Component });
SbCalendarDatesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbCalendarDatesComponent, selector: "sb-calendar-dates", inputs: { color: "color", disabled: "disabled", weekDayFormat: "weekDayFormat", markedDates: "markedDates", showingMonthStart: "showingMonthStart" }, outputs: { focus: "focus", blur: "blur", select: "select" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"className + '__week-days'\">\n <div *ngFor=\"let weekDay of weekDays\">\n {{ weekDay }}\n </div>\n</div>\n<div [ngClass]=\"className + '__dates'\">\n <sb-calendar-date\n *ngFor=\"let date of calendarDates\"\n [color]=\"color\"\n [date]=\"date\"\n [markedDates]=\"markedDates\"\n [showingMonthStart]=\"showingMonthStart\"\n (select)=\"handleSelect($event)\"\n (focus)=\"setFocusedState(true)\"\n (blur)=\"setFocusedState(false)\"\n [disabled]=\"disabled\">\n </sb-calendar-date>\n</div>\n", components: [{ type: i2.SbCalendarDateComponent, selector: "sb-calendar-date", inputs: ["color", "disabled", "date", "markedDates", "showingMonthStart"], outputs: ["select"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbCalendarDatesComponent, decorators: [{
type: Component,
args: [{ selector: 'sb-calendar-dates', encapsulation: ViewEncapsulation.None, inputs: [
'color',
'disabled'
], outputs: [
'focus',
'blur'
], template: "<div [ngClass]=\"className + '__week-days'\">\n <div *ngFor=\"let weekDay of weekDays\">\n {{ weekDay }}\n </div>\n</div>\n<div [ngClass]=\"className + '__dates'\">\n <sb-calendar-date\n *ngFor=\"let date of calendarDates\"\n [color]=\"color\"\n [date]=\"date\"\n [markedDates]=\"markedDates\"\n [showingMonthStart]=\"showingMonthStart\"\n (select)=\"handleSelect($event)\"\n (focus)=\"setFocusedState(true)\"\n (blur)=\"setFocusedState(false)\"\n [disabled]=\"disabled\">\n </sb-calendar-date>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SbThemeService }]; }, propDecorators: { weekDayFormat: [{
type: Input
}], select: [{
type: Output
}], markedDates: [{
type: Input
}], showingMonthStart: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsZW5kYXItZGF0ZXMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc2ItZWxlbWVudC9zcmMvbGliL2NhbGVuZGFyL2RhdGVzL2NhbGVuZGFyLWRhdGVzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NiLWVsZW1lbnQvc3JjL2xpYi9jYWxlbmRhci9kYXRlcy9jYWxlbmRhci1kYXRlcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RHLE9BQU8sS0FBSyxHQUFHLE1BQU0sVUFBVSxDQUFDO0FBQ2hDLE9BQU8sRUFBa0IsVUFBVSxFQUFFLFVBQVUsRUFBRSxjQUFjLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBRSxNQUFNLFlBQVksQ0FBQztBQUN6RyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7O0FBRTlDLE1BQU0sbUJBQW1CLEdBQUcsWUFBWSxDQUN0QyxVQUFVLENBQ1IsVUFBVSxDQUNSLGNBQWMsQ0FDWjtJQUNFLFlBQ1MsV0FBdUIsRUFDdkIsYUFBNkI7UUFEN0IsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUFDdkIsa0JBQWEsR0FBYixhQUFhLENBQWdCO0lBQUcsQ0FBQztDQUMzQyxFQUFFLG1CQUFtQixDQUN2QixFQUFFLEtBQUssQ0FBQyxPQUFPLENBQ2pCLENBQ0YsQ0FDRixDQUFDO0FBZUYsTUFBTSxPQUFPLHdCQUF5QixTQUFRLG1CQUFtQjtJQTRCL0QsWUFDRSxVQUFzQixFQUN0QixZQUE0QjtRQUU1QixLQUFLLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQyxDQUFDO1FBN0IzQixrQkFBYSxHQUFXLFFBQVEsQ0FBQztRQUdqQyxXQUFNLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFRdEQsZ0JBQVcsR0FBZ0IsSUFBSSxXQUFXLEVBQUUsQ0FBQztRQVU1Qyx1QkFBa0IsR0FBUyxHQUFHLENBQUMsWUFBWSxDQUFDLElBQUksSUFBSSxFQUFFLENBQUMsQ0FBQztRQUV6RCxhQUFRLEdBQWtCLElBQUksS0FBSyxFQUFVLENBQUM7UUFPbkQsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUM7UUFDM0IsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQ3hCLENBQUM7SUE1Qk0sWUFBWSxDQUFDLElBQVU7UUFDNUIsSUFBSSxHQUFHLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxJQUFJLENBQUMsRUFBRTtZQUNqRCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztTQUN4QjtJQUNILENBQUM7SUFLRCxJQUNJLGlCQUFpQixDQUFDLElBQVU7UUFDOUIsSUFBSSxDQUFDLGtCQUFrQixHQUFHLEdBQUcsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDakQsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUE7SUFDNUIsQ0FBQztJQUNELElBQUksaUJBQWlCO1FBQ25CLE9BQU8sSUFBSSxDQUFDLGtCQUFrQixDQUFDO0lBQ2pDLENBQUM7SUFjTyxjQUFjO1FBQ3BCLElBQUksSUFBSSxHQUFHLEdBQUcsQ0FBQyxNQUFNLENBQUMsSUFBSSxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUNyQyxLQUFLLElBQUksT0FBTyxHQUFHLENBQUMsRUFBRyxPQUFPLElBQUksQ0FBQyxFQUFHLE9BQU8sRUFBRSxFQUFFO1lBQy9DLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFBO1lBQ3hELElBQUksR0FBRyxHQUFHLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsQ0FBQztTQUM3QjtJQUNILENBQUM7SUFFTyxtQkFBbUI7UUFDekIsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLEtBQUssRUFBUSxDQUFDO1FBQ3ZDLElBQUksa0JBQWtCLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixDQUFDO1FBQ2hELElBQUksR0FBRyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsRUFBRTtZQUN4QyxrQkFBa0IsR0FBRyxHQUFHLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDLENBQUMsQ0FBQztTQUM5RDtRQUNELGtCQUFrQixHQUFHLEdBQUcsQ0FBQyxXQUFXLENBQUMsa0JBQWtCLEVBQUUsRUFBQyxZQUFZLEVBQUcsQ0FBQyxFQUFDLENBQUMsQ0FBQztRQUU3RSxLQUFLLElBQUksR0FBRyxHQUFHLENBQUMsRUFBRyxHQUFHLEdBQUcsRUFBRSxFQUFHLEdBQUcsRUFBRSxFQUFFO1lBQ25DLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsa0JBQWtCLEVBQUUsR0FBRyxDQUFDLENBQUMsQ0FBQztTQUMvRDtJQUNILENBQUM7O3FIQXhEVSx3QkFBd0I7eUdBQXhCLHdCQUF3QixtU0NoQ3JDLDRoQkFrQkE7MkZEY2Esd0JBQXdCO2tCQWJwQyxTQUFTOytCQUNFLG1CQUFtQixpQkFFZCxpQkFBaUIsQ0FBQyxJQUFJLFVBQzdCO3dCQUNOLE9BQU87d0JBQ1AsVUFBVTtxQkFDWCxXQUNRO3dCQUNQLE9BQU87d0JBQ1AsTUFBTTtxQkFDUDs4SEFLTSxhQUFhO3NCQURuQixLQUFLO2dCQUlDLE1BQU07c0JBRFosTUFBTTtnQkFTQSxXQUFXO3NCQURqQixLQUFLO2dCQUlGLGlCQUFpQjtzQkFEcEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0ICogYXMgZm5zIGZyb20gXCJkYXRlLWZuc1wiO1xuaW1wb3J0IHsgU2JUaGVtZVNlcnZpY2UsIG1peGluRm9jdXMsIG1peGluQ29sb3IsIG1peGluQ2xhc3NOYW1lLCBDb2xvciwgbWl4aW5EaXNhYmxlIH0gZnJvbSBcIi4uLy4uL2NvcmVcIjtcbmltcG9ydCB7IE1hcmtlZERhdGVzIH0gZnJvbSBcIi4uL21hcmtlZC1kYXRlc1wiO1xuXG5jb25zdCBTYkNhbGVuZGFyRGF0ZXNDb3JlID0gbWl4aW5EaXNhYmxlKFxuICBtaXhpbkZvY3VzKFxuICAgIG1peGluQ29sb3IoXG4gICAgICBtaXhpbkNsYXNzTmFtZShcbiAgICAgICAgY2xhc3Mge1xuICAgICAgICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICAgICAgcHVibGljIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgICAgICAgICAgcHVibGljIF90aGVtZVNlcnZpY2U6IFNiVGhlbWVTZXJ2aWNlKSB7fVxuICAgICAgICB9LCAnc2ItY2FsZW5kYXItZGF0ZXMnXG4gICAgICApLCBDb2xvci5QUklNQVJZXG4gICAgKVxuICApXG4pO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzYi1jYWxlbmRhci1kYXRlcycsXG4gIHRlbXBsYXRlVXJsOiAnLi9jYWxlbmRhci1kYXRlcy5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGlucHV0czogW1xuICAgICdjb2xvcicsXG4gICAgJ2Rpc2FibGVkJ1xuICBdLFxuICBvdXRwdXRzOiBbXG4gICAgJ2ZvY3VzJyxcbiAgICAnYmx1cidcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgU2JDYWxlbmRhckRhdGVzQ29tcG9uZW50IGV4dGVuZHMgU2JDYWxlbmRhckRhdGVzQ29yZSB7XG5cbiAgQElucHV0KClcbiAgcHVibGljIHdlZWtEYXlGb3JtYXQ6IHN0cmluZyA9ICdFRUVFRUUnO1xuXG4gIEBPdXRwdXQoKVxuICBwdWJsaWMgc2VsZWN0OiBFdmVudEVtaXR0ZXI8RGF0ZT4gPSBuZXcgRXZlbnRFbWl0dGVyPERhdGU+KCk7XG4gIHB1YmxpYyBoYW5kbGVTZWxlY3QoZGF0ZTogRGF0ZSk6IHZvaWQge1xuICAgIGlmIChmbnMuaXNTYW1lTW9udGgodGhpcy5zaG93aW5nTW9udGhTdGFydCwgZGF0ZSkpIHtcbiAgICAgIHRoaXMuc2VsZWN0LmVtaXQoZGF0ZSk7XG4gICAgfVxuICB9XG5cbiAgQElucHV0KClcbiAgcHVibGljIG1hcmtlZERhdGVzOiBNYXJrZWREYXRlcyA9IG5ldyBNYXJrZWREYXRlcygpO1xuXG4gIEBJbnB1dCgpXG4gIHNldCBzaG93aW5nTW9udGhTdGFydChkYXRlOiBEYXRlKSB7XG4gICAgdGhpcy5fc2hvd2luZ01vbnRoU3RhcnQgPSBmbnMuc3RhcnRPZk1vbnRoKGRhdGUpO1xuICAgIHRoaXMudXBkYXRlQ2FsZW5kYXJEYXRlcygpXG4gIH1cbiAgZ2V0IHNob3dpbmdNb250aFN0YXJ0KCk6IERhdGUge1xuICAgIHJldHVybiB0aGlzLl9zaG93aW5nTW9udGhTdGFydDtcbiAgfVxuICBwcml2YXRlIF9zaG93aW5nTW9udGhTdGFydDogRGF0ZSA9IGZucy5zdGFydE9mTW9udGgobmV3IERhdGUoKSk7XG4gIHB1YmxpYyBjYWxlbmRhckRhdGVzITogQXJyYXk8RGF0ZT47XG4gIHB1YmxpYyB3ZWVrRGF5czogQXJyYXk8c3RyaW5nPiA9IG5ldyBBcnJheTxzdHJpbmc+KCk7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICB0aGVtZVNlcnZpY2U6IFNiVGhlbWVTZXJ2aWNlXG4gICkge1xuICAgIHN1cGVyKGVsZW1lbnRSZWYsIHRoZW1lU2VydmljZSk7XG4gICAgdGhpcy51cGRhdGVDYWxlbmRhckRhdGVzKCk7XG4gICAgdGhpcy5jcmVhdGVXZWVrRGF5cygpO1xuICB9XG5cbiAgcHJpdmF0ZSBjcmVhdGVXZWVrRGF5cygpOiB2b2lkIHtcbiAgICBsZXQgZGF0ZSA9IGZucy5zZXREYXkobmV3IERhdGUoKSwgMSk7XG4gICAgZm9yIChsZXQgd2Vla0RheSA9IDEgOyB3ZWVrRGF5IDw9IDcgOyB3ZWVrRGF5KyspIHtcbiAgICAgIHRoaXMud2Vla0RheXMucHVzaChmbnMuZm9ybWF0KGRhdGUsIHRoaXMud2Vla0RheUZvcm1hdCkpXG4gICAgICBkYXRlID0gZm5zLmFkZERheXMoZGF0ZSwgMSk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVDYWxlbmRhckRhdGVzKCk6IHZvaWQge1xuICAgIHRoaXMuY2FsZW5kYXJEYXRlcyA9IG5ldyBBcnJheTxEYXRlPigpO1xuICAgIGxldCBjYWxlbmRhck1vbnRoU3RhcnQgPSB0aGlzLnNob3dpbmdNb250aFN0YXJ0O1xuICAgIGlmIChmbnMuaXNNb25kYXkodGhpcy5zaG93aW5nTW9udGhTdGFydCkpIHtcbiAgICAgIGNhbGVuZGFyTW9udGhTdGFydCA9IGZucy5zdWJXZWVrcyh0aGlzLnNob3dpbmdNb250aFN0YXJ0LCAxKTtcbiAgICB9XG4gICAgY2FsZW5kYXJNb250aFN0YXJ0ID0gZm5zLnN0YXJ0T2ZXZWVrKGNhbGVuZGFyTW9udGhTdGFydCwge3dlZWtTdGFydHNPbiA6IDF9KTtcblxuICAgIGZvciAobGV0IGRheSA9IDAgOyBkYXkgPCA0MiA7IGRheSsrKSB7XG4gICAgICB0aGlzLmNhbGVuZGFyRGF0ZXMucHVzaChmbnMuYWRkRGF5cyhjYWxlbmRhck1vbnRoU3RhcnQsIGRheSkpO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdiBbbmdDbGFzc109XCJjbGFzc05hbWUgKyAnX193ZWVrLWRheXMnXCI+XG4gIDxkaXYgKm5nRm9yPVwibGV0IHdlZWtEYXkgb2Ygd2Vla0RheXNcIj5cbiAgICB7eyB3ZWVrRGF5IH19XG4gIDwvZGl2PlxuPC9kaXY+XG48ZGl2IFtuZ0NsYXNzXT1cImNsYXNzTmFtZSArICdfX2RhdGVzJ1wiPlxuICA8c2ItY2FsZW5kYXItZGF0ZVxuICAgICpuZ0Zvcj1cImxldCBkYXRlIG9mIGNhbGVuZGFyRGF0ZXNcIlxuICAgIFtjb2xvcl09XCJjb2xvclwiXG4gICAgW2RhdGVdPVwiZGF0ZVwiXG4gICAgW21hcmtlZERhdGVzXT1cIm1hcmtlZERhdGVzXCJcbiAgICBbc2hvd2luZ01vbnRoU3RhcnRdPVwic2hvd2luZ01vbnRoU3RhcnRcIlxuICAgIChzZWxlY3QpPVwiaGFuZGxlU2VsZWN0KCRldmVudClcIlxuICAgIChmb2N1cyk9XCJzZXRGb2N1c2VkU3RhdGUodHJ1ZSlcIlxuICAgIChibHVyKT1cInNldEZvY3VzZWRTdGF0ZShmYWxzZSlcIlxuICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiPlxuICA8L3NiLWNhbGVuZGFyLWRhdGU+XG48L2Rpdj5cbiJdfQ==