@smart-solutions-tech/smart-angular-calendar 0.0.12 → 0.0.14
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/smart-calendar/smart-calendar.component.mjs +6 -5
- package/esm2020/lib/components/week/week.component.mjs +31 -19
- package/fesm2015/smart-solutions-tech-smart-angular-calendar.mjs +35 -22
- package/fesm2015/smart-solutions-tech-smart-angular-calendar.mjs.map +1 -1
- package/fesm2020/smart-solutions-tech-smart-angular-calendar.mjs +35 -22
- package/fesm2020/smart-solutions-tech-smart-angular-calendar.mjs.map +1 -1
- package/lib/components/week/week.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -653,22 +653,28 @@ class WeekComponent {
|
|
|
653
653
|
this.events.forEach(event => this.addEvent(event));
|
|
654
654
|
}
|
|
655
655
|
addEvent(event) {
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
656
|
+
// Mostrar eventos en todos los días que abarquen
|
|
657
|
+
// Normalizar fechas a solo año, mes y día para comparar correctamente
|
|
658
|
+
const normalize = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
|
659
|
+
const eventStart = normalize(event.start);
|
|
660
|
+
const eventEnd = event.end ? normalize(event.end) : eventStart;
|
|
661
|
+
for (let i = 0; i < this.weekDayCols.length; i++) {
|
|
662
|
+
const colDate = normalize(this.weekDayCols[i].date);
|
|
663
|
+
// Si el día está dentro del rango del evento (incluyendo el día de fin)
|
|
664
|
+
if (colDate >= eventStart && colDate <= eventEnd) {
|
|
665
|
+
if (event.allDay) {
|
|
666
|
+
this.weekDayCols[i].allDayEvents.push(event);
|
|
667
|
+
}
|
|
668
|
+
else {
|
|
669
|
+
const colIndex = this.findAvalailableColumn(event, i);
|
|
670
|
+
const eventCols = this.weekDayCols[i].eventCols;
|
|
671
|
+
if (colIndex === eventCols.length) {
|
|
672
|
+
eventCols.push({ events: [event] });
|
|
673
|
+
}
|
|
674
|
+
else {
|
|
675
|
+
eventCols[colIndex].events.push(event);
|
|
676
|
+
}
|
|
677
|
+
}
|
|
672
678
|
}
|
|
673
679
|
}
|
|
674
680
|
}
|
|
@@ -704,12 +710,18 @@ class WeekComponent {
|
|
|
704
710
|
onEventClick(event) {
|
|
705
711
|
this.eventClick.emit(event);
|
|
706
712
|
}
|
|
713
|
+
isToday(date) {
|
|
714
|
+
const today = new Date();
|
|
715
|
+
return date.getFullYear() === today.getFullYear() &&
|
|
716
|
+
date.getMonth() === today.getMonth() &&
|
|
717
|
+
date.getDate() === today.getDate();
|
|
718
|
+
}
|
|
707
719
|
}
|
|
708
720
|
WeekComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WeekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
709
|
-
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\">\n {{ weekDays[i].tag | translate | slice:0:3 }}\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;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{position:sticky;top:0;left:0;z-index:2;width:
|
|
721
|
+
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" }] });
|
|
710
722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WeekComponent, decorators: [{
|
|
711
723
|
type: Component,
|
|
712
|
-
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\">\n {{ weekDays[i].tag | translate | slice:0:3 }}\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;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{position:sticky;top:0;left:0;z-index:2;width:
|
|
724
|
+
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"] }]
|
|
713
725
|
}], ctorParameters: function () { return []; }, propDecorators: { startAt: [{
|
|
714
726
|
type: Input
|
|
715
727
|
}], events: [{
|
|
@@ -942,11 +954,12 @@ class SmartCalendarComponent {
|
|
|
942
954
|
this.weekStartDate.setDate(date.getDate() + diffToStart);
|
|
943
955
|
this.weekEndDate = new Date(this.weekStartDate);
|
|
944
956
|
this.weekEndDate.setDate(this.weekStartDate.getDate() + 6);
|
|
945
|
-
// Filter events for the week
|
|
957
|
+
// Filter events for the week, including multi-day events that overlap any part of the week
|
|
946
958
|
this.weekEvents = this.events.filter(event => {
|
|
947
959
|
const eventStart = new Date(event.start);
|
|
948
960
|
const eventEnd = event.end ? new Date(event.end) : eventStart;
|
|
949
|
-
|
|
961
|
+
// Un evento se incluye si cualquier parte de él cae dentro de la semana
|
|
962
|
+
return eventStart <= this.weekEndDate && eventEnd >= this.weekStartDate;
|
|
950
963
|
});
|
|
951
964
|
if (emitChange) {
|
|
952
965
|
const oldMonth = this.currentMonth;
|
|
@@ -972,10 +985,10 @@ class SmartCalendarComponent {
|
|
|
972
985
|
}
|
|
973
986
|
}
|
|
974
987
|
SmartCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
975
|
-
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-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-today\" (click)=\"goToToday()\">{{'today' | translate}}</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 </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\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 <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 (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\"
|
|
988
|
+
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-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-today\" (click)=\"goToToday()\">{{'today' | translate}}</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 </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\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 <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 (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\" [events]=\"weekEvents\"\n (eventClick)=\"onEventClick($event)\"></lib-week>\n\n <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\"\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-prev,.header .nav-controls .btn-next{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:50%;cursor:pointer;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-prev:hover,.header .nav-controls .btn-next:hover{background-color:#eee}.header .nav-controls .btn-today{display:flex;align-items:center;height:30px;padding:0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-today:hover{background-color:#eee}.header .view-selector{display:flex;align-items:center}.header .view-selector .btn-view{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #cccccc;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}.header .view-selector .btn-view:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;border-right:none}.header .view-selector .btn-view:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-left:none}.header .view-selector .btn-view:hover{background-color:#eee}.header .view-selector .btn-view svg{width:22px;height:22px}.header .view-selector .btn-view.active{background-color:#0000001a}.header .date-selector-container{position:relative}.header .date-selector-container .date-selector-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#fff;border-radius:4px;box-shadow:0 2px 24px #0000004d;z-index:3}.header .date-selector-container .date-selector-dropdown:before{content:\"\";position:absolute;top:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background-color:#fff;border-radius:2px}.header .btn-date-selector{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .btn-date-selector:hover{background-color:#eee}.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"], outputs: ["eventClick"] }, { kind: "component", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: ["selectedMonth"], outputs: ["monthSelected"] }, { kind: "component", type: DayComponent, selector: "lib-day", inputs: ["events", "date"], outputs: ["eventClick"] }, { kind: "component", type: WeekComponent, selector: "lib-week", inputs: ["startAt", "events", "startDate"], outputs: ["eventClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TranslateMonthPipe, name: "translateMonth" }] });
|
|
976
989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, decorators: [{
|
|
977
990
|
type: Component,
|
|
978
|
-
args: [{ selector: 'smart-calendar', template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\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-today\" (click)=\"goToToday()\">{{'today' | translate}}</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 </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\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 <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 (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\"
|
|
991
|
+
args: [{ selector: 'smart-calendar', template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\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-today\" (click)=\"goToToday()\">{{'today' | translate}}</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 </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\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 <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 (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\" [events]=\"weekEvents\"\n (eventClick)=\"onEventClick($event)\"></lib-week>\n\n <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\"\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-prev,.header .nav-controls .btn-next{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:50%;cursor:pointer;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-prev:hover,.header .nav-controls .btn-next:hover{background-color:#eee}.header .nav-controls .btn-today{display:flex;align-items:center;height:30px;padding:0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-today:hover{background-color:#eee}.header .view-selector{display:flex;align-items:center}.header .view-selector .btn-view{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #cccccc;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}.header .view-selector .btn-view:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;border-right:none}.header .view-selector .btn-view:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-left:none}.header .view-selector .btn-view:hover{background-color:#eee}.header .view-selector .btn-view svg{width:22px;height:22px}.header .view-selector .btn-view.active{background-color:#0000001a}.header .date-selector-container{position:relative}.header .date-selector-container .date-selector-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#fff;border-radius:4px;box-shadow:0 2px 24px #0000004d;z-index:3}.header .date-selector-container .date-selector-dropdown:before{content:\"\";position:absolute;top:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background-color:#fff;border-radius:2px}.header .btn-date-selector{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .btn-date-selector:hover{background-color:#eee}.view-container{flex:1 1 auto;overflow:hidden}\n"] }]
|
|
979
992
|
}], ctorParameters: function () { return []; }, propDecorators: { mode: [{
|
|
980
993
|
type: Input
|
|
981
994
|
}], startAt: [{
|