@smart-solutions-tech/smart-angular-calendar 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/calendar/calendar.component.mjs +78 -5
- package/esm2020/lib/components/month-selector/month-selector.component.mjs +82 -0
- package/esm2020/lib/components/more-events-modal/more-events-modal.component.mjs +2 -2
- package/esm2020/lib/pipes/translate-month.pipe.mjs +22 -0
- package/esm2020/lib/smart-angular-calendar.module.mjs +9 -3
- package/esm2020/lib/translations.mjs +41 -1
- package/esm2020/lib/types.mjs +1 -1
- package/fesm2015/smart-solutions-tech-smart-angular-calendar.mjs +218 -7
- package/fesm2015/smart-solutions-tech-smart-angular-calendar.mjs.map +1 -1
- package/fesm2020/smart-solutions-tech-smart-angular-calendar.mjs +217 -7
- package/fesm2020/smart-solutions-tech-smart-angular-calendar.mjs.map +1 -1
- package/lib/components/calendar/calendar.component.d.ts +12 -0
- package/lib/components/month-selector/month-selector.component.d.ts +30 -0
- package/lib/pipes/translate-month.pipe.d.ts +10 -0
- package/lib/smart-angular-calendar.module.d.ts +4 -2
- package/lib/translations.d.ts +14 -0
- package/lib/types.d.ts +13 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, Input, Pipe, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, Component, Input, Pipe, EventEmitter, Output, ViewChild, HostListener, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
|
|
@@ -54,6 +54,19 @@ const TRANSLATIONS = {
|
|
|
54
54
|
thu: 'Thursday',
|
|
55
55
|
fri: 'Friday',
|
|
56
56
|
sat: 'Saturday',
|
|
57
|
+
today: 'Today',
|
|
58
|
+
january: 'January',
|
|
59
|
+
february: 'February',
|
|
60
|
+
march: 'March',
|
|
61
|
+
april: 'April',
|
|
62
|
+
may: 'May',
|
|
63
|
+
june: 'June',
|
|
64
|
+
july: 'July',
|
|
65
|
+
august: 'August',
|
|
66
|
+
september: 'September',
|
|
67
|
+
october: 'October',
|
|
68
|
+
november: 'November',
|
|
69
|
+
december: 'December',
|
|
57
70
|
moreEvents: 'More events',
|
|
58
71
|
nMoreEvents: '{{n}} More events'
|
|
59
72
|
},
|
|
@@ -65,9 +78,36 @@ const TRANSLATIONS = {
|
|
|
65
78
|
thu: 'Jueves',
|
|
66
79
|
fri: 'Viernes',
|
|
67
80
|
sat: 'Sábado',
|
|
81
|
+
today: 'Hoy',
|
|
82
|
+
january: 'Enero',
|
|
83
|
+
february: 'Febrero',
|
|
84
|
+
march: 'Marzo',
|
|
85
|
+
april: 'Abril',
|
|
86
|
+
may: 'Mayo',
|
|
87
|
+
june: 'Junio',
|
|
88
|
+
july: 'Julio',
|
|
89
|
+
august: 'Agosto',
|
|
90
|
+
september: 'Septiembre',
|
|
91
|
+
october: 'Octubre',
|
|
92
|
+
november: 'Noviembre',
|
|
93
|
+
december: 'Diciembre',
|
|
68
94
|
moreEvents: 'Más eventos',
|
|
69
95
|
nMoreEvents: '{{n}} Eventos más'
|
|
70
96
|
},
|
|
97
|
+
};
|
|
98
|
+
const MONTHS = {
|
|
99
|
+
1: 'january',
|
|
100
|
+
2: 'february',
|
|
101
|
+
3: 'march',
|
|
102
|
+
4: 'april',
|
|
103
|
+
5: 'may',
|
|
104
|
+
6: 'june',
|
|
105
|
+
7: 'july',
|
|
106
|
+
8: 'august',
|
|
107
|
+
9: 'september',
|
|
108
|
+
10: 'october',
|
|
109
|
+
11: 'november',
|
|
110
|
+
12: 'december'
|
|
71
111
|
};
|
|
72
112
|
|
|
73
113
|
class TranslationService {
|
|
@@ -132,10 +172,10 @@ class MoreEventsModalComponent {
|
|
|
132
172
|
}
|
|
133
173
|
}
|
|
134
174
|
MoreEventsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoreEventsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
135
|
-
MoreEventsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoreEventsModalComponent, selector: "lib-more-events-modal", inputs: { events: "events", date: "date" }, outputs: { close: "close", eventClick: "eventClick" }, ngImport: i0, template: "<div class=\"more-events-modal-component\">\n <div class=\"backdrop\" (click)=\"onClose()\"></div>\n\n <div class=\"modal\">\n <div class=\"header\">\n <div class=\"title\">{{'moreEvents' | translate}}</div>\n <div class=\"subtitle\">{{date.toLocaleDateString()}}</div>\n\n <button class=\"btn-close\" (click)=\"onClose()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"feather feather-x\" fill=\"yellow\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"events-list\">\n <div class=\"event-item\" *ngFor=\"let event of events\" style=\"--color: {{event.color}};\"\n [ngClass]=\"{'is-dark':isDarkColor(event.color)}\" (click)=\"onEventClick(event)\">\n <div class=\"event-title\">{{ event.title }}</div>\n </div>\n </div>\n </div>\n</div>", styles: [".more-events-modal-component{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;width:
|
|
175
|
+
MoreEventsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoreEventsModalComponent, selector: "lib-more-events-modal", inputs: { events: "events", date: "date" }, outputs: { close: "close", eventClick: "eventClick" }, ngImport: i0, template: "<div class=\"more-events-modal-component\">\n <div class=\"backdrop\" (click)=\"onClose()\"></div>\n\n <div class=\"modal\">\n <div class=\"header\">\n <div class=\"title\">{{'moreEvents' | translate}}</div>\n <div class=\"subtitle\">{{date.toLocaleDateString()}}</div>\n\n <button class=\"btn-close\" (click)=\"onClose()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"feather feather-x\" fill=\"yellow\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"events-list\">\n <div class=\"event-item\" *ngFor=\"let event of events\" style=\"--color: {{event.color}};\"\n [ngClass]=\"{'is-dark':isDarkColor(event.color)}\" (click)=\"onEventClick(event)\">\n <div class=\"event-title\">{{ event.title }}</div>\n </div>\n </div>\n </div>\n</div>", styles: [".more-events-modal-component{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-shadow:0 2px 8px #00000026}.more-events-modal-component .backdrop{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:#00000080;cursor:pointer}.modal{z-index:2;display:flex;flex-direction:column;max-width:400px;width:100%;max-height:80%;margin:24px;background-color:#fff;border-radius:8px}.header{position:relative;display:flex;flex-direction:column;padding:16px 64px 16px 16px}.title{font-size:18px;font-weight:700}.subtitle{font-size:13px;color:#666}.btn-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-close:hover{background-color:#f0f0f0}.events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px;overflow-y:auto}.events-list .event-item{display:flex;padding:8px;background-color:var(--color, #e2e2e2);border-radius:4px;color:#212121;cursor:pointer;-webkit-user-select:none;user-select:none}.events-list .event-item.is-dark{color:#fafafa}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
136
176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoreEventsModalComponent, decorators: [{
|
|
137
177
|
type: Component,
|
|
138
|
-
args: [{ selector: 'lib-more-events-modal', template: "<div class=\"more-events-modal-component\">\n <div class=\"backdrop\" (click)=\"onClose()\"></div>\n\n <div class=\"modal\">\n <div class=\"header\">\n <div class=\"title\">{{'moreEvents' | translate}}</div>\n <div class=\"subtitle\">{{date.toLocaleDateString()}}</div>\n\n <button class=\"btn-close\" (click)=\"onClose()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"feather feather-x\" fill=\"yellow\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"events-list\">\n <div class=\"event-item\" *ngFor=\"let event of events\" style=\"--color: {{event.color}};\"\n [ngClass]=\"{'is-dark':isDarkColor(event.color)}\" (click)=\"onEventClick(event)\">\n <div class=\"event-title\">{{ event.title }}</div>\n </div>\n </div>\n </div>\n</div>", styles: [".more-events-modal-component{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;width:
|
|
178
|
+
args: [{ selector: 'lib-more-events-modal', template: "<div class=\"more-events-modal-component\">\n <div class=\"backdrop\" (click)=\"onClose()\"></div>\n\n <div class=\"modal\">\n <div class=\"header\">\n <div class=\"title\">{{'moreEvents' | translate}}</div>\n <div class=\"subtitle\">{{date.toLocaleDateString()}}</div>\n\n <button class=\"btn-close\" (click)=\"onClose()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"feather feather-x\" fill=\"yellow\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"events-list\">\n <div class=\"event-item\" *ngFor=\"let event of events\" style=\"--color: {{event.color}};\"\n [ngClass]=\"{'is-dark':isDarkColor(event.color)}\" (click)=\"onEventClick(event)\">\n <div class=\"event-title\">{{ event.title }}</div>\n </div>\n </div>\n </div>\n</div>", styles: [".more-events-modal-component{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-shadow:0 2px 8px #00000026}.more-events-modal-component .backdrop{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:#00000080;cursor:pointer}.modal{z-index:2;display:flex;flex-direction:column;max-width:400px;width:100%;max-height:80%;margin:24px;background-color:#fff;border-radius:8px}.header{position:relative;display:flex;flex-direction:column;padding:16px 64px 16px 16px}.title{font-size:18px;font-weight:700}.subtitle{font-size:13px;color:#666}.btn-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-close:hover{background-color:#f0f0f0}.events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px;overflow-y:auto}.events-list .event-item{display:flex;padding:8px;background-color:var(--color, #e2e2e2);border-radius:4px;color:#212121;cursor:pointer;-webkit-user-select:none;user-select:none}.events-list .event-item.is-dark{color:#fafafa}\n"] }]
|
|
139
179
|
}], ctorParameters: function () { return []; }, propDecorators: { events: [{
|
|
140
180
|
type: Input
|
|
141
181
|
}], date: [{
|
|
@@ -146,6 +186,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
146
186
|
type: Output
|
|
147
187
|
}] } });
|
|
148
188
|
|
|
189
|
+
class TranslateMonthPipe {
|
|
190
|
+
constructor(translationService) {
|
|
191
|
+
this.translationService = translationService;
|
|
192
|
+
}
|
|
193
|
+
transform(value) {
|
|
194
|
+
const monthTag = MONTHS[value];
|
|
195
|
+
return this.translationService.translate(monthTag);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
TranslateMonthPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslateMonthPipe, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
199
|
+
TranslateMonthPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TranslateMonthPipe, name: "translateMonth" });
|
|
200
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslateMonthPipe, decorators: [{
|
|
201
|
+
type: Pipe,
|
|
202
|
+
args: [{
|
|
203
|
+
name: 'translateMonth'
|
|
204
|
+
}]
|
|
205
|
+
}], ctorParameters: function () { return [{ type: TranslationService }]; } });
|
|
206
|
+
|
|
207
|
+
class MonthSelectorComponent {
|
|
208
|
+
constructor() {
|
|
209
|
+
this.monthSelected = new EventEmitter();
|
|
210
|
+
this.mode = 'decade';
|
|
211
|
+
this.currentYear = new Date().getFullYear();
|
|
212
|
+
this.currentMonth = new Date().getMonth() + 1;
|
|
213
|
+
this.selectedMonth = { year: new Date().getFullYear(), month: new Date().getMonth() + 1 };
|
|
214
|
+
this.selectedYear = new Date().getFullYear();
|
|
215
|
+
this.currentDecadeStart = Math.floor(this.selectedYear / 10) * 10;
|
|
216
|
+
this.years = [];
|
|
217
|
+
this.months = Object.keys(MONTHS).map(key => Number(key));
|
|
218
|
+
}
|
|
219
|
+
ngOnInit() {
|
|
220
|
+
setTimeout(() => {
|
|
221
|
+
this.selectedYear = this.selectedMonth.year;
|
|
222
|
+
this.selectDecadeByYear(this.selectedYear);
|
|
223
|
+
this.setYears();
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
toggleMode(event) {
|
|
227
|
+
event.stopPropagation();
|
|
228
|
+
this.mode = this.mode === 'year' ? 'decade' : 'year';
|
|
229
|
+
}
|
|
230
|
+
setYears() {
|
|
231
|
+
this.years = [];
|
|
232
|
+
for (let i = this.currentDecadeStart; i < this.currentDecadeStart + 10; i++) {
|
|
233
|
+
this.years.push(i);
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
;
|
|
237
|
+
next(event) {
|
|
238
|
+
event.stopPropagation();
|
|
239
|
+
if (this.mode === 'year') {
|
|
240
|
+
this.selectedYear++;
|
|
241
|
+
}
|
|
242
|
+
else {
|
|
243
|
+
this.currentDecadeStart += 10;
|
|
244
|
+
this.setYears();
|
|
245
|
+
this.selectedYear = this.currentDecadeStart;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
previous(event) {
|
|
249
|
+
event.stopPropagation();
|
|
250
|
+
if (this.mode === 'year') {
|
|
251
|
+
this.selectedYear--;
|
|
252
|
+
}
|
|
253
|
+
else {
|
|
254
|
+
this.currentDecadeStart -= 10;
|
|
255
|
+
this.setYears();
|
|
256
|
+
this.selectedYear = this.currentDecadeStart;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
selectYear(event, year) {
|
|
260
|
+
event.stopPropagation();
|
|
261
|
+
this.selectedYear = year;
|
|
262
|
+
this.mode = 'year';
|
|
263
|
+
}
|
|
264
|
+
selectDecadeByYear(year) {
|
|
265
|
+
this.currentDecadeStart = Math.floor(year / 10) * 10;
|
|
266
|
+
this.setYears();
|
|
267
|
+
this.mode = 'decade';
|
|
268
|
+
}
|
|
269
|
+
selectMonth(month) {
|
|
270
|
+
this.monthSelected.emit({ year: this.selectedYear, month });
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
MonthSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MonthSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
274
|
+
MonthSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: { selectedMonth: "selectedMonth" }, outputs: { monthSelected: "monthSelected" }, ngImport: i0, template: "<div class=\"month-selector-component\">\n <div class=\"header\">\n <button class=\"btn-range\" *ngIf=\"mode === 'decade'\" (click)=\"toggleMode($event)\">\n <span>{{currentDecadeStart}} - {{currentDecadeStart + 9}}</span>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\" />\n </svg>\n </button>\n\n <button class=\"btn-range\" *ngIf=\"mode === 'year'\" (click)=\"toggleMode($event)\">\n <span>{{selectedYear}}</span>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"transform: rotate(180deg);\" height=\"24px\"\n viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\" />\n </svg>\n </button>\n\n <div class=\"nav-controls\">\n <button class=\"btn-prev\" (click)=\"previous($event)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </button>\n\n <button class=\"btn-next\" (click)=\"next($event)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </button>\n </div>\n </div>\n\n <div class=\"years-grid\" *ngIf=\"mode === 'decade'\">\n <button class=\"btn-year\" *ngFor=\"let year of years\"\n [ngClass]=\"{selected: year === selectedYear, current: year === currentYear }\"\n (click)=\"selectYear($event, year)\">\n {{ year }}\n </button>\n </div>\n\n <div class=\"months-grid\" *ngIf=\"mode === 'year'\">\n <button class=\"btn-month\" *ngFor=\"let month of months\"\n [ngClass]=\"{selected: month === selectedMonth.month && selectedYear === selectedMonth.year, current: currentYear === selectedYear && month === currentMonth}\"\n (click)=\"selectMonth(month)\">\n {{ month | translateMonth | slice:0:3 }}\n </button>\n </div>\n</div>", styles: [".month-selector-component{display:flex;flex-direction:column;width:280px;-webkit-user-select:none;user-select:none}.header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}.btn-range{display:flex;align-items:center;height:32px;padding:0 4px 0 12px;background:none;border:none;border-radius:50px;cursor:pointer;font-weight:600}.btn-range:hover{background-color:#0000000a}.btn-range span{white-space:nowrap}.nav-controls{display:flex;align-items:center}.btn-prev,.btn-next{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-prev:hover,.btn-next:hover{background-color:#0000000a}.years-grid,.months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 16px}.btn-month,.btn-year{display:flex;align-items:center;justify-content:center;padding:6px 12px;border:none;background:none;border-radius:50px;font-size:14px;cursor:pointer}.btn-month:hover,.btn-year:hover{background-color:#0000000a}.btn-month.selected,.btn-year.selected{border:1px solid rgba(0,0,0,.12)}.btn-month.current,.btn-year.current{background-color:#0000001f}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslateMonthPipe, name: "translateMonth" }] });
|
|
275
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MonthSelectorComponent, decorators: [{
|
|
276
|
+
type: Component,
|
|
277
|
+
args: [{ selector: 'lib-month-selector', template: "<div class=\"month-selector-component\">\n <div class=\"header\">\n <button class=\"btn-range\" *ngIf=\"mode === 'decade'\" (click)=\"toggleMode($event)\">\n <span>{{currentDecadeStart}} - {{currentDecadeStart + 9}}</span>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\" />\n </svg>\n </button>\n\n <button class=\"btn-range\" *ngIf=\"mode === 'year'\" (click)=\"toggleMode($event)\">\n <span>{{selectedYear}}</span>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"transform: rotate(180deg);\" height=\"24px\"\n viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\" />\n </svg>\n </button>\n\n <div class=\"nav-controls\">\n <button class=\"btn-prev\" (click)=\"previous($event)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </button>\n\n <button class=\"btn-next\" (click)=\"next($event)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </button>\n </div>\n </div>\n\n <div class=\"years-grid\" *ngIf=\"mode === 'decade'\">\n <button class=\"btn-year\" *ngFor=\"let year of years\"\n [ngClass]=\"{selected: year === selectedYear, current: year === currentYear }\"\n (click)=\"selectYear($event, year)\">\n {{ year }}\n </button>\n </div>\n\n <div class=\"months-grid\" *ngIf=\"mode === 'year'\">\n <button class=\"btn-month\" *ngFor=\"let month of months\"\n [ngClass]=\"{selected: month === selectedMonth.month && selectedYear === selectedMonth.year, current: currentYear === selectedYear && month === currentMonth}\"\n (click)=\"selectMonth(month)\">\n {{ month | translateMonth | slice:0:3 }}\n </button>\n </div>\n</div>", styles: [".month-selector-component{display:flex;flex-direction:column;width:280px;-webkit-user-select:none;user-select:none}.header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}.btn-range{display:flex;align-items:center;height:32px;padding:0 4px 0 12px;background:none;border:none;border-radius:50px;cursor:pointer;font-weight:600}.btn-range:hover{background-color:#0000000a}.btn-range span{white-space:nowrap}.nav-controls{display:flex;align-items:center}.btn-prev,.btn-next{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-prev:hover,.btn-next:hover{background-color:#0000000a}.years-grid,.months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 16px}.btn-month,.btn-year{display:flex;align-items:center;justify-content:center;padding:6px 12px;border:none;background:none;border-radius:50px;font-size:14px;cursor:pointer}.btn-month:hover,.btn-year:hover{background-color:#0000000a}.btn-month.selected,.btn-year.selected{border:1px solid rgba(0,0,0,.12)}.btn-month.current,.btn-year.current{background-color:#0000001f}\n"] }]
|
|
278
|
+
}], ctorParameters: function () { return []; }, propDecorators: { monthSelected: [{
|
|
279
|
+
type: Output
|
|
280
|
+
}], selectedMonth: [{
|
|
281
|
+
type: Input
|
|
282
|
+
}] } });
|
|
283
|
+
|
|
149
284
|
class CalendarComponent {
|
|
150
285
|
constructor() {
|
|
151
286
|
this.currentMonth = {
|
|
@@ -167,11 +302,22 @@ class CalendarComponent {
|
|
|
167
302
|
];
|
|
168
303
|
this.showMoreEventsModal = false;
|
|
169
304
|
this.moreEventsModalEvents = [];
|
|
305
|
+
this.currentMonthTitle = ``;
|
|
306
|
+
this.showDateSelector = false;
|
|
170
307
|
this.resizeListener = () => {
|
|
171
308
|
this.setCalendarBodyHeight();
|
|
172
309
|
this.setMaxEventsInDayCell();
|
|
173
310
|
};
|
|
174
311
|
}
|
|
312
|
+
onDocumentClick(event) {
|
|
313
|
+
if (!this.showDateSelector)
|
|
314
|
+
return;
|
|
315
|
+
const dropdown = this.dateSelectorDropdown?.nativeElement;
|
|
316
|
+
const button = document.querySelector('.btn-date-selector');
|
|
317
|
+
if (dropdown && !dropdown.contains(event.target) && button && !button.contains(event.target)) {
|
|
318
|
+
this.showDateSelector = false;
|
|
319
|
+
}
|
|
320
|
+
}
|
|
175
321
|
isToday(date) {
|
|
176
322
|
const today = new Date();
|
|
177
323
|
return date.getDate() === today.getDate() &&
|
|
@@ -244,6 +390,60 @@ class CalendarComponent {
|
|
|
244
390
|
this.moreEventsModalDate = undefined;
|
|
245
391
|
this.moreEventsModalEvents = [];
|
|
246
392
|
}
|
|
393
|
+
nextMonth() {
|
|
394
|
+
const oldMonth = { ...this.currentMonth };
|
|
395
|
+
if (this.currentMonth.month === 12) {
|
|
396
|
+
this.currentMonth.month = 1;
|
|
397
|
+
this.currentMonth.year += 1;
|
|
398
|
+
}
|
|
399
|
+
else {
|
|
400
|
+
this.currentMonth.month += 1;
|
|
401
|
+
}
|
|
402
|
+
this.initDaysCells();
|
|
403
|
+
this.monthChange.emit({
|
|
404
|
+
newMonth: { ...this.currentMonth },
|
|
405
|
+
oldMonth
|
|
406
|
+
});
|
|
407
|
+
}
|
|
408
|
+
prevMonth() {
|
|
409
|
+
const oldMonth = { ...this.currentMonth };
|
|
410
|
+
if (this.currentMonth.month === 1) {
|
|
411
|
+
this.currentMonth.month = 12;
|
|
412
|
+
this.currentMonth.year -= 1;
|
|
413
|
+
}
|
|
414
|
+
else {
|
|
415
|
+
this.currentMonth.month -= 1;
|
|
416
|
+
}
|
|
417
|
+
this.initDaysCells();
|
|
418
|
+
this.monthChange.emit({
|
|
419
|
+
newMonth: { ...this.currentMonth },
|
|
420
|
+
oldMonth
|
|
421
|
+
});
|
|
422
|
+
}
|
|
423
|
+
goToToday() {
|
|
424
|
+
const today = new Date();
|
|
425
|
+
const oldMonth = { ...this.currentMonth };
|
|
426
|
+
this.currentMonth.year = today.getFullYear();
|
|
427
|
+
this.currentMonth.month = today.getMonth() + 1;
|
|
428
|
+
this.initDaysCells();
|
|
429
|
+
this.monthChange.emit({
|
|
430
|
+
newMonth: { ...this.currentMonth },
|
|
431
|
+
oldMonth
|
|
432
|
+
});
|
|
433
|
+
}
|
|
434
|
+
toggleDateSelector() {
|
|
435
|
+
this.showDateSelector = !this.showDateSelector;
|
|
436
|
+
}
|
|
437
|
+
onMonthSelected(newMonth) {
|
|
438
|
+
const oldMonth = { ...this.currentMonth };
|
|
439
|
+
this.currentMonth = newMonth;
|
|
440
|
+
this.initDaysCells();
|
|
441
|
+
this.monthChange.emit({
|
|
442
|
+
newMonth: { ...this.currentMonth },
|
|
443
|
+
oldMonth
|
|
444
|
+
});
|
|
445
|
+
this.showDateSelector = false;
|
|
446
|
+
}
|
|
247
447
|
ngOnInit() {
|
|
248
448
|
if (this.startAt === 'monday') {
|
|
249
449
|
this.weekDays = [
|
|
@@ -270,10 +470,10 @@ class CalendarComponent {
|
|
|
270
470
|
}
|
|
271
471
|
}
|
|
272
472
|
CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
273
|
-
CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarComponent, selector: "lib-calendar", inputs: { currentMonth: "currentMonth", events: "events", startAt: "startAt" }, outputs: { monthChange: "monthChange" }, viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "calendarBodyRef", first: true, predicate: ["calendarBody"], descendants: true }], ngImport: i0, template: "<div class=\"calendar-component\">\r\n <div class=\"header\">\r\n Header {{ maxEventsInDayCell }}\r\n </div>\r\n\r\n <div class=\"body\" #calendarBody>\r\n <div class=\"week-days\">\r\n <div class=\"week-day\" *ngFor=\"let day of weekDays\">\r\n {{ day.tag | translate | slice:0:3 }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"days-grid\">\r\n <div class=\"day-cell\" *ngFor=\"let day of dayCells; let i = index\"\r\n [ngClass]=\"{'outside-month': day.isOutsideMonth, 'is-today': day.isToday}\">\r\n <div class=\"day-number\">\r\n {{ day.date.getDate() }}\r\n </div>\r\n\r\n <div class=\"events-list\">\r\n <lib-calendar-event *ngFor=\"let event of day.events | slice:0:maxEventsInDayCell\"\r\n [event]=\"event\"></lib-calendar-event>\r\n\r\n <div class=\"more-events\" *ngIf=\"day.events.length > (maxEventsInDayCell || 0)\"\r\n (click)=\"openMoreEventsModal(day.date, day.events)\">\r\n {{'nMoreEvents' | translate: {n:(day.events.length - (maxEventsInDayCell || 0))} }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"footer\">\r\n Footer\r\n </div>\r\n\r\n <lib-more-events-modal *ngIf=\"showMoreEventsModal && moreEventsModalDate\" [events]=\"moreEventsModalEvents\"\r\n [date]=\"moreEventsModalDate\" (close)=\"closeMoreEventsModal()\"\r\n (eventClick)=\"closeMoreEventsModal()\"></lib-more-events-modal>\r\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.calendar-component{display:flex;flex-direction:column;width:100%;height:100%}.header{flex-shrink:0;background-color:#add8e6}.body{flex:1 1 0;display:flex;flex-direction:column;width:100%;min-height:0;height:100%}.week-days{flex-shrink:0;display:grid;grid-template-columns:repeat(7,1fr);width:100%;background-color:#f4f4f4}.week-day{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#fff;font-size:14px;color:#00000080}.days-grid{flex:1 1 0;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;grid-auto-rows:1fr;width:100%;padding:1px;background-color:#f4f4f4;min-height:0;height:100%}.day-cell{display:flex;flex-direction:column;gap:4px;padding:4px;background-color:#fff;overflow:hidden}.day-cell .day-number{display:flex;align-items:center;justify-content:center;width:fit-content;aspect-ratio:1;padding:2px;border-radius:50%;font-size:12px;line-height:16px;font-weight:600;-webkit-user-select:none;user-select:none}.day-cell.outside-month{background-color:#f8f8f8}.day-cell.is-today .day-number{background-color:#007bff;color:#fff}.day-cell .events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-height:0;max-height:100%}.day-cell .events-list .more-events{padding:2px 8px;border-radius:4px;font-size:12px;color:#555;cursor:pointer}.day-cell .events-list .more-events:hover{background-color:#eee}.footer{flex-shrink:0;background-color:#add8e6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event"] }, { kind: "component", type: MoreEventsModalComponent, selector: "lib-more-events-modal", inputs: ["events", "date"], outputs: ["close", "eventClick"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
473
|
+
CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarComponent, selector: "lib-calendar", inputs: { currentMonth: "currentMonth", events: "events", startAt: "startAt" }, outputs: { monthChange: "monthChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "calendarBodyRef", first: true, predicate: ["calendarBody"], descendants: true }, { propertyName: "dateSelectorDropdown", first: true, predicate: ["dateSelectorDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"calendar-component\">\r\n <div class=\"header\">\r\n <div class=\"nav-controls\">\r\n <button class=\"btn-prev\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"currentColor\">\r\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn-today\" (click)=\"goToToday()\">{{'today' | translate}}</button>\r\n\r\n <button class=\"btn-next\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"currentColor\">\r\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div class=\"spacer\"></div>\r\n\r\n <div class=\"date-selector-container\">\r\n <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\r\n <span>{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"currentColor\">\r\n <path d=\"M480-360 280-560h400L480-360Z\" />\r\n </svg>\r\n </button>\r\n\r\n <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\r\n <lib-month-selector [selectedMonth]=\"currentMonth\"\r\n (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\r\n </div>\r\n </div>\r\n\r\n <div class=\"spacer\"></div>\r\n\r\n <div class=\"view-selector\">\r\n <button class=\"btn-view active\">\r\n <!-- month view -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"currentColor\">\r\n <path\r\n d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn-view\">\r\n <!-- week view -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"currentColor\">\r\n <path\r\n d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn-view\">\r\n <!-- day view -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"currentColor\">\r\n <path\r\n d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"body\" #calendarBody>\r\n <div class=\"week-days\">\r\n <div class=\"week-day\" *ngFor=\"let day of weekDays\">\r\n {{ day.tag | translate | slice:0:3 }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"days-grid\">\r\n <div class=\"day-cell\" *ngFor=\"let day of dayCells; let i = index\"\r\n [ngClass]=\"{'outside-month': day.isOutsideMonth, 'is-today': day.isToday}\">\r\n <div class=\"day-number\">\r\n {{ day.date.getDate() }}\r\n </div>\r\n\r\n <div class=\"events-list\">\r\n <lib-calendar-event *ngFor=\"let event of day.events | slice:0:maxEventsInDayCell\"\r\n [event]=\"event\"></lib-calendar-event>\r\n\r\n <div class=\"more-events\" *ngIf=\"day.events.length > (maxEventsInDayCell || 0)\"\r\n (click)=\"openMoreEventsModal(day.date, day.events)\">\r\n {{'nMoreEvents' | translate: {n:(day.events.length - (maxEventsInDayCell || 0))} }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"footer\">\r\n Footer\r\n </div>\r\n\r\n <lib-more-events-modal *ngIf=\"showMoreEventsModal && moreEventsModalDate\" [events]=\"moreEventsModalEvents\"\r\n [date]=\"moreEventsModalDate\" (close)=\"closeMoreEventsModal()\"\r\n (eventClick)=\"closeMoreEventsModal()\"></lib-more-events-modal>\r\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.calendar-component{display:flex;flex-direction:column;width:100%;height:100%}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-prev,.header .nav-controls .btn-next{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:50%;cursor:pointer;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-prev:hover,.header .nav-controls .btn-next:hover{background-color:#eee}.header .nav-controls .btn-today{display:flex;align-items:center;height:30px;padding:0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-today:hover{background-color:#eee}.header .view-selector{display:flex;align-items:center}.header .view-selector .btn-view{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #cccccc;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}.header .view-selector .btn-view:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;border-right:none}.header .view-selector .btn-view:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-left:none}.header .view-selector .btn-view:hover{background-color:#eee}.header .view-selector .btn-view svg{width:22px;height:22px}.header .view-selector .btn-view.active{background-color:#0000001a}.header .date-selector-container{position:relative}.header .date-selector-container .date-selector-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#fff;border-radius:4px;box-shadow:0 2px 24px #0000004d;z-index:3}.header .date-selector-container .date-selector-dropdown:before{content:\"\";position:absolute;top:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background-color:#fff;border-radius:2px}.header .btn-date-selector{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .btn-date-selector:hover{background-color:#eee}.body{flex:1 1 0;display:flex;flex-direction:column;width:100%;min-height:0;height:100%}.week-days{flex-shrink:0;display:grid;grid-template-columns:repeat(7,1fr);width:100%;background-color:#f4f4f4}.week-day{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#fff;font-size:14px;color:#00000080}.days-grid{flex:1 1 0;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;grid-auto-rows:1fr;width:100%;padding:1px;background-color:#f4f4f4;min-height:0;height:100%}.day-cell{display:flex;flex-direction:column;gap:4px;padding:4px;background-color:#fff;overflow:hidden}.day-cell .day-number{display:flex;align-items:center;justify-content:center;width:fit-content;aspect-ratio:1;padding:2px;border-radius:50%;font-size:12px;line-height:16px;font-weight:600;-webkit-user-select:none;user-select:none}.day-cell.outside-month{background-color:#f8f8f8}.day-cell.is-today .day-number{background-color:#007bff;color:#fff}.day-cell .events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-height:0;max-height:100%}.day-cell .events-list .more-events{padding:2px 8px;border-radius:4px;font-size:12px;color:#555;cursor:pointer}.day-cell .events-list .more-events:hover{background-color:#eee}.footer{flex-shrink:0;background-color:#add8e6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event"] }, { kind: "component", type: MoreEventsModalComponent, selector: "lib-more-events-modal", inputs: ["events", "date"], outputs: ["close", "eventClick"] }, { kind: "component", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: ["selectedMonth"], outputs: ["monthSelected"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TranslateMonthPipe, name: "translateMonth" }] });
|
|
274
474
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
275
475
|
type: Component,
|
|
276
|
-
args: [{ selector: 'lib-calendar', template: "<div class=\"calendar-component\">\r\n <div class=\"header\">\r\n
|
|
476
|
+
args: [{ selector: 'lib-calendar', template: "<div class=\"calendar-component\">\r\n <div class=\"header\">\r\n <div class=\"nav-controls\">\r\n <button class=\"btn-prev\" (click)=\"prevMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"currentColor\">\r\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn-today\" (click)=\"goToToday()\">{{'today' | translate}}</button>\r\n\r\n <button class=\"btn-next\" (click)=\"nextMonth()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"currentColor\">\r\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div class=\"spacer\"></div>\r\n\r\n <div class=\"date-selector-container\">\r\n <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\r\n <span>{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"currentColor\">\r\n <path d=\"M480-360 280-560h400L480-360Z\" />\r\n </svg>\r\n </button>\r\n\r\n <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\r\n <lib-month-selector [selectedMonth]=\"currentMonth\"\r\n (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\r\n </div>\r\n </div>\r\n\r\n <div class=\"spacer\"></div>\r\n\r\n <div class=\"view-selector\">\r\n <button class=\"btn-view active\">\r\n <!-- month view -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"currentColor\">\r\n <path\r\n d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn-view\">\r\n <!-- week view -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"currentColor\">\r\n <path\r\n d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\r\n </svg>\r\n </button>\r\n\r\n <button class=\"btn-view\">\r\n <!-- day view -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"currentColor\">\r\n <path\r\n d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"body\" #calendarBody>\r\n <div class=\"week-days\">\r\n <div class=\"week-day\" *ngFor=\"let day of weekDays\">\r\n {{ day.tag | translate | slice:0:3 }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"days-grid\">\r\n <div class=\"day-cell\" *ngFor=\"let day of dayCells; let i = index\"\r\n [ngClass]=\"{'outside-month': day.isOutsideMonth, 'is-today': day.isToday}\">\r\n <div class=\"day-number\">\r\n {{ day.date.getDate() }}\r\n </div>\r\n\r\n <div class=\"events-list\">\r\n <lib-calendar-event *ngFor=\"let event of day.events | slice:0:maxEventsInDayCell\"\r\n [event]=\"event\"></lib-calendar-event>\r\n\r\n <div class=\"more-events\" *ngIf=\"day.events.length > (maxEventsInDayCell || 0)\"\r\n (click)=\"openMoreEventsModal(day.date, day.events)\">\r\n {{'nMoreEvents' | translate: {n:(day.events.length - (maxEventsInDayCell || 0))} }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"footer\">\r\n Footer\r\n </div>\r\n\r\n <lib-more-events-modal *ngIf=\"showMoreEventsModal && moreEventsModalDate\" [events]=\"moreEventsModalEvents\"\r\n [date]=\"moreEventsModalDate\" (close)=\"closeMoreEventsModal()\"\r\n (eventClick)=\"closeMoreEventsModal()\"></lib-more-events-modal>\r\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.calendar-component{display:flex;flex-direction:column;width:100%;height:100%}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-prev,.header .nav-controls .btn-next{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:50%;cursor:pointer;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-prev:hover,.header .nav-controls .btn-next:hover{background-color:#eee}.header .nav-controls .btn-today{display:flex;align-items:center;height:30px;padding:0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-today:hover{background-color:#eee}.header .view-selector{display:flex;align-items:center}.header .view-selector .btn-view{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #cccccc;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}.header .view-selector .btn-view:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;border-right:none}.header .view-selector .btn-view:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-left:none}.header .view-selector .btn-view:hover{background-color:#eee}.header .view-selector .btn-view svg{width:22px;height:22px}.header .view-selector .btn-view.active{background-color:#0000001a}.header .date-selector-container{position:relative}.header .date-selector-container .date-selector-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#fff;border-radius:4px;box-shadow:0 2px 24px #0000004d;z-index:3}.header .date-selector-container .date-selector-dropdown:before{content:\"\";position:absolute;top:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background-color:#fff;border-radius:2px}.header .btn-date-selector{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .btn-date-selector:hover{background-color:#eee}.body{flex:1 1 0;display:flex;flex-direction:column;width:100%;min-height:0;height:100%}.week-days{flex-shrink:0;display:grid;grid-template-columns:repeat(7,1fr);width:100%;background-color:#f4f4f4}.week-day{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#fff;font-size:14px;color:#00000080}.days-grid{flex:1 1 0;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;grid-auto-rows:1fr;width:100%;padding:1px;background-color:#f4f4f4;min-height:0;height:100%}.day-cell{display:flex;flex-direction:column;gap:4px;padding:4px;background-color:#fff;overflow:hidden}.day-cell .day-number{display:flex;align-items:center;justify-content:center;width:fit-content;aspect-ratio:1;padding:2px;border-radius:50%;font-size:12px;line-height:16px;font-weight:600;-webkit-user-select:none;user-select:none}.day-cell.outside-month{background-color:#f8f8f8}.day-cell.is-today .day-number{background-color:#007bff;color:#fff}.day-cell .events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-height:0;max-height:100%}.day-cell .events-list .more-events{padding:2px 8px;border-radius:4px;font-size:12px;color:#555;cursor:pointer}.day-cell .events-list .more-events:hover{background-color:#eee}.footer{flex-shrink:0;background-color:#add8e6}\n"] }]
|
|
277
477
|
}], ctorParameters: function () { return []; }, propDecorators: { currentMonth: [{
|
|
278
478
|
type: Input
|
|
279
479
|
}], events: [{
|
|
@@ -288,6 +488,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
288
488
|
}], calendarBodyRef: [{
|
|
289
489
|
type: ViewChild,
|
|
290
490
|
args: ['calendarBody']
|
|
491
|
+
}], dateSelectorDropdown: [{
|
|
492
|
+
type: ViewChild,
|
|
493
|
+
args: ['dateSelectorDropdown', { static: false }]
|
|
494
|
+
}], onDocumentClick: [{
|
|
495
|
+
type: HostListener,
|
|
496
|
+
args: ['document:click', ['$event']]
|
|
291
497
|
}] } });
|
|
292
498
|
|
|
293
499
|
class SmartCalendarComponent {
|
|
@@ -313,7 +519,9 @@ SmartAngularCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
|
|
|
313
519
|
CalendarComponent,
|
|
314
520
|
TranslatePipe,
|
|
315
521
|
CalendarEventComponent,
|
|
316
|
-
MoreEventsModalComponent
|
|
522
|
+
MoreEventsModalComponent,
|
|
523
|
+
TranslateMonthPipe,
|
|
524
|
+
MonthSelectorComponent], imports: [CommonModule], exports: [SmartCalendarComponent] });
|
|
317
525
|
SmartAngularCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, imports: [CommonModule] });
|
|
318
526
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, decorators: [{
|
|
319
527
|
type: NgModule,
|
|
@@ -323,7 +531,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
323
531
|
CalendarComponent,
|
|
324
532
|
TranslatePipe,
|
|
325
533
|
CalendarEventComponent,
|
|
326
|
-
MoreEventsModalComponent
|
|
534
|
+
MoreEventsModalComponent,
|
|
535
|
+
TranslateMonthPipe,
|
|
536
|
+
MonthSelectorComponent
|
|
327
537
|
],
|
|
328
538
|
imports: [
|
|
329
539
|
CommonModule
|