@smart-solutions-tech/smart-angular-calendar 0.0.15 → 0.0.17
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 +19 -13
- package/esm2020/lib/components/week/week.component.mjs +4 -2
- 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 +51 -42
- package/fesm2015/smart-solutions-tech-smart-angular-calendar.mjs.map +1 -1
- package/fesm2020/smart-solutions-tech-smart-angular-calendar.mjs +51 -42
- package/fesm2020/smart-solutions-tech-smart-angular-calendar.mjs.map +1 -1
- package/lib/components/smart-calendar/smart-calendar.component.d.ts +6 -2
- 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,42 @@ 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
|
+
}
|
|
131
|
+
ngOnInit() {
|
|
132
|
+
this.isDarkColor = isDarkColor(this.event.color || '#000000');
|
|
133
|
+
}
|
|
134
|
+
onEventClick(event) {
|
|
135
|
+
this.eventClick.emit(event);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
CalendarEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
139
|
+
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"] }] });
|
|
140
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarEventComponent, decorators: [{
|
|
141
|
+
type: Component,
|
|
142
|
+
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"] }]
|
|
143
|
+
}], ctorParameters: function () { return []; }, propDecorators: { event: [{
|
|
144
|
+
type: Input
|
|
145
|
+
}], eventClick: [{
|
|
146
|
+
type: Output
|
|
147
|
+
}] } });
|
|
148
|
+
|
|
147
149
|
class TranslatePipe {
|
|
148
150
|
constructor(translationService) {
|
|
149
151
|
this.translationService = translationService;
|
|
@@ -697,7 +699,9 @@ class WeekComponent {
|
|
|
697
699
|
}
|
|
698
700
|
ngOnChanges(changes) {
|
|
699
701
|
if (changes['events'] || changes['startDate']) {
|
|
700
|
-
|
|
702
|
+
setTimeout(() => {
|
|
703
|
+
this.initWeekDayCols();
|
|
704
|
+
});
|
|
701
705
|
}
|
|
702
706
|
}
|
|
703
707
|
onResizeMouseDown(event) {
|
|
@@ -733,7 +737,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
733
737
|
}] } });
|
|
734
738
|
|
|
735
739
|
class SmartCalendarComponent {
|
|
736
|
-
constructor() {
|
|
740
|
+
constructor(translationService) {
|
|
741
|
+
this.translationService = translationService;
|
|
737
742
|
this.mode = 'month';
|
|
738
743
|
this.startAt = 'sunday';
|
|
739
744
|
this.currentMonth = {
|
|
@@ -741,6 +746,7 @@ class SmartCalendarComponent {
|
|
|
741
746
|
month: new Date().getMonth() + 1
|
|
742
747
|
};
|
|
743
748
|
this.events = [];
|
|
749
|
+
this.lang = 'en';
|
|
744
750
|
this.monthChange = new EventEmitter();
|
|
745
751
|
this.dateChanged = new EventEmitter();
|
|
746
752
|
this.eventClick = new EventEmitter();
|
|
@@ -761,6 +767,7 @@ class SmartCalendarComponent {
|
|
|
761
767
|
}
|
|
762
768
|
}
|
|
763
769
|
ngOnInit() {
|
|
770
|
+
this.translationService.setLanguage(this.lang);
|
|
764
771
|
this.selectDate(new Date());
|
|
765
772
|
}
|
|
766
773
|
toggleDateSelector() {
|
|
@@ -984,12 +991,12 @@ class SmartCalendarComponent {
|
|
|
984
991
|
}
|
|
985
992
|
}
|
|
986
993
|
}
|
|
987
|
-
SmartCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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-
|
|
994
|
+
SmartCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
995
|
+
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" }, 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 (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-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"], 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" }] });
|
|
989
996
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, decorators: [{
|
|
990
997
|
type: Component,
|
|
991
|
-
args: [{ selector: 'smart-calendar', template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\n <button class=\"btn-
|
|
992
|
-
}], ctorParameters: function () { return []; }, propDecorators: { mode: [{
|
|
998
|
+
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 (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-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"] }]
|
|
999
|
+
}], ctorParameters: function () { return [{ type: TranslationService }]; }, propDecorators: { mode: [{
|
|
993
1000
|
type: Input
|
|
994
1001
|
}], startAt: [{
|
|
995
1002
|
type: Input
|
|
@@ -997,6 +1004,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
997
1004
|
type: Input
|
|
998
1005
|
}], events: [{
|
|
999
1006
|
type: Input
|
|
1007
|
+
}], lang: [{
|
|
1008
|
+
type: Input
|
|
1000
1009
|
}], monthChange: [{
|
|
1001
1010
|
type: Output
|
|
1002
1011
|
}], dateChanged: [{
|