@idea-ionic/agenda 5.29.4 → 6.0.3

package/fesm2020/idea-ionic-agenda.mjs

@@ -0,0 +1,967 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { formatDate, CommonModule } from '@angular/common';
+import * as i5 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2 from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
+import * as i3$1 from 'angular-calendar';
+import { CalendarDateFormatter, CalendarView, CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import * as i3 from '@idea-ionic/common';
+import { IDEASuggestionsComponent, IDEATranslationsModule, IDEAColorPickerModule, IDEACheckerModule } from '@idea-ionic/common';
+import { Subject } from 'rxjs';
+import { isFuture, isToday, isSameDay } from 'date-fns';
+import ColorParse from 'color-parse';
+import { ExternalCalendarSources, Calendar, Suggestion, Check, ExternalCalendarInfo } from 'idea-toolbox';
+import { Plugins } from '@capacitor/core';
+import { environment } from '@env';
+
+class CustomDateFormatter extends CalendarDateFormatter {
+    // MONTH VIEW
+    monthViewColumnHeader({ date, locale }) {
+        return formatDate(date, 'EEE', locale);
+    }
+    monthViewTitle({ date, locale }) {
+        return formatDate(date, 'MMMM y', locale);
+    }
+    // WEEK VIEW
+    weekViewHour({ date, locale }) {
+        return locale === 'it' ? formatDate(date, 'HH:mm', locale) : formatDate(date, 'h aa', locale);
+    }
+    weekViewColumnHeader({ date, locale }) {
+        return formatDate(date, 'EEE', locale);
+    }
+    weekViewTitle({ date, locale }) {
+        return formatDate(date, 'MMMM yyyy', locale);
+    }
+    // DAY VIEW
+    dayViewHour({ date, locale }) {
+        return locale === 'it' ? formatDate(date, 'HH:mm', locale) : formatDate(date, 'h aa', locale);
+    }
+    dayViewTitle({ date, locale }) {
+        return locale === 'it'
+            ? formatDate(date, 'EEEE, dd MMM yyyy', locale)
+            : formatDate(date, 'EEEE, MMM dd, yyyy', locale);
+    }
+}
+CustomDateFormatter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CustomDateFormatter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+CustomDateFormatter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CustomDateFormatter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CustomDateFormatter, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * A local fallback URL for the avatars.
+ */
+const AVATAR_FALLBACK_URL = './assets/imgs/no-avatar.jpg';
+class IDEAAgendaComponent {
+    constructor(platform, tc, t) {
+        this.platform = platform;
+        this.tc = tc;
+        this.t = t;
+        /**
+         * The events to display in the calendar.
+         */
+        this.events = [];
+        /**
+         * An array of day indexes (0 = sunday, 1 = monday, etc.) that will be hidden on the view.
+         */
+        this.excludeDays = [];
+        /**
+         * The day start hours in 24 hour time. Must be 0-23
+         */
+        this.dayStartHour = 0;
+        /**
+         * The day start hours in 24 hour time. Must be 0-23
+         */
+        this.dayEndHour = 23;
+        /**
+         * The number of segments in an hour. Must divide equally into 60.
+         */
+        this.hourSegments = 2;
+        /**
+         * Whether to open the current day's details right away in month view.
+         */
+        this.activeDayIsOpen = false;
+        /**
+         * The view mode for the agenda.
+         */
+        this.view = CalendarView.Week;
+        /**
+         * Whether to block any day/slot in the past.
+         */
+        this.onlyFuture = false;
+        /**
+         * Trigger when an event is selected.
+         */
+        this.selectEvent = new EventEmitter();
+        /**
+         * Trigger when a day is selected.
+         */
+        this.selectDay = new EventEmitter();
+        /**
+         * Trigger when a time slot is selected.
+         */
+        this.selectSlot = new EventEmitter();
+        /**
+         * Trigger when an event changed date (drag&drop or resize).
+         */
+        this.changeEvent = new EventEmitter();
+        /**
+         * Trigger when the view date of reference changed (because we moved inside the calendar).
+         */
+        this.changeDate = new EventEmitter();
+        /**
+         * Helper to use the enum in the UX.
+         */
+        this.CalendarView = CalendarView;
+        /**
+         * The currently selected date.
+         */
+        this.viewDate = new Date();
+        /**
+         * A controller to refresh the current view.
+         */
+        this.refresh = new Subject();
+        /**
+         * Helper to use the enum in the UI.
+         */
+        this.Attendance = EventAttendance;
+    }
+    ngOnInit() {
+        this.locale = this.t.getCurrentLang();
+        // in case of Italian locale the starting day for the week is monday (1), otherwise sunday (0)
+        this.weekStartsOn = this.locale === 'it' ? 1 : 0;
+    }
+    /**
+     * Run some checks before the month view is rendered (e.g. disable invalid days).
+     */
+    beforeMonthViewRender({ body }) {
+        body.forEach(day => {
+            if (!this.dateIsValid(day.date, true))
+                day.cssClass = 'cal-disabled';
+        });
+    }
+    /**
+     * Run some checks before the weel/day view is rendered (e.g. disable invalid days).
+     */
+    beforeWeekOrDayViewRender({ header }) {
+        header.forEach((day) => {
+            if (!this.dateIsValid(day.date, true))
+                day.cssClass = 'cal-disabled';
+        });
+    }
+    /**
+     * Check whether a date is valid based on the configured parameters.
+     */
+    dateIsValid(date, sameDayIsValid) {
+        if (!this.onlyFuture)
+            return true;
+        return isFuture(date) || (sameDayIsValid ? isToday(date) : false);
+    }
+    /**
+     * Change the current view for the agenda.
+     */
+    setView(view) {
+        this.view = view;
+    }
+    /**
+     * Emit the change of the view date and close the detail component of the month view, if needed.
+     */
+    viewDateChanged(newDate) {
+        if (this.view === CalendarView.Month)
+            this.activeDayIsOpen = false;
+        this.changeDate.emit(newDate);
+    }
+    /**
+     * A day was selected: manage the detailed view.
+     */
+    changeDay({ date, events }) {
+        // skip if the date isn't valid
+        if (!this.dateIsValid(date, true))
+            return;
+        // if the selected day changed, if the new day has events, open the details in month view (otherwise close them)
+        if ((isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) || !events || events.length === 0)
+            this.activeDayIsOpen = false;
+        else
+            this.activeDayIsOpen = true;
+        // update the current date in the agenda
+        this.viewDate = date;
+    }
+    /**
+     * The time of an event was changed.
+     */
+    eventTimesChanged({ event, newStart, newEnd }) {
+        // update the event
+        event.start = newStart;
+        event.end = newEnd;
+        // re-map the array to trigger the UI refresh
+        this.events = this.events.slice();
+        // trigger the event to the parent component
+        this.changeEvent.emit(event);
+    }
+    /**
+     * Given a color, it returns an opaque version of it.
+     */
+    getAlternateColor(color, amount, opacity) {
+        const alt = ColorParse(color);
+        const r = Math.max(Math.min(255, Number(alt.values[0]) + amount), 0);
+        const g = Math.max(Math.min(255, Number(alt.values[1]) + amount), 0);
+        const b = Math.max(Math.min(255, Number(alt.values[2]) + amount), 0);
+        return `rgba(${r}, ${g}, ${b}, ${opacity || 1})`;
+    }
+    /**
+     * Get the content of the tooltip based on the event.
+     */
+    getTooltipContent(event) {
+        if (!event)
+            return '';
+        let str = event.title ? '<b>' + event.title + '</b>' : '';
+        if (event.description)
+            str = str.concat('<br>', event.description);
+        if (event.icons)
+            event.icons.forEach(x => (str = str.concat('<br>', '<i>', x.title, '</i>')));
+        if (event.avatars && event.avatars.length) {
+            str = str.concat('<br><br>~');
+            event.avatars.forEach(x => (str = str.concat('<br>', x.title)));
+        }
+        return str;
+    }
+    /**
+     * Get a shortened version of the description as preview.
+     */
+    getPreviewDescription(description) {
+        return description && description.length > 100 ? description.slice(0, 100).concat('...') : description;
+    }
+    /**
+     * Load a fallback url when the avatar is missing.
+     */
+    loadFallbackAvatar(targetImg) {
+        const fallback = this.fallbackAvatar || AVATAR_FALLBACK_URL;
+        if (targetImg && targetImg.src !== fallback)
+            targetImg.src = fallback;
+    }
+}
+IDEAAgendaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEAAgendaComponent, deps: [{ token: i2.Platform }, { token: i3.IDEATinCanService }, { token: i3.IDEATranslationsService }], target: i0.ɵɵFactoryTarget.Component });
+IDEAAgendaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: IDEAAgendaComponent, selector: "idea-agenda", inputs: { events: "events", excludeDays: "excludeDays", dayStartHour: "dayStartHour", dayEndHour: "dayEndHour", hourSegments: "hourSegments", activeDayIsOpen: "activeDayIsOpen", view: "view", onlyFuture: "onlyFuture", fallbackAvatar: "fallbackAvatar" }, 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, tc.get('darkMode') ? 80 : -40)\"\n      [style.background-color]=\"getAlternateColor(weekEvent.event.color.primary, tc.get('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        <ion-avatar *ngFor=\"let avatar of weekEvent.event.avatars\" [title]=\"avatar.title\">\n          <ion-img [src]=\"avatar.url\" (ionError)=\"loadFallbackAvatar($event?.target)\"></ion-img>\n        </ion-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 ion-avatar{display:block;float:left;margin:2px 1px;width:14px;height:14px}.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"], components: [{ type: i2.IonRow, selector: "ion-row" }, { 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"] }, { type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2.IonSelect, selector: "ion-select", inputs: ["cancelText", "compareWith", "disabled", "interface", "interfaceOptions", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "value"] }, { type: i2.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i3$1.ɵCalendarEventActionsComponent, selector: "mwl-calendar-event-actions", inputs: ["event", "customTemplate"] }, { type: i3$1.ɵCalendarEventTitleComponent, selector: "mwl-calendar-event-title", inputs: ["event", "customTemplate", "view"] }, { type: i2.IonAvatar, selector: "ion-avatar" }, { type: i2.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { type: i3$1.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"] }, { type: i3$1.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"], outputs: ["dayHeaderClicked", "eventClicked", "eventTimesChanged", "beforeViewRender", "hourSegmentClicked"] }, { type: i3$1.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"], outputs: ["eventClicked", "hourSegmentClicked", "eventTimesChanged", "beforeViewRender"] }], directives: [{ type: i2.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i3$1.ɵCalendarPreviousViewDirective, selector: "[mwlCalendarPreviousView]", inputs: ["view", "viewDate", "excludeDays", "daysInWeek"], outputs: ["viewDateChange"] }, { type: i3$1.ɵCalendarTodayDirective, selector: "[mwlCalendarToday]", inputs: ["viewDate"], outputs: ["viewDateChange"] }, { type: i3$1.ɵCalendarNextViewDirective, selector: "[mwlCalendarNextView]", inputs: ["view", "viewDate", "excludeDays", "daysInWeek"], outputs: ["viewDateChange"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.ɵCalendarTooltipDirective, selector: "[mwlCalendarTooltip]", inputs: ["mwlCalendarTooltip", "tooltipPlacement", "tooltipTemplate", "tooltipEvent", "tooltipAppendToBody", "tooltipDelay"] }, { type: i3$1.ɵClickDirective, selector: "[mwlClick]", inputs: ["clickListenerDisabled"], outputs: ["mwlClick"] }, { type: i3$1.ɵKeydownEnterDirective, selector: "[mwlKeydownEnter]", outputs: ["mwlKeydownEnter"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "translate": i3.IDEATranslatePipe, "calendarDate": i3$1.ɵCalendarDatePipe, "calendarA11y": i3$1.ɵCalendarA11yPipe, "calendarEventTitle": i3$1.ɵCalendarEventTitlePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEAAgendaComponent, decorators: [{
+            type: Component,
+            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 [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, tc.get('darkMode') ? 80 : -40)\"\n      [style.background-color]=\"getAlternateColor(weekEvent.event.color.primary, tc.get('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        <ion-avatar *ngFor=\"let avatar of weekEvent.event.avatars\" [title]=\"avatar.title\">\n          <ion-img [src]=\"avatar.url\" (ionError)=\"loadFallbackAvatar($event?.target)\"></ion-img>\n        </ion-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 ion-avatar{display:block;float:left;margin:2px 1px;width:14px;height:14px}.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"] }]
+        }], ctorParameters: function () { return [{ type: i2.Platform }, { type: i3.IDEATinCanService }, { type: i3.IDEATranslationsService }]; }, propDecorators: { events: [{
+                type: Input
+            }], excludeDays: [{
+                type: Input
+            }], dayStartHour: [{
+                type: Input
+            }], dayEndHour: [{
+                type: Input
+            }], hourSegments: [{
+                type: Input
+            }], activeDayIsOpen: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], onlyFuture: [{
+                type: Input
+            }], fallbackAvatar: [{
+                type: Input
+            }], selectEvent: [{
+                type: Output
+            }], selectDay: [{
+                type: Output
+            }], selectSlot: [{
+                type: Output
+            }], changeEvent: [{
+                type: Output
+            }], changeDate: [{
+                type: Output
+            }] } });
+/**
+ * Possible attendance statuses for the event.
+ */
+var EventAttendance;
+(function (EventAttendance) {
+    EventAttendance[EventAttendance["DECLINED"] = -1] = "DECLINED";
+    EventAttendance[EventAttendance["NEEDS_ACTION"] = 0] = "NEEDS_ACTION";
+    EventAttendance[EventAttendance["TENTATIVE"] = 1] = "TENTATIVE";
+    EventAttendance[EventAttendance["ACCEPTED"] = 2] = "ACCEPTED";
+})(EventAttendance || (EventAttendance = {}));
+
+const { Browser } = Plugins;
+/**
+ * Note: to test locally, you need to temporarily change the redirect URI:
+ *  - in the lambda `idea_calendars`, e.g. `SCARLETT_URL`;
+ *  - in the client config file: `APP_URL`.
+ * In both cases, the value should be set to `http://localhost:8100` (or according to the local URL).
+ */
+class IDEACalendarsService {
+    constructor(modalCtrl, alertCtrl, message, loading, API, t) {
+        this.modalCtrl = modalCtrl;
+        this.alertCtrl = alertCtrl;
+        this.message = message;
+        this.loading = loading;
+        this.API = API;
+        this.t = t;
+    }
+    /**
+     * Get the ion-icon of an external service from its name.
+     */
+    getServiceIcon(service) {
+        switch (service) {
+            case ExternalCalendarSources.GOOGLE:
+                return 'logo-google';
+            case ExternalCalendarSources.MICROSOFT:
+                return 'logo-windows';
+            default:
+                return 'help';
+        }
+    }
+    /**
+     * Get the base URL for API request (shared/private calendar).
+     */
+    getRequestURL(calendar) {
+        return (calendar.teamId ? `teams/${calendar.teamId}/` : '').concat('calendars');
+    }
+    /**
+     * Create a new calendar.
+     */
+    postCalendar(cal) {
+        return new Promise((resolve, reject) => {
+            this.API.postResource(this.getRequestURL(cal), { idea: true, body: cal })
+                .then((res) => resolve(new Calendar(res)))
+                .catch(err => reject(err));
+        });
+    }
+    /**
+     * Update an existing calendar.
+     */
+    putCalendar(cal) {
+        return new Promise((resolve, reject) => {
+            this.API.putResource(this.getRequestURL(cal), { idea: true, resourceId: cal.calendarId, body: cal })
+                .then((res) => resolve(new Calendar(res)))
+                .catch(err => reject(err));
+        });
+    }
+    /**
+     * Delete a calendar.
+     */
+    deleteCalendar(cal) {
+        return new Promise((resolve, reject) => {
+            this.API.deleteResource(this.getRequestURL(cal), { idea: true, resourceId: cal.calendarId })
+                .then(() => resolve())
+                .catch(err => reject(err));
+        });
+    }
+    /**
+     * Associate an external calendar with the given calendar.
+     */
+    setExternalCalendar(cal, externalId) {
+        return new Promise((resolve, reject) => {
+            this.API.patchResource(this.getRequestURL(cal), {
+                idea: true,
+                resourceId: cal.calendarId,
+                body: { action: 'SET_EXTERNAL_CALENDAR', externalId }
+            })
+                .then(res => resolve(new Calendar(res)))
+                .catch(err => reject(err));
+        });
+    }
+    /**
+     * Link the calendar with the chosen external service (auth flow).
+     */
+    linkExtService(cal) {
+        return new Promise((resolve, reject) => {
+            if (!cal.external)
+                return reject(new Error('NOT_EXTERNAL'));
+            let url;
+            switch (cal.external.service) {
+                case ExternalCalendarSources.GOOGLE:
+                    url =
+                        'https://accounts.google.com/o/oauth2/v2/auth?' +
+                            `client_id=${encodeURIComponent(environment.google.apiClientId)}` +
+                            '&response_type=code' +
+                            `&redirect_uri=${encodeURIComponent(environment.idea.app.url.concat('/echo/google-calendars-integration'))}` +
+                            '&include_granted_scopes=true' +
+                            '&access_type=offline&prompt=consent' +
+                            `&scope=${encodeURIComponent(environment.google.apiScope)}` +
+                            `&state=${encodeURIComponent(cal.calendarId)}`;
+                    break;
+                case ExternalCalendarSources.MICROSOFT:
+                    url =
+                        'https://login.microsoftonline.com/common/oauth2/v2.0/authorize?' +
+                            `client_id=${encodeURIComponent(environment.microsoft.apiClientId)}` +
+                            '&response_type=code' +
+                            `&redirect_uri=${encodeURIComponent(environment.idea.app.url.concat('/echo/microsoft-calendars-integration'))}` +
+                            '&response_mode=query' +
+                            `&scope=${encodeURIComponent(environment.microsoft.apiScope)}` +
+                            `&state=${encodeURIComponent(cal.calendarId)}`;
+                    break;
+            }
+            if (!url)
+                return reject(new Error('INVALID_SERVICE'));
+            // start the auth flow in the browser
+            Browser.open({ url }).then(() => {
+                // since we don't know when/if the auth flow will finish, we wait
+                this.alertCtrl
+                    .create({
+                    header: this.t._('IDEA_AGENDA.CALENDARS.LINKING_CALENDAR'),
+                    message: this.t._('IDEA_AGENDA.CALENDARS.LINKING_CALENDAR_CONFIRM_ONCE_DONE'),
+                    backdropDismiss: false,
+                    buttons: [{ text: this.t._('COMMON.DONE'), handler: () => resolve() }]
+                })
+                    .then(alert => alert.present());
+            });
+        });
+    }
+    /**
+     * Get the external calendars list of the external service.
+     */
+    getExternalCalendars(cal) {
+        return new Promise((resolve, reject) => {
+            if (!cal.external)
+                return reject(new Error('NOT_EXTERNAL'));
+            // get the access token to make requests; in case it fails, proceed to link the external service
+            this.API.patchResource(this.getRequestURL(cal), {
+                idea: true,
+                resourceId: cal.calendarId,
+                body: { action: 'GET_ACCESS_TOKEN' }
+            })
+                .then((result) => {
+                // prepare the headers (authorization) for the request to the external service
+                const headers = { Authorization: 'Bearer '.concat(result.token) };
+                // acquire and return the calendars
+                switch (cal.external.service) {
+                    case ExternalCalendarSources.GOOGLE:
+                        this.API.rawRequest()
+                            .get('https://www.googleapis.com/calendar/v3/users/me/calendarList', { headers })
+                            .toPromise()
+                            .then((res) => resolve(res.items.map((c) => ({ name: c.summary, id: c.id }))))
+                            .catch(err => reject(err));
+                        break;
+                    case ExternalCalendarSources.MICROSOFT:
+                        this.API.rawRequest()
+                            .get('https://graph.microsoft.com/v1.0/me/calendars', { headers })
+                            .toPromise()
+                            .then((res) => resolve(res.value.map((c) => ({ name: c.name, id: c.id }))))
+                            .catch(err => reject(err));
+                        break;
+                }
+            })
+                .catch(err => reject(err));
+        });
+    }
+    /**
+     * If the external service is linked, choose an external calendar and set it for the chosen calendar.
+     * @return the updated calendar.
+     */
+    chooseAndSetExternalCalendar(cal) {
+        return new Promise((resolve, reject) => {
+            this.openModalAndPickExternalCalendar(cal)
+                .then(extCalId => {
+                // the external calendar will be set later on
+                if (!extCalId)
+                    return resolve(null);
+                // an external calendar was chosen: set it right away
+                this.setExternalCalendar(cal, extCalId)
+                    .then(res => resolve(res))
+                    .catch(err => reject(err));
+            })
+                .catch(err => reject(err));
+        });
+    }
+    /**
+     * Open the modal to pick a calendar from the external service.
+     * @return the id of the external calendar.
+     */
+    async openModalAndPickExternalCalendar(cal) {
+        await this.loading.show();
+        return new Promise((resolve, reject) => {
+            this.getExternalCalendars(cal)
+                .then((extCals) => {
+                if (!extCals.length)
+                    return reject(new Error('NO_EXTERNAL_CALENDARS'));
+                // let the user to choose the external calendar to associate
+                this.modalCtrl
+                    .create({
+                    component: IDEASuggestionsComponent,
+                    componentProps: {
+                        data: extCals.map(c => new Suggestion({ value: c.id, name: c.name })),
+                        searchPlaceholder: this.t._('IDEA_AGENDA.CALENDARS.CHOOSE_AN_EXTERNAL_CALENDAR_TO_LINK'),
+                        sortData: true,
+                        hideIdFromUI: true,
+                        hideClearButton: true,
+                        mustChoose: true
+                    },
+                    backdropDismiss: false
+                })
+                    .then(modal => {
+                    modal.onDidDismiss().then(res => resolve(res.data ? res.data.value : null));
+                    modal.present();
+                });
+            })
+                .catch(err => reject(err))
+                .finally(() => this.loading.hide());
+        });
+    }
+    /**
+     * First sync of the extenal calendar.
+     */
+    syncCalendar(cal) {
+        return new Promise((resolve, reject) => this.syncCalendarHelper(cal, err => (err ? reject(err) : resolve())));
+    }
+    /**
+     * Helper to recursively sync an the extenal calendar.
+     */
+    syncCalendarHelper(cal, done) {
+        // this is a recursive operation: the API returns if the sync has to continue or it finished
+        this.API.patchResource(this.getRequestURL(cal), {
+            idea: true,
+            resourceId: cal.calendarId,
+            body: { action: 'SYNC_EXTERNAL_CALENDAR', firstSync: true }
+        })
+            .then((res) => {
+            if (res.moreData)
+                this.syncCalendarHelper(cal, done);
+            else
+                done();
+        })
+            .catch(err => done(err));
+    }
+}
+IDEACalendarsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEACalendarsService, deps: [{ token: i2.ModalController }, { token: i2.AlertController }, { token: i3.IDEAMessageService }, { token: i3.IDEALoadingService }, { token: i3.IDEAAWSAPIService }, { token: i3.IDEATranslationsService }], target: i0.ɵɵFactoryTarget.Injectable });
+IDEACalendarsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEACalendarsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEACalendarsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i2.ModalController }, { type: i2.AlertController }, { type: i3.IDEAMessageService }, { type: i3.IDEALoadingService }, { type: i3.IDEAAWSAPIService }, { type: i3.IDEATranslationsService }]; } });
+
+class IDEACalendarComponent {
+    constructor(calendars, modalCtrl, alertCtrl, tc, loading, message, API, t) {
+        this.calendars = calendars;
+        this.modalCtrl = modalCtrl;
+        this.alertCtrl = alertCtrl;
+        this.tc = tc;
+        this.loading = loading;
+        this.message = message;
+        this.API = API;
+        this.t = t;
+        /**
+         * Errors while validating the entity.
+         */
+        this.errors = new Set();
+        /**
+         * The default color for a calendar.
+         */
+        this.DEFAULT_COLOR = '#555';
+    }
+    ngOnInit() {
+        this.membership = this.tc.get('membership');
+        // work on a copy
+        this._calendar = new Calendar(this.calendar);
+        // load the teammates to use for shared calendars permissions
+        this.API.getResource(`teams/${this.membership.teamId}/memberships`)
+            .then((memberships) => (this.membershipsChecks = memberships.map(m => new Check({
+            value: m.userId,
+            name: m.name,
+            checked: (this._calendar.usersCanManageAppointments || []).some(x => x === m.userId)
+        }))))
+            .catch(() => { });
+    }
+    /**
+     * Set the support array to display errors in the UI.
+     */
+    hasFieldAnError(field) {
+        return this.errors.has(field);
+    }
+    /**
+     * Save a calendar with the new info.
+     */
+    async save() {
+        // set the default color, in case none was selected
+        if (!this._calendar.color)
+            this._calendar.color = this.DEFAULT_COLOR;
+        // map the memberships able to manage appointments
+        if (this._calendar.isShared() && this.advancedPermissions)
+            this._calendar.usersCanManageAppointments = this.membershipsChecks
+                .filter(x => x.checked)
+                .map(x => String(x.value));
+        else
+            delete this._calendar.usersCanManageAppointments;
+        // checkings
+        this.errors = new Set(this._calendar.validate());
+        if (this.errors.size)
+            return this.message.error('COMMON.FORM_HAS_ERROR_TO_CHECK');
+        // send a put request
+        await this.loading.show();
+        this.calendars
+            .putCalendar(this._calendar)
+            .then((res) => {
+            this.calendar.load(res);
+            this.message.success('IDEA_AGENDA.CALENDARS.CALENDAR_SAVED');
+            this.modalCtrl.dismiss(this.calendar);
+        })
+            .catch(() => this.message.error('COMMON.OPERATION_FAILED'))
+            .finally(() => this.loading.hide());
+    }
+    /**
+     * Delete the calendar.
+     */
+    delete() {
+        this.alertCtrl
+            .create({
+            header: this.t._('COMMON.ARE_YOU_SURE'),
+            subHeader: this.t._('IDEA_AGENDA.CALENDARS.DELETE_CALENDAR'),
+            message: this.t._('IDEA_AGENDA.CALENDARS.DELETE_CALENDAR_HINT'),
+            buttons: [
+                { text: this.t._('COMMON.CANCEL'), role: 'cancel' },
+                {
+                    text: this.t._('COMMON.DELETE'),
+                    handler: async () => {
+                        await this.loading.show();
+                        this.calendars
+                            .deleteCalendar(this._calendar)
+                            .then(() => {
+                            this.message.success('IDEA_AGENDA.CALENDARS.CALENDAR_DELETED');
+                            this.modalCtrl.dismiss(true);
+                        })
+                            .catch(() => this.message.error('COMMON.OPERATION_FAILED'))
+                            .finally(() => this.loading.hide());
+                    }
+                }
+            ]
+        })
+            .then(alert => alert.present());
+    }
+    /**
+     * Close the component.
+     */
+    close() {
+        this.modalCtrl.dismiss();
+    }
+}
+IDEACalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEACalendarComponent, deps: [{ token: IDEACalendarsService }, { token: i2.ModalController }, { token: i2.AlertController }, { token: i3.IDEATinCanService }, { token: i3.IDEALoadingService }, { token: i3.IDEAMessageService }, { token: i3.IDEAAWSAPIService }, { token: i3.IDEATranslationsService }], target: i0.ɵɵFactoryTarget.Component });
+IDEACalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: IDEACalendarComponent, selector: "idea-calendar", inputs: { calendar: "calendar", advancedPermissions: "advancedPermissions", hideColor: "hideColor" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      <ion-button [title]=\"t._('COMMON.CLOSE')\" (click)=\"close()\">\n        <ion-icon name=\"close-circle\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title>{{ 'IDEA_AGENDA.CALENDARS.EDIT_CALENDAR' | translate }}</ion-title>\n    <ion-buttons slot=\"end\">\n      <ion-button [title]=\"t._('COMMON.SAVE')\" (click)=\"save()\">\n        <ion-icon name=\"checkmark-circle\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <div class=\"maxWidthContainer\" *ngIf=\"_calendar\">\n    <ion-list class=\"aList\">\n      <ion-item\n        lines=\"inset\"\n        [class.fieldHasError]=\"hasFieldAnError('name')\"\n        [title]=\"t._('IDEA_AGENDA.CALENDARS.NAME_HINT')\"\n      >\n        <ion-label position=\"stacked\">{{ 'IDEA_AGENDA.CALENDARS.NAME' | translate }} </ion-label>\n        <ion-input [placeholder]=\"t._('IDEA_AGENDA.CALENDARS.NAME_HINT')\" [(ngModel)]=\"_calendar.name\"></ion-input>\n      </ion-item>\n      <ion-item\n        lines=\"inset\"\n        [class.fieldHasError]=\"hasFieldAnError('description')\"\n        [title]=\"t._('IDEA_AGENDA.CALENDARS.DESCRIPTION_HINT')\"\n      >\n        <ion-label position=\"stacked\">{{ 'IDEA_AGENDA.CALENDARS.DESCRIPTION' | translate }} </ion-label>\n        <ion-input\n          [placeholder]=\"t._('IDEA_AGENDA.CALENDARS.DESCRIPTION_HINT')\"\n          [(ngModel)]=\"_calendar.description\"\n        ></ion-input>\n      </ion-item>\n      <idea-color-picker\n        *ngIf=\"!hideColor\"\n        [lines]=\"'inset'\"\n        [current]=\"_calendar.color\"\n        [label]=\"t._('IDEA_AGENDA.CALENDARS.COLOR')\"\n        [class.fieldHasError]=\"hasFieldAnError('color')\"\n        (select)=\"$event ? (_calendar.color = $event) : null\"\n      ></idea-color-picker>\n      <idea-checker\n        *ngIf=\"membershipsChecks && _calendar.isShared() && advancedPermissions\"\n        [data]=\"membershipsChecks\"\n        [label]=\"t._('IDEA_AGENDA.CALENDARS.USERS_ALLOWED_TO_MANAGE_APPOINTMENTS')\"\n        [searchPlaceholder]=\"t._('IDEA_AGENDA.CALENDARS.WHO_CAN_MANAGE_APPOINTMENTS')\"\n        [noneText]=\"t._('IDEA_AGENDA.CALENDARS.NOBODY')\"\n        [allText]=\"t._('IDEA_AGENDA.CALENDARS.EVERYONE')\"\n        [allowSelectDeselectAll]=\"true\"\n        [lines]=\"'inset'\"\n      ></idea-checker>\n    </ion-list>\n    <ion-list class=\"aList\" *ngIf=\"_calendar.external?.service\">\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_AGENDA.CALENDARS.INFO_ON_CALENDAR' | translate }}</h2>\n        </ion-label>\n      </ion-list-header>\n      <ion-item lines=\"inset\" *ngIf=\"calendar.userId\">\n        <ion-label>\n          {{ 'IDEA_AGENDA.CALENDARS.PRIVATE_CALENDAR' | translate }}\n          <p>{{ 'IDEA_AGENDA.CALENDARS.PRIVATE_CALENDAR_HINT' | translate }}</p>\n        </ion-label>\n        <ion-icon slot=\"end\" name=\"person\"></ion-icon>\n      </ion-item>\n      <ion-item lines=\"inset\" *ngIf=\"calendar.teamId\">\n        <ion-label>\n          {{ 'IDEA_AGENDA.CALENDARS.TEAM_CALENDAR' | translate }}\n          <p>{{ 'IDEA_AGENDA.CALENDARS.TEAM_CALENDAR_HINT' | translate }}</p>\n        </ion-label>\n        <ion-icon slot=\"end\" name=\"people\"></ion-icon>\n      </ion-item>\n      <ion-item lines=\"inset\">\n        <ion-label>\n          {{ 'IDEA_AGENDA.CALENDARS.LINKED_TO' | translate }}\n          {{ 'IDEA_AGENDA.CALENDARS.SERVICES.' + _calendar.external.service | translate }}\n          <p>{{ _calendar.external.name }} ({{ _calendar.external.email }})</p>\n        </ion-label>\n        <ion-icon slot=\"end\" [name]=\"calendars.getServiceIcon(_calendar.external.service)\"></ion-icon>\n      </ion-item>\n      <ion-item lines=\"inset\">\n        <ion-label>\n          {{ 'IDEA_AGENDA.CALENDARS.ACCESS_LEVELS.' + _calendar.external.userAccess | translate }}\n          <p>{{ 'IDEA_AGENDA.CALENDARS.BASED_ON_EXTERNAL_SERVICE_SHARING_PERMISSION' | translate }}</p>\n        </ion-label>\n        <ion-icon slot=\"end\" name=\"shield\"></ion-icon>\n      </ion-item>\n    </ion-list>\n    <ion-list class=\"aList\">\n      <ion-list-header>\n        <ion-label color=\"danger\">\n          <h2>{{ 'IDEA_AGENDA.CALENDARS.DANGEROUS_ZONE' | translate }}</h2>\n        </ion-label>\n      </ion-list-header>\n      <ion-item lines=\"inset\">\n        <ion-label class=\"ion-text-wrap\">\n          {{ 'IDEA_AGENDA.CALENDARS.DELETE_CALENDAR' | translate }}\n          <p>{{ 'IDEA_AGENDA.CALENDARS.DELETE_CALENDAR_HINT' | translate }}</p>\n        </ion-label>\n        <ion-button color=\"danger\" [title]=\"t._('IDEA_AGENDA.CALENDARS.DELETE_CALENDAR_HINT')\" (click)=\"delete()\">\n          {{ 'COMMON.DELETE' | translate }}\n        </ion-button>\n      </ion-item>\n    </ion-list>\n  </div>\n</ion-content>\n", styles: [".maxWidthContainer{max-width:500px;padding-top:20px}\n"], components: [{ type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { type: i3.IDEAColorPickerComponent, selector: "idea-color-picker", inputs: ["colors", "current", "label", "placeholder", "icon", "iconColor", "disabled", "obligatory", "lines"], outputs: ["select", "iconSelect"] }, { type: i3.IDEACheckerComponent, selector: "idea-checker", inputs: ["data", "dataProvider", "label", "icon", "iconColor", "searchPlaceholder", "noPreviewText", "noElementsFoundText", "noneEqualsAll", "noneText", "allText", "lines", "disabled", "tappableWhenDisabled", "obligatory", "sortData", "numMaxElementsInPreview", "showAvatars", "fallbackAvatar", "limitSelectionToNum", "allowSelectDeselectAll"], outputs: ["change", "iconSelect"] }, { type: i2.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i3.IDEATranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEACalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'idea-calendar', template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      <ion-button [title]=\"t._('COMMON.CLOSE')\" (click)=\"close()\">\n        <ion-icon name=\"close-circle\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title>{{ 'IDEA_AGENDA.CALENDARS.EDIT_CALENDAR' | translate }}</ion-title>\n    <ion-buttons slot=\"end\">\n      <ion-button [title]=\"t._('COMMON.SAVE')\" (click)=\"save()\">\n        <ion-icon name=\"checkmark-circle\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <div class=\"maxWidthContainer\" *ngIf=\"_calendar\">\n    <ion-list class=\"aList\">\n      <ion-item\n        lines=\"inset\"\n        [class.fieldHasError]=\"hasFieldAnError('name')\"\n        [title]=\"t._('IDEA_AGENDA.CALENDARS.NAME_HINT')\"\n      >\n        <ion-label position=\"stacked\">{{ 'IDEA_AGENDA.CALENDARS.NAME' | translate }} </ion-label>\n        <ion-input [placeholder]=\"t._('IDEA_AGENDA.CALENDARS.NAME_HINT')\" [(ngModel)]=\"_calendar.name\"></ion-input>\n      </ion-item>\n      <ion-item\n        lines=\"inset\"\n        [class.fieldHasError]=\"hasFieldAnError('description')\"\n        [title]=\"t._('IDEA_AGENDA.CALENDARS.DESCRIPTION_HINT')\"\n      >\n        <ion-label position=\"stacked\">{{ 'IDEA_AGENDA.CALENDARS.DESCRIPTION' | translate }} </ion-label>\n        <ion-input\n          [placeholder]=\"t._('IDEA_AGENDA.CALENDARS.DESCRIPTION_HINT')\"\n          [(ngModel)]=\"_calendar.description\"\n        ></ion-input>\n      </ion-item>\n      <idea-color-picker\n        *ngIf=\"!hideColor\"\n        [lines]=\"'inset'\"\n        [current]=\"_calendar.color\"\n        [label]=\"t._('IDEA_AGENDA.CALENDARS.COLOR')\"\n        [class.fieldHasError]=\"hasFieldAnError('color')\"\n        (select)=\"$event ? (_calendar.color = $event) : null\"\n      ></idea-color-picker>\n      <idea-checker\n        *ngIf=\"membershipsChecks && _calendar.isShared() && advancedPermissions\"\n        [data]=\"membershipsChecks\"\n        [label]=\"t._('IDEA_AGENDA.CALENDARS.USERS_ALLOWED_TO_MANAGE_APPOINTMENTS')\"\n        [searchPlaceholder]=\"t._('IDEA_AGENDA.CALENDARS.WHO_CAN_MANAGE_APPOINTMENTS')\"\n        [noneText]=\"t._('IDEA_AGENDA.CALENDARS.NOBODY')\"\n        [allText]=\"t._('IDEA_AGENDA.CALENDARS.EVERYONE')\"\n        [allowSelectDeselectAll]=\"true\"\n        [lines]=\"'inset'\"\n      ></idea-checker>\n    </ion-list>\n    <ion-list class=\"aList\" *ngIf=\"_calendar.external?.service\">\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_AGENDA.CALENDARS.INFO_ON_CALENDAR' | translate }}</h2>\n        </ion-label>\n      </ion-list-header>\n      <ion-item lines=\"inset\" *ngIf=\"calendar.userId\">\n        <ion-label>\n          {{ 'IDEA_AGENDA.CALENDARS.PRIVATE_CALENDAR' | translate }}\n          <p>{{ 'IDEA_AGENDA.CALENDARS.PRIVATE_CALENDAR_HINT' | translate }}</p>\n        </ion-label>\n        <ion-icon slot=\"end\" name=\"person\"></ion-icon>\n      </ion-item>\n      <ion-item lines=\"inset\" *ngIf=\"calendar.teamId\">\n        <ion-label>\n          {{ 'IDEA_AGENDA.CALENDARS.TEAM_CALENDAR' | translate }}\n          <p>{{ 'IDEA_AGENDA.CALENDARS.TEAM_CALENDAR_HINT' | translate }}</p>\n        </ion-label>\n        <ion-icon slot=\"end\" name=\"people\"></ion-icon>\n      </ion-item>\n      <ion-item lines=\"inset\">\n        <ion-label>\n          {{ 'IDEA_AGENDA.CALENDARS.LINKED_TO' | translate }}\n          {{ 'IDEA_AGENDA.CALENDARS.SERVICES.' + _calendar.external.service | translate }}\n          <p>{{ _calendar.external.name }} ({{ _calendar.external.email }})</p>\n        </ion-label>\n        <ion-icon slot=\"end\" [name]=\"calendars.getServiceIcon(_calendar.external.service)\"></ion-icon>\n      </ion-item>\n      <ion-item lines=\"inset\">\n        <ion-label>\n          {{ 'IDEA_AGENDA.CALENDARS.ACCESS_LEVELS.' + _calendar.external.userAccess | translate }}\n          <p>{{ 'IDEA_AGENDA.CALENDARS.BASED_ON_EXTERNAL_SERVICE_SHARING_PERMISSION' | translate }}</p>\n        </ion-label>\n        <ion-icon slot=\"end\" name=\"shield\"></ion-icon>\n      </ion-item>\n    </ion-list>\n    <ion-list class=\"aList\">\n      <ion-list-header>\n        <ion-label color=\"danger\">\n          <h2>{{ 'IDEA_AGENDA.CALENDARS.DANGEROUS_ZONE' | translate }}</h2>\n        </ion-label>\n      </ion-list-header>\n      <ion-item lines=\"inset\">\n        <ion-label class=\"ion-text-wrap\">\n          {{ 'IDEA_AGENDA.CALENDARS.DELETE_CALENDAR' | translate }}\n          <p>{{ 'IDEA_AGENDA.CALENDARS.DELETE_CALENDAR_HINT' | translate }}</p>\n        </ion-label>\n        <ion-button color=\"danger\" [title]=\"t._('IDEA_AGENDA.CALENDARS.DELETE_CALENDAR_HINT')\" (click)=\"delete()\">\n          {{ 'COMMON.DELETE' | translate }}\n        </ion-button>\n      </ion-item>\n    </ion-list>\n  </div>\n</ion-content>\n", styles: [".maxWidthContainer{max-width:500px;padding-top:20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: IDEACalendarsService }, { type: i2.ModalController }, { type: i2.AlertController }, { type: i3.IDEATinCanService }, { type: i3.IDEALoadingService }, { type: i3.IDEAMessageService }, { type: i3.IDEAAWSAPIService }, { type: i3.IDEATranslationsService }]; }, propDecorators: { calendar: [{
+                type: Input
+            }], advancedPermissions: [{
+                type: Input
+            }], hideColor: [{
+                type: Input
+            }] } });
+
+class IDEACalendarItemComponent {
+    constructor(calendars, alertCtrl, modalCtrl, message, loading, t) {
+        this.calendars = calendars;
+        this.alertCtrl = alertCtrl;
+        this.modalCtrl = modalCtrl;
+        this.message = message;
+        this.loading = loading;
+        this.t = t;
+        /**
+         * Report to parent components a change.
+         */
+        this.somethingChanged = new EventEmitter();
+    }
+    /**
+     * Open the modal to manage the calendar.
+     */
+    manageCalendar() {
+        if (this.disabled)
+            return;
+        this.modalCtrl
+            .create({
+            component: IDEACalendarComponent,
+            componentProps: {
+                calendar: this.calendar,
+                advancedPermissions: this.advancedPermissions,
+                hideColor: this.hideColor
+            }
+        })
+            .then(modal => {
+            modal.onDidDismiss().then(res => {
+                const cal = res.data;
+                // nothing changed
+                if (cal === undefined)
+                    return;
+                // the calendar was deleted
+                else if (cal === null)
+                    this.calendar = null;
+                // the calendar was updated
+                else
+                    this.calendar.load(cal);
+                // report changes to parent components
+                this.somethingChanged.emit();
+            });
+            modal.present();
+        });
+    }
+    /**
+     * Continue the auth flow to link an external service and set an external calendar;
+     * otherwise, the calendar can be deleted.
+     */
+    linkExtCalendarOrDelete() {
+        if (this.disabled)
+            return;
+        // let the user pick an external calendar, in case the external service is linked
+        this.calendars
+            .chooseAndSetExternalCalendar(this.calendar)
+            .then(async (cal) => {
+            if (!cal)
+                return new Error('NO_EXTERNAL_CALENDAR_CHOSEN');
+            this.calendar.load(cal);
+            this.message.success('IDEA_AGENDA.CALENDARS.CALENDAR_LINKED');
+            // run a first sync for the linked external calendar
+            await this.loading.show(this.t._('IDEA_AGENDA.CALENDARS.FIRST_SYNC_MAY_TAKE_A_WHILE'));
+            this.calendars
+                .syncCalendar(this.calendar)
+                .then(() => this.message.success('IDEA_AGENDA.CALENDARS.FIRST_SYNC_COMPLETED'))
+                .catch(() => this.message.error('COMMON.OPERATION_FAILED'))
+                .finally(() => {
+                this.loading.hide();
+                // report changes to parent components
+                this.somethingChanged.emit();
+            });
+        })
+            .catch(() => {
+            // the external service isn't linked yet (we don't have a token): link or delete
+            this.alertCtrl
+                .create({
+                header: this.t._('IDEA_AGENDA.CALENDARS.CALENDAR_NOT_YET_LINKED'),
+                message: this.t._('IDEA_AGENDA.CALENDARS.DO_YOU_WANT_PROCEED_LINKING_OR_DELETE'),
+                buttons: [
+                    {
+                        text: this.t._('COMMON.DELETE'),
+                        handler: async () => {
+                            // request the calendar deletion
+                            await this.loading.show();
+                            this.calendars
+                                .deleteCalendar(this.calendar)
+                                .then(() => {
+                                this.message.success('COMMON.OPERATION_COMPLETED');
+                                // report changes to parent components
+                                this.somethingChanged.emit();
+                            })
+                                .catch(() => this.message.error('COMMON.OPERATION_FAILED'))
+                                .finally(() => this.loading.hide());
+                        }
+                    },
+                    {
+                        text: this.t._('IDEA_AGENDA.CALENDARS.LINK'),
+                        handler: () => 
+                        // try again to link the service
+                        this.calendars
+                            .linkExtService(this.calendar)
+                            // if the service was successfully linked, go recursive to choose and set the external calendar
+                            .then(() => this.linkExtCalendarOrDelete())
+                            .catch(() => this.message.error('COMMON.OPERATION_FAILED'))
+                    }
+                ]
+            })
+                .then(alert => alert.present());
+        });
+    }
+}
+IDEACalendarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEACalendarItemComponent, deps: [{ token: IDEACalendarsService }, { token: i2.AlertController }, { token: i2.ModalController }, { token: i3.IDEAMessageService }, { token: i3.IDEALoadingService }, { token: i3.IDEATranslationsService }], target: i0.ɵɵFactoryTarget.Component });
+IDEACalendarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: IDEACalendarItemComponent, selector: "idea-calendar-item", inputs: { calendar: "calendar", disabled: "disabled", advancedPermissions: "advancedPermissions", hideColor: "hideColor" }, outputs: { somethingChanged: "somethingChanged" }, ngImport: i0, template: "<ion-item\n  class=\"calendarItem\"\n  *ngIf=\"calendar\"\n  [button]=\"!disabled\"\n  [title]=\"t._('IDEA_AGENDA.CALENDARS.EDIT_CALENDAR')\"\n  (click)=\"calendar.external && !calendar.external.calendarId ? linkExtCalendarOrDelete() : manageCalendar()\"\n>\n  <ion-avatar\n    slot=\"start\"\n    class=\"colorCircle\"\n    *ngIf=\"!hideColor\"\n    [style.background-color]=\"calendar.color\"\n  ></ion-avatar>\n  <ion-label>\n    {{ calendar.name }}\n    <p>\n      <ion-text color=\"danger\" *ngIf=\"calendar.external && !calendar.external.calendarId\">\n        {{ 'IDEA_AGENDA.CALENDARS.TAP_TO_CONFIGURE' | translate }}\n      </ion-text>\n      {{ calendar.description }}\n    </p>\n  </ion-label>\n  <ion-icon\n    slot=\"end\"\n    color=\"danger\"\n    name=\"flash-off\"\n    *ngIf=\"calendar.external && !calendar.external.calendarId\"\n    [title]=\"t._('IDEA_AGENDA.CALENDARS.CALENDAR_NOT_YET_LINKED_HINT')\"\n  ></ion-icon>\n  <ion-icon\n    slot=\"end\"\n    *ngIf=\"calendar.external?.service\"\n    [name]=\"calendars.getServiceIcon(calendar.external.service)\"\n    [title]=\"\n      t._('IDEA_AGENDA.CALENDARS.LINKED_TO') + ' ' + t._('IDEA_AGENDA.CALENDARS.SERVICES.' + calendar.external.service)\n    \"\n  ></ion-icon>\n</ion-item>\n", styles: [".calendarItem ion-avatar.colorCircle{width:20px;height:20px;background-color:#555}\n"], components: [{ type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2.IonAvatar, selector: "ion-avatar" }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.IDEATranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEACalendarItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'idea-calendar-item', template: "<ion-item\n  class=\"calendarItem\"\n  *ngIf=\"calendar\"\n  [button]=\"!disabled\"\n  [title]=\"t._('IDEA_AGENDA.CALENDARS.EDIT_CALENDAR')\"\n  (click)=\"calendar.external && !calendar.external.calendarId ? linkExtCalendarOrDelete() : manageCalendar()\"\n>\n  <ion-avatar\n    slot=\"start\"\n    class=\"colorCircle\"\n    *ngIf=\"!hideColor\"\n    [style.background-color]=\"calendar.color\"\n  ></ion-avatar>\n  <ion-label>\n    {{ calendar.name }}\n    <p>\n      <ion-text color=\"danger\" *ngIf=\"calendar.external && !calendar.external.calendarId\">\n        {{ 'IDEA_AGENDA.CALENDARS.TAP_TO_CONFIGURE' | translate }}\n      </ion-text>\n      {{ calendar.description }}\n    </p>\n  </ion-label>\n  <ion-icon\n    slot=\"end\"\n    color=\"danger\"\n    name=\"flash-off\"\n    *ngIf=\"calendar.external && !calendar.external.calendarId\"\n    [title]=\"t._('IDEA_AGENDA.CALENDARS.CALENDAR_NOT_YET_LINKED_HINT')\"\n  ></ion-icon>\n  <ion-icon\n    slot=\"end\"\n    *ngIf=\"calendar.external?.service\"\n    [name]=\"calendars.getServiceIcon(calendar.external.service)\"\n    [title]=\"\n      t._('IDEA_AGENDA.CALENDARS.LINKED_TO') + ' ' + t._('IDEA_AGENDA.CALENDARS.SERVICES.' + calendar.external.service)\n    \"\n  ></ion-icon>\n</ion-item>\n", styles: [".calendarItem ion-avatar.colorCircle{width:20px;height:20px;background-color:#555}\n"] }]
+        }], ctorParameters: function () { return [{ type: IDEACalendarsService }, { type: i2.AlertController }, { type: i2.ModalController }, { type: i3.IDEAMessageService }, { type: i3.IDEALoadingService }, { type: i3.IDEATranslationsService }]; }, propDecorators: { calendar: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], advancedPermissions: [{
+                type: Input
+            }], hideColor: [{
+                type: Input
+            }], somethingChanged: [{
+                type: Output
+            }] } });
+
+class IDEACalendarCreationComponent {
+    constructor(calendars, modalCtrl, tc, loading, message, API, t) {
+        this.calendars = calendars;
+        this.modalCtrl = modalCtrl;
+        this.tc = tc;
+        this.loading = loading;
+        this.message = message;
+        this.API = API;
+        this.t = t;
+        /**
+         * The default color for a new calendar.
+         */
+        this.DEFAULT_COLOR = '#555';
+        /**
+         * The possible external services for the new calendar.
+         */
+        this.SOURCES = Object.keys(ExternalCalendarSources);
+    }
+    ngOnInit() {
+        this.calendar = new Calendar();
+        this.membership = this.tc.get('membership');
+        if (this.fixScope === CalendarScopes.SHARED)
+            this.calendar.teamId = this.membership.teamId;
+        if (this.fixScope === CalendarScopes.PRIVATE)
+            this.calendar.userId = this.membership.userId;
+    }
+    /**
+     * If allowed by the component configuration, reset the scope of the calendar (private/shared).
+     */
+    resetScope() {
+        if (this.canChangeScope())
+            this.calendar.teamId = this.calendar.userId = null;
+    }
+    /**
+     * Whether we can change the scope of the calendar (private/shared).
+     */
+    canChangeScope() {
+        return !this.fixScope && this.scopeIsSet();
+    }
+    /**
+     * Whether the scope has been set already.
+     */
+    scopeIsSet() {
+        return Boolean(this.calendar.userId) || Boolean(this.calendar.teamId);
+    }
+    /**
+     * Add a new calendar based on the configuration set.
+     */
+    async saveNewCalendar(service) {
+        // be sure the scope of the calendar was chosen
+        if (!this.scopeIsSet())
+            return;
+        // be sure we are allowed to create the calendar
+        if (!service && this.onlyExternalCalendars)
+            return;
+        // flag the calendar so it has to be linked to an externals service (the procedure follows the creation)
+        if (service) {
+            this.calendar.external = new ExternalCalendarInfo({ service });
+            this.calendar.name = '-'; // it will be substituted with the external name
+        }
+        else {
+            // default values for local calendars
+            this.calendar.name = this.calendar.userId
+                ? this.t._('IDEA_AGENDA.CALENDARS.DEFAULT_PERSONAL_CALENDAR_NAME')
+                : this.t._('IDEA_AGENDA.CALENDARS.DEFAULT_TEAM_CALENDAR_NAME');
+            this.calendar.color = this.DEFAULT_COLOR;
+        }
+        // save (create) the new calendar
+        await this.loading.show();
+        this.calendars
+            .postCalendar(this.calendar)
+            .then(cal => {
+            this.calendar.load(cal);
+            this.message.success('IDEA_AGENDA.CALENDARS.CALENDAR_CREATED');
+            // if the calendar is local, no further action is needed
+            if (!cal.external)
+                return this.modalCtrl.dismiss(this.calendar);
+            // if the calendar should be linked to an external service, proceed
+            this.calendars
+                .linkExtService(this.calendar)
+                // if the link was successful, let the user pick an external calendar to set
+                .then(() => this.calendars.chooseAndSetExternalCalendar(this.calendar))
+                .then(async (res) => {
+                // if a calendar wasn't set, it can be done later on
+                if (!res)
+                    return this.modalCtrl.dismiss(this.calendar);
+                // if an external calendar was set, update the calendar
+                this.calendar.load(res);
+                // run a first sync for the linked external calendar
+                await this.loading.show(this.t._('IDEA_AGENDA.CALENDARS.FIRST_SYNC_MAY_TAKE_A_WHILE'));
+                this.calendars
+                    .syncCalendar(this.calendar)
+                    .then(() => this.message.success('IDEA_AGENDA.CALENDARS.FIRST_SYNC_COMPLETED'))
+                    .catch(() => this.message.error('COMMON.OPERATION_FAILED'))
+                    .finally(() => {
+                    this.loading.hide();
+                    // the calendar is ready to go
+                    this.modalCtrl.dismiss(this.calendar);
+                });
+            })
+                .catch(() => {
+                this.message.error('COMMON.OPERATION_FAILED');
+                // the operation can be retried later on; close the modal anyway
+                this.modalCtrl.dismiss(this.calendar);
+            });
+        })
+            .catch(() => this.message.error('COMMON.OPERATION_FAILED'))
+            .finally(() => this.loading.hide());
+    }
+    /**
+     * Close the component.
+     */
+    close() {
+        this.modalCtrl.dismiss();
+    }
+}
+IDEACalendarCreationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEACalendarCreationComponent, deps: [{ token: IDEACalendarsService }, { token: i2.ModalController }, { token: i3.IDEATinCanService }, { token: i3.IDEALoadingService }, { token: i3.IDEAMessageService }, { token: i3.IDEAAWSAPIService }, { token: i3.IDEATranslationsService }], target: i0.ɵɵFactoryTarget.Component });
+IDEACalendarCreationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: IDEACalendarCreationComponent, selector: "idea-calendar-creation", inputs: { fixScope: "fixScope", onlyExternalCalendars: "onlyExternalCalendars" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      <ion-button *ngIf=\"!canChangeScope()\" [title]=\"t._('COMMON.CLOSE')\" (click)=\"close()\">\n        <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n      <ion-button *ngIf=\"canChangeScope()\" (click)=\"resetScope()\">\n        <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title>\n      <span *ngIf=\"!scopeIsSet()\">{{ 'IDEA_AGENDA.CALENDARS.ADD_A_CALENDAR' | translate }}</span>\n      <span *ngIf=\"calendar.userId\">{{ 'IDEA_AGENDA.CALENDARS.PERSONAL_CALENDAR' | translate }}</span>\n      <span *ngIf=\"calendar.teamId\">\n        {{ 'IDEA_AGENDA.CALENDARS.TEAM_CALENDAR' | translate: { team: tc.get('team').name } }}\n      </span>\n    </ion-title>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <!-- 1st STEP -->\n  <ion-grid class=\"ion-padding choiceGrid\" *ngIf=\"!scopeIsSet()\">\n    <ion-row>\n      <ion-col class=\"ion-text-center\">\n        <h1>{{ 'IDEA_AGENDA.CALENDARS.CREATE_PRIVATE_OR_TEAM' | translate }}</h1>\n      </ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-center\" [size]=\"12\" [sizeSm]=\"6\">\n        <ion-card [button]=\"true\" (click)=\"calendar.userId = membership.userId\">\n          <ion-card-header>\n            <ion-card-title>\n              <ion-icon name=\"person\"></ion-icon>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <h1>{{ 'IDEA_AGENDA.CALENDARS.PERSONAL_CALENDAR' | translate }}</h1>\n            <p>{{ 'IDEA_AGENDA.CALENDARS.PERSONAL_CALENDAR_HINT' | translate }}</p>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"12\" [sizeSm]=\"6\">\n        <ion-card [button]=\"true\" (click)=\"calendar.teamId = membership.teamId\">\n          <ion-card-header>\n            <ion-card-title>\n              <ion-icon name=\"people\"></ion-icon>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <h1>{{ 'IDEA_AGENDA.CALENDARS.TEAM_CALENDAR' | translate }}</h1>\n            <p>{{ 'IDEA_AGENDA.CALENDARS.TEAM_CALENDAR_HINT' | translate }}</p>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n  <!-- 2nd STEP -->\n  <ion-grid class=\"ion-padding choiceGrid\" *ngIf=\"scopeIsSet()\">\n    <ion-row>\n      <ion-col class=\"ion-text-center\">\n        <h1>{{ 'IDEA_AGENDA.CALENDARS.WHICH_EXTERNAL_SERVICE_TO_LINK' | translate }}</h1>\n        <p>{{ 'IDEA_AGENDA.CALENDARS.WHICH_EXTERNAL_SERVICE_TO_LINK_HINT' | translate }}</p>\n      </ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-center\" [size]=\"12\" *ngIf=\"!onlyExternalCalendars\">\n        <ion-card class=\"step2\" [button]=\"true\" (click)=\"saveNewCalendar()\">\n          <ion-card-header>\n            <ion-card-title>\n              <ion-icon name=\"remove\"></ion-icon>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <h1>{{ 'IDEA_AGENDA.CALENDARS.DONT_LINK' | translate }}</h1>\n            <p>{{ 'IDEA_AGENDA.CALENDARS.DONT_LINK_HINT' | translate }}</p>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" *ngFor=\"let s of SOURCES\" [size]=\"12\">\n        <ion-card class=\"step2\" [button]=\"true\" (click)=\"saveNewCalendar(s)\">\n          <ion-card-header>\n            <ion-card-title>\n              <ion-icon [name]=\"calendars.getServiceIcon(s)\"></ion-icon>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <h1>\n              {{ 'IDEA_AGENDA.CALENDARS.LINK_TO' | translate }}\n              {{ 'IDEA_AGENDA.CALENDARS.SERVICES.' + s | translate }}\n            </h1>\n            <p>{{ 'IDEA_AGENDA.CALENDARS.LINK_TO_HINT' | translate }}</p>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</ion-content>\n", styles: ["ion-content{--background: var(--ion-color-white-shade)}.choiceGrid ion-row ion-col>h1{margin:10px 0 0;font-size:1.1em}.choiceGrid ion-row ion-col>p{margin-top:0;margin-bottom:0;font-size:.9em}.choiceGrid ion-row:first-child ion-col{padding-bottom:25px}.choiceGrid ion-card{--ion-item-background: var(--ion-color-white);--color: var(--ion-color-dark-tint);height:240px;margin:0 auto;text-align:center}.choiceGrid ion-card ion-card-header{padding-bottom:10px}.choiceGrid ion-card ion-card-header ion-card-title{font-size:2.5em}.choiceGrid ion-card ion-card-content h1{font-size:1.4em;height:60px}.choiceGrid ion-card.step2{height:135px}.choiceGrid ion-card.step2 ion-card-header{padding-top:10px;padding-bottom:0}.choiceGrid ion-card.step2 ion-card-content h1{height:auto}\n"], components: [{ type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2.IonRow, selector: "ion-row" }, { 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"] }, { type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.IDEATranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEACalendarCreationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'idea-calendar-creation', template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      <ion-button *ngIf=\"!canChangeScope()\" [title]=\"t._('COMMON.CLOSE')\" (click)=\"close()\">\n        <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n      <ion-button *ngIf=\"canChangeScope()\" (click)=\"resetScope()\">\n        <ion-icon name=\"arrow-back\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title>\n      <span *ngIf=\"!scopeIsSet()\">{{ 'IDEA_AGENDA.CALENDARS.ADD_A_CALENDAR' | translate }}</span>\n      <span *ngIf=\"calendar.userId\">{{ 'IDEA_AGENDA.CALENDARS.PERSONAL_CALENDAR' | translate }}</span>\n      <span *ngIf=\"calendar.teamId\">\n        {{ 'IDEA_AGENDA.CALENDARS.TEAM_CALENDAR' | translate: { team: tc.get('team').name } }}\n      </span>\n    </ion-title>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <!-- 1st STEP -->\n  <ion-grid class=\"ion-padding choiceGrid\" *ngIf=\"!scopeIsSet()\">\n    <ion-row>\n      <ion-col class=\"ion-text-center\">\n        <h1>{{ 'IDEA_AGENDA.CALENDARS.CREATE_PRIVATE_OR_TEAM' | translate }}</h1>\n      </ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-center\" [size]=\"12\" [sizeSm]=\"6\">\n        <ion-card [button]=\"true\" (click)=\"calendar.userId = membership.userId\">\n          <ion-card-header>\n            <ion-card-title>\n              <ion-icon name=\"person\"></ion-icon>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <h1>{{ 'IDEA_AGENDA.CALENDARS.PERSONAL_CALENDAR' | translate }}</h1>\n            <p>{{ 'IDEA_AGENDA.CALENDARS.PERSONAL_CALENDAR_HINT' | translate }}</p>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" [size]=\"12\" [sizeSm]=\"6\">\n        <ion-card [button]=\"true\" (click)=\"calendar.teamId = membership.teamId\">\n          <ion-card-header>\n            <ion-card-title>\n              <ion-icon name=\"people\"></ion-icon>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <h1>{{ 'IDEA_AGENDA.CALENDARS.TEAM_CALENDAR' | translate }}</h1>\n            <p>{{ 'IDEA_AGENDA.CALENDARS.TEAM_CALENDAR_HINT' | translate }}</p>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n  <!-- 2nd STEP -->\n  <ion-grid class=\"ion-padding choiceGrid\" *ngIf=\"scopeIsSet()\">\n    <ion-row>\n      <ion-col class=\"ion-text-center\">\n        <h1>{{ 'IDEA_AGENDA.CALENDARS.WHICH_EXTERNAL_SERVICE_TO_LINK' | translate }}</h1>\n        <p>{{ 'IDEA_AGENDA.CALENDARS.WHICH_EXTERNAL_SERVICE_TO_LINK_HINT' | translate }}</p>\n      </ion-col>\n    </ion-row>\n    <ion-row class=\"ion-align-items-center\">\n      <ion-col class=\"ion-text-center\" [size]=\"12\" *ngIf=\"!onlyExternalCalendars\">\n        <ion-card class=\"step2\" [button]=\"true\" (click)=\"saveNewCalendar()\">\n          <ion-card-header>\n            <ion-card-title>\n              <ion-icon name=\"remove\"></ion-icon>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <h1>{{ 'IDEA_AGENDA.CALENDARS.DONT_LINK' | translate }}</h1>\n            <p>{{ 'IDEA_AGENDA.CALENDARS.DONT_LINK_HINT' | translate }}</p>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n      <ion-col class=\"ion-text-center\" *ngFor=\"let s of SOURCES\" [size]=\"12\">\n        <ion-card class=\"step2\" [button]=\"true\" (click)=\"saveNewCalendar(s)\">\n          <ion-card-header>\n            <ion-card-title>\n              <ion-icon [name]=\"calendars.getServiceIcon(s)\"></ion-icon>\n            </ion-card-title>\n          </ion-card-header>\n          <ion-card-content>\n            <h1>\n              {{ 'IDEA_AGENDA.CALENDARS.LINK_TO' | translate }}\n              {{ 'IDEA_AGENDA.CALENDARS.SERVICES.' + s | translate }}\n            </h1>\n            <p>{{ 'IDEA_AGENDA.CALENDARS.LINK_TO_HINT' | translate }}</p>\n          </ion-card-content>\n        </ion-card>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</ion-content>\n", styles: ["ion-content{--background: var(--ion-color-white-shade)}.choiceGrid ion-row ion-col>h1{margin:10px 0 0;font-size:1.1em}.choiceGrid ion-row ion-col>p{margin-top:0;margin-bottom:0;font-size:.9em}.choiceGrid ion-row:first-child ion-col{padding-bottom:25px}.choiceGrid ion-card{--ion-item-background: var(--ion-color-white);--color: var(--ion-color-dark-tint);height:240px;margin:0 auto;text-align:center}.choiceGrid ion-card ion-card-header{padding-bottom:10px}.choiceGrid ion-card ion-card-header ion-card-title{font-size:2.5em}.choiceGrid ion-card ion-card-content h1{font-size:1.4em;height:60px}.choiceGrid ion-card.step2{height:135px}.choiceGrid ion-card.step2 ion-card-header{padding-top:10px;padding-bottom:0}.choiceGrid ion-card.step2 ion-card-content h1{height:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: IDEACalendarsService }, { type: i2.ModalController }, { type: i3.IDEATinCanService }, { type: i3.IDEALoadingService }, { type: i3.IDEAMessageService }, { type: i3.IDEAAWSAPIService }, { type: i3.IDEATranslationsService }]; }, propDecorators: { fixScope: [{
+                type: Input
+            }], onlyExternalCalendars: [{
+                type: Input
+            }] } });
+/**
+ * The possible scopes of the calendar.
+ */
+var CalendarScopes;
+(function (CalendarScopes) {
+    CalendarScopes["SHARED"] = "shared";
+    CalendarScopes["PRIVATE"] = "private"; // userId
+})(CalendarScopes || (CalendarScopes = {}));
+
+class IDEAAgendaModule {
+}
+IDEAAgendaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEAAgendaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IDEAAgendaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEAAgendaModule, declarations: [IDEAAgendaComponent, IDEACalendarComponent, IDEACalendarItemComponent, IDEACalendarCreationComponent], imports: [CommonModule,
+        FormsModule,
+        IonicModule,
+        IDEATranslationsModule,
+        IDEAColorPickerModule,
+        IDEACheckerModule, i3$1.CalendarModule], exports: [IDEAAgendaComponent, IDEACalendarComponent, IDEACalendarItemComponent, IDEACalendarCreationComponent] });
+IDEAAgendaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEAAgendaModule, providers: [{ provide: CalendarDateFormatter, useClass: CustomDateFormatter }, IDEACalendarsService], imports: [[
+            CommonModule,
+            FormsModule,
+            IonicModule,
+            IDEATranslationsModule,
+            IDEAColorPickerModule,
+            IDEACheckerModule,
+            CalendarModule.forRoot({ provide: DateAdapter, useFactory: adapterFactory })
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IDEAAgendaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        IonicModule,
+                        IDEATranslationsModule,
+                        IDEAColorPickerModule,
+                        IDEACheckerModule,
+                        CalendarModule.forRoot({ provide: DateAdapter, useFactory: adapterFactory })
+                    ],
+                    declarations: [IDEAAgendaComponent, IDEACalendarComponent, IDEACalendarItemComponent, IDEACalendarCreationComponent],
+                    entryComponents: [
+                        IDEAAgendaComponent,
+                        IDEACalendarComponent,
+                        IDEACalendarItemComponent,
+                        IDEACalendarCreationComponent
+                    ],
+                    exports: [IDEAAgendaComponent, IDEACalendarComponent, IDEACalendarItemComponent, IDEACalendarCreationComponent],
+                    providers: [{ provide: CalendarDateFormatter, useClass: CustomDateFormatter }, IDEACalendarsService]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CalendarScopes, CustomDateFormatter, EventAttendance, IDEAAgendaComponent, IDEAAgendaModule, IDEACalendarComponent, IDEACalendarCreationComponent, IDEACalendarItemComponent, IDEACalendarsService };
+//# sourceMappingURL=idea-ionic-agenda.mjs.map