@smart-solutions-tech/smart-angular-calendar 0.0.16 → 0.0.18
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 +5 -3
- package/esm2020/lib/components/calendar-event/calendar-event.component.mjs +7 -3
- package/esm2020/lib/components/day/day.component.mjs +5 -3
- package/esm2020/lib/components/duration-event/duration-event.component.mjs +6 -2
- package/esm2020/lib/components/more-events-modal/more-events-modal.component.mjs +8 -3
- package/esm2020/lib/components/smart-calendar/smart-calendar.component.mjs +22 -13
- package/esm2020/lib/components/week/week.component.mjs +5 -3
- package/esm2020/lib/services/translation.service.mjs +1 -1
- package/esm2020/lib/translations.mjs +3 -1
- package/esm2020/lib/types.mjs +1 -1
- package/fesm2015/smart-solutions-tech-smart-angular-calendar.mjs +79 -50
- package/fesm2015/smart-solutions-tech-smart-angular-calendar.mjs.map +1 -1
- package/fesm2020/smart-solutions-tech-smart-angular-calendar.mjs +79 -50
- package/fesm2020/smart-solutions-tech-smart-angular-calendar.mjs.map +1 -1
- package/lib/components/calendar/calendar.component.d.ts +2 -1
- package/lib/components/calendar-event/calendar-event.component.d.ts +3 -1
- package/lib/components/day/day.component.d.ts +2 -1
- package/lib/components/duration-event/duration-event.component.d.ts +3 -1
- package/lib/components/more-events-modal/more-events-modal.component.d.ts +3 -1
- package/lib/components/smart-calendar/smart-calendar.component.d.ts +7 -2
- package/lib/components/week/week.component.d.ts +2 -1
- package/lib/services/translation.service.d.ts +2 -1
- package/lib/types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -15,42 +15,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
15
15
|
}]
|
|
16
16
|
}], ctorParameters: function () { return []; } });
|
|
17
17
|
|
|
18
|
-
const isDarkColor = (hexColor, threshold = 0.5) => {
|
|
19
|
-
const hex = hexColor.replace('#', '');
|
|
20
|
-
const r = parseInt(hex.substring(0, 2), 16);
|
|
21
|
-
const g = parseInt(hex.substring(2, 4), 16);
|
|
22
|
-
const b = parseInt(hex.substring(4, 6), 16);
|
|
23
|
-
const [rs, gs, bs] = [r, g, b].map((c) => {
|
|
24
|
-
const cs = c / 255;
|
|
25
|
-
return cs <= 0.03928 ? cs / 12.92 : Math.pow((cs + 0.055) / 1.055, 2.4);
|
|
26
|
-
});
|
|
27
|
-
const luminance = 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
|
|
28
|
-
return luminance < threshold;
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
class CalendarEventComponent {
|
|
32
|
-
constructor() {
|
|
33
|
-
this.eventClick = new EventEmitter();
|
|
34
|
-
this.isDarkColor = false;
|
|
35
|
-
}
|
|
36
|
-
ngOnInit() {
|
|
37
|
-
this.isDarkColor = isDarkColor(this.event.color || '#000000');
|
|
38
|
-
}
|
|
39
|
-
onEventClick(event) {
|
|
40
|
-
this.eventClick.emit(event);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
CalendarEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
-
CalendarEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: { event: "event" }, outputs: { eventClick: "eventClick" }, ngImport: i0, template: "<div class=\"calendar-event-component\" style=\"--color: {{ event.color }};\" [ngClass]=\"{'dark-color': isDarkColor}\"\r\n [title]=\"event.title\" (click)=\"onEventClick(event)\">\r\n <div class=\"event-title\">{{ event.title }}</div>\r\n</div>", styles: [".calendar-event-component{position:relative;z-index:1;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;padding:2px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121}.calendar-event-component.dark-color{color:#fafafa}.event-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
45
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarEventComponent, decorators: [{
|
|
46
|
-
type: Component,
|
|
47
|
-
args: [{ selector: 'lib-calendar-event', template: "<div class=\"calendar-event-component\" style=\"--color: {{ event.color }};\" [ngClass]=\"{'dark-color': isDarkColor}\"\r\n [title]=\"event.title\" (click)=\"onEventClick(event)\">\r\n <div class=\"event-title\">{{ event.title }}</div>\r\n</div>", styles: [".calendar-event-component{position:relative;z-index:1;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;padding:2px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121}.calendar-event-component.dark-color{color:#fafafa}.event-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
48
|
-
}], ctorParameters: function () { return []; }, propDecorators: { event: [{
|
|
49
|
-
type: Input
|
|
50
|
-
}], eventClick: [{
|
|
51
|
-
type: Output
|
|
52
|
-
}] } });
|
|
53
|
-
|
|
54
18
|
const TRANSLATIONS = {
|
|
55
19
|
en: {
|
|
56
20
|
sun: 'Sunday',
|
|
@@ -61,6 +25,7 @@ const TRANSLATIONS = {
|
|
|
61
25
|
fri: 'Friday',
|
|
62
26
|
sat: 'Saturday',
|
|
63
27
|
today: 'Today',
|
|
28
|
+
goToToday: 'Go to Today',
|
|
64
29
|
allDayEvents: 'All-day events',
|
|
65
30
|
january: 'January',
|
|
66
31
|
february: 'February',
|
|
@@ -86,6 +51,7 @@ const TRANSLATIONS = {
|
|
|
86
51
|
fri: 'Viernes',
|
|
87
52
|
sat: 'Sábado',
|
|
88
53
|
today: 'Hoy',
|
|
54
|
+
goToToday: 'Ir a Hoy',
|
|
89
55
|
allDayEvents: 'Eventos de todo el día',
|
|
90
56
|
january: 'Enero',
|
|
91
57
|
february: 'Febrero',
|
|
@@ -144,6 +110,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
144
110
|
}]
|
|
145
111
|
}], ctorParameters: function () { return []; } });
|
|
146
112
|
|
|
113
|
+
const isDarkColor = (hexColor, threshold = 0.5) => {
|
|
114
|
+
const hex = hexColor.replace('#', '');
|
|
115
|
+
const r = parseInt(hex.substring(0, 2), 16);
|
|
116
|
+
const g = parseInt(hex.substring(2, 4), 16);
|
|
117
|
+
const b = parseInt(hex.substring(4, 6), 16);
|
|
118
|
+
const [rs, gs, bs] = [r, g, b].map((c) => {
|
|
119
|
+
const cs = c / 255;
|
|
120
|
+
return cs <= 0.03928 ? cs / 12.92 : Math.pow((cs + 0.055) / 1.055, 2.4);
|
|
121
|
+
});
|
|
122
|
+
const luminance = 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
|
|
123
|
+
return luminance < threshold;
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
class CalendarEventComponent {
|
|
127
|
+
constructor() {
|
|
128
|
+
this.eventClick = new EventEmitter();
|
|
129
|
+
this.isDarkColor = false;
|
|
130
|
+
this.isDarkTagColor = false;
|
|
131
|
+
}
|
|
132
|
+
ngOnInit() {
|
|
133
|
+
this.isDarkColor = isDarkColor(this.event.color || '#000000');
|
|
134
|
+
this.isDarkTagColor = isDarkColor(this.tagColor || '#000000');
|
|
135
|
+
}
|
|
136
|
+
onEventClick(event) {
|
|
137
|
+
this.eventClick.emit(event);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
CalendarEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
141
|
+
CalendarEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: { event: "event", tagColor: "tagColor" }, outputs: { eventClick: "eventClick" }, ngImport: i0, template: "<div class=\"calendar-event-component\" style=\"--color: {{ event.color }};\" [ngClass]=\"{'dark-color': isDarkColor}\"\r\n [title]=\"event.title\" (click)=\"onEventClick(event)\">\r\n <div class=\"tag\" *ngIf=\"event.meta.tag\" [style]=\"{backgroundColor:tagColor}\"\r\n [ngClass]=\"{'dark-color': isDarkTagColor}\">{{ event.meta.tag }}</div>\r\n\r\n <div class=\"event-title\">{{ event.title }}</div>\r\n</div>", styles: [".calendar-event-component{position:relative;z-index:1;display:flex;align-items:center;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121;overflow:hidden}.calendar-event-component.dark-color{color:#fafafa}.event-title{flex:1 1 auto;padding:2px 8px;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag{flex-shrink:0;width:36px;padding:2px 0;font-size:12px;font-weight:500;text-align:center}.tag.dark-color{color:#fafafa}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarEventComponent, decorators: [{
|
|
143
|
+
type: Component,
|
|
144
|
+
args: [{ selector: 'lib-calendar-event', template: "<div class=\"calendar-event-component\" style=\"--color: {{ event.color }};\" [ngClass]=\"{'dark-color': isDarkColor}\"\r\n [title]=\"event.title\" (click)=\"onEventClick(event)\">\r\n <div class=\"tag\" *ngIf=\"event.meta.tag\" [style]=\"{backgroundColor:tagColor}\"\r\n [ngClass]=\"{'dark-color': isDarkTagColor}\">{{ event.meta.tag }}</div>\r\n\r\n <div class=\"event-title\">{{ event.title }}</div>\r\n</div>", styles: [".calendar-event-component{position:relative;z-index:1;display:flex;align-items:center;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121;overflow:hidden}.calendar-event-component.dark-color{color:#fafafa}.event-title{flex:1 1 auto;padding:2px 8px;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag{flex-shrink:0;width:36px;padding:2px 0;font-size:12px;font-weight:500;text-align:center}.tag.dark-color{color:#fafafa}\n"] }]
|
|
145
|
+
}], ctorParameters: function () { return []; }, propDecorators: { event: [{
|
|
146
|
+
type: Input
|
|
147
|
+
}], tagColor: [{
|
|
148
|
+
type: Input
|
|
149
|
+
}], eventClick: [{
|
|
150
|
+
type: Output
|
|
151
|
+
}] } });
|
|
152
|
+
|
|
147
153
|
class TranslatePipe {
|
|
148
154
|
constructor(translationService) {
|
|
149
155
|
this.translationService = translationService;
|
|
@@ -172,6 +178,9 @@ class MoreEventsModalComponent {
|
|
|
172
178
|
isDarkColor(color) {
|
|
173
179
|
return isDarkColor(color || '#ffffff');
|
|
174
180
|
}
|
|
181
|
+
isTagColorDark() {
|
|
182
|
+
return isDarkColor(this.tagColor || '#ffffff');
|
|
183
|
+
}
|
|
175
184
|
onClose() {
|
|
176
185
|
this.close.emit();
|
|
177
186
|
}
|
|
@@ -180,14 +189,16 @@ class MoreEventsModalComponent {
|
|
|
180
189
|
}
|
|
181
190
|
}
|
|
182
191
|
MoreEventsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoreEventsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
183
|
-
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;
|
|
192
|
+
MoreEventsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoreEventsModalComponent, selector: "lib-more-events-modal", inputs: { events: "events", date: "date", tagColor: "tagColor" }, 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=\"tag\" *ngIf=\"event.meta.tag\" [ngClass]=\"{'is-dark': isTagColorDark()}\"\n [style.background-color]=\"tagColor\">{{ event.meta.tag }}</div>\n\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;align-items:center;background-color:var(--color, #e2e2e2);border-radius:4px;color:#212121;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden}.events-list .event-item.is-dark{color:#fafafa}.events-list .event-item .tag{flex-shrink:0;width:56px;padding:8px 0;text-align:center}.events-list .event-item .event-title{flex:1 1 auto;padding:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\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: TranslatePipe, name: "translate" }] });
|
|
184
193
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoreEventsModalComponent, decorators: [{
|
|
185
194
|
type: Component,
|
|
186
|
-
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;
|
|
195
|
+
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=\"tag\" *ngIf=\"event.meta.tag\" [ngClass]=\"{'is-dark': isTagColorDark()}\"\n [style.background-color]=\"tagColor\">{{ event.meta.tag }}</div>\n\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;align-items:center;background-color:var(--color, #e2e2e2);border-radius:4px;color:#212121;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden}.events-list .event-item.is-dark{color:#fafafa}.events-list .event-item .tag{flex-shrink:0;width:56px;padding:8px 0;text-align:center}.events-list .event-item .event-title{flex:1 1 auto;padding:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
187
196
|
}], ctorParameters: function () { return []; }, propDecorators: { events: [{
|
|
188
197
|
type: Input
|
|
189
198
|
}], date: [{
|
|
190
199
|
type: Input
|
|
200
|
+
}], tagColor: [{
|
|
201
|
+
type: Input
|
|
191
202
|
}], close: [{
|
|
192
203
|
type: Output
|
|
193
204
|
}], eventClick: [{
|
|
@@ -328,16 +339,18 @@ class CalendarComponent {
|
|
|
328
339
|
}
|
|
329
340
|
}
|
|
330
341
|
CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
331
|
-
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: { eventClick: "eventClick" }, viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "calendarBodyRef", first: true, predicate: ["calendarBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-component\">\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\" [event]=\"event\"\r\n (eventClick)=\"onEventClick($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)=\"onEventClick($event, true)\"></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%}.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"], outputs: ["eventClick"] }, { 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" }] });
|
|
342
|
+
CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarComponent, selector: "lib-calendar", inputs: { currentMonth: "currentMonth", events: "events", startAt: "startAt", tagColor: "tagColor" }, outputs: { eventClick: "eventClick" }, viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "calendarBodyRef", first: true, predicate: ["calendarBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-component\">\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\" [event]=\"event\"\r\n [tagColor]=\"tagColor\" (eventClick)=\"onEventClick($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 [tagColor]=\"tagColor\" [date]=\"moreEventsModalDate\" (close)=\"closeMoreEventsModal()\"\r\n (eventClick)=\"onEventClick($event, true)\"></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%}.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", "tagColor"], outputs: ["eventClick"] }, { kind: "component", type: MoreEventsModalComponent, selector: "lib-more-events-modal", inputs: ["events", "date", "tagColor"], outputs: ["close", "eventClick"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
332
343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
333
344
|
type: Component,
|
|
334
|
-
args: [{ selector: 'lib-calendar', template: "<div class=\"calendar-component\">\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\" [event]=\"event\"\r\n (eventClick)=\"onEventClick($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)=\"onEventClick($event, true)\"></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%}.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"] }]
|
|
345
|
+
args: [{ selector: 'lib-calendar', template: "<div class=\"calendar-component\">\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\" [event]=\"event\"\r\n [tagColor]=\"tagColor\" (eventClick)=\"onEventClick($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 [tagColor]=\"tagColor\" [date]=\"moreEventsModalDate\" (close)=\"closeMoreEventsModal()\"\r\n (eventClick)=\"onEventClick($event, true)\"></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%}.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"] }]
|
|
335
346
|
}], ctorParameters: function () { return []; }, propDecorators: { currentMonth: [{
|
|
336
347
|
type: Input
|
|
337
348
|
}], events: [{
|
|
338
349
|
type: Input
|
|
339
350
|
}], startAt: [{
|
|
340
351
|
type: Input
|
|
352
|
+
}], tagColor: [{
|
|
353
|
+
type: Input
|
|
341
354
|
}], eventClick: [{
|
|
342
355
|
type: Output
|
|
343
356
|
}], calendarRef: [{
|
|
@@ -447,6 +460,7 @@ class DurationEventComponent {
|
|
|
447
460
|
constructor() {
|
|
448
461
|
this.eventClick = new EventEmitter();
|
|
449
462
|
this.isDarkColor = false;
|
|
463
|
+
this.isDarkTagColor = false;
|
|
450
464
|
this.topPosition = 0;
|
|
451
465
|
this.height = 0;
|
|
452
466
|
this.isEventStartInThisDay = false;
|
|
@@ -454,6 +468,7 @@ class DurationEventComponent {
|
|
|
454
468
|
}
|
|
455
469
|
ngOnInit() {
|
|
456
470
|
this.isDarkColor = isDarkColor(this.event.color || '#000000');
|
|
471
|
+
this.isDarkTagColor = isDarkColor(this.tagColor || '#000000');
|
|
457
472
|
this.isEventStartInThisDay = this.getIsEventStartInThisDay();
|
|
458
473
|
this.isEventEndInThisDay = this.getIsEventEndInThisDay();
|
|
459
474
|
this.topPosition = this.getTopPosition();
|
|
@@ -489,7 +504,7 @@ class DurationEventComponent {
|
|
|
489
504
|
}
|
|
490
505
|
}
|
|
491
506
|
DurationEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DurationEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
492
|
-
DurationEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DurationEventComponent, selector: "lib-duration-event", inputs: { event: "event", date: "date" }, outputs: { eventClick: "eventClick" }, ngImport: i0, template: "<div class=\"duration-event-component\" style=\"--color: {{ event.color }};\" [style.top.px]=\"topPosition\"\n [style.height.px]=\"height\" [ngClass]=\"{'dark-color': isDarkColor}\" [title]=\"event.title\" (click)=\"onEventClick()\">\n <div class=\"event-title\">{{ event.title }}</div>\n</div>", styles: [".duration-event-component{position:absolute;left:0;z-index:1;width:100%;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;padding:2px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121}.duration-event-component.dark-color{color:#fafafa}.event-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
507
|
+
DurationEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DurationEventComponent, selector: "lib-duration-event", inputs: { event: "event", date: "date", tagColor: "tagColor" }, outputs: { eventClick: "eventClick" }, ngImport: i0, template: "<div class=\"duration-event-component\" style=\"--color: {{ event.color }};\" [style.top.px]=\"topPosition\"\n [style.height.px]=\"height\" [ngClass]=\"{'dark-color': isDarkColor}\" [title]=\"event.title\" (click)=\"onEventClick()\">\n <div class=\"event-title\">{{ event.title }}</div>\n</div>", styles: [".duration-event-component{position:absolute;left:0;z-index:1;width:100%;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;padding:2px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121}.duration-event-component.dark-color{color:#fafafa}.event-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
493
508
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DurationEventComponent, decorators: [{
|
|
494
509
|
type: Component,
|
|
495
510
|
args: [{ selector: 'lib-duration-event', template: "<div class=\"duration-event-component\" style=\"--color: {{ event.color }};\" [style.top.px]=\"topPosition\"\n [style.height.px]=\"height\" [ngClass]=\"{'dark-color': isDarkColor}\" [title]=\"event.title\" (click)=\"onEventClick()\">\n <div class=\"event-title\">{{ event.title }}</div>\n</div>", styles: [".duration-event-component{position:absolute;left:0;z-index:1;width:100%;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;padding:2px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121}.duration-event-component.dark-color{color:#fafafa}.event-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
@@ -497,6 +512,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
497
512
|
type: Input
|
|
498
513
|
}], date: [{
|
|
499
514
|
type: Input
|
|
515
|
+
}], tagColor: [{
|
|
516
|
+
type: Input
|
|
500
517
|
}], eventClick: [{
|
|
501
518
|
type: Output
|
|
502
519
|
}] } });
|
|
@@ -581,14 +598,16 @@ class DayComponent {
|
|
|
581
598
|
}
|
|
582
599
|
}
|
|
583
600
|
DayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
584
|
-
DayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DayComponent, selector: "lib-day", inputs: { events: "events", date: "date" }, outputs: { eventClick: "eventClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"day-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"events-container\">\n <lib-calendar-event *ngFor=\"let event of allDayEvents\" [event]=\"event\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n\n <div class=\"events-container\" [style.gridTemplateColumns]=\"'repeat(' + eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.day-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow:auto}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .events-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;padding:4px}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:flex;flex-direction:column}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event"], outputs: ["eventClick"] }, { kind: "component", type: DurationEventComponent, selector: "lib-duration-event", inputs: ["event", "date"], outputs: ["eventClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
601
|
+
DayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DayComponent, selector: "lib-day", inputs: { events: "events", date: "date", tagColor: "tagColor" }, outputs: { eventClick: "eventClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"day-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"events-container\">\n <lib-calendar-event *ngFor=\"let event of allDayEvents\" [event]=\"event\" [tagColor]=\"tagColor\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n\n <div class=\"events-container\" [style.gridTemplateColumns]=\"'repeat(' + eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.day-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow:auto}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .events-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;padding:4px}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:flex;flex-direction:column}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event", "tagColor"], outputs: ["eventClick"] }, { kind: "component", type: DurationEventComponent, selector: "lib-duration-event", inputs: ["event", "date", "tagColor"], outputs: ["eventClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
585
602
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DayComponent, decorators: [{
|
|
586
603
|
type: Component,
|
|
587
|
-
args: [{ selector: 'lib-day', template: "<div class=\"day-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"events-container\">\n <lib-calendar-event *ngFor=\"let event of allDayEvents\" [event]=\"event\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n\n <div class=\"events-container\" [style.gridTemplateColumns]=\"'repeat(' + eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.day-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow:auto}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .events-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;padding:4px}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:flex;flex-direction:column}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"] }]
|
|
604
|
+
args: [{ selector: 'lib-day', template: "<div class=\"day-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"events-container\">\n <lib-calendar-event *ngFor=\"let event of allDayEvents\" [event]=\"event\" [tagColor]=\"tagColor\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n\n <div class=\"events-container\" [style.gridTemplateColumns]=\"'repeat(' + eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.day-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow:auto}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .events-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;padding:4px}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:flex;flex-direction:column}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"] }]
|
|
588
605
|
}], ctorParameters: function () { return []; }, propDecorators: { events: [{
|
|
589
606
|
type: Input
|
|
590
607
|
}], date: [{
|
|
591
608
|
type: Input
|
|
609
|
+
}], tagColor: [{
|
|
610
|
+
type: Input
|
|
592
611
|
}], eventClick: [{
|
|
593
612
|
type: Output
|
|
594
613
|
}] } });
|
|
@@ -720,22 +739,25 @@ class WeekComponent {
|
|
|
720
739
|
}
|
|
721
740
|
}
|
|
722
741
|
WeekComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WeekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
723
|
-
WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WeekComponent, selector: "lib-week", inputs: { startAt: "startAt", events: "events", startDate: "startDate" }, outputs: { eventClick: "eventClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"week-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n <div class=\"week-day\" [ngClass]=\"{'active': isToday(day.date)}\">\n {{ weekDays[i].tag | translate | slice:0:3 }} {{day.date | date:'dd'}}\n </div>\n\n <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;min-width:0;width:100%;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{align-self:center;position:sticky;top:0;left:0;z-index:2;width:fit-content;padding:2px 6px;margin-bottom:4px;background-color:transparent;border-radius:50px;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.all-day-events .week-day.active{background-color:#007bff;color:#fff;font-weight:600}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\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: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event"], outputs: ["eventClick"] }, { kind: "component", type: DurationEventComponent, selector: "lib-duration-event", inputs: ["event", "date"], outputs: ["eventClick"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
742
|
+
WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WeekComponent, selector: "lib-week", inputs: { startAt: "startAt", events: "events", startDate: "startDate", tagColor: "tagColor" }, outputs: { eventClick: "eventClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"week-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n <div class=\"week-day\" [ngClass]=\"{'active': isToday(day.date)}\">\n {{ weekDays[i].tag | translate | slice:0:3 }} {{day.date | date:'dd'}}\n </div>\n\n <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\" [tagColor]=\"tagColor\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;min-width:0;width:100%;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{align-self:center;position:sticky;top:0;left:0;z-index:2;width:fit-content;padding:2px 6px;margin-bottom:4px;background-color:transparent;border-radius:50px;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.all-day-events .week-day.active{background-color:#007bff;color:#fff;font-weight:600}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\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: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event", "tagColor"], outputs: ["eventClick"] }, { kind: "component", type: DurationEventComponent, selector: "lib-duration-event", inputs: ["event", "date", "tagColor"], outputs: ["eventClick"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
724
743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WeekComponent, decorators: [{
|
|
725
744
|
type: Component,
|
|
726
|
-
args: [{ selector: 'lib-week', template: "<div class=\"week-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n <div class=\"week-day\" [ngClass]=\"{'active': isToday(day.date)}\">\n {{ weekDays[i].tag | translate | slice:0:3 }} {{day.date | date:'dd'}}\n </div>\n\n <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;min-width:0;width:100%;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{align-self:center;position:sticky;top:0;left:0;z-index:2;width:fit-content;padding:2px 6px;margin-bottom:4px;background-color:transparent;border-radius:50px;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.all-day-events .week-day.active{background-color:#007bff;color:#fff;font-weight:600}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"] }]
|
|
745
|
+
args: [{ selector: 'lib-week', template: "<div class=\"week-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n <div class=\"week-day\" [ngClass]=\"{'active': isToday(day.date)}\">\n {{ weekDays[i].tag | translate | slice:0:3 }} {{day.date | date:'dd'}}\n </div>\n\n <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\" [tagColor]=\"tagColor\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;min-width:0;width:100%;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{align-self:center;position:sticky;top:0;left:0;z-index:2;width:fit-content;padding:2px 6px;margin-bottom:4px;background-color:transparent;border-radius:50px;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.all-day-events .week-day.active{background-color:#007bff;color:#fff;font-weight:600}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"] }]
|
|
727
746
|
}], ctorParameters: function () { return []; }, propDecorators: { startAt: [{
|
|
728
747
|
type: Input
|
|
729
748
|
}], events: [{
|
|
730
749
|
type: Input
|
|
731
750
|
}], startDate: [{
|
|
732
751
|
type: Input
|
|
752
|
+
}], tagColor: [{
|
|
753
|
+
type: Input
|
|
733
754
|
}], eventClick: [{
|
|
734
755
|
type: Output
|
|
735
756
|
}] } });
|
|
736
757
|
|
|
737
758
|
class SmartCalendarComponent {
|
|
738
|
-
constructor() {
|
|
759
|
+
constructor(translationService) {
|
|
760
|
+
this.translationService = translationService;
|
|
739
761
|
this.mode = 'month';
|
|
740
762
|
this.startAt = 'sunday';
|
|
741
763
|
this.currentMonth = {
|
|
@@ -743,6 +765,8 @@ class SmartCalendarComponent {
|
|
|
743
765
|
month: new Date().getMonth() + 1
|
|
744
766
|
};
|
|
745
767
|
this.events = [];
|
|
768
|
+
this.lang = 'en';
|
|
769
|
+
this.tagColor = '#007bff';
|
|
746
770
|
this.monthChange = new EventEmitter();
|
|
747
771
|
this.dateChanged = new EventEmitter();
|
|
748
772
|
this.eventClick = new EventEmitter();
|
|
@@ -764,6 +788,7 @@ class SmartCalendarComponent {
|
|
|
764
788
|
}
|
|
765
789
|
}
|
|
766
790
|
ngOnInit() {
|
|
791
|
+
this.translationService.setLanguage(this.lang);
|
|
767
792
|
this.selectDate(new Date());
|
|
768
793
|
}
|
|
769
794
|
toggleDateSelector() {
|
|
@@ -987,12 +1012,12 @@ class SmartCalendarComponent {
|
|
|
987
1012
|
}
|
|
988
1013
|
}
|
|
989
1014
|
}
|
|
990
|
-
SmartCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
991
|
-
SmartCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartCalendarComponent, selector: "smart-calendar", inputs: { mode: "mode", startAt: "startAt", currentMonth: "currentMonth", events: "events" }, outputs: { monthChange: "monthChange", dateChanged: "dateChanged", eventClick: "eventClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dateSelectorDropdown", first: true, predicate: ["dateSelectorDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\n <button class=\"btn-
|
|
1015
|
+
SmartCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1016
|
+
SmartCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartCalendarComponent, selector: "smart-calendar", inputs: { mode: "mode", startAt: "startAt", currentMonth: "currentMonth", events: "events", lang: "lang", tagColor: "tagColor" }, outputs: { monthChange: "monthChange", dateChanged: "dateChanged", eventClick: "eventClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dateSelectorDropdown", first: true, predicate: ["dateSelectorDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\n <button class=\"btn-today\" (click)=\"goToToday()\">{{'goToToday' | translate}}</button>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\n <button class=\"btn-prev\" (click)=\"onPrev()\">\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-date-selector\" (click)=\"toggleDateSelector()\">\n <span *ngIf=\"mode === 'month'\">{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\n <span *ngIf=\"mode === 'week'\">\n {{ weekStartDate.toDateString() }} - {{ weekEndDate.toDateString() }}\n </span>\n <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</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-next\" (click)=\"onNext()\">\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\n <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n <lib-month-selector [selectedMonth]=\"currentMonth\"\n (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n </div>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"view-selector\">\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"setMode('month')\">\n <!-- month view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\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\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'week'}\" (click)=\"setMode('week')\">\n <!-- week view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\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\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'day'}\" (click)=\"setMode('day')\">\n <!-- day view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\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\" />\n </svg>\n </button>\n </div>\n </div>\n\n <div class=\"view-container\">\n <lib-calendar [events]=\"events\" [currentMonth]=\"currentMonth\" *ngIf=\"mode === 'month'\" [startAt]=\"startAt\"\n [tagColor]=\"tagColor\" (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\" [events]=\"weekEvents\"\n [tagColor]=\"tagColor\" (eventClick)=\"onEventClick($event)\"></lib-week>\n\n <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\" [tagColor]=\"tagColor\"\n (eventClick)=\"onEventClick($event)\"></lib-day>\n </div>\n\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.smart-calendar-component{display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff}.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-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;display:flex;align-items:center}.header .date-selector-container .btn-prev,.header .date-selector-container .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 .date-selector-container .btn-prev:hover,.header .date-selector-container .btn-next:hover{background-color:#eee}.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}.view-container{flex:1 1 auto;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarComponent, selector: "lib-calendar", inputs: ["currentMonth", "events", "startAt", "tagColor"], outputs: ["eventClick"] }, { kind: "component", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: ["selectedMonth"], outputs: ["monthSelected"] }, { kind: "component", type: DayComponent, selector: "lib-day", inputs: ["events", "date", "tagColor"], outputs: ["eventClick"] }, { kind: "component", type: WeekComponent, selector: "lib-week", inputs: ["startAt", "events", "startDate", "tagColor"], outputs: ["eventClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TranslateMonthPipe, name: "translateMonth" }] });
|
|
992
1017
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, decorators: [{
|
|
993
1018
|
type: Component,
|
|
994
|
-
args: [{ selector: 'smart-calendar', template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\n <button class=\"btn-
|
|
995
|
-
}], ctorParameters: function () { return []; }, propDecorators: { mode: [{
|
|
1019
|
+
args: [{ selector: 'smart-calendar', template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\n <button class=\"btn-today\" (click)=\"goToToday()\">{{'goToToday' | translate}}</button>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\n <button class=\"btn-prev\" (click)=\"onPrev()\">\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-date-selector\" (click)=\"toggleDateSelector()\">\n <span *ngIf=\"mode === 'month'\">{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\n <span *ngIf=\"mode === 'week'\">\n {{ weekStartDate.toDateString() }} - {{ weekEndDate.toDateString() }}\n </span>\n <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</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-next\" (click)=\"onNext()\">\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\n <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n <lib-month-selector [selectedMonth]=\"currentMonth\"\n (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n </div>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"view-selector\">\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"setMode('month')\">\n <!-- month view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\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\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'week'}\" (click)=\"setMode('week')\">\n <!-- week view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\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\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'day'}\" (click)=\"setMode('day')\">\n <!-- day view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\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\" />\n </svg>\n </button>\n </div>\n </div>\n\n <div class=\"view-container\">\n <lib-calendar [events]=\"events\" [currentMonth]=\"currentMonth\" *ngIf=\"mode === 'month'\" [startAt]=\"startAt\"\n [tagColor]=\"tagColor\" (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\" [events]=\"weekEvents\"\n [tagColor]=\"tagColor\" (eventClick)=\"onEventClick($event)\"></lib-week>\n\n <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\" [tagColor]=\"tagColor\"\n (eventClick)=\"onEventClick($event)\"></lib-day>\n </div>\n\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.smart-calendar-component{display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff}.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-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;display:flex;align-items:center}.header .date-selector-container .btn-prev,.header .date-selector-container .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 .date-selector-container .btn-prev:hover,.header .date-selector-container .btn-next:hover{background-color:#eee}.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}.view-container{flex:1 1 auto;overflow:hidden}\n"] }]
|
|
1020
|
+
}], ctorParameters: function () { return [{ type: TranslationService }]; }, propDecorators: { mode: [{
|
|
996
1021
|
type: Input
|
|
997
1022
|
}], startAt: [{
|
|
998
1023
|
type: Input
|
|
@@ -1000,6 +1025,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1000
1025
|
type: Input
|
|
1001
1026
|
}], events: [{
|
|
1002
1027
|
type: Input
|
|
1028
|
+
}], lang: [{
|
|
1029
|
+
type: Input
|
|
1030
|
+
}], tagColor: [{
|
|
1031
|
+
type: Input
|
|
1003
1032
|
}], monthChange: [{
|
|
1004
1033
|
type: Output
|
|
1005
1034
|
}], dateChanged: [{
|