@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,23 @@ 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
|
+
var _a;
|
|
314
|
+
if (!this.showDateSelector)
|
|
315
|
+
return;
|
|
316
|
+
const dropdown = (_a = this.dateSelectorDropdown) === null || _a === void 0 ? void 0 : _a.nativeElement;
|
|
317
|
+
const button = document.querySelector('.btn-date-selector');
|
|
318
|
+
if (dropdown && !dropdown.contains(event.target) && button && !button.contains(event.target)) {
|
|
319
|
+
this.showDateSelector = false;
|
|
320
|
+
}
|
|
321
|
+
}
|
|
175
322
|
isToday(date) {
|
|
176
323
|
const today = new Date();
|
|
177
324
|
return date.getDate() === today.getDate() &&
|
|
@@ -244,6 +391,60 @@ class CalendarComponent {
|
|
|
244
391
|
this.moreEventsModalDate = undefined;
|
|
245
392
|
this.moreEventsModalEvents = [];
|
|
246
393
|
}
|
|
394
|
+
nextMonth() {
|
|
395
|
+
const oldMonth = Object.assign({}, this.currentMonth);
|
|
396
|
+
if (this.currentMonth.month === 12) {
|
|
397
|
+
this.currentMonth.month = 1;
|
|
398
|
+
this.currentMonth.year += 1;
|
|
399
|
+
}
|
|
400
|
+
else {
|
|
401
|
+
this.currentMonth.month += 1;
|
|
402
|
+
}
|
|
403
|
+
this.initDaysCells();
|
|
404
|
+
this.monthChange.emit({
|
|
405
|
+
newMonth: Object.assign({}, this.currentMonth),
|
|
406
|
+
oldMonth
|
|
407
|
+
});
|
|
408
|
+
}
|
|
409
|
+
prevMonth() {
|
|
410
|
+
const oldMonth = Object.assign({}, this.currentMonth);
|
|
411
|
+
if (this.currentMonth.month === 1) {
|
|
412
|
+
this.currentMonth.month = 12;
|
|
413
|
+
this.currentMonth.year -= 1;
|
|
414
|
+
}
|
|
415
|
+
else {
|
|
416
|
+
this.currentMonth.month -= 1;
|
|
417
|
+
}
|
|
418
|
+
this.initDaysCells();
|
|
419
|
+
this.monthChange.emit({
|
|
420
|
+
newMonth: Object.assign({}, this.currentMonth),
|
|
421
|
+
oldMonth
|
|
422
|
+
});
|
|
423
|
+
}
|
|
424
|
+
goToToday() {
|
|
425
|
+
const today = new Date();
|
|
426
|
+
const oldMonth = Object.assign({}, this.currentMonth);
|
|
427
|
+
this.currentMonth.year = today.getFullYear();
|
|
428
|
+
this.currentMonth.month = today.getMonth() + 1;
|
|
429
|
+
this.initDaysCells();
|
|
430
|
+
this.monthChange.emit({
|
|
431
|
+
newMonth: Object.assign({}, this.currentMonth),
|
|
432
|
+
oldMonth
|
|
433
|
+
});
|
|
434
|
+
}
|
|
435
|
+
toggleDateSelector() {
|
|
436
|
+
this.showDateSelector = !this.showDateSelector;
|
|
437
|
+
}
|
|
438
|
+
onMonthSelected(newMonth) {
|
|
439
|
+
const oldMonth = Object.assign({}, this.currentMonth);
|
|
440
|
+
this.currentMonth = newMonth;
|
|
441
|
+
this.initDaysCells();
|
|
442
|
+
this.monthChange.emit({
|
|
443
|
+
newMonth: Object.assign({}, this.currentMonth),
|
|
444
|
+
oldMonth
|
|
445
|
+
});
|
|
446
|
+
this.showDateSelector = false;
|
|
447
|
+
}
|
|
247
448
|
ngOnInit() {
|
|
248
449
|
if (this.startAt === 'monday') {
|
|
249
450
|
this.weekDays = [
|
|
@@ -270,10 +471,10 @@ class CalendarComponent {
|
|
|
270
471
|
}
|
|
271
472
|
}
|
|
272
473
|
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" }] });
|
|
474
|
+
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
475
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
275
476
|
type: Component,
|
|
276
|
-
args: [{ selector: 'lib-calendar', template: "<div class=\"calendar-component\">\r\n <div class=\"header\">\r\n
|
|
477
|
+
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
478
|
}], ctorParameters: function () { return []; }, propDecorators: { currentMonth: [{
|
|
278
479
|
type: Input
|
|
279
480
|
}], events: [{
|
|
@@ -288,6 +489,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
288
489
|
}], calendarBodyRef: [{
|
|
289
490
|
type: ViewChild,
|
|
290
491
|
args: ['calendarBody']
|
|
492
|
+
}], dateSelectorDropdown: [{
|
|
493
|
+
type: ViewChild,
|
|
494
|
+
args: ['dateSelectorDropdown', { static: false }]
|
|
495
|
+
}], onDocumentClick: [{
|
|
496
|
+
type: HostListener,
|
|
497
|
+
args: ['document:click', ['$event']]
|
|
291
498
|
}] } });
|
|
292
499
|
|
|
293
500
|
class SmartCalendarComponent {
|
|
@@ -313,7 +520,9 @@ SmartAngularCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
|
|
|
313
520
|
CalendarComponent,
|
|
314
521
|
TranslatePipe,
|
|
315
522
|
CalendarEventComponent,
|
|
316
|
-
MoreEventsModalComponent
|
|
523
|
+
MoreEventsModalComponent,
|
|
524
|
+
TranslateMonthPipe,
|
|
525
|
+
MonthSelectorComponent], imports: [CommonModule], exports: [SmartCalendarComponent] });
|
|
317
526
|
SmartAngularCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, imports: [CommonModule] });
|
|
318
527
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, decorators: [{
|
|
319
528
|
type: NgModule,
|
|
@@ -323,7 +532,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
323
532
|
CalendarComponent,
|
|
324
533
|
TranslatePipe,
|
|
325
534
|
CalendarEventComponent,
|
|
326
|
-
MoreEventsModalComponent
|
|
535
|
+
MoreEventsModalComponent,
|
|
536
|
+
TranslateMonthPipe,
|
|
537
|
+
MonthSelectorComponent
|
|
327
538
|
],
|
|
328
539
|
imports: [
|
|
329
540
|
CommonModule
|