@idea-ionic/agenda 6.8.1 → 6.9.1
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/README.md +2 -2
- package/css/global.scss +45 -57
- package/esm2020/src/agenda.component.mjs +138 -19
- package/esm2020/src/agenda.module.mjs +1 -1
- package/esm2020/src/dateFormatter.provider.mjs +13 -26
- package/fesm2015/idea-ionic-agenda.mjs +151 -43
- package/fesm2015/idea-ionic-agenda.mjs.map +1 -1
- package/fesm2020/idea-ionic-agenda.mjs +150 -43
- package/fesm2020/idea-ionic-agenda.mjs.map +1 -1
- package/package.json +1 -1
- package/src/agenda.component.d.ts +68 -21
- package/src/dateFormatter.provider.d.ts +7 -7
|
@@ -11,39 +11,26 @@ import { CalendarDateFormatter, CalendarView, CalendarModule, DateAdapter } from
|
|
|
11
11
|
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
|
|
12
12
|
import * as i3 from '@idea-ionic/common';
|
|
13
13
|
import { IDEASuggestionsComponent, IDEATranslationsModule, IDEAColorPickerModule, IDEACheckerModule, IDEAUserAvatarModule } from '@idea-ionic/common';
|
|
14
|
-
import { Subject } from 'rxjs';
|
|
15
|
-
import { isFuture, isToday, isSameDay } from 'date-fns';
|
|
14
|
+
import { Subject, fromEvent, finalize, takeUntil } from 'rxjs';
|
|
15
|
+
import { isFuture, isToday, isSameDay, endOfWeek, addMinutes, addDays } from 'date-fns';
|
|
16
16
|
import ColorParse from 'color-parse';
|
|
17
17
|
import { ExternalCalendarSources, Calendar, Suggestion, Check, ExternalCalendarInfo } from 'idea-toolbox';
|
|
18
18
|
import { Browser } from '@capacitor/browser';
|
|
19
19
|
import { environment } from '@env';
|
|
20
20
|
|
|
21
21
|
class CustomDateFormatter extends CalendarDateFormatter {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return formatDate(date, 'EEE', locale);
|
|
35
|
-
}
|
|
36
|
-
weekViewTitle({ date, locale }) {
|
|
37
|
-
return formatDate(date, 'MMMM yyyy', locale);
|
|
38
|
-
}
|
|
39
|
-
// DAY VIEW
|
|
40
|
-
dayViewHour({ date, locale }) {
|
|
41
|
-
return locale === 'it' ? formatDate(date, 'HH:mm', locale) : formatDate(date, 'h aa', locale);
|
|
42
|
-
}
|
|
43
|
-
dayViewTitle({ date, locale }) {
|
|
44
|
-
return locale === 'it'
|
|
45
|
-
? formatDate(date, 'EEEE, dd MMM yyyy', locale)
|
|
46
|
-
: formatDate(date, 'EEEE, MMM dd, yyyy', locale);
|
|
22
|
+
constructor() {
|
|
23
|
+
super(...arguments);
|
|
24
|
+
// MONTH VIEW
|
|
25
|
+
this.monthViewColumnHeader = ({ date, locale }) => formatDate(date, 'EEE', locale);
|
|
26
|
+
this.monthViewTitle = ({ date, locale }) => formatDate(date, 'MMMM y', locale);
|
|
27
|
+
// WEEK VIEW
|
|
28
|
+
this.weekViewHour = ({ date, locale }) => locale === 'it' ? formatDate(date, 'HH:mm', locale) : formatDate(date, 'h aa', locale);
|
|
29
|
+
this.weekViewColumnHeader = ({ date, locale }) => formatDate(date, 'EEE', locale);
|
|
30
|
+
this.weekViewTitle = ({ date, locale }) => formatDate(date, 'MMMM yyyy', locale);
|
|
31
|
+
// DAY VIEW
|
|
32
|
+
this.dayViewHour = ({ date, locale }) => locale === 'it' ? formatDate(date, 'HH:mm', locale) : formatDate(date, 'h aa', locale);
|
|
33
|
+
this.dayViewTitle = ({ date, locale }) => locale === 'it' ? formatDate(date, 'EEEE, dd MMM yyyy', locale) : formatDate(date, 'EEEE, MMM dd, yyyy', locale);
|
|
47
34
|
}
|
|
48
35
|
}
|
|
49
36
|
CustomDateFormatter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CustomDateFormatter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
@@ -53,9 +40,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
53
40
|
}] });
|
|
54
41
|
|
|
55
42
|
class IDEAAgendaComponent {
|
|
56
|
-
constructor(
|
|
43
|
+
constructor(cdr, platform, t) {
|
|
44
|
+
this.cdr = cdr;
|
|
57
45
|
this.platform = platform;
|
|
58
|
-
this.tc = tc;
|
|
59
46
|
this.t = t;
|
|
60
47
|
/**
|
|
61
48
|
* The events to display in the calendar.
|
|
@@ -85,10 +72,23 @@ class IDEAAgendaComponent {
|
|
|
85
72
|
* The view mode for the agenda.
|
|
86
73
|
*/
|
|
87
74
|
this.view = CalendarView.Week;
|
|
75
|
+
/**
|
|
76
|
+
* The allowed view mode for the agenda.
|
|
77
|
+
*/
|
|
78
|
+
this.allowedViews = [CalendarView.Day, CalendarView.Week, CalendarView.Month];
|
|
88
79
|
/**
|
|
89
80
|
* Whether to block any day/slot in the past.
|
|
90
81
|
*/
|
|
91
82
|
this.onlyFuture = false;
|
|
83
|
+
/**
|
|
84
|
+
* The template for new events created by drag&drop.
|
|
85
|
+
*/
|
|
86
|
+
this.newEventTemplate = { title: 'New', start: null, meta: {} };
|
|
87
|
+
/**
|
|
88
|
+
* Whether (and how) to allow the creation of events by drag&drop.
|
|
89
|
+
* If enabled, on mobile it requires the `parentContent` to be set for a correct execution.
|
|
90
|
+
*/
|
|
91
|
+
this.allowDragToCreate = DragToCreateOptions.DISABLED;
|
|
92
92
|
/**
|
|
93
93
|
* Trigger when an event is selected.
|
|
94
94
|
*/
|
|
@@ -101,6 +101,10 @@ class IDEAAgendaComponent {
|
|
|
101
101
|
* Trigger when a time slot is selected.
|
|
102
102
|
*/
|
|
103
103
|
this.selectSlot = new EventEmitter();
|
|
104
|
+
/**
|
|
105
|
+
* Trigger when a new event is added by drag and drop.
|
|
106
|
+
*/
|
|
107
|
+
this.newEventByDrag = new EventEmitter();
|
|
104
108
|
/**
|
|
105
109
|
* Trigger when an event changed date (drag&drop or resize).
|
|
106
110
|
*/
|
|
@@ -109,6 +113,14 @@ class IDEAAgendaComponent {
|
|
|
109
113
|
* Trigger when the view date of reference changed (because we moved inside the calendar).
|
|
110
114
|
*/
|
|
111
115
|
this.changeDate = new EventEmitter();
|
|
116
|
+
/**
|
|
117
|
+
* Trigger before the rendering of the week or day view.
|
|
118
|
+
*/
|
|
119
|
+
this.beforeWeekOrDayViewRenderEmitter = new EventEmitter();
|
|
120
|
+
/**
|
|
121
|
+
* Trigger before the rendering of the month view.
|
|
122
|
+
*/
|
|
123
|
+
this.beforeMonthViewRenderEmitter = new EventEmitter();
|
|
112
124
|
/**
|
|
113
125
|
* Helper to use the enum in the UX.
|
|
114
126
|
*/
|
|
@@ -121,9 +133,6 @@ class IDEAAgendaComponent {
|
|
|
121
133
|
* A controller to refresh the current view.
|
|
122
134
|
*/
|
|
123
135
|
this.refresh = new Subject();
|
|
124
|
-
/**
|
|
125
|
-
* Helper to use the enum in the UI.
|
|
126
|
-
*/
|
|
127
136
|
this.Attendance = EventAttendance;
|
|
128
137
|
this.darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
129
138
|
}
|
|
@@ -132,23 +141,38 @@ class IDEAAgendaComponent {
|
|
|
132
141
|
// in case of Italian locale the starting day for the week is monday (1), otherwise sunday (0)
|
|
133
142
|
this.weekStartsOn = this.locale === 'it' ? 1 : 0;
|
|
134
143
|
}
|
|
144
|
+
isMobile() {
|
|
145
|
+
return this.platform.is('mobile');
|
|
146
|
+
}
|
|
135
147
|
/**
|
|
136
148
|
* Run some checks before the month view is rendered (e.g. disable invalid days).
|
|
137
149
|
*/
|
|
138
|
-
beforeMonthViewRender(
|
|
150
|
+
beforeMonthViewRender(event) {
|
|
151
|
+
this.beforeMonthViewRenderEmitter.emit(event);
|
|
152
|
+
const { body } = event;
|
|
139
153
|
body.forEach(day => {
|
|
140
|
-
if (!this.dateIsValid(day.date
|
|
154
|
+
if (!this.dateIsValid(day.date))
|
|
141
155
|
day.cssClass = 'cal-disabled';
|
|
142
156
|
});
|
|
143
157
|
}
|
|
144
158
|
/**
|
|
145
159
|
* Run some checks before the week/day view is rendered (e.g. disable invalid days).
|
|
146
160
|
*/
|
|
147
|
-
beforeWeekOrDayViewRender(
|
|
148
|
-
|
|
149
|
-
|
|
161
|
+
beforeWeekOrDayViewRender(event) {
|
|
162
|
+
this.beforeWeekOrDayViewRenderEmitter.emit(event);
|
|
163
|
+
const { header, hourColumns } = event;
|
|
164
|
+
header.forEach(day => {
|
|
165
|
+
if (!this.dateIsValid(day.date))
|
|
150
166
|
day.cssClass = 'cal-disabled';
|
|
151
167
|
});
|
|
168
|
+
hourColumns.forEach(hourCol => {
|
|
169
|
+
hourCol.hours.forEach(hour => {
|
|
170
|
+
hour.segments.forEach(segment => {
|
|
171
|
+
if (!this.dateIsValid(segment.date))
|
|
172
|
+
segment.cssClass = 'cal-disabled';
|
|
173
|
+
});
|
|
174
|
+
});
|
|
175
|
+
});
|
|
152
176
|
}
|
|
153
177
|
/**
|
|
154
178
|
* Check whether a date is valid based on the configured parameters.
|
|
@@ -203,7 +227,9 @@ class IDEAAgendaComponent {
|
|
|
203
227
|
* Given a color, it returns an opaque version of it.
|
|
204
228
|
*/
|
|
205
229
|
getAlternateColor(color, amount, opacity) {
|
|
206
|
-
|
|
230
|
+
if (!color?.trim())
|
|
231
|
+
return undefined;
|
|
232
|
+
const alt = ColorParse(color.trim());
|
|
207
233
|
const r = Math.max(Math.min(255, Number(alt.values[0]) + amount), 0);
|
|
208
234
|
const g = Math.max(Math.min(255, Number(alt.values[1]) + amount), 0);
|
|
209
235
|
const b = Math.max(Math.min(255, Number(alt.values[2]) + amount), 0);
|
|
@@ -232,13 +258,67 @@ class IDEAAgendaComponent {
|
|
|
232
258
|
getPreviewDescription(description) {
|
|
233
259
|
return description && description.length > 100 ? description.slice(0, 100).concat('...') : description;
|
|
234
260
|
}
|
|
261
|
+
/**
|
|
262
|
+
* Handle the drag&drop to create a new event.
|
|
263
|
+
*/
|
|
264
|
+
startDragToCreate(event, segmentDate, segmentElement) {
|
|
265
|
+
if (!this.allowDragToCreate)
|
|
266
|
+
return;
|
|
267
|
+
if (this.parentContent)
|
|
268
|
+
this.parentContent.scrollY = false;
|
|
269
|
+
const eventByDragAndDrop = { ...this.newEventTemplate, start: segmentDate };
|
|
270
|
+
this.events = [...this.events, eventByDragAndDrop];
|
|
271
|
+
const segmentPosition = segmentElement.getBoundingClientRect();
|
|
272
|
+
const endOfView = endOfWeek(this.viewDate, { weekStartsOn: this.weekStartsOn });
|
|
273
|
+
const whileDragging = (draggingEvent) => {
|
|
274
|
+
const { clientY, clientX } = draggingEvent.type === 'touchmove' ? draggingEvent.touches[0] : draggingEvent;
|
|
275
|
+
const minutesDiff = ceilToNearest(clientY - segmentPosition.top, 30);
|
|
276
|
+
const daysDiff = floorToNearest(clientX - segmentPosition.left, segmentPosition.width) / segmentPosition.width;
|
|
277
|
+
let newEnd;
|
|
278
|
+
if (this.allowDragToCreate === DragToCreateOptions.ONLY_SAME_DAY)
|
|
279
|
+
newEnd = addMinutes(segmentDate, minutesDiff);
|
|
280
|
+
else
|
|
281
|
+
newEnd = addDays(addMinutes(segmentDate, minutesDiff), daysDiff);
|
|
282
|
+
if (newEnd > segmentDate && newEnd < endOfView)
|
|
283
|
+
eventByDragAndDrop.end = newEnd;
|
|
284
|
+
refreshView();
|
|
285
|
+
};
|
|
286
|
+
const endOfDrag = () => {
|
|
287
|
+
if (this.parentContent)
|
|
288
|
+
this.parentContent.scrollY = true;
|
|
289
|
+
eventByDragAndDrop.end = this.getFixedEndDateWithMinimumSegmentDuration(eventByDragAndDrop);
|
|
290
|
+
refreshView();
|
|
291
|
+
this.newEventByDrag.emit(eventByDragAndDrop);
|
|
292
|
+
};
|
|
293
|
+
const refreshView = () => {
|
|
294
|
+
this.events = [...this.events];
|
|
295
|
+
this.cdr.detectChanges();
|
|
296
|
+
};
|
|
297
|
+
if (event.type === 'touchstart') {
|
|
298
|
+
fromEvent(document, 'touchmove')
|
|
299
|
+
.pipe(finalize(endOfDrag), takeUntil(fromEvent(document, 'touchend')))
|
|
300
|
+
.subscribe(whileDragging);
|
|
301
|
+
}
|
|
302
|
+
else {
|
|
303
|
+
fromEvent(document, 'mousemove')
|
|
304
|
+
.pipe(finalize(endOfDrag), takeUntil(fromEvent(document, 'mouseup')))
|
|
305
|
+
.subscribe(whileDragging);
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
getFixedEndDateWithMinimumSegmentDuration(agendaBooking) {
|
|
309
|
+
const fixedEnd = new Date(agendaBooking.end ?? agendaBooking.start);
|
|
310
|
+
const segmentSizeInMinutes = 60 / this.hourSegments;
|
|
311
|
+
if (fixedEnd.getTime() <= agendaBooking.start.getTime() + segmentSizeInMinutes * 60 * 1000)
|
|
312
|
+
fixedEnd.setMinutes(agendaBooking.start.getMinutes() + segmentSizeInMinutes);
|
|
313
|
+
return fixedEnd;
|
|
314
|
+
}
|
|
235
315
|
}
|
|
236
|
-
IDEAAgendaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IDEAAgendaComponent, deps: [{ token:
|
|
237
|
-
IDEAAgendaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: IDEAAgendaComponent, selector: "idea-agenda", inputs: { events: "events", excludeDays: "excludeDays", dayStartHour: "dayStartHour", dayEndHour: "dayEndHour", hourSegments: "hourSegments", activeDayIsOpen: "activeDayIsOpen", view: "view", onlyFuture: "onlyFuture" }, outputs: { selectEvent: "selectEvent", selectDay: "selectDay", selectSlot: "selectSlot", changeEvent: "changeEvent", changeDate: "changeDate" }, ngImport: i0, template: "<div class=\"agenda\">\n <!-- TOOLBAR -->\n <ion-row class=\"ion-align-items-center\">\n <ion-col\n class=\"ion-align-self-center ion-text-right\"\n [size]=\"5\"\n [sizeSm]=\"3\"\n [pushSm]=\"5\"\n [sizeLg]=\"2\"\n [pushLg]=\"8\"\n >\n <ion-item lines=\"none\" class=\"calendarViewSelector\">\n <ion-select\n interface=\"popover\"\n [value]=\"view\"\n (ionChange)=\"$event?.detail ? setView($event.detail.value) : null\"\n >\n <ion-select-option [value]=\"CalendarView.Month\">{{ 'IDEA_AGENDA.MONTH' | translate }}</ion-select-option>\n <ion-select-option [value]=\"CalendarView.Week\">{{ 'IDEA_AGENDA.WEEK' | translate }}</ion-select-option>\n <ion-select-option [value]=\"CalendarView.Day\">{{ 'IDEA_AGENDA.DAY' | translate }}</ion-select-option>\n </ion-select>\n </ion-item>\n </ion-col>\n <ion-col\n class=\"ion-align-self-center ion-text-right\"\n [size]=\"7\"\n [sizeSm]=\"4\"\n [pushSm]=\"5\"\n [sizeLg]=\"2\"\n [pushLg]=\"8\"\n >\n <ion-button\n fill=\"clear\"\n color=\"dark\"\n size=\"small\"\n mwlCalendarPreviousView\n [view]=\"view\"\n [(viewDate)]=\"viewDate\"\n (viewDateChange)=\"viewDateChanged($event)\"\n >\n <ion-icon name=\"chevron-back-outline\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n <ion-button\n fill=\"clear\"\n color=\"dark\"\n size=\"small\"\n mwlCalendarToday\n [(viewDate)]=\"viewDate\"\n (viewDateChange)=\"viewDateChanged($event)\"\n >\n <ion-icon name=\"today-outline\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n <ion-button\n fill=\"clear\"\n color=\"dark\"\n size=\"small\"\n mwlCalendarNextView\n [view]=\"view\"\n [(viewDate)]=\"viewDate\"\n (viewDateChange)=\"viewDateChanged($event)\"\n >\n <ion-icon name=\"chevron-forward-outline\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n <ion-col class=\"ion-align-self-center\" [size]=\"12\" [sizeSm]=\"5\" [pullSm]=\"7\" [sizeLg]=\"8\" [pullLg]=\"4\">\n <h2>{{ viewDate | calendarDate: view + 'ViewTitle':t.getCurrentLang() }}</h2>\n </ion-col>\n </ion-row>\n <!-- TEMPLATES (touch only what's necessary and leave everything else as it is) -->\n <ng-template #eventTitleTemplate let-event=\"event\" let-view=\"view\">\n <span\n class=\"cal-event-title\"\n [class.noWrap]=\"event.allDay\"\n [attr.aria-hidden]=\"{} | calendarA11y: 'hideEventTitle'\"\n >\n {{ event.title | calendarEventTitle: view:event }}\n <p *ngIf=\"!event.allDay\">{{ getPreviewDescription(event.description) }}</p>\n </span>\n </ng-template>\n <ng-template\n #eventTemplate\n let-weekEvent=\"weekEvent\"\n let-tooltipPlacement=\"tooltipPlacement\"\n let-eventClicked=\"eventClicked\"\n let-tooltipTemplate=\"tooltipTemplate\"\n let-tooltipAppendToBody=\"tooltipAppendToBody\"\n let-tooltipDisabled=\"tooltipDisabled\"\n let-tooltipDelay=\"tooltipDelay\"\n let-column=\"column\"\n let-daysInWeek=\"daysInWeek\"\n >\n <div\n class=\"cal-event\"\n [class.external]=\"weekEvent.event.external\"\n [class.needsAction]=\"Attendance.NEEDS_ACTION === weekEvent.event.attendance\"\n [class.declined]=\"Attendance.DECLINED === weekEvent.event.attendance\"\n [class.tentative]=\"Attendance.TENTATIVE === weekEvent.event.attendance\"\n [style.border-left-color]=\"weekEvent.event.color.primary\"\n [style.color]=\"getAlternateColor(weekEvent.event.color.primary, darkMode ? 80 : -40)\"\n [style.background-color]=\"getAlternateColor(weekEvent.event.color.primary, darkMode ? 60 : 80, 0.2)\"\n [mwlCalendarTooltip]=\"!tooltipDisabled && !platform.is('mobile') ? getTooltipContent(weekEvent.event) : ''\"\n [tooltipPlacement]=\"tooltipPlacement\"\n [tooltipEvent]=\"weekEvent.tempEvent || weekEvent.event\"\n [tooltipTemplate]=\"tooltipTemplate\"\n [tooltipAppendToBody]=\"tooltipAppendToBody\"\n [tooltipDelay]=\"tooltipDelay\"\n (mwlClick)=\"eventClicked.emit({ sourceEvent: $event })\"\n (mwlKeydownEnter)=\"eventClicked.emit({ sourceEvent: $event })\"\n tabindex=\"0\"\n role=\"application\"\n [attr.aria-label]=\"\n { event: weekEvent.tempEvent || weekEvent.event, locale: locale } | calendarA11y: 'eventDescription'\n \"\n >\n <mwl-calendar-event-actions [event]=\"weekEvent.tempEvent || weekEvent.event\"> </mwl-calendar-event-actions>\n &ngsp;\n <mwl-calendar-event-title\n [event]=\"weekEvent.tempEvent || weekEvent.event\"\n [customTemplate]=\"eventTitleTemplate\"\n [view]=\"daysInWeek === 1 ? 'day' : 'week'\"\n >\n </mwl-calendar-event-title>\n <div class=\"eventGadgets\" *ngIf=\"!weekEvent.event.allDay\">\n <ion-icon *ngFor=\"let icon of weekEvent.event.icons\" [name]=\"icon.name\" [title]=\"icon.title\"></ion-icon>\n <idea-user-avatar\n size=\"mini\"\n *ngFor=\"let avatar of weekEvent.event.avatars\"\n [src]=\"avatar.url\"\n [name]=\"avatar.title\"\n ></idea-user-avatar>\n </div>\n </div>\n </ng-template>\n <!-- VIEWS -->\n <div [ngSwitch]=\"view\">\n <mwl-calendar-month-view\n *ngSwitchCase=\"CalendarView.Month\"\n [viewDate]=\"viewDate\"\n [events]=\"events\"\n [refresh]=\"refresh\"\n [activeDayIsOpen]=\"activeDayIsOpen\"\n [locale]=\"locale\"\n [excludeDays]=\"excludeDays\"\n [weekStartsOn]=\"weekStartsOn\"\n [eventTitleTemplate]=\"eventTitleTemplate\"\n (eventClicked)=\"selectEvent.emit($event.event)\"\n (eventTimesChanged)=\"eventTimesChanged($event)\"\n (dayClicked)=\"changeDay($event.day)\"\n (beforeViewRender)=\"beforeMonthViewRender($event)\"\n >\n </mwl-calendar-month-view>\n <mwl-calendar-week-view\n *ngSwitchCase=\"CalendarView.Week\"\n [viewDate]=\"viewDate\"\n [events]=\"events\"\n [refresh]=\"refresh\"\n [locale]=\"locale\"\n [excludeDays]=\"excludeDays\"\n [weekStartsOn]=\"weekStartsOn\"\n [dayStartHour]=\"dayStartHour\"\n [dayEndHour]=\"dayEndHour\"\n [hourSegments]=\"hourSegments\"\n [eventTemplate]=\"eventTemplate\"\n (eventClicked)=\"selectEvent.emit($event.event)\"\n (eventTimesChanged)=\"eventTimesChanged($event)\"\n (dayHeaderClicked)=\"dateIsValid($event.day.date) ? selectDay.emit($event.day.date) : null\"\n (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n >\n </mwl-calendar-week-view>\n <mwl-calendar-day-view\n *ngSwitchCase=\"CalendarView.Day\"\n [viewDate]=\"viewDate\"\n [events]=\"events\"\n [refresh]=\"refresh\"\n [locale]=\"locale\"\n [dayStartHour]=\"dayStartHour\"\n [dayEndHour]=\"dayEndHour\"\n [hourSegments]=\"hourSegments\"\n [eventTemplate]=\"eventTemplate\"\n (eventClicked)=\"selectEvent.emit($event.event)\"\n (eventTimesChanged)=\"eventTimesChanged($event)\"\n (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n >\n </mwl-calendar-day-view>\n </div>\n</div>\n", styles: [".agenda{margin-top:15px}.agenda h2{margin:6px 10px;font-size:1.2em}.agenda .calendarViewSelector{--ion-item-background: transparent}.agenda .calendarViewSelector ion-select{max-width:100%;width:100%;padding-left:0;font-weight:500}.agenda .eventGadgets{margin-top:4px;margin-left:5px;text-align:right}.agenda .eventGadgets idea-user-avatar{display:block;float:left;margin:2px 1px}.agenda .eventGadgets ion-icon{padding-right:2px;opacity:.7;font-size:1.15em}@media only screen and (max-width: 575px){.agenda h2{margin:0 8px 12px;text-align:center}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSelect, selector: "ion-select", inputs: ["cancelText", "compareWith", "disabled", "interface", "interfaceOptions", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "value"] }, { kind: "component", type: i2.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "directive", type: i2.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "component", type: i3.IDEAUserAvatarComponent, selector: "idea-user-avatar", inputs: ["src", "name", "size", "color"] }, { kind: "component", type: i4.ɵCalendarEventActionsComponent, selector: "mwl-calendar-event-actions", inputs: ["event", "customTemplate"] }, { kind: "component", type: i4.ɵCalendarEventTitleComponent, selector: "mwl-calendar-event-title", inputs: ["event", "customTemplate", "view"] }, { kind: "directive", type: i4.ɵCalendarTooltipDirective, selector: "[mwlCalendarTooltip]", inputs: ["mwlCalendarTooltip", "tooltipPlacement", "tooltipTemplate", "tooltipEvent", "tooltipAppendToBody", "tooltipDelay"] }, { kind: "directive", type: i4.ɵCalendarPreviousViewDirective, selector: "[mwlCalendarPreviousView]", inputs: ["view", "viewDate", "excludeDays", "daysInWeek"], outputs: ["viewDateChange"] }, { kind: "directive", type: i4.ɵCalendarNextViewDirective, selector: "[mwlCalendarNextView]", inputs: ["view", "viewDate", "excludeDays", "daysInWeek"], outputs: ["viewDateChange"] }, { kind: "directive", type: i4.ɵCalendarTodayDirective, selector: "[mwlCalendarToday]", inputs: ["viewDate"], outputs: ["viewDateChange"] }, { kind: "directive", type: i4.ɵClickDirective, selector: "[mwlClick]", inputs: ["clickListenerDisabled"], outputs: ["mwlClick"] }, { kind: "directive", type: i4.ɵKeydownEnterDirective, selector: "[mwlKeydownEnter]", outputs: ["mwlKeydownEnter"] }, { kind: "component", type: i4.CalendarMonthViewComponent, selector: "mwl-calendar-month-view", inputs: ["viewDate", "events", "excludeDays", "activeDayIsOpen", "activeDay", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "cellTemplate", "openDayEventsTemplate", "eventTitleTemplate", "eventActionsTemplate", "weekendDays"], outputs: ["beforeViewRender", "dayClicked", "eventClicked", "columnHeaderClicked", "eventTimesChanged"] }, { kind: "component", type: i4.CalendarWeekViewComponent, selector: "mwl-calendar-week-view", inputs: ["viewDate", "events", "excludeDays", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "eventTemplate", "eventTitleTemplate", "eventActionsTemplate", "precision", "weekendDays", "snapDraggedEvents", "hourSegments", "hourDuration", "hourSegmentHeight", "minimumEventHeight", "dayStartHour", "dayStartMinute", "dayEndHour", "dayEndMinute", "hourSegmentTemplate", "eventSnapSize", "allDayEventsLabelTemplate", "daysInWeek", "currentTimeMarkerTemplate", "validateEventTimesChanged", "resizeCursors"], outputs: ["dayHeaderClicked", "eventClicked", "eventTimesChanged", "beforeViewRender", "hourSegmentClicked"] }, { kind: "component", type: i4.CalendarDayViewComponent, selector: "mwl-calendar-day-view", inputs: ["viewDate", "events", "hourSegments", "hourSegmentHeight", "hourDuration", "minimumEventHeight", "dayStartHour", "dayStartMinute", "dayEndHour", "dayEndMinute", "refresh", "locale", "eventSnapSize", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "hourSegmentTemplate", "eventTemplate", "eventTitleTemplate", "eventActionsTemplate", "snapDraggedEvents", "allDayEventsLabelTemplate", "currentTimeMarkerTemplate", "validateEventTimesChanged", "resizeCursors"], outputs: ["eventClicked", "hourSegmentClicked", "eventTimesChanged", "beforeViewRender"] }, { kind: "pipe", type: i3.IDEATranslatePipe, name: "translate" }, { kind: "pipe", type: i4.ɵCalendarDatePipe, name: "calendarDate" }, { kind: "pipe", type: i4.ɵCalendarEventTitlePipe, name: "calendarEventTitle" }, { kind: "pipe", type: i4.ɵCalendarA11yPipe, name: "calendarA11y" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
316
|
+
IDEAAgendaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IDEAAgendaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.Platform }, { token: i3.IDEATranslationsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
317
|
+
IDEAAgendaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: IDEAAgendaComponent, selector: "idea-agenda", inputs: { events: "events", excludeDays: "excludeDays", dayStartHour: "dayStartHour", dayEndHour: "dayEndHour", hourSegments: "hourSegments", activeDayIsOpen: "activeDayIsOpen", view: "view", allowedViews: "allowedViews", onlyFuture: "onlyFuture", titleNotes: "titleNotes", newEventTemplate: "newEventTemplate", allowDragToCreate: "allowDragToCreate", parentContent: "parentContent" }, outputs: { selectEvent: "selectEvent", selectDay: "selectDay", selectSlot: "selectSlot", newEventByDrag: "newEventByDrag", changeEvent: "changeEvent", changeDate: "changeDate", beforeWeekOrDayViewRenderEmitter: "beforeWeekOrDayViewRenderEmitter", beforeMonthViewRenderEmitter: "beforeMonthViewRenderEmitter" }, ngImport: i0, template: "<div class=\"agenda\">\n <!-- TOOLBAR -->\n <ion-row class=\"ion-align-items-center\">\n <ion-col\n class=\"ion-align-self-center ion-text-right\"\n [size]=\"5\"\n [sizeSm]=\"3\"\n [pushSm]=\"5\"\n [sizeLg]=\"2\"\n [pushLg]=\"8\"\n >\n <ion-item lines=\"none\" class=\"calendarViewSelector\" *ngIf=\"allowedViews.length > 1\">\n <ion-select\n interface=\"popover\"\n [value]=\"view\"\n (ionChange)=\"$event?.detail ? setView($event.detail.value) : null\"\n >\n <ion-select-option *ngFor=\"let view of allowedViews\" [value]=\"view\">\n {{ 'IDEA_AGENDA.' + view | uppercase | translate }}\n </ion-select-option>\n </ion-select>\n </ion-item>\n </ion-col>\n <ion-col\n class=\"ion-align-self-center ion-text-right\"\n [size]=\"7\"\n [sizeSm]=\"4\"\n [pushSm]=\"5\"\n [sizeLg]=\"2\"\n [pushLg]=\"8\"\n >\n <ion-button\n fill=\"clear\"\n color=\"dark\"\n size=\"small\"\n mwlCalendarPreviousView\n [view]=\"view\"\n [(viewDate)]=\"viewDate\"\n (viewDateChange)=\"viewDateChanged($event)\"\n >\n <ion-icon name=\"chevron-back-outline\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n <ion-button\n fill=\"clear\"\n color=\"dark\"\n size=\"small\"\n mwlCalendarToday\n [(viewDate)]=\"viewDate\"\n (viewDateChange)=\"viewDateChanged($event)\"\n >\n <ion-icon name=\"today-outline\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n <ion-button\n fill=\"clear\"\n color=\"dark\"\n size=\"small\"\n mwlCalendarNextView\n [view]=\"view\"\n [(viewDate)]=\"viewDate\"\n (viewDateChange)=\"viewDateChanged($event)\"\n >\n <ion-icon name=\"chevron-forward-outline\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n <ion-col class=\"ion-align-self-center titleCol\" [size]=\"12\" [sizeSm]=\"5\" [pullSm]=\"7\" [sizeLg]=\"8\" [pullLg]=\"4\">\n <h2>{{ viewDate | calendarDate : view + 'ViewTitle' : locale }}</h2>\n <p *ngIf=\"titleNotes\">{{ titleNotes }}</p>\n </ion-col>\n </ion-row>\n <!-- TEMPLATES (touch only what's necessary and leave everything else as it is) -->\n <ng-template #eventTitleTemplate let-event=\"event\" let-view=\"view\">\n <span\n class=\"cal-event-title\"\n [class.noWrap]=\"event.allDay\"\n [attr.aria-hidden]=\"{} | calendarA11y : 'hideEventTitle'\"\n >\n {{ event.title | calendarEventTitle : view : event }}\n <p *ngIf=\"!event.allDay\">{{ getPreviewDescription(event.description) }}</p>\n </span>\n </ng-template>\n <ng-template\n #eventTemplate\n let-weekEvent=\"weekEvent\"\n let-tooltipPlacement=\"tooltipPlacement\"\n let-eventClicked=\"eventClicked\"\n let-tooltipTemplate=\"tooltipTemplate\"\n let-tooltipAppendToBody=\"tooltipAppendToBody\"\n let-tooltipDisabled=\"tooltipDisabled\"\n let-tooltipDelay=\"tooltipDelay\"\n let-column=\"column\"\n let-daysInWeek=\"daysInWeek\"\n >\n <div\n class=\"cal-event\"\n [class.external]=\"weekEvent.event.external\"\n [class.needsAction]=\"Attendance.NEEDS_ACTION === weekEvent.event.attendance\"\n [class.declined]=\"Attendance.DECLINED === weekEvent.event.attendance\"\n [class.tentative]=\"Attendance.TENTATIVE === weekEvent.event.attendance\"\n [style.border-left-color]=\"weekEvent.event.color?.primary\"\n [style.color]=\"getAlternateColor(weekEvent.event.color?.primary, darkMode ? 80 : -40)\"\n [style.background-color]=\"getAlternateColor(weekEvent.event.color?.primary, darkMode ? 60 : 80, 0.2)\"\n [mwlCalendarTooltip]=\"!tooltipDisabled && !isMobile() ? getTooltipContent(weekEvent.event) : ''\"\n [tooltipPlacement]=\"tooltipPlacement\"\n [tooltipEvent]=\"weekEvent.tempEvent || weekEvent.event\"\n [tooltipTemplate]=\"tooltipTemplate\"\n [tooltipAppendToBody]=\"tooltipAppendToBody\"\n [tooltipDelay]=\"tooltipDelay\"\n (mwlClick)=\"eventClicked.emit({ sourceEvent: $event })\"\n (mwlKeydownEnter)=\"eventClicked.emit({ sourceEvent: $event })\"\n tabindex=\"0\"\n role=\"application\"\n [attr.aria-label]=\"\n { event: weekEvent.tempEvent || weekEvent.event, locale: locale } | calendarA11y : 'eventDescription'\n \"\n >\n <mwl-calendar-event-actions [event]=\"weekEvent.tempEvent || weekEvent.event\"></mwl-calendar-event-actions>\n &ngsp;\n <mwl-calendar-event-title\n [event]=\"weekEvent.tempEvent || weekEvent.event\"\n [customTemplate]=\"eventTitleTemplate\"\n [view]=\"daysInWeek === 1 ? 'day' : 'week'\"\n >\n </mwl-calendar-event-title>\n <div class=\"eventGadgets\" *ngIf=\"!weekEvent.event.allDay\">\n <ion-icon *ngFor=\"let icon of weekEvent.event.icons\" [name]=\"icon.name\" [title]=\"icon.title\"></ion-icon>\n <idea-user-avatar\n size=\"mini\"\n *ngFor=\"let avatar of weekEvent.event.avatars\"\n [src]=\"avatar.url\"\n [name]=\"avatar.title\"\n ></idea-user-avatar>\n </div>\n </div>\n </ng-template>\n <ng-template\n #hourSegmentTemplate\n let-segment=\"segment\"\n let-locale=\"locale\"\n let-segmentHeight=\"segmentHeight\"\n let-isTimeLabel=\"isTimeLabel\"\n >\n <div\n #segmentElement\n class=\"cal-hour-segment\"\n [style.height.px]=\"segmentHeight\"\n [class.cal-hour-start]=\"segment.isStart\"\n [class.cal-after-hour-start]=\"!segment.isStart\"\n [ngClass]=\"segment.cssClass\"\n (mousedown)=\"allowDragToCreate ? startDragToCreate($event, segment.date, segmentElement) : null\"\n (touchstart)=\"allowDragToCreate ? startDragToCreate($event, segment.date, segmentElement) : null\"\n >\n <div class=\"cal-time\" *ngIf=\"isTimeLabel\">\n {{ segment.date | calendarDate : 'weekViewHour' : locale }}\n </div>\n </div>\n </ng-template>\n <!-- VIEWS -->\n <div [ngSwitch]=\"view\">\n <mwl-calendar-month-view\n *ngSwitchCase=\"CalendarView.Month\"\n [viewDate]=\"viewDate\"\n [events]=\"events\"\n [refresh]=\"refresh\"\n [activeDayIsOpen]=\"activeDayIsOpen\"\n [locale]=\"locale\"\n [excludeDays]=\"excludeDays\"\n [weekStartsOn]=\"weekStartsOn\"\n [eventTitleTemplate]=\"eventTitleTemplate\"\n (eventClicked)=\"selectEvent.emit($event.event)\"\n (eventTimesChanged)=\"eventTimesChanged($event)\"\n (dayClicked)=\"changeDay($event.day)\"\n (beforeViewRender)=\"beforeMonthViewRender($event)\"\n >\n </mwl-calendar-month-view>\n <mwl-calendar-week-view\n *ngSwitchCase=\"CalendarView.Week\"\n [viewDate]=\"viewDate\"\n [events]=\"events\"\n [refresh]=\"refresh\"\n [locale]=\"locale\"\n [excludeDays]=\"excludeDays\"\n [weekStartsOn]=\"weekStartsOn\"\n [dayStartHour]=\"dayStartHour\"\n [dayEndHour]=\"dayEndHour\"\n [hourSegments]=\"hourSegments\"\n [eventTemplate]=\"eventTemplate\"\n [hourSegmentTemplate]=\"hourSegmentTemplate\"\n (eventClicked)=\"selectEvent.emit($event.event)\"\n (eventTimesChanged)=\"eventTimesChanged($event)\"\n (dayHeaderClicked)=\"dateIsValid($event.day.date) ? selectDay.emit($event.day.date) : null\"\n (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n >\n </mwl-calendar-week-view>\n <mwl-calendar-day-view\n *ngSwitchCase=\"CalendarView.Day\"\n [viewDate]=\"viewDate\"\n [events]=\"events\"\n [refresh]=\"refresh\"\n [locale]=\"locale\"\n [dayStartHour]=\"dayStartHour\"\n [dayEndHour]=\"dayEndHour\"\n [hourSegments]=\"hourSegments\"\n [eventTemplate]=\"eventTemplate\"\n [hourSegmentTemplate]=\"hourSegmentTemplate\"\n (eventClicked)=\"selectEvent.emit($event.event)\"\n (eventTimesChanged)=\"eventTimesChanged($event)\"\n (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n >\n </mwl-calendar-day-view>\n </div>\n</div>\n", styles: [".agenda{margin-top:15px}.agenda ion-col.titleCol{padding-left:8px}.agenda ion-col.titleCol h2,.agenda ion-col.titleCol p{margin:0}.agenda ion-col.titleCol h2{font-size:1.2em}.agenda ion-col.titleCol p{font-size:.8em;font-style:italic}.agenda .calendarViewSelector{background-color:transparent;--ion-background-color: transparent;--background: transparent}.agenda .calendarViewSelector ion-select{max-width:100%;width:100%;padding-left:0;font-weight:500}.agenda .eventGadgets{margin-top:4px;margin-left:5px;text-align:right}.agenda .eventGadgets idea-user-avatar{display:block;float:left;margin:2px 1px}.agenda .eventGadgets ion-icon{padding-right:2px;opacity:.7;font-size:1.15em}@media only screen and (max-width: 575px){.agenda ion-col.titleCol{padding:0 8px 12px;text-align:center}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSelect, selector: "ion-select", inputs: ["cancelText", "compareWith", "disabled", "interface", "interfaceOptions", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "value"] }, { kind: "component", type: i2.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "directive", type: i2.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "component", type: i3.IDEAUserAvatarComponent, selector: "idea-user-avatar", inputs: ["src", "name", "size", "color"] }, { kind: "component", type: i4.ɵCalendarEventActionsComponent, selector: "mwl-calendar-event-actions", inputs: ["event", "customTemplate"] }, { kind: "component", type: i4.ɵCalendarEventTitleComponent, selector: "mwl-calendar-event-title", inputs: ["event", "customTemplate", "view"] }, { kind: "directive", type: i4.ɵCalendarTooltipDirective, selector: "[mwlCalendarTooltip]", inputs: ["mwlCalendarTooltip", "tooltipPlacement", "tooltipTemplate", "tooltipEvent", "tooltipAppendToBody", "tooltipDelay"] }, { kind: "directive", type: i4.ɵCalendarPreviousViewDirective, selector: "[mwlCalendarPreviousView]", inputs: ["view", "viewDate", "excludeDays", "daysInWeek"], outputs: ["viewDateChange"] }, { kind: "directive", type: i4.ɵCalendarNextViewDirective, selector: "[mwlCalendarNextView]", inputs: ["view", "viewDate", "excludeDays", "daysInWeek"], outputs: ["viewDateChange"] }, { kind: "directive", type: i4.ɵCalendarTodayDirective, selector: "[mwlCalendarToday]", inputs: ["viewDate"], outputs: ["viewDateChange"] }, { kind: "directive", type: i4.ɵClickDirective, selector: "[mwlClick]", inputs: ["clickListenerDisabled"], outputs: ["mwlClick"] }, { kind: "directive", type: i4.ɵKeydownEnterDirective, selector: "[mwlKeydownEnter]", outputs: ["mwlKeydownEnter"] }, { kind: "component", type: i4.CalendarMonthViewComponent, selector: "mwl-calendar-month-view", inputs: ["viewDate", "events", "excludeDays", "activeDayIsOpen", "activeDay", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "cellTemplate", "openDayEventsTemplate", "eventTitleTemplate", "eventActionsTemplate", "weekendDays"], outputs: ["beforeViewRender", "dayClicked", "eventClicked", "columnHeaderClicked", "eventTimesChanged"] }, { kind: "component", type: i4.CalendarWeekViewComponent, selector: "mwl-calendar-week-view", inputs: ["viewDate", "events", "excludeDays", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "eventTemplate", "eventTitleTemplate", "eventActionsTemplate", "precision", "weekendDays", "snapDraggedEvents", "hourSegments", "hourDuration", "hourSegmentHeight", "minimumEventHeight", "dayStartHour", "dayStartMinute", "dayEndHour", "dayEndMinute", "hourSegmentTemplate", "eventSnapSize", "allDayEventsLabelTemplate", "daysInWeek", "currentTimeMarkerTemplate", "validateEventTimesChanged", "resizeCursors"], outputs: ["dayHeaderClicked", "eventClicked", "eventTimesChanged", "beforeViewRender", "hourSegmentClicked"] }, { kind: "component", type: i4.CalendarDayViewComponent, selector: "mwl-calendar-day-view", inputs: ["viewDate", "events", "hourSegments", "hourSegmentHeight", "hourDuration", "minimumEventHeight", "dayStartHour", "dayStartMinute", "dayEndHour", "dayEndMinute", "refresh", "locale", "eventSnapSize", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "hourSegmentTemplate", "eventTemplate", "eventTitleTemplate", "eventActionsTemplate", "snapDraggedEvents", "allDayEventsLabelTemplate", "currentTimeMarkerTemplate", "validateEventTimesChanged", "resizeCursors"], outputs: ["eventClicked", "hourSegmentClicked", "eventTimesChanged", "beforeViewRender"] }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.IDEATranslatePipe, name: "translate" }, { kind: "pipe", type: i4.ɵCalendarDatePipe, name: "calendarDate" }, { kind: "pipe", type: i4.ɵCalendarEventTitlePipe, name: "calendarEventTitle" }, { kind: "pipe", type: i4.ɵCalendarA11yPipe, name: "calendarA11y" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
238
318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IDEAAgendaComponent, decorators: [{
|
|
239
319
|
type: Component,
|
|
240
|
-
args: [{ selector: 'idea-agenda', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"agenda\">\n <!-- TOOLBAR -->\n <ion-row class=\"ion-align-items-center\">\n <ion-col\n class=\"ion-align-self-center ion-text-right\"\n [size]=\"5\"\n [sizeSm]=\"3\"\n [pushSm]=\"5\"\n [sizeLg]=\"2\"\n [pushLg]=\"8\"\n >\n <ion-item lines=\"none\" class=\"calendarViewSelector\">\n <ion-select\n interface=\"popover\"\n [value]=\"view\"\n (ionChange)=\"$event?.detail ? setView($event.detail.value) : null\"\n >\n <ion-select-option
|
|
241
|
-
}], ctorParameters: function () { return [{ type:
|
|
320
|
+
args: [{ selector: 'idea-agenda', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"agenda\">\n <!-- TOOLBAR -->\n <ion-row class=\"ion-align-items-center\">\n <ion-col\n class=\"ion-align-self-center ion-text-right\"\n [size]=\"5\"\n [sizeSm]=\"3\"\n [pushSm]=\"5\"\n [sizeLg]=\"2\"\n [pushLg]=\"8\"\n >\n <ion-item lines=\"none\" class=\"calendarViewSelector\" *ngIf=\"allowedViews.length > 1\">\n <ion-select\n interface=\"popover\"\n [value]=\"view\"\n (ionChange)=\"$event?.detail ? setView($event.detail.value) : null\"\n >\n <ion-select-option *ngFor=\"let view of allowedViews\" [value]=\"view\">\n {{ 'IDEA_AGENDA.' + view | uppercase | translate }}\n </ion-select-option>\n </ion-select>\n </ion-item>\n </ion-col>\n <ion-col\n class=\"ion-align-self-center ion-text-right\"\n [size]=\"7\"\n [sizeSm]=\"4\"\n [pushSm]=\"5\"\n [sizeLg]=\"2\"\n [pushLg]=\"8\"\n >\n <ion-button\n fill=\"clear\"\n color=\"dark\"\n size=\"small\"\n mwlCalendarPreviousView\n [view]=\"view\"\n [(viewDate)]=\"viewDate\"\n (viewDateChange)=\"viewDateChanged($event)\"\n >\n <ion-icon name=\"chevron-back-outline\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n <ion-button\n fill=\"clear\"\n color=\"dark\"\n size=\"small\"\n mwlCalendarToday\n [(viewDate)]=\"viewDate\"\n (viewDateChange)=\"viewDateChanged($event)\"\n >\n <ion-icon name=\"today-outline\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n <ion-button\n fill=\"clear\"\n color=\"dark\"\n size=\"small\"\n mwlCalendarNextView\n [view]=\"view\"\n [(viewDate)]=\"viewDate\"\n (viewDateChange)=\"viewDateChanged($event)\"\n >\n <ion-icon name=\"chevron-forward-outline\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n <ion-col class=\"ion-align-self-center titleCol\" [size]=\"12\" [sizeSm]=\"5\" [pullSm]=\"7\" [sizeLg]=\"8\" [pullLg]=\"4\">\n <h2>{{ viewDate | calendarDate : view + 'ViewTitle' : locale }}</h2>\n <p *ngIf=\"titleNotes\">{{ titleNotes }}</p>\n </ion-col>\n </ion-row>\n <!-- TEMPLATES (touch only what's necessary and leave everything else as it is) -->\n <ng-template #eventTitleTemplate let-event=\"event\" let-view=\"view\">\n <span\n class=\"cal-event-title\"\n [class.noWrap]=\"event.allDay\"\n [attr.aria-hidden]=\"{} | calendarA11y : 'hideEventTitle'\"\n >\n {{ event.title | calendarEventTitle : view : event }}\n <p *ngIf=\"!event.allDay\">{{ getPreviewDescription(event.description) }}</p>\n </span>\n </ng-template>\n <ng-template\n #eventTemplate\n let-weekEvent=\"weekEvent\"\n let-tooltipPlacement=\"tooltipPlacement\"\n let-eventClicked=\"eventClicked\"\n let-tooltipTemplate=\"tooltipTemplate\"\n let-tooltipAppendToBody=\"tooltipAppendToBody\"\n let-tooltipDisabled=\"tooltipDisabled\"\n let-tooltipDelay=\"tooltipDelay\"\n let-column=\"column\"\n let-daysInWeek=\"daysInWeek\"\n >\n <div\n class=\"cal-event\"\n [class.external]=\"weekEvent.event.external\"\n [class.needsAction]=\"Attendance.NEEDS_ACTION === weekEvent.event.attendance\"\n [class.declined]=\"Attendance.DECLINED === weekEvent.event.attendance\"\n [class.tentative]=\"Attendance.TENTATIVE === weekEvent.event.attendance\"\n [style.border-left-color]=\"weekEvent.event.color?.primary\"\n [style.color]=\"getAlternateColor(weekEvent.event.color?.primary, darkMode ? 80 : -40)\"\n [style.background-color]=\"getAlternateColor(weekEvent.event.color?.primary, darkMode ? 60 : 80, 0.2)\"\n [mwlCalendarTooltip]=\"!tooltipDisabled && !isMobile() ? getTooltipContent(weekEvent.event) : ''\"\n [tooltipPlacement]=\"tooltipPlacement\"\n [tooltipEvent]=\"weekEvent.tempEvent || weekEvent.event\"\n [tooltipTemplate]=\"tooltipTemplate\"\n [tooltipAppendToBody]=\"tooltipAppendToBody\"\n [tooltipDelay]=\"tooltipDelay\"\n (mwlClick)=\"eventClicked.emit({ sourceEvent: $event })\"\n (mwlKeydownEnter)=\"eventClicked.emit({ sourceEvent: $event })\"\n tabindex=\"0\"\n role=\"application\"\n [attr.aria-label]=\"\n { event: weekEvent.tempEvent || weekEvent.event, locale: locale } | calendarA11y : 'eventDescription'\n \"\n >\n <mwl-calendar-event-actions [event]=\"weekEvent.tempEvent || weekEvent.event\"></mwl-calendar-event-actions>\n &ngsp;\n <mwl-calendar-event-title\n [event]=\"weekEvent.tempEvent || weekEvent.event\"\n [customTemplate]=\"eventTitleTemplate\"\n [view]=\"daysInWeek === 1 ? 'day' : 'week'\"\n >\n </mwl-calendar-event-title>\n <div class=\"eventGadgets\" *ngIf=\"!weekEvent.event.allDay\">\n <ion-icon *ngFor=\"let icon of weekEvent.event.icons\" [name]=\"icon.name\" [title]=\"icon.title\"></ion-icon>\n <idea-user-avatar\n size=\"mini\"\n *ngFor=\"let avatar of weekEvent.event.avatars\"\n [src]=\"avatar.url\"\n [name]=\"avatar.title\"\n ></idea-user-avatar>\n </div>\n </div>\n </ng-template>\n <ng-template\n #hourSegmentTemplate\n let-segment=\"segment\"\n let-locale=\"locale\"\n let-segmentHeight=\"segmentHeight\"\n let-isTimeLabel=\"isTimeLabel\"\n >\n <div\n #segmentElement\n class=\"cal-hour-segment\"\n [style.height.px]=\"segmentHeight\"\n [class.cal-hour-start]=\"segment.isStart\"\n [class.cal-after-hour-start]=\"!segment.isStart\"\n [ngClass]=\"segment.cssClass\"\n (mousedown)=\"allowDragToCreate ? startDragToCreate($event, segment.date, segmentElement) : null\"\n (touchstart)=\"allowDragToCreate ? startDragToCreate($event, segment.date, segmentElement) : null\"\n >\n <div class=\"cal-time\" *ngIf=\"isTimeLabel\">\n {{ segment.date | calendarDate : 'weekViewHour' : locale }}\n </div>\n </div>\n </ng-template>\n <!-- VIEWS -->\n <div [ngSwitch]=\"view\">\n <mwl-calendar-month-view\n *ngSwitchCase=\"CalendarView.Month\"\n [viewDate]=\"viewDate\"\n [events]=\"events\"\n [refresh]=\"refresh\"\n [activeDayIsOpen]=\"activeDayIsOpen\"\n [locale]=\"locale\"\n [excludeDays]=\"excludeDays\"\n [weekStartsOn]=\"weekStartsOn\"\n [eventTitleTemplate]=\"eventTitleTemplate\"\n (eventClicked)=\"selectEvent.emit($event.event)\"\n (eventTimesChanged)=\"eventTimesChanged($event)\"\n (dayClicked)=\"changeDay($event.day)\"\n (beforeViewRender)=\"beforeMonthViewRender($event)\"\n >\n </mwl-calendar-month-view>\n <mwl-calendar-week-view\n *ngSwitchCase=\"CalendarView.Week\"\n [viewDate]=\"viewDate\"\n [events]=\"events\"\n [refresh]=\"refresh\"\n [locale]=\"locale\"\n [excludeDays]=\"excludeDays\"\n [weekStartsOn]=\"weekStartsOn\"\n [dayStartHour]=\"dayStartHour\"\n [dayEndHour]=\"dayEndHour\"\n [hourSegments]=\"hourSegments\"\n [eventTemplate]=\"eventTemplate\"\n [hourSegmentTemplate]=\"hourSegmentTemplate\"\n (eventClicked)=\"selectEvent.emit($event.event)\"\n (eventTimesChanged)=\"eventTimesChanged($event)\"\n (dayHeaderClicked)=\"dateIsValid($event.day.date) ? selectDay.emit($event.day.date) : null\"\n (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n >\n </mwl-calendar-week-view>\n <mwl-calendar-day-view\n *ngSwitchCase=\"CalendarView.Day\"\n [viewDate]=\"viewDate\"\n [events]=\"events\"\n [refresh]=\"refresh\"\n [locale]=\"locale\"\n [dayStartHour]=\"dayStartHour\"\n [dayEndHour]=\"dayEndHour\"\n [hourSegments]=\"hourSegments\"\n [eventTemplate]=\"eventTemplate\"\n [hourSegmentTemplate]=\"hourSegmentTemplate\"\n (eventClicked)=\"selectEvent.emit($event.event)\"\n (eventTimesChanged)=\"eventTimesChanged($event)\"\n (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n >\n </mwl-calendar-day-view>\n </div>\n</div>\n", styles: [".agenda{margin-top:15px}.agenda ion-col.titleCol{padding-left:8px}.agenda ion-col.titleCol h2,.agenda ion-col.titleCol p{margin:0}.agenda ion-col.titleCol h2{font-size:1.2em}.agenda ion-col.titleCol p{font-size:.8em;font-style:italic}.agenda .calendarViewSelector{background-color:transparent;--ion-background-color: transparent;--background: transparent}.agenda .calendarViewSelector ion-select{max-width:100%;width:100%;padding-left:0;font-weight:500}.agenda .eventGadgets{margin-top:4px;margin-left:5px;text-align:right}.agenda .eventGadgets idea-user-avatar{display:block;float:left;margin:2px 1px}.agenda .eventGadgets ion-icon{padding-right:2px;opacity:.7;font-size:1.15em}@media only screen and (max-width: 575px){.agenda ion-col.titleCol{padding:0 8px 12px;text-align:center}}\n"] }]
|
|
321
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2.Platform }, { type: i3.IDEATranslationsService }]; }, propDecorators: { events: [{
|
|
242
322
|
type: Input
|
|
243
323
|
}], excludeDays: [{
|
|
244
324
|
type: Input
|
|
@@ -252,18 +332,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
252
332
|
type: Input
|
|
253
333
|
}], view: [{
|
|
254
334
|
type: Input
|
|
335
|
+
}], allowedViews: [{
|
|
336
|
+
type: Input
|
|
255
337
|
}], onlyFuture: [{
|
|
256
338
|
type: Input
|
|
339
|
+
}], titleNotes: [{
|
|
340
|
+
type: Input
|
|
341
|
+
}], newEventTemplate: [{
|
|
342
|
+
type: Input
|
|
343
|
+
}], allowDragToCreate: [{
|
|
344
|
+
type: Input
|
|
345
|
+
}], parentContent: [{
|
|
346
|
+
type: Input
|
|
257
347
|
}], selectEvent: [{
|
|
258
348
|
type: Output
|
|
259
349
|
}], selectDay: [{
|
|
260
350
|
type: Output
|
|
261
351
|
}], selectSlot: [{
|
|
262
352
|
type: Output
|
|
353
|
+
}], newEventByDrag: [{
|
|
354
|
+
type: Output
|
|
263
355
|
}], changeEvent: [{
|
|
264
356
|
type: Output
|
|
265
357
|
}], changeDate: [{
|
|
266
358
|
type: Output
|
|
359
|
+
}], beforeWeekOrDayViewRenderEmitter: [{
|
|
360
|
+
type: Output
|
|
361
|
+
}], beforeMonthViewRenderEmitter: [{
|
|
362
|
+
type: Output
|
|
267
363
|
}] } });
|
|
268
364
|
/**
|
|
269
365
|
* Possible attendance statuses for the event.
|
|
@@ -275,6 +371,17 @@ var EventAttendance;
|
|
|
275
371
|
EventAttendance[EventAttendance["TENTATIVE"] = 1] = "TENTATIVE";
|
|
276
372
|
EventAttendance[EventAttendance["ACCEPTED"] = 2] = "ACCEPTED";
|
|
277
373
|
})(EventAttendance || (EventAttendance = {}));
|
|
374
|
+
/**
|
|
375
|
+
* The options to allow (or not) drag&drop to create a new event.
|
|
376
|
+
*/
|
|
377
|
+
var DragToCreateOptions;
|
|
378
|
+
(function (DragToCreateOptions) {
|
|
379
|
+
DragToCreateOptions[DragToCreateOptions["DISABLED"] = 0] = "DISABLED";
|
|
380
|
+
DragToCreateOptions[DragToCreateOptions["ONLY_SAME_DAY"] = 1] = "ONLY_SAME_DAY";
|
|
381
|
+
DragToCreateOptions[DragToCreateOptions["FREE"] = 2] = "FREE";
|
|
382
|
+
})(DragToCreateOptions || (DragToCreateOptions = {}));
|
|
383
|
+
const floorToNearest = (amount, precision) => Math.floor(amount / precision) * precision;
|
|
384
|
+
const ceilToNearest = (amount, precision) => Math.ceil(amount / precision) * precision;
|
|
278
385
|
|
|
279
386
|
/**
|
|
280
387
|
* Note: to test locally, you need to temporarily change the redirect URI:
|
|
@@ -944,6 +1051,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
944
1051
|
* Generated bundle index. Do not edit.
|
|
945
1052
|
*/
|
|
946
1053
|
|
|
947
|
-
export { CalendarScopes, CustomDateFormatter, EventAttendance, IDEAAgendaComponent, IDEAAgendaModule, IDEACalendarComponent, IDEACalendarCreationComponent, IDEACalendarItemComponent, IDEACalendarsService };
|
|
1054
|
+
export { CalendarScopes, CustomDateFormatter, DragToCreateOptions, EventAttendance, IDEAAgendaComponent, IDEAAgendaModule, IDEACalendarComponent, IDEACalendarCreationComponent, IDEACalendarItemComponent, IDEACalendarsService };
|
|
948
1055
|
//# sourceMappingURL=idea-ionic-agenda.mjs.map
|
|
949
1056
|
//# sourceMappingURL=idea-ionic-agenda.mjs.map
|