@idea-ionic/agenda 7.3.0 → 8.0.2

package/fesm2022/idea-ionic-agenda.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, inject, NgModule } from '@angular/core';
-import * as i3$1 from '@angular/common';
+import { Injectable, EventEmitter, inject, ChangeDetectorRef, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
 import { formatDate, CommonModule } from '@angular/common';
-import * as i5 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@ionic/angular';
-import { IonicModule } from '@ionic/angular';
+import { Platform, ModalController, AlertController, IonicModule } from '@ionic/angular';
 import * as i4 from 'angular-calendar';
-import { CalendarDateFormatter, CalendarView, DateAdapter, CalendarModule } 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 { IDEAEnvironment, IDEASuggestionsComponent, IDEATranslationsModule, IDEAColorPickerModule, IDEACheckerModule, IDEAUserAvatarModule } from '@idea-ionic/common';
-import { Subject, finalize, fromEvent, takeUntil } from 'rxjs';
+import { IDEATranslationsService, IDEAEnvironment, IDEALoadingService, IDEAAWSAPIService, IDEASuggestionsComponent, IDEATinCanService, IDEAMessageService, IDEATranslationsModule, IDEAColorPickerModule, IDEACheckerModule, IDEAUserAvatarModule } from '@idea-ionic/common';
+import { Subject, fromEvent, finalize, takeUntil } from 'rxjs';
 import { isFuture, isToday, isSameDay, endOfWeek, addMinutes, addDays } from 'date-fns';
 import ColorParse from 'color-parse';
 import { ExternalCalendarSources, Calendar, Suggestion, Check, ExternalCalendarInfo } from 'idea-toolbox';
@@ -31,18 +31,15 @@ class CustomDateFormatter extends CalendarDateFormatter {
         this.dayViewHour = ({ date, locale }) => locale === 'it' ? formatDate(date, 'HH:mm', locale) : formatDate(date, 'h aa', locale);
         this.dayViewTitle = ({ date, locale }) => locale === 'it' ? formatDate(date, 'EEEE, dd MMM yyyy', locale) : formatDate(date, 'EEEE, MMM dd, yyyy', locale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CustomDateFormatter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CustomDateFormatter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: CustomDateFormatter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: CustomDateFormatter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CustomDateFormatter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: CustomDateFormatter, decorators: [{
             type: Injectable
         }] });
 
 class IDEAAgendaComponent {
-    constructor(cdr, platform, t) {
-        this.cdr = cdr;
-        this.platform = platform;
-        this.t = t;
+    constructor() {
         /**
          * The events to display in the calendar.
          */
@@ -120,28 +117,22 @@ class IDEAAgendaComponent {
          * Trigger before the rendering of the month view.
          */
         this.beforeMonthViewRenderEmitter = new EventEmitter();
-        /**
-         * Helper to use the enum in the UX.
-         */
         this.CalendarView = CalendarView;
-        /**
-         * The currently selected date.
-         */
+        this.Attendance = EventAttendance;
         this.viewDate = new Date();
-        /**
-         * A controller to refresh the current view.
-         */
         this.refresh = new Subject();
-        this.Attendance = EventAttendance;
         this.darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        this._cdr = inject(ChangeDetectorRef);
+        this._platform = inject(Platform);
+        this._translate = inject(IDEATranslationsService);
     }
     ngOnInit() {
-        this.locale = this.t.getCurrentLang();
+        this.locale = this._translate.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;
     }
     isMobile() {
-        return this.platform.is('mobile');
+        return this._platform.is('mobile');
     }
     /**
      * Run some checks before the month view is rendered (e.g. disable invalid days).
@@ -173,58 +164,34 @@ class IDEAAgendaComponent {
             });
         });
     }
-    /**
-     * 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) {
         if (!color?.trim())
             return undefined;
@@ -234,9 +201,6 @@ class IDEAAgendaComponent {
         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 '';
@@ -251,15 +215,9 @@ class IDEAAgendaComponent {
         }
         return str;
     }
-    /**
-     * Get a shortened version of the description as preview.
-     */
     getPreviewDescription(description) {
         return description && description.length > 100 ? description.slice(0, 100).concat('...') : description;
     }
-    /**
-     * Handle the drag&drop to create a new event.
-     */
     startDragToCreate(event, segmentDate, segmentElement) {
         if (!this.allowDragToCreate)
             return;
@@ -291,7 +249,7 @@ class IDEAAgendaComponent {
         };
         const refreshView = () => {
             this.events = [...this.events];
-            this.cdr.detectChanges();
+            this._cdr.detectChanges();
         };
         if (event.type === 'touchstart') {
             fromEvent(document, 'touchmove')
@@ -311,13 +269,13 @@ class IDEAAgendaComponent {
             fixedEnd.setMinutes(agendaBooking.start.getMinutes() + segmentSizeInMinutes);
         return fixedEnd;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IDEAAgendaComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.Platform }, { token: i3.IDEATranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: IDEAAgendaComponent, selector: "idea-agenda", inputs: { events: "events", excludeDays: "excludeDays", dayStartHour: "dayStartHour", dayEndHour: "dayEndHour", hourSegments: "hourSegments", activeDayIsOpen: "activeDayIsOpen", view: "view", allowedViews: "allowedViews", onlyFuture: "onlyFuture", titleNotes: "titleNotes", newEventTemplate: "newEventTemplate", allowDragToCreate: "allowDragToCreate", parentContent: "parentContent" }, outputs: { selectEvent: "selectEvent", selectDay: "selectDay", selectSlot: "selectSlot", newEventByDrag: "newEventByDrag", changeEvent: "changeEvent", changeDate: "changeDate", beforeWeekOrDayViewRenderEmitter: "beforeWeekOrDayViewRenderEmitter", beforeMonthViewRenderEmitter: "beforeMonthViewRenderEmitter" }, ngImport: i0, template: "<div class=\"agenda\">\n  <!-- TOOLBAR -->\n  <ion-row class=\"ion-align-items-center\">\n    <ion-col\n      class=\"ion-align-self-center ion-text-right\"\n      [size]=\"5\"\n      [sizeSm]=\"3\"\n      [pushSm]=\"5\"\n      [sizeLg]=\"2\"\n      [pushLg]=\"8\"\n    >\n      <ion-item lines=\"none\" class=\"calendarViewSelector\" *ngIf=\"allowedViews.length > 1\">\n        <ion-select\n          interface=\"popover\"\n          [value]=\"view\"\n          (ionChange)=\"$event?.detail ? setView($event.detail.value) : null\"\n        >\n          <ion-select-option *ngFor=\"let view of allowedViews\" [value]=\"view\">\n            {{ 'IDEA_AGENDA.' + view | uppercase | translate }}\n          </ion-select-option>\n        </ion-select>\n      </ion-item>\n    </ion-col>\n    <ion-col\n      class=\"ion-align-self-center ion-text-right\"\n      [size]=\"7\"\n      [sizeSm]=\"4\"\n      [pushSm]=\"5\"\n      [sizeLg]=\"2\"\n      [pushLg]=\"8\"\n    >\n      <ion-button\n        fill=\"clear\"\n        color=\"dark\"\n        size=\"small\"\n        mwlCalendarPreviousView\n        [view]=\"view\"\n        [(viewDate)]=\"viewDate\"\n        (viewDateChange)=\"viewDateChanged($event)\"\n      >\n        <ion-icon name=\"chevron-back-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n      <ion-button\n        fill=\"clear\"\n        color=\"dark\"\n        size=\"small\"\n        mwlCalendarToday\n        [(viewDate)]=\"viewDate\"\n        (viewDateChange)=\"viewDateChanged($event)\"\n      >\n        <ion-icon name=\"today-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n      <ion-button\n        fill=\"clear\"\n        color=\"dark\"\n        size=\"small\"\n        mwlCalendarNextView\n        [view]=\"view\"\n        [(viewDate)]=\"viewDate\"\n        (viewDateChange)=\"viewDateChanged($event)\"\n      >\n        <ion-icon name=\"chevron-forward-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-col>\n    <ion-col class=\"ion-align-self-center titleCol\" [size]=\"12\" [sizeSm]=\"5\" [pullSm]=\"7\" [sizeLg]=\"8\" [pullLg]=\"4\">\n      <h2>{{ viewDate | calendarDate : view + 'ViewTitle' : locale }}</h2>\n      <p *ngIf=\"titleNotes\">{{ titleNotes }}</p>\n    </ion-col>\n  </ion-row>\n  <!-- TEMPLATES (touch only what's necessary and leave everything else as it is) -->\n  <ng-template #eventTitleTemplate let-event=\"event\" let-view=\"view\">\n    <span\n      class=\"cal-event-title\"\n      [class.noWrap]=\"event.allDay\"\n      [attr.aria-hidden]=\"{} | calendarA11y : 'hideEventTitle'\"\n    >\n      {{ event.title | calendarEventTitle : view : event }}\n      <p *ngIf=\"!event.allDay\">{{ getPreviewDescription(event.description) }}</p>\n    </span>\n  </ng-template>\n  <ng-template\n    #eventTemplate\n    let-weekEvent=\"weekEvent\"\n    let-tooltipPlacement=\"tooltipPlacement\"\n    let-eventClicked=\"eventClicked\"\n    let-tooltipTemplate=\"tooltipTemplate\"\n    let-tooltipAppendToBody=\"tooltipAppendToBody\"\n    let-tooltipDisabled=\"tooltipDisabled\"\n    let-tooltipDelay=\"tooltipDelay\"\n    let-column=\"column\"\n    let-daysInWeek=\"daysInWeek\"\n  >\n    <div\n      class=\"cal-event\"\n      [class.external]=\"weekEvent.event.external\"\n      [class.needsAction]=\"Attendance.NEEDS_ACTION === weekEvent.event.attendance\"\n      [class.declined]=\"Attendance.DECLINED === weekEvent.event.attendance\"\n      [class.tentative]=\"Attendance.TENTATIVE === weekEvent.event.attendance\"\n      [style.border-left-color]=\"weekEvent.event.color?.primary\"\n      [style.color]=\"getAlternateColor(weekEvent.event.color?.primary, darkMode ? 80 : -40)\"\n      [style.background-color]=\"getAlternateColor(weekEvent.event.color?.primary, darkMode ? 60 : 80, 0.2)\"\n      [mwlCalendarTooltip]=\"!tooltipDisabled && !isMobile() ? getTooltipContent(weekEvent.event) : ''\"\n      [tooltipPlacement]=\"tooltipPlacement\"\n      [tooltipEvent]=\"weekEvent.tempEvent || weekEvent.event\"\n      [tooltipTemplate]=\"tooltipTemplate\"\n      [tooltipAppendToBody]=\"tooltipAppendToBody\"\n      [tooltipDelay]=\"tooltipDelay\"\n      (mwlClick)=\"eventClicked.emit({ sourceEvent: $event })\"\n      (mwlKeydownEnter)=\"eventClicked.emit({ sourceEvent: $event })\"\n      tabindex=\"0\"\n      role=\"application\"\n      [attr.aria-label]=\"\n        { event: weekEvent.tempEvent || weekEvent.event, locale: locale } | calendarA11y : 'eventDescription'\n      \"\n    >\n      <mwl-calendar-event-actions [event]=\"weekEvent.tempEvent || weekEvent.event\"></mwl-calendar-event-actions>\n      &ngsp;\n      <mwl-calendar-event-title\n        [event]=\"weekEvent.tempEvent || weekEvent.event\"\n        [customTemplate]=\"eventTitleTemplate\"\n        [view]=\"daysInWeek === 1 ? 'day' : 'week'\"\n      >\n      </mwl-calendar-event-title>\n      <div class=\"eventGadgets\" *ngIf=\"!weekEvent.event.allDay\">\n        <ion-icon *ngFor=\"let icon of weekEvent.event.icons\" [name]=\"icon.name\" [title]=\"icon.title\"></ion-icon>\n        <idea-user-avatar\n          size=\"mini\"\n          *ngFor=\"let avatar of weekEvent.event.avatars\"\n          [src]=\"avatar.url\"\n          [name]=\"avatar.title\"\n        ></idea-user-avatar>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template\n    #hourSegmentTemplate\n    let-segment=\"segment\"\n    let-locale=\"locale\"\n    let-segmentHeight=\"segmentHeight\"\n    let-isTimeLabel=\"isTimeLabel\"\n  >\n    <div\n      #segmentElement\n      class=\"cal-hour-segment\"\n      [style.height.px]=\"segmentHeight\"\n      [class.cal-hour-start]=\"segment.isStart\"\n      [class.cal-after-hour-start]=\"!segment.isStart\"\n      [ngClass]=\"segment.cssClass\"\n      (mousedown)=\"allowDragToCreate ? startDragToCreate($event, segment.date, segmentElement) : null\"\n      (touchstart)=\"allowDragToCreate ? startDragToCreate($event, segment.date, segmentElement) : null\"\n    >\n      <div class=\"cal-time\" *ngIf=\"isTimeLabel\">\n        {{ segment.date | calendarDate : 'weekViewHour' : locale }}\n      </div>\n    </div>\n  </ng-template>\n  <!-- VIEWS -->\n  <div [ngSwitch]=\"view\">\n    <mwl-calendar-month-view\n      *ngSwitchCase=\"CalendarView.Month\"\n      [viewDate]=\"viewDate\"\n      [events]=\"events\"\n      [refresh]=\"refresh\"\n      [activeDayIsOpen]=\"activeDayIsOpen\"\n      [locale]=\"locale\"\n      [excludeDays]=\"excludeDays\"\n      [weekStartsOn]=\"weekStartsOn\"\n      [eventTitleTemplate]=\"eventTitleTemplate\"\n      (eventClicked)=\"selectEvent.emit($event.event)\"\n      (eventTimesChanged)=\"eventTimesChanged($event)\"\n      (dayClicked)=\"changeDay($event.day)\"\n      (beforeViewRender)=\"beforeMonthViewRender($event)\"\n    >\n    </mwl-calendar-month-view>\n    <mwl-calendar-week-view\n      *ngSwitchCase=\"CalendarView.Week\"\n      [viewDate]=\"viewDate\"\n      [events]=\"events\"\n      [refresh]=\"refresh\"\n      [locale]=\"locale\"\n      [excludeDays]=\"excludeDays\"\n      [weekStartsOn]=\"weekStartsOn\"\n      [dayStartHour]=\"dayStartHour\"\n      [dayEndHour]=\"dayEndHour\"\n      [hourSegments]=\"hourSegments\"\n      [eventTemplate]=\"eventTemplate\"\n      [hourSegmentTemplate]=\"hourSegmentTemplate\"\n      (eventClicked)=\"selectEvent.emit($event.event)\"\n      (eventTimesChanged)=\"eventTimesChanged($event)\"\n      (dayHeaderClicked)=\"dateIsValid($event.day.date) ? selectDay.emit($event.day.date) : null\"\n      (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n      (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n    >\n    </mwl-calendar-week-view>\n    <mwl-calendar-day-view\n      *ngSwitchCase=\"CalendarView.Day\"\n      [viewDate]=\"viewDate\"\n      [events]=\"events\"\n      [refresh]=\"refresh\"\n      [locale]=\"locale\"\n      [dayStartHour]=\"dayStartHour\"\n      [dayEndHour]=\"dayEndHour\"\n      [hourSegments]=\"hourSegments\"\n      [eventTemplate]=\"eventTemplate\"\n      [hourSegmentTemplate]=\"hourSegmentTemplate\"\n      (eventClicked)=\"selectEvent.emit($event.event)\"\n      (eventTimesChanged)=\"eventTimesChanged($event)\"\n      (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n      (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n    >\n    </mwl-calendar-day-view>\n  </div>\n</div>\n", styles: [".agenda{margin-top:15px}.agenda ion-col.titleCol{padding-left:8px}.agenda ion-col.titleCol h2,.agenda ion-col.titleCol p{margin:0}.agenda ion-col.titleCol h2{font-size:1.2em}.agenda ion-col.titleCol p{font-size:.8em;font-style:italic}.agenda .calendarViewSelector{background-color:transparent;--ion-background-color: transparent;--background: transparent}.agenda .calendarViewSelector ion-select{max-width:100%;width:100%;padding-left:0;font-weight:500}.agenda .eventGadgets{margin-top:4px;margin-left:5px;text-align:right}.agenda .eventGadgets idea-user-avatar{display:block;float:left;margin:2px 1px}.agenda .eventGadgets ion-icon{padding-right:2px;opacity:.7;font-size:1.15em}@media only screen and (max-width: 575px){.agenda ion-col.titleCol{padding:0 8px 12px;text-align:center}}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "legacy", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: i2.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "directive", type: i2.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "component", type: i3.IDEAUserAvatarComponent, selector: "idea-user-avatar", inputs: ["src", "name", "size", "color"] }, { kind: "component", type: i4.ɵCalendarEventActionsComponent, selector: "mwl-calendar-event-actions", inputs: ["event", "customTemplate"] }, { kind: "component", type: i4.ɵCalendarEventTitleComponent, selector: "mwl-calendar-event-title", inputs: ["event", "customTemplate", "view"] }, { kind: "directive", type: i4.ɵCalendarTooltipDirective, selector: "[mwlCalendarTooltip]", inputs: ["mwlCalendarTooltip", "tooltipPlacement", "tooltipTemplate", "tooltipEvent", "tooltipAppendToBody", "tooltipDelay"] }, { kind: "directive", type: i4.ɵCalendarPreviousViewDirective, selector: "[mwlCalendarPreviousView]", inputs: ["view", "viewDate", "excludeDays", "daysInWeek"], outputs: ["viewDateChange"] }, { kind: "directive", type: i4.ɵCalendarNextViewDirective, selector: "[mwlCalendarNextView]", inputs: ["view", "viewDate", "excludeDays", "daysInWeek"], outputs: ["viewDateChange"] }, { kind: "directive", type: i4.ɵCalendarTodayDirective, selector: "[mwlCalendarToday]", inputs: ["viewDate"], outputs: ["viewDateChange"] }, { kind: "directive", type: i4.ɵClickDirective, selector: "[mwlClick]", inputs: ["clickListenerDisabled"], outputs: ["mwlClick"] }, { kind: "directive", type: i4.ɵKeydownEnterDirective, selector: "[mwlKeydownEnter]", outputs: ["mwlKeydownEnter"] }, { kind: "component", type: i4.CalendarMonthViewComponent, selector: "mwl-calendar-month-view", inputs: ["viewDate", "events", "excludeDays", "activeDayIsOpen", "activeDay", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "cellTemplate", "openDayEventsTemplate", "eventTitleTemplate", "eventActionsTemplate", "weekendDays"], outputs: ["beforeViewRender", "dayClicked", "eventClicked", "columnHeaderClicked", "eventTimesChanged"] }, { kind: "component", type: i4.CalendarWeekViewComponent, selector: "mwl-calendar-week-view", inputs: ["viewDate", "events", "excludeDays", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "eventTemplate", "eventTitleTemplate", "eventActionsTemplate", "precision", "weekendDays", "snapDraggedEvents", "hourSegments", "hourDuration", "hourSegmentHeight", "minimumEventHeight", "dayStartHour", "dayStartMinute", "dayEndHour", "dayEndMinute", "hourSegmentTemplate", "eventSnapSize", "allDayEventsLabelTemplate", "daysInWeek", "currentTimeMarkerTemplate", "validateEventTimesChanged", "resizeCursors"], outputs: ["dayHeaderClicked", "eventClicked", "eventTimesChanged", "beforeViewRender", "hourSegmentClicked"] }, { kind: "component", type: i4.CalendarDayViewComponent, selector: "mwl-calendar-day-view", inputs: ["viewDate", "events", "hourSegments", "hourSegmentHeight", "hourDuration", "minimumEventHeight", "dayStartHour", "dayStartMinute", "dayEndHour", "dayEndMinute", "refresh", "locale", "eventSnapSize", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "hourSegmentTemplate", "eventTemplate", "eventTitleTemplate", "eventActionsTemplate", "snapDraggedEvents", "allDayEventsLabelTemplate", "currentTimeMarkerTemplate", "validateEventTimesChanged", "resizeCursors"], outputs: ["eventClicked", "hourSegmentClicked", "eventTimesChanged", "beforeViewRender"] }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.IDEATranslatePipe, name: "translate" }, { kind: "pipe", type: i4.ɵCalendarDatePipe, name: "calendarDate" }, { kind: "pipe", type: i4.ɵCalendarEventTitlePipe, name: "calendarEventTitle" }, { kind: "pipe", type: i4.ɵCalendarA11yPipe, name: "calendarA11y" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: IDEAAgendaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: IDEAAgendaComponent, selector: "idea-agenda", inputs: { events: "events", excludeDays: "excludeDays", dayStartHour: "dayStartHour", dayEndHour: "dayEndHour", hourSegments: "hourSegments", activeDayIsOpen: "activeDayIsOpen", view: "view", allowedViews: "allowedViews", onlyFuture: "onlyFuture", titleNotes: "titleNotes", newEventTemplate: "newEventTemplate", allowDragToCreate: "allowDragToCreate", parentContent: "parentContent" }, outputs: { selectEvent: "selectEvent", selectDay: "selectDay", selectSlot: "selectSlot", newEventByDrag: "newEventByDrag", changeEvent: "changeEvent", changeDate: "changeDate", beforeWeekOrDayViewRenderEmitter: "beforeWeekOrDayViewRenderEmitter", beforeMonthViewRenderEmitter: "beforeMonthViewRenderEmitter" }, ngImport: i0, template: "<div class=\"agenda\">\n  <!-- TOOLBAR -->\n  <ion-row class=\"ion-align-items-center\">\n    <ion-col\n      class=\"ion-align-self-center ion-text-right\"\n      [size]=\"5\"\n      [sizeSm]=\"3\"\n      [pushSm]=\"5\"\n      [sizeLg]=\"2\"\n      [pushLg]=\"8\"\n    >\n      @if (allowedViews.length > 1) {\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            @for (view of allowedViews; track view) {\n              <ion-select-option [value]=\"view\">\n                {{ 'IDEA_AGENDA.' + view | uppercase | translate }}\n              </ion-select-option>\n            }\n          </ion-select>\n        </ion-item>\n      }\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\" />\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\" />\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\" />\n      </ion-button>\n    </ion-col>\n    <ion-col class=\"ion-align-self-center titleCol\" [size]=\"12\" [sizeSm]=\"5\" [pullSm]=\"7\" [sizeLg]=\"8\" [pullLg]=\"4\">\n      <h2>{{ viewDate | calendarDate: view + 'ViewTitle' : locale }}</h2>\n      @if (titleNotes) {\n        <p>{{ titleNotes }}</p>\n      }\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      @if (!event.allDay) {\n        <p>{{ getPreviewDescription(event.description) }}</p>\n      }\n    </span>\n  </ng-template>\n  <ng-template\n    #eventTemplate\n    let-weekEvent=\"weekEvent\"\n    let-tooltipPlacement=\"tooltipPlacement\"\n    let-eventClicked=\"eventClicked\"\n    let-tooltipTemplate=\"tooltipTemplate\"\n    let-tooltipAppendToBody=\"tooltipAppendToBody\"\n    let-tooltipDisabled=\"tooltipDisabled\"\n    let-tooltipDelay=\"tooltipDelay\"\n    let-column=\"column\"\n    let-daysInWeek=\"daysInWeek\"\n  >\n    <div\n      class=\"cal-event\"\n      [class.external]=\"weekEvent.event.external\"\n      [class.needsAction]=\"Attendance.NEEDS_ACTION === weekEvent.event.attendance\"\n      [class.declined]=\"Attendance.DECLINED === weekEvent.event.attendance\"\n      [class.tentative]=\"Attendance.TENTATIVE === weekEvent.event.attendance\"\n      [style.border-left-color]=\"weekEvent.event.color?.primary\"\n      [style.color]=\"getAlternateColor(weekEvent.event.color?.primary, darkMode ? 80 : -40)\"\n      [style.background-color]=\"getAlternateColor(weekEvent.event.color?.primary, darkMode ? 60 : 80, 0.2)\"\n      [mwlCalendarTooltip]=\"!tooltipDisabled && !isMobile() ? getTooltipContent(weekEvent.event) : ''\"\n      [tooltipPlacement]=\"tooltipPlacement\"\n      [tooltipEvent]=\"weekEvent.tempEvent || weekEvent.event\"\n      [tooltipTemplate]=\"tooltipTemplate\"\n      [tooltipAppendToBody]=\"tooltipAppendToBody\"\n      [tooltipDelay]=\"tooltipDelay\"\n      (mwlClick)=\"eventClicked.emit({ sourceEvent: $event })\"\n      (mwlKeydownEnter)=\"eventClicked.emit({ sourceEvent: $event })\"\n      tabindex=\"0\"\n      role=\"application\"\n      [attr.aria-label]=\"\n        { event: weekEvent.tempEvent || weekEvent.event, locale: locale } | calendarA11y: 'eventDescription'\n      \"\n    >\n      <mwl-calendar-event-actions [event]=\"weekEvent.tempEvent || weekEvent.event\" />\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      @if (!weekEvent.event.allDay) {\n        <div class=\"eventGadgets\">\n          @for (icon of weekEvent.event.icons; track icon) {\n            <ion-icon [name]=\"icon.name\" [title]=\"icon.title\" />\n          }\n          @for (avatar of weekEvent.event.avatars; track avatar) {\n            <idea-user-avatar size=\"mini\" [src]=\"avatar.url\" [name]=\"avatar.title\" />\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n  <ng-template\n    #hourSegmentTemplate\n    let-segment=\"segment\"\n    let-locale=\"locale\"\n    let-segmentHeight=\"segmentHeight\"\n    let-isTimeLabel=\"isTimeLabel\"\n  >\n    <div\n      #segmentElement\n      class=\"cal-hour-segment\"\n      [style.height.px]=\"segmentHeight\"\n      [class.cal-hour-start]=\"segment.isStart\"\n      [class.cal-after-hour-start]=\"!segment.isStart\"\n      [ngClass]=\"segment.cssClass\"\n      (mousedown)=\"allowDragToCreate ? startDragToCreate($event, segment.date, segmentElement) : null\"\n      (touchstart)=\"allowDragToCreate ? startDragToCreate($event, segment.date, segmentElement) : null\"\n    >\n      @if (isTimeLabel) {\n        <div class=\"cal-time\">\n          {{ segment.date | calendarDate: 'weekViewHour' : locale }}\n        </div>\n      }\n    </div>\n  </ng-template>\n  <!-- VIEWS -->\n  <div>\n    @switch (view) {\n      @case (CalendarView.Month) {\n        <mwl-calendar-month-view\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      }\n      @case (CalendarView.Week) {\n        <mwl-calendar-week-view\n          [viewDate]=\"viewDate\"\n          [events]=\"events\"\n          [refresh]=\"refresh\"\n          [locale]=\"locale\"\n          [excludeDays]=\"excludeDays\"\n          [weekStartsOn]=\"weekStartsOn\"\n          [dayStartHour]=\"dayStartHour\"\n          [dayEndHour]=\"dayEndHour\"\n          [hourSegments]=\"hourSegments\"\n          [eventTemplate]=\"eventTemplate\"\n          [hourSegmentTemplate]=\"hourSegmentTemplate\"\n          (eventClicked)=\"selectEvent.emit($event.event)\"\n          (eventTimesChanged)=\"eventTimesChanged($event)\"\n          (dayHeaderClicked)=\"dateIsValid($event.day.date) ? selectDay.emit($event.day.date) : null\"\n          (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n          (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n        >\n        </mwl-calendar-week-view>\n      }\n      @case (CalendarView.Day) {\n        <mwl-calendar-day-view\n          [viewDate]=\"viewDate\"\n          [events]=\"events\"\n          [refresh]=\"refresh\"\n          [locale]=\"locale\"\n          [dayStartHour]=\"dayStartHour\"\n          [dayEndHour]=\"dayEndHour\"\n          [hourSegments]=\"hourSegments\"\n          [eventTemplate]=\"eventTemplate\"\n          [hourSegmentTemplate]=\"hourSegmentTemplate\"\n          (eventClicked)=\"selectEvent.emit($event.event)\"\n          (eventTimesChanged)=\"eventTimesChanged($event)\"\n          (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n          (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n        >\n        </mwl-calendar-day-view>\n      }\n    }\n  </div>\n</div>\n", styles: [".agenda{margin-top:15px}.agenda ion-col.titleCol{padding-left:8px}.agenda ion-col.titleCol h2,.agenda ion-col.titleCol p{margin:0}.agenda ion-col.titleCol h2{font-size:1.2em}.agenda ion-col.titleCol p{font-size:.8em;font-style:italic}.agenda .calendarViewSelector{background-color:transparent;--ion-background-color: transparent;--background: transparent}.agenda .calendarViewSelector ion-select{max-width:100%;width:100%;padding-left:0;font-weight:500}.agenda .eventGadgets{margin-top:4px;margin-left:5px;text-align:right}.agenda .eventGadgets idea-user-avatar{display:block;float:left;margin:2px 1px}.agenda .eventGadgets ion-icon{padding-right:2px;opacity:.7;font-size:1.15em}@media only screen and (max-width: 575px){.agenda ion-col.titleCol{padding:0 8px 12px;text-align:center}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "expandedIcon", "fill", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: i2.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "directive", type: i2.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "component", type: i3.IDEAUserAvatarComponent, selector: "idea-user-avatar", inputs: ["src", "name", "size", "color"] }, { kind: "component", type: i4.ɵCalendarEventActionsComponent, selector: "mwl-calendar-event-actions", inputs: ["event", "customTemplate"] }, { kind: "component", type: i4.ɵCalendarEventTitleComponent, selector: "mwl-calendar-event-title", inputs: ["event", "customTemplate", "view"] }, { kind: "directive", type: i4.ɵCalendarTooltipDirective, selector: "[mwlCalendarTooltip]", inputs: ["mwlCalendarTooltip", "tooltipPlacement", "tooltipTemplate", "tooltipEvent", "tooltipAppendToBody", "tooltipDelay"] }, { kind: "directive", type: i4.ɵCalendarPreviousViewDirective, selector: "[mwlCalendarPreviousView]", inputs: ["view", "viewDate", "excludeDays", "daysInWeek"], outputs: ["viewDateChange"] }, { kind: "directive", type: i4.ɵCalendarNextViewDirective, selector: "[mwlCalendarNextView]", inputs: ["view", "viewDate", "excludeDays", "daysInWeek"], outputs: ["viewDateChange"] }, { kind: "directive", type: i4.ɵCalendarTodayDirective, selector: "[mwlCalendarToday]", inputs: ["viewDate"], outputs: ["viewDateChange"] }, { kind: "directive", type: i4.ɵClickDirective, selector: "[mwlClick]", inputs: ["clickListenerDisabled"], outputs: ["mwlClick"] }, { kind: "directive", type: i4.ɵKeydownEnterDirective, selector: "[mwlKeydownEnter]", outputs: ["mwlKeydownEnter"] }, { kind: "component", type: i4.CalendarMonthViewComponent, selector: "mwl-calendar-month-view", inputs: ["viewDate", "events", "excludeDays", "activeDayIsOpen", "activeDay", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "cellTemplate", "openDayEventsTemplate", "eventTitleTemplate", "eventActionsTemplate", "weekendDays"], outputs: ["beforeViewRender", "dayClicked", "eventClicked", "columnHeaderClicked", "eventTimesChanged"] }, { kind: "component", type: i4.CalendarWeekViewComponent, selector: "mwl-calendar-week-view", inputs: ["viewDate", "events", "excludeDays", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "eventTemplate", "eventTitleTemplate", "eventActionsTemplate", "precision", "weekendDays", "snapDraggedEvents", "hourSegments", "hourDuration", "hourSegmentHeight", "minimumEventHeight", "dayStartHour", "dayStartMinute", "dayEndHour", "dayEndMinute", "hourSegmentTemplate", "eventSnapSize", "allDayEventsLabelTemplate", "daysInWeek", "currentTimeMarkerTemplate", "validateEventTimesChanged", "resizeCursors"], outputs: ["dayHeaderClicked", "eventClicked", "eventTimesChanged", "beforeViewRender", "hourSegmentClicked"] }, { kind: "component", type: i4.CalendarDayViewComponent, selector: "mwl-calendar-day-view", inputs: ["viewDate", "events", "hourSegments", "hourSegmentHeight", "hourDuration", "minimumEventHeight", "dayStartHour", "dayStartMinute", "dayEndHour", "dayEndMinute", "refresh", "locale", "eventSnapSize", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "hourSegmentTemplate", "eventTemplate", "eventTitleTemplate", "eventActionsTemplate", "snapDraggedEvents", "allDayEventsLabelTemplate", "currentTimeMarkerTemplate", "validateEventTimesChanged", "resizeCursors"], outputs: ["eventClicked", "hourSegmentClicked", "eventTimesChanged", "beforeViewRender"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.IDEATranslatePipe, name: "translate" }, { kind: "pipe", type: i4.ɵCalendarDatePipe, name: "calendarDate" }, { kind: "pipe", type: i4.ɵCalendarEventTitlePipe, name: "calendarEventTitle" }, { kind: "pipe", type: i4.ɵCalendarA11yPipe, name: "calendarA11y" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IDEAAgendaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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\" *ngIf=\"allowedViews.length > 1\">\n        <ion-select\n          interface=\"popover\"\n          [value]=\"view\"\n          (ionChange)=\"$event?.detail ? setView($event.detail.value) : null\"\n        >\n          <ion-select-option *ngFor=\"let view of allowedViews\" [value]=\"view\">\n            {{ 'IDEA_AGENDA.' + view | uppercase | translate }}\n          </ion-select-option>\n        </ion-select>\n      </ion-item>\n    </ion-col>\n    <ion-col\n      class=\"ion-align-self-center ion-text-right\"\n      [size]=\"7\"\n      [sizeSm]=\"4\"\n      [pushSm]=\"5\"\n      [sizeLg]=\"2\"\n      [pushLg]=\"8\"\n    >\n      <ion-button\n        fill=\"clear\"\n        color=\"dark\"\n        size=\"small\"\n        mwlCalendarPreviousView\n        [view]=\"view\"\n        [(viewDate)]=\"viewDate\"\n        (viewDateChange)=\"viewDateChanged($event)\"\n      >\n        <ion-icon name=\"chevron-back-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n      <ion-button\n        fill=\"clear\"\n        color=\"dark\"\n        size=\"small\"\n        mwlCalendarToday\n        [(viewDate)]=\"viewDate\"\n        (viewDateChange)=\"viewDateChanged($event)\"\n      >\n        <ion-icon name=\"today-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n      <ion-button\n        fill=\"clear\"\n        color=\"dark\"\n        size=\"small\"\n        mwlCalendarNextView\n        [view]=\"view\"\n        [(viewDate)]=\"viewDate\"\n        (viewDateChange)=\"viewDateChanged($event)\"\n      >\n        <ion-icon name=\"chevron-forward-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-col>\n    <ion-col class=\"ion-align-self-center titleCol\" [size]=\"12\" [sizeSm]=\"5\" [pullSm]=\"7\" [sizeLg]=\"8\" [pullLg]=\"4\">\n      <h2>{{ viewDate | calendarDate : view + 'ViewTitle' : locale }}</h2>\n      <p *ngIf=\"titleNotes\">{{ titleNotes }}</p>\n    </ion-col>\n  </ion-row>\n  <!-- TEMPLATES (touch only what's necessary and leave everything else as it is) -->\n  <ng-template #eventTitleTemplate let-event=\"event\" let-view=\"view\">\n    <span\n      class=\"cal-event-title\"\n      [class.noWrap]=\"event.allDay\"\n      [attr.aria-hidden]=\"{} | calendarA11y : 'hideEventTitle'\"\n    >\n      {{ event.title | calendarEventTitle : view : event }}\n      <p *ngIf=\"!event.allDay\">{{ getPreviewDescription(event.description) }}</p>\n    </span>\n  </ng-template>\n  <ng-template\n    #eventTemplate\n    let-weekEvent=\"weekEvent\"\n    let-tooltipPlacement=\"tooltipPlacement\"\n    let-eventClicked=\"eventClicked\"\n    let-tooltipTemplate=\"tooltipTemplate\"\n    let-tooltipAppendToBody=\"tooltipAppendToBody\"\n    let-tooltipDisabled=\"tooltipDisabled\"\n    let-tooltipDelay=\"tooltipDelay\"\n    let-column=\"column\"\n    let-daysInWeek=\"daysInWeek\"\n  >\n    <div\n      class=\"cal-event\"\n      [class.external]=\"weekEvent.event.external\"\n      [class.needsAction]=\"Attendance.NEEDS_ACTION === weekEvent.event.attendance\"\n      [class.declined]=\"Attendance.DECLINED === weekEvent.event.attendance\"\n      [class.tentative]=\"Attendance.TENTATIVE === weekEvent.event.attendance\"\n      [style.border-left-color]=\"weekEvent.event.color?.primary\"\n      [style.color]=\"getAlternateColor(weekEvent.event.color?.primary, darkMode ? 80 : -40)\"\n      [style.background-color]=\"getAlternateColor(weekEvent.event.color?.primary, darkMode ? 60 : 80, 0.2)\"\n      [mwlCalendarTooltip]=\"!tooltipDisabled && !isMobile() ? getTooltipContent(weekEvent.event) : ''\"\n      [tooltipPlacement]=\"tooltipPlacement\"\n      [tooltipEvent]=\"weekEvent.tempEvent || weekEvent.event\"\n      [tooltipTemplate]=\"tooltipTemplate\"\n      [tooltipAppendToBody]=\"tooltipAppendToBody\"\n      [tooltipDelay]=\"tooltipDelay\"\n      (mwlClick)=\"eventClicked.emit({ sourceEvent: $event })\"\n      (mwlKeydownEnter)=\"eventClicked.emit({ sourceEvent: $event })\"\n      tabindex=\"0\"\n      role=\"application\"\n      [attr.aria-label]=\"\n        { event: weekEvent.tempEvent || weekEvent.event, locale: locale } | calendarA11y : 'eventDescription'\n      \"\n    >\n      <mwl-calendar-event-actions [event]=\"weekEvent.tempEvent || weekEvent.event\"></mwl-calendar-event-actions>\n      &ngsp;\n      <mwl-calendar-event-title\n        [event]=\"weekEvent.tempEvent || weekEvent.event\"\n        [customTemplate]=\"eventTitleTemplate\"\n        [view]=\"daysInWeek === 1 ? 'day' : 'week'\"\n      >\n      </mwl-calendar-event-title>\n      <div class=\"eventGadgets\" *ngIf=\"!weekEvent.event.allDay\">\n        <ion-icon *ngFor=\"let icon of weekEvent.event.icons\" [name]=\"icon.name\" [title]=\"icon.title\"></ion-icon>\n        <idea-user-avatar\n          size=\"mini\"\n          *ngFor=\"let avatar of weekEvent.event.avatars\"\n          [src]=\"avatar.url\"\n          [name]=\"avatar.title\"\n        ></idea-user-avatar>\n      </div>\n    </div>\n  </ng-template>\n  <ng-template\n    #hourSegmentTemplate\n    let-segment=\"segment\"\n    let-locale=\"locale\"\n    let-segmentHeight=\"segmentHeight\"\n    let-isTimeLabel=\"isTimeLabel\"\n  >\n    <div\n      #segmentElement\n      class=\"cal-hour-segment\"\n      [style.height.px]=\"segmentHeight\"\n      [class.cal-hour-start]=\"segment.isStart\"\n      [class.cal-after-hour-start]=\"!segment.isStart\"\n      [ngClass]=\"segment.cssClass\"\n      (mousedown)=\"allowDragToCreate ? startDragToCreate($event, segment.date, segmentElement) : null\"\n      (touchstart)=\"allowDragToCreate ? startDragToCreate($event, segment.date, segmentElement) : null\"\n    >\n      <div class=\"cal-time\" *ngIf=\"isTimeLabel\">\n        {{ segment.date | calendarDate : 'weekViewHour' : locale }}\n      </div>\n    </div>\n  </ng-template>\n  <!-- VIEWS -->\n  <div [ngSwitch]=\"view\">\n    <mwl-calendar-month-view\n      *ngSwitchCase=\"CalendarView.Month\"\n      [viewDate]=\"viewDate\"\n      [events]=\"events\"\n      [refresh]=\"refresh\"\n      [activeDayIsOpen]=\"activeDayIsOpen\"\n      [locale]=\"locale\"\n      [excludeDays]=\"excludeDays\"\n      [weekStartsOn]=\"weekStartsOn\"\n      [eventTitleTemplate]=\"eventTitleTemplate\"\n      (eventClicked)=\"selectEvent.emit($event.event)\"\n      (eventTimesChanged)=\"eventTimesChanged($event)\"\n      (dayClicked)=\"changeDay($event.day)\"\n      (beforeViewRender)=\"beforeMonthViewRender($event)\"\n    >\n    </mwl-calendar-month-view>\n    <mwl-calendar-week-view\n      *ngSwitchCase=\"CalendarView.Week\"\n      [viewDate]=\"viewDate\"\n      [events]=\"events\"\n      [refresh]=\"refresh\"\n      [locale]=\"locale\"\n      [excludeDays]=\"excludeDays\"\n      [weekStartsOn]=\"weekStartsOn\"\n      [dayStartHour]=\"dayStartHour\"\n      [dayEndHour]=\"dayEndHour\"\n      [hourSegments]=\"hourSegments\"\n      [eventTemplate]=\"eventTemplate\"\n      [hourSegmentTemplate]=\"hourSegmentTemplate\"\n      (eventClicked)=\"selectEvent.emit($event.event)\"\n      (eventTimesChanged)=\"eventTimesChanged($event)\"\n      (dayHeaderClicked)=\"dateIsValid($event.day.date) ? selectDay.emit($event.day.date) : null\"\n      (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n      (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n    >\n    </mwl-calendar-week-view>\n    <mwl-calendar-day-view\n      *ngSwitchCase=\"CalendarView.Day\"\n      [viewDate]=\"viewDate\"\n      [events]=\"events\"\n      [refresh]=\"refresh\"\n      [locale]=\"locale\"\n      [dayStartHour]=\"dayStartHour\"\n      [dayEndHour]=\"dayEndHour\"\n      [hourSegments]=\"hourSegments\"\n      [eventTemplate]=\"eventTemplate\"\n      [hourSegmentTemplate]=\"hourSegmentTemplate\"\n      (eventClicked)=\"selectEvent.emit($event.event)\"\n      (eventTimesChanged)=\"eventTimesChanged($event)\"\n      (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n      (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n    >\n    </mwl-calendar-day-view>\n  </div>\n</div>\n", styles: [".agenda{margin-top:15px}.agenda ion-col.titleCol{padding-left:8px}.agenda ion-col.titleCol h2,.agenda ion-col.titleCol p{margin:0}.agenda ion-col.titleCol h2{font-size:1.2em}.agenda ion-col.titleCol p{font-size:.8em;font-style:italic}.agenda .calendarViewSelector{background-color:transparent;--ion-background-color: transparent;--background: transparent}.agenda .calendarViewSelector ion-select{max-width:100%;width:100%;padding-left:0;font-weight:500}.agenda .eventGadgets{margin-top:4px;margin-left:5px;text-align:right}.agenda .eventGadgets idea-user-avatar{display:block;float:left;margin:2px 1px}.agenda .eventGadgets ion-icon{padding-right:2px;opacity:.7;font-size:1.15em}@media only screen and (max-width: 575px){.agenda ion-col.titleCol{padding:0 8px 12px;text-align:center}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.Platform }, { type: i3.IDEATranslationsService }], propDecorators: { events: [{
+            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      @if (allowedViews.length > 1) {\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            @for (view of allowedViews; track view) {\n              <ion-select-option [value]=\"view\">\n                {{ 'IDEA_AGENDA.' + view | uppercase | translate }}\n              </ion-select-option>\n            }\n          </ion-select>\n        </ion-item>\n      }\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\" />\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\" />\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\" />\n      </ion-button>\n    </ion-col>\n    <ion-col class=\"ion-align-self-center titleCol\" [size]=\"12\" [sizeSm]=\"5\" [pullSm]=\"7\" [sizeLg]=\"8\" [pullLg]=\"4\">\n      <h2>{{ viewDate | calendarDate: view + 'ViewTitle' : locale }}</h2>\n      @if (titleNotes) {\n        <p>{{ titleNotes }}</p>\n      }\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      @if (!event.allDay) {\n        <p>{{ getPreviewDescription(event.description) }}</p>\n      }\n    </span>\n  </ng-template>\n  <ng-template\n    #eventTemplate\n    let-weekEvent=\"weekEvent\"\n    let-tooltipPlacement=\"tooltipPlacement\"\n    let-eventClicked=\"eventClicked\"\n    let-tooltipTemplate=\"tooltipTemplate\"\n    let-tooltipAppendToBody=\"tooltipAppendToBody\"\n    let-tooltipDisabled=\"tooltipDisabled\"\n    let-tooltipDelay=\"tooltipDelay\"\n    let-column=\"column\"\n    let-daysInWeek=\"daysInWeek\"\n  >\n    <div\n      class=\"cal-event\"\n      [class.external]=\"weekEvent.event.external\"\n      [class.needsAction]=\"Attendance.NEEDS_ACTION === weekEvent.event.attendance\"\n      [class.declined]=\"Attendance.DECLINED === weekEvent.event.attendance\"\n      [class.tentative]=\"Attendance.TENTATIVE === weekEvent.event.attendance\"\n      [style.border-left-color]=\"weekEvent.event.color?.primary\"\n      [style.color]=\"getAlternateColor(weekEvent.event.color?.primary, darkMode ? 80 : -40)\"\n      [style.background-color]=\"getAlternateColor(weekEvent.event.color?.primary, darkMode ? 60 : 80, 0.2)\"\n      [mwlCalendarTooltip]=\"!tooltipDisabled && !isMobile() ? getTooltipContent(weekEvent.event) : ''\"\n      [tooltipPlacement]=\"tooltipPlacement\"\n      [tooltipEvent]=\"weekEvent.tempEvent || weekEvent.event\"\n      [tooltipTemplate]=\"tooltipTemplate\"\n      [tooltipAppendToBody]=\"tooltipAppendToBody\"\n      [tooltipDelay]=\"tooltipDelay\"\n      (mwlClick)=\"eventClicked.emit({ sourceEvent: $event })\"\n      (mwlKeydownEnter)=\"eventClicked.emit({ sourceEvent: $event })\"\n      tabindex=\"0\"\n      role=\"application\"\n      [attr.aria-label]=\"\n        { event: weekEvent.tempEvent || weekEvent.event, locale: locale } | calendarA11y: 'eventDescription'\n      \"\n    >\n      <mwl-calendar-event-actions [event]=\"weekEvent.tempEvent || weekEvent.event\" />\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      @if (!weekEvent.event.allDay) {\n        <div class=\"eventGadgets\">\n          @for (icon of weekEvent.event.icons; track icon) {\n            <ion-icon [name]=\"icon.name\" [title]=\"icon.title\" />\n          }\n          @for (avatar of weekEvent.event.avatars; track avatar) {\n            <idea-user-avatar size=\"mini\" [src]=\"avatar.url\" [name]=\"avatar.title\" />\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n  <ng-template\n    #hourSegmentTemplate\n    let-segment=\"segment\"\n    let-locale=\"locale\"\n    let-segmentHeight=\"segmentHeight\"\n    let-isTimeLabel=\"isTimeLabel\"\n  >\n    <div\n      #segmentElement\n      class=\"cal-hour-segment\"\n      [style.height.px]=\"segmentHeight\"\n      [class.cal-hour-start]=\"segment.isStart\"\n      [class.cal-after-hour-start]=\"!segment.isStart\"\n      [ngClass]=\"segment.cssClass\"\n      (mousedown)=\"allowDragToCreate ? startDragToCreate($event, segment.date, segmentElement) : null\"\n      (touchstart)=\"allowDragToCreate ? startDragToCreate($event, segment.date, segmentElement) : null\"\n    >\n      @if (isTimeLabel) {\n        <div class=\"cal-time\">\n          {{ segment.date | calendarDate: 'weekViewHour' : locale }}\n        </div>\n      }\n    </div>\n  </ng-template>\n  <!-- VIEWS -->\n  <div>\n    @switch (view) {\n      @case (CalendarView.Month) {\n        <mwl-calendar-month-view\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      }\n      @case (CalendarView.Week) {\n        <mwl-calendar-week-view\n          [viewDate]=\"viewDate\"\n          [events]=\"events\"\n          [refresh]=\"refresh\"\n          [locale]=\"locale\"\n          [excludeDays]=\"excludeDays\"\n          [weekStartsOn]=\"weekStartsOn\"\n          [dayStartHour]=\"dayStartHour\"\n          [dayEndHour]=\"dayEndHour\"\n          [hourSegments]=\"hourSegments\"\n          [eventTemplate]=\"eventTemplate\"\n          [hourSegmentTemplate]=\"hourSegmentTemplate\"\n          (eventClicked)=\"selectEvent.emit($event.event)\"\n          (eventTimesChanged)=\"eventTimesChanged($event)\"\n          (dayHeaderClicked)=\"dateIsValid($event.day.date) ? selectDay.emit($event.day.date) : null\"\n          (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n          (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n        >\n        </mwl-calendar-week-view>\n      }\n      @case (CalendarView.Day) {\n        <mwl-calendar-day-view\n          [viewDate]=\"viewDate\"\n          [events]=\"events\"\n          [refresh]=\"refresh\"\n          [locale]=\"locale\"\n          [dayStartHour]=\"dayStartHour\"\n          [dayEndHour]=\"dayEndHour\"\n          [hourSegments]=\"hourSegments\"\n          [eventTemplate]=\"eventTemplate\"\n          [hourSegmentTemplate]=\"hourSegmentTemplate\"\n          (eventClicked)=\"selectEvent.emit($event.event)\"\n          (eventTimesChanged)=\"eventTimesChanged($event)\"\n          (hourSegmentClicked)=\"dateIsValid($event.date) ? selectSlot.emit($event.date) : null\"\n          (beforeViewRender)=\"beforeWeekOrDayViewRender($event)\"\n        >\n        </mwl-calendar-day-view>\n      }\n    }\n  </div>\n</div>\n", styles: [".agenda{margin-top:15px}.agenda ion-col.titleCol{padding-left:8px}.agenda ion-col.titleCol h2,.agenda ion-col.titleCol p{margin:0}.agenda ion-col.titleCol h2{font-size:1.2em}.agenda ion-col.titleCol p{font-size:.8em;font-style:italic}.agenda .calendarViewSelector{background-color:transparent;--ion-background-color: transparent;--background: transparent}.agenda .calendarViewSelector ion-select{max-width:100%;width:100%;padding-left:0;font-weight:500}.agenda .eventGadgets{margin-top:4px;margin-left:5px;text-align:right}.agenda .eventGadgets idea-user-avatar{display:block;float:left;margin:2px 1px}.agenda .eventGadgets ion-icon{padding-right:2px;opacity:.7;font-size:1.15em}@media only screen and (max-width: 575px){.agenda ion-col.titleCol{padding:0 8px 12px;text-align:center}}\n"] }]
+        }], propDecorators: { events: [{
                 type: Input
             }], excludeDays: [{
                 type: Input
@@ -389,14 +347,13 @@ const ceilToNearest = (amount, precision) => Math.ceil(amount / precision) * pre
  * 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;
-        this.env = inject(IDEAEnvironment);
+    constructor() {
+        this._env = inject(IDEAEnvironment);
+        this._modal = inject(ModalController);
+        this._alert = inject(AlertController);
+        this._loading = inject(IDEALoadingService);
+        this._API = inject(IDEAAWSAPIService);
+        this._translate = inject(IDEATranslationsService);
     }
     /**
      * Get the ion-icon of an external service from its name.
@@ -420,184 +377,140 @@ class IDEACalendarsService {
     /**
      * 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));
-        });
+    async postCalendar(cal) {
+        const calendar = await this._API.postResource(this.getRequestURL(cal), { idea: true, body: cal });
+        return new Calendar(calendar);
     }
     /**
      * 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));
-        });
+    async putCalendar(cal) {
+        const body = { idea: true, resourceId: cal.calendarId, body: cal };
+        const calendar = await this._API.putResource(this.getRequestURL(cal), body);
+        return new Calendar(calendar);
     }
     /**
      * 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));
-        });
+    async deleteCalendar(cal) {
+        await this._API.deleteResource(this.getRequestURL(cal), { idea: true, resourceId: cal.calendarId });
     }
     /**
      * 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));
-        });
+    async setExternalCalendar(cal, externalId) {
+        const body = { idea: true, resourceId: cal.calendarId, body: { action: 'SET_EXTERNAL_CALENDAR', externalId } };
+        const calendar = await this._API.patchResource(this.getRequestURL(cal), body);
+        return new Calendar(calendar);
     }
     /**
      * 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'));
-            const baseURL = window.location.protocol.concat('//', window.location.hostname);
-            let url;
-            switch (cal.external.service) {
-                case ExternalCalendarSources.GOOGLE:
-                    url =
-                        'https://accounts.google.com/o/oauth2/v2/auth?' +
-                            `client_id=${encodeURIComponent(this.env.google.apiClientId)}` +
-                            '&response_type=code' +
-                            `&redirect_uri=${encodeURIComponent(baseURL.concat('/echo/google-calendars-integration'))}` +
-                            '&include_granted_scopes=true' +
-                            '&access_type=offline&prompt=consent' +
-                            `&scope=${encodeURIComponent(this.env.google.apiScope)}` +
-                            `&state=${encodeURIComponent(cal.calendarId)}`;
-                    break;
-                case ExternalCalendarSources.MICROSOFT:
-                    url =
-                        'https://login.microsoftonline.com/common/oauth2/v2.0/authorize?' +
-                            `client_id=${encodeURIComponent(this.env.microsoft.apiClientId)}` +
-                            '&response_type=code' +
-                            `&redirect_uri=${encodeURIComponent(baseURL.concat('/echo/microsoft-calendars-integration'))}` +
-                            '&response_mode=query' +
-                            `&scope=${encodeURIComponent(this.env.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());
-            });
+    async linkExtService(cal) {
+        if (!cal.external)
+            throw new Error('NOT_EXTERNAL');
+        const baseURL = window.location.protocol.concat('//', window.location.hostname);
+        let url;
+        switch (cal.external.service) {
+            case ExternalCalendarSources.GOOGLE:
+                url =
+                    'https://accounts.google.com/o/oauth2/v2/auth?' +
+                        `client_id=${encodeURIComponent(this._env.google.apiClientId)}` +
+                        '&response_type=code' +
+                        `&redirect_uri=${encodeURIComponent(baseURL.concat('/echo/google-calendars-integration'))}` +
+                        '&include_granted_scopes=true' +
+                        '&access_type=offline&prompt=consent' +
+                        `&scope=${encodeURIComponent(this._env.google.apiScope)}` +
+                        `&state=${encodeURIComponent(cal.calendarId)}`;
+                break;
+            case ExternalCalendarSources.MICROSOFT:
+                url =
+                    'https://login.microsoftonline.com/common/oauth2/v2.0/authorize?' +
+                        `client_id=${encodeURIComponent(this._env.microsoft.apiClientId)}` +
+                        '&response_type=code' +
+                        `&redirect_uri=${encodeURIComponent(baseURL.concat('/echo/microsoft-calendars-integration'))}` +
+                        '&response_mode=query' +
+                        `&scope=${encodeURIComponent(this._env.microsoft.apiScope)}` +
+                        `&state=${encodeURIComponent(cal.calendarId)}`;
+                break;
+        }
+        if (!url)
+            throw new Error('INVALID_SERVICE');
+        await Browser.open({ url });
+        // since we don't know when/if the auth flow will finish, we wait
+        await this.showAlertLinkingCalendar();
+    }
+    async showAlertLinkingCalendar() {
+        return new Promise(async (resolve) => {
+            const header = this._translate._('IDEA_AGENDA.CALENDARS.LINKING_CALENDAR');
+            const message = this._translate._('IDEA_AGENDA.CALENDARS.LINKING_CALENDAR_CONFIRM_ONCE_DONE');
+            const buttons = [{ text: this._translate._('COMMON.DONE'), handler: resolve }];
+            const alert = await this._alert.create({ header, message, buttons, backdropDismiss: false });
+            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));
-        });
+    async getExternalCalendars(cal) {
+        if (!cal.external)
+            throw new Error('NOT_EXTERNAL');
+        // get the access token to make requests; in case it fails, proceed to link the external service
+        const body = { idea: true, resourceId: cal.calendarId, body: { action: 'GET_ACCESS_TOKEN' } };
+        const result = await this._API.patchResource(this.getRequestURL(cal), body);
+        const headers = { Authorization: 'Bearer '.concat(result.token) };
+        if (cal.external.service === ExternalCalendarSources.GOOGLE) {
+            const res = await (await fetch('https://www.googleapis.com/calendar/v3/users/me/calendarList', { headers })).json();
+            return res.items.map((c) => ({ name: c.summary, id: c.id }));
+        }
+        else if (cal.external.service === ExternalCalendarSources.MICROSOFT) {
+            const res = await (await fetch('https://graph.microsoft.com/v1.0/me/calendars', { headers })).json();
+            return res.value.map((c) => ({ name: c.name, id: c.id }));
+        }
     }
     /**
      * 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));
-        });
+    async chooseAndSetExternalCalendar(cal) {
+        const extCalId = await this.openModalAndPickExternalCalendar(cal);
+        if (!extCalId)
+            return;
+        return await this.setExternalCalendar(cal, extCalId);
     }
     /**
      * 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());
+        let extCals;
+        try {
+            await this._loading.show();
+            extCals = await this.getExternalCalendars(cal);
+            if (!extCals.length)
+                throw new Error('NO_EXTERNAL_CALENDARS');
+        }
+        catch (error) {
+            throw error;
+        }
+        finally {
+            this._loading.hide();
+        }
+        const modal = await this._modal.create({
+            component: IDEASuggestionsComponent,
+            componentProps: {
+                data: extCals.map(c => new Suggestion({ value: c.id, name: c.name })),
+                searchPlaceholder: this._translate._('IDEA_AGENDA.CALENDARS.CHOOSE_AN_EXTERNAL_CALENDAR_TO_LINK'),
+                sortData: true,
+                hideIdFromUI: true,
+                hideClearButton: true,
+                mustChoose: true
+            },
+            backdropDismiss: false
         });
+        modal.present();
+        const res = await modal.onDidDismiss();
+        return res.data ? res.data.value : null;
     }
     /**
      * First sync of the extenal calendar.
@@ -610,7 +523,8 @@ class IDEACalendarsService {
      */
     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), {
+        this._API
+            .patchResource(this.getRequestURL(cal), {
             idea: true,
             resourceId: cal.calendarId,
             body: { action: 'SYNC_EXTERNAL_CALENDAR', firstSync: true }
@@ -623,123 +537,105 @@ class IDEACalendarsService {
         })
             .catch(err => done(err));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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 }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IDEACalendarsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: IDEACalendarsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: IDEACalendarsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IDEACalendarsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: IDEACalendarsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ 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.
-         */
+    constructor() {
         this.errors = new Set();
-        /**
-         * The default color for a calendar.
-         */
         this.DEFAULT_COLOR = '#555';
+        this._calendars = inject(IDEACalendarsService);
+        this._modal = inject(ModalController);
+        this._alert = inject(AlertController);
+        this._tc = inject(IDEATinCanService);
+        this._loading = inject(IDEALoadingService);
+        this._message = inject(IDEAMessageService);
+        this._API = inject(IDEAAWSAPIService);
+        this._translate = inject(IDEATranslationsService);
+    }
+    async ngOnInit() {
+        this.membership = this._tc.get('membership');
+        this.calendarWC = new Calendar(this.calendar);
+        try {
+            const memberships = await this._API.getResource(`teams/${this.membership.teamId}/memberships`);
+            this.membershipsChecks = memberships.map(m => new Check({
+                value: m.userId,
+                name: m.name,
+                checked: (this.calendarWC.usersCanManageAppointments || []).some(x => x === m.userId)
+            }));
+        }
+        catch (error) {
+            this._message.error('COMMON.COULDNT_LOAD_LIST');
+        }
     }
-    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
+        if (!this.calendarWC.color)
+            this.calendarWC.color = this.DEFAULT_COLOR;
+        if (this.calendarWC.isShared() && this.advancedPermissions)
+            this.calendarWC.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());
+            delete this.calendarWC.usersCanManageAppointments;
+        this.errors = new Set(this.calendarWC.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) => {
+            return this._message.error('COMMON.FORM_HAS_ERROR_TO_CHECK');
+        try {
+            await this._loading.show();
+            const res = await this._calendars.putCalendar(this.calendarWC);
             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());
+            this._message.success('IDEA_AGENDA.CALENDARS.CALENDAR_SAVED');
+            this._modal.dismiss(this.calendar);
+        }
+        catch (error) {
+            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());
+    async delete() {
+        const doDelete = async () => {
+            try {
+                await this._loading.show();
+                await this._calendars.deleteCalendar(this.calendarWC);
+                this._message.success('IDEA_AGENDA.CALENDARS.CALENDAR_DELETED');
+                this._modal.dismiss(true);
+            }
+            catch (error) {
+                this._message.error('COMMON.OPERATION_FAILED');
+            }
+            finally {
+                this._loading.hide();
+            }
+        };
+        const header = this._translate._('COMMON.ARE_YOU_SURE');
+        const subHeader = this._translate._('IDEA_AGENDA.CALENDARS.DELETE_CALENDAR');
+        const message = this._translate._('IDEA_AGENDA.CALENDARS.DELETE_CALENDAR_HINT');
+        const buttons = [
+            { text: this._translate._('COMMON.CANCEL'), role: 'cancel' },
+            { text: this._translate._('COMMON.DELETE'), handler: doDelete }
+        ];
+        const alert = await this._alert.create({ header, subHeader, message, buttons });
+        alert.present();
     }
-    /**
-     * Close the component.
-     */
     close() {
-        this.modalCtrl.dismiss();
+        this._modal.dismiss();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "legacy", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar,ion-range" }, { kind: "component", type: i3.IDEAColorPickerComponent, selector: "idea-color-picker", inputs: ["colors", "current", "label", "placeholder", "icon", "iconColor", "disabled", "obligatory", "lines", "color"], outputs: ["select", "iconSelect"] }, { kind: "component", type: i3.IDEACheckerComponent, selector: "idea-checker", inputs: ["data", "dataProvider", "label", "icon", "iconColor", "searchPlaceholder", "noPreviewText", "noElementsFoundText", "noneEqualsAll", "noneText", "allText", "lines", "color", "disabled", "tappableWhenDisabled", "obligatory", "sortData", "numMaxElementsInPreview", "showAvatars", "limitSelectionToNum", "allowSelectDeselectAll", "category1", "category2", "showCategoriesFilters"], outputs: ["change", "iconSelect"] }, { kind: "pipe", type: i3.IDEATranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: IDEACalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.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]=\"'COMMON.CLOSE' | translate\" (click)=\"close()\">\n        <ion-icon name=\"close-circle\" slot=\"icon-only\" />\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]=\"'COMMON.SAVE' | translate\" (click)=\"save()\">\n        <ion-icon name=\"checkmark-circle\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  @if (calendarWC) {\n    <div class=\"maxWidthContainer\">\n      <ion-list class=\"aList\">\n        <ion-item\n          lines=\"inset\"\n          [class.fieldHasError]=\"hasFieldAnError('name')\"\n          [title]=\"'IDEA_AGENDA.CALENDARS.NAME_HINT' | translate\"\n        >\n          <ion-input\n            labelPlacement=\"stacked\"\n            [label]=\"'IDEA_AGENDA.CALENDARS.NAME' | translate\"\n            [placeholder]=\"'IDEA_AGENDA.CALENDARS.NAME_HINT' | translate\"\n            [(ngModel)]=\"calendarWC.name\"\n          />\n        </ion-item>\n        <ion-item\n          lines=\"inset\"\n          [class.fieldHasError]=\"hasFieldAnError('description')\"\n          [title]=\"'IDEA_AGENDA.CALENDARS.DESCRIPTION_HINT' | translate\"\n        >\n          <ion-input\n            labelPlacement=\"stacked\"\n            [label]=\"'IDEA_AGENDA.CALENDARS.DESCRIPTION' | translate\"\n            [placeholder]=\"'IDEA_AGENDA.CALENDARS.DESCRIPTION_HINT' | translate\"\n            [(ngModel)]=\"calendarWC.description\"\n          />\n        </ion-item>\n        @if (!hideColor) {\n          <idea-color-picker\n            [lines]=\"'inset'\"\n            [current]=\"calendarWC.color\"\n            [label]=\"'IDEA_AGENDA.CALENDARS.COLOR' | translate\"\n            [class.fieldHasError]=\"hasFieldAnError('color')\"\n            (select)=\"$event ? (calendarWC.color = $event) : null\"\n          />\n        }\n        @if (membershipsChecks && calendarWC.isShared() && advancedPermissions) {\n          <idea-checker\n            [data]=\"membershipsChecks\"\n            [label]=\"'IDEA_AGENDA.CALENDARS.USERS_ALLOWED_TO_MANAGE_APPOINTMENTS' | translate\"\n            [searchPlaceholder]=\"'IDEA_AGENDA.CALENDARS.WHO_CAN_MANAGE_APPOINTMENTS' | translate\"\n            [noneText]=\"'IDEA_AGENDA.CALENDARS.NOBODY' | translate\"\n            [allText]=\"'IDEA_AGENDA.CALENDARS.EVERYONE' | translate\"\n            [allowSelectDeselectAll]=\"true\"\n            [lines]=\"'inset'\"\n          />\n        }\n      </ion-list>\n      @if (calendarWC.external?.service) {\n        <ion-list class=\"aList\">\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          @if (calendar.userId) {\n            <ion-item lines=\"inset\">\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\" />\n            </ion-item>\n          }\n          @if (calendar.teamId) {\n            <ion-item lines=\"inset\">\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\" />\n            </ion-item>\n          }\n          <ion-item lines=\"inset\">\n            <ion-label>\n              {{ 'IDEA_AGENDA.CALENDARS.LINKED_TO' | translate }}\n              {{ 'IDEA_AGENDA.CALENDARS.SERVICES.' + calendarWC.external.service | translate }}\n              <p>{{ calendarWC.external.name }} ({{ calendarWC.external.email }})</p>\n            </ion-label>\n            <ion-icon slot=\"end\" [name]=\"calendars.getServiceIcon(calendarWC.external.service)\" />\n          </ion-item>\n          <ion-item lines=\"inset\">\n            <ion-label>\n              {{ 'IDEA_AGENDA.CALENDARS.ACCESS_LEVELS.' + calendarWC.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\" />\n          </ion-item>\n        </ion-list>\n      }\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\n            color=\"danger\"\n            [title]=\"'IDEA_AGENDA.CALENDARS.DELETE_CALENDAR_HINT' | translate\"\n            (click)=\"delete()\"\n          >\n            {{ 'COMMON.DELETE' | translate }}\n          </ion-button>\n        </ion-item>\n      </ion-list>\n    </div>\n  }\n</ion-content>\n", styles: [".maxWidthContainer{max-width:500px;padding-top:20px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "component", type: i3.IDEAColorPickerComponent, selector: "idea-color-picker", inputs: ["colors", "current", "label", "placeholder", "icon", "iconColor", "disabled", "obligatory", "lines", "color"], outputs: ["select", "iconSelect"] }, { kind: "component", type: i3.IDEACheckerComponent, selector: "idea-checker", inputs: ["data", "dataProvider", "label", "icon", "iconColor", "searchPlaceholder", "noPreviewText", "noElementsFoundText", "noneEqualsAll", "noneText", "allText", "lines", "color", "disabled", "tappableWhenDisabled", "obligatory", "sortData", "numMaxElementsInPreview", "showAvatars", "limitSelectionToNum", "allowSelectDeselectAll", "category1", "category2", "showCategoriesFilters"], outputs: ["change", "iconSelect"] }, { kind: "pipe", type: i3.IDEATranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IDEACalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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: () => [{ 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: [{
+            args: [{ selector: 'idea-calendar', template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      <ion-button [title]=\"'COMMON.CLOSE' | translate\" (click)=\"close()\">\n        <ion-icon name=\"close-circle\" slot=\"icon-only\" />\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]=\"'COMMON.SAVE' | translate\" (click)=\"save()\">\n        <ion-icon name=\"checkmark-circle\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  @if (calendarWC) {\n    <div class=\"maxWidthContainer\">\n      <ion-list class=\"aList\">\n        <ion-item\n          lines=\"inset\"\n          [class.fieldHasError]=\"hasFieldAnError('name')\"\n          [title]=\"'IDEA_AGENDA.CALENDARS.NAME_HINT' | translate\"\n        >\n          <ion-input\n            labelPlacement=\"stacked\"\n            [label]=\"'IDEA_AGENDA.CALENDARS.NAME' | translate\"\n            [placeholder]=\"'IDEA_AGENDA.CALENDARS.NAME_HINT' | translate\"\n            [(ngModel)]=\"calendarWC.name\"\n          />\n        </ion-item>\n        <ion-item\n          lines=\"inset\"\n          [class.fieldHasError]=\"hasFieldAnError('description')\"\n          [title]=\"'IDEA_AGENDA.CALENDARS.DESCRIPTION_HINT' | translate\"\n        >\n          <ion-input\n            labelPlacement=\"stacked\"\n            [label]=\"'IDEA_AGENDA.CALENDARS.DESCRIPTION' | translate\"\n            [placeholder]=\"'IDEA_AGENDA.CALENDARS.DESCRIPTION_HINT' | translate\"\n            [(ngModel)]=\"calendarWC.description\"\n          />\n        </ion-item>\n        @if (!hideColor) {\n          <idea-color-picker\n            [lines]=\"'inset'\"\n            [current]=\"calendarWC.color\"\n            [label]=\"'IDEA_AGENDA.CALENDARS.COLOR' | translate\"\n            [class.fieldHasError]=\"hasFieldAnError('color')\"\n            (select)=\"$event ? (calendarWC.color = $event) : null\"\n          />\n        }\n        @if (membershipsChecks && calendarWC.isShared() && advancedPermissions) {\n          <idea-checker\n            [data]=\"membershipsChecks\"\n            [label]=\"'IDEA_AGENDA.CALENDARS.USERS_ALLOWED_TO_MANAGE_APPOINTMENTS' | translate\"\n            [searchPlaceholder]=\"'IDEA_AGENDA.CALENDARS.WHO_CAN_MANAGE_APPOINTMENTS' | translate\"\n            [noneText]=\"'IDEA_AGENDA.CALENDARS.NOBODY' | translate\"\n            [allText]=\"'IDEA_AGENDA.CALENDARS.EVERYONE' | translate\"\n            [allowSelectDeselectAll]=\"true\"\n            [lines]=\"'inset'\"\n          />\n        }\n      </ion-list>\n      @if (calendarWC.external?.service) {\n        <ion-list class=\"aList\">\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          @if (calendar.userId) {\n            <ion-item lines=\"inset\">\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\" />\n            </ion-item>\n          }\n          @if (calendar.teamId) {\n            <ion-item lines=\"inset\">\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\" />\n            </ion-item>\n          }\n          <ion-item lines=\"inset\">\n            <ion-label>\n              {{ 'IDEA_AGENDA.CALENDARS.LINKED_TO' | translate }}\n              {{ 'IDEA_AGENDA.CALENDARS.SERVICES.' + calendarWC.external.service | translate }}\n              <p>{{ calendarWC.external.name }} ({{ calendarWC.external.email }})</p>\n            </ion-label>\n            <ion-icon slot=\"end\" [name]=\"calendars.getServiceIcon(calendarWC.external.service)\" />\n          </ion-item>\n          <ion-item lines=\"inset\">\n            <ion-label>\n              {{ 'IDEA_AGENDA.CALENDARS.ACCESS_LEVELS.' + calendarWC.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\" />\n          </ion-item>\n        </ion-list>\n      }\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\n            color=\"danger\"\n            [title]=\"'IDEA_AGENDA.CALENDARS.DELETE_CALENDAR_HINT' | translate\"\n            (click)=\"delete()\"\n          >\n            {{ 'COMMON.DELETE' | translate }}\n          </ion-button>\n        </ion-item>\n      </ion-list>\n    </div>\n  }\n</ion-content>\n", styles: [".maxWidthContainer{max-width:500px;padding-top:20px}\n"] }]
+        }], propDecorators: { calendar: [{
                 type: Input
             }], advancedPermissions: [{
                 type: Input
@@ -748,123 +644,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }] } });
 
 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;
+    constructor() {
         /**
          * Report to parent components a change.
          */
         this.somethingChanged = new EventEmitter();
-    }
-    /**
-     * Open the modal to manage the calendar.
-     */
-    manageCalendar() {
+        this._alert = inject(AlertController);
+        this._modal = inject(ModalController);
+        this._message = inject(IDEAMessageService);
+        this._loading = inject(IDEALoadingService);
+        this._translate = inject(IDEATranslationsService);
+        this._calendars = inject(IDEACalendarsService);
+    }
+    async manageCalendar() {
         if (this.disabled)
             return;
-        this.modalCtrl
-            .create({
+        const modal = await this._modal.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();
         });
+        modal.onDidDismiss().then(res => {
+            const cal = res.data;
+            if (cal === undefined)
+                return;
+            else if (cal === null)
+                this.calendar = null;
+            else
+                this.calendar.load(cal);
+            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() {
+    async 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) => {
+        try {
+            const cal = await this._calendars.chooseAndSetExternalCalendar(this.calendar);
             if (!cal)
-                return new Error('NO_EXTERNAL_CALENDAR_CHOSEN');
+                throw 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._message.success('IDEA_AGENDA.CALENDARS.CALENDAR_LINKED');
+            try {
+                await this._loading.show(this._translate._('IDEA_AGENDA.CALENDARS.FIRST_SYNC_MAY_TAKE_A_WHILE'));
+                await this._calendars.syncCalendar(this.calendar);
+                this._message.success('IDEA_AGENDA.CALENDARS.FIRST_SYNC_COMPLETED');
+            }
+            catch (error) {
+                this._message.error('COMMON.OPERATION_FAILED');
+            }
+            finally {
+                this._loading.hide();
                 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());
-        });
+            }
+        }
+        catch (error) {
+            const doDelete = async () => {
+                try {
+                    await this._loading.show();
+                    await this._calendars.deleteCalendar(this.calendar);
+                    this._message.success('COMMON.OPERATION_COMPLETED');
+                    this.somethingChanged.emit();
+                }
+                catch (error) {
+                    this._message.error('COMMON.OPERATION_FAILED');
+                }
+                finally {
+                    this._loading.hide();
+                }
+            };
+            const doLink = async () => {
+                try {
+                    await this._calendars.linkExtService(this.calendar);
+                    this.linkExtCalendarOrDelete();
+                }
+                catch (error) {
+                    this._message.error('COMMON.OPERATION_FAILED');
+                }
+            };
+            const header = this._translate._('IDEA_AGENDA.CALENDARS.CALENDAR_NOT_YET_LINKED');
+            const message = this._translate._('IDEA_AGENDA.CALENDARS.DO_YOU_WANT_PROCEED_LINKING_OR_DELETE');
+            const buttons = [
+                { text: this._translate._('COMMON.DELETE'), handler: doDelete },
+                { text: this._translate._('IDEA_AGENDA.CALENDARS.LINK'), handler: doLink }
+            ];
+            const alert = await this._alert.create({ header, message, buttons });
+            alert.present();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "pipe", type: i3.IDEATranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: IDEACalendarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: IDEACalendarItemComponent, selector: "idea-calendar-item", inputs: { calendar: "calendar", disabled: "disabled", advancedPermissions: "advancedPermissions", hideColor: "hideColor" }, outputs: { somethingChanged: "somethingChanged" }, ngImport: i0, template: "@if (calendar) {\n  <ion-item\n    class=\"calendarItem\"\n    [button]=\"!disabled\"\n    [title]=\"'IDEA_AGENDA.CALENDARS.EDIT_CALENDAR' | translate\"\n    (click)=\"calendar.external && !calendar.external.calendarId ? linkExtCalendarOrDelete() : manageCalendar()\"\n  >\n    @if (!hideColor) {\n      <ion-avatar slot=\"start\" class=\"colorCircle\" [style.background-color]=\"calendar.color\" />\n    }\n    <ion-label>\n      {{ calendar.name }}\n      <p>\n        @if (calendar.external && !calendar.external.calendarId) {\n          <ion-text color=\"danger\">\n            {{ 'IDEA_AGENDA.CALENDARS.TAP_TO_CONFIGURE' | translate }}\n          </ion-text>\n        }\n        {{ calendar.description }}\n      </p>\n    </ion-label>\n    @if (calendar.external && !calendar.external.calendarId) {\n      <ion-icon\n        slot=\"end\"\n        color=\"danger\"\n        name=\"flash-off\"\n        [title]=\"'IDEA_AGENDA.CALENDARS.CALENDAR_NOT_YET_LINKED_HINT' | translate\"\n      />\n    }\n    @if (calendar.external?.service) {\n      <ion-icon\n        slot=\"end\"\n        [name]=\"calendars.getServiceIcon(calendar.external.service)\"\n        [title]=\"\n          ('IDEA_AGENDA.CALENDARS.LINKED_TO' | translate) +\n          ' ' +\n          ('IDEA_AGENDA.CALENDARS.SERVICES.' + calendar.external.service | translate)\n        \"\n      />\n    }\n  </ion-item>\n}\n", styles: [".calendarItem ion-avatar.colorCircle{width:20px;height:20px;background-color:#555}\n"], dependencies: [{ kind: "component", type: i2.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "pipe", type: i3.IDEATranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IDEACalendarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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: () => [{ type: IDEACalendarsService }, { type: i2.AlertController }, { type: i2.ModalController }, { type: i3.IDEAMessageService }, { type: i3.IDEALoadingService }, { type: i3.IDEATranslationsService }], propDecorators: { calendar: [{
+            args: [{ selector: 'idea-calendar-item', template: "@if (calendar) {\n  <ion-item\n    class=\"calendarItem\"\n    [button]=\"!disabled\"\n    [title]=\"'IDEA_AGENDA.CALENDARS.EDIT_CALENDAR' | translate\"\n    (click)=\"calendar.external && !calendar.external.calendarId ? linkExtCalendarOrDelete() : manageCalendar()\"\n  >\n    @if (!hideColor) {\n      <ion-avatar slot=\"start\" class=\"colorCircle\" [style.background-color]=\"calendar.color\" />\n    }\n    <ion-label>\n      {{ calendar.name }}\n      <p>\n        @if (calendar.external && !calendar.external.calendarId) {\n          <ion-text color=\"danger\">\n            {{ 'IDEA_AGENDA.CALENDARS.TAP_TO_CONFIGURE' | translate }}\n          </ion-text>\n        }\n        {{ calendar.description }}\n      </p>\n    </ion-label>\n    @if (calendar.external && !calendar.external.calendarId) {\n      <ion-icon\n        slot=\"end\"\n        color=\"danger\"\n        name=\"flash-off\"\n        [title]=\"'IDEA_AGENDA.CALENDARS.CALENDAR_NOT_YET_LINKED_HINT' | translate\"\n      />\n    }\n    @if (calendar.external?.service) {\n      <ion-icon\n        slot=\"end\"\n        [name]=\"calendars.getServiceIcon(calendar.external.service)\"\n        [title]=\"\n          ('IDEA_AGENDA.CALENDARS.LINKED_TO' | translate) +\n          ' ' +\n          ('IDEA_AGENDA.CALENDARS.SERVICES.' + calendar.external.service | translate)\n        \"\n      />\n    }\n  </ion-item>\n}\n", styles: [".calendarItem ion-avatar.colorCircle{width:20px;height:20px;background-color:#555}\n"] }]
+        }], propDecorators: { calendar: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -877,127 +754,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
             }] } });
 
 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.
-         */
+    constructor() {
         this.DEFAULT_COLOR = '#555';
-        /**
-         * The possible external services for the new calendar.
-         */
         this.SOURCES = Object.keys(ExternalCalendarSources);
+        this._calendars = inject(IDEACalendarsService);
+        this._modal = inject(ModalController);
+        this._tc = inject(IDEATinCanService);
+        this._loading = inject(IDEALoadingService);
+        this._message = inject(IDEAMessageService);
+        this._translate = inject(IDEATranslationsService);
     }
     ngOnInit() {
         this.calendar = new Calendar();
-        this.membership = this.tc.get('membership');
+        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._translate._('IDEA_AGENDA.CALENDARS.DEFAULT_PERSONAL_CALENDAR_NAME')
+                : this._translate._('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 => {
+        try {
+            await this._loading.show();
+            const cal = await this._calendars.postCalendar(this.calendar);
             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._message.success('IDEA_AGENDA.CALENDARS.CALENDAR_CREATED');
+            if (!cal.external) {
+                this._modal.dismiss(this.calendar);
+                return;
+            }
+            try {
+                await this._calendars.linkExtService(this.calendar);
+                const res = await this._calendars.chooseAndSetExternalCalendar(this.calendar);
+                if (!res) {
+                    this._modal.dismiss(this.calendar);
+                    return;
+                }
                 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());
+                await this._loading.show(this._translate._('IDEA_AGENDA.CALENDARS.FIRST_SYNC_MAY_TAKE_A_WHILE'));
+                try {
+                    await this._calendars.syncCalendar(this.calendar);
+                    this._message.success('IDEA_AGENDA.CALENDARS.FIRST_SYNC_COMPLETED');
+                }
+                catch (error) {
+                    this._message.error('COMMON.OPERATION_FAILED');
+                }
+                finally {
+                    this._modal.dismiss(this.calendar);
+                }
+            }
+            catch (error) {
+                this._message.error('COMMON.OPERATION_FAILED');
+                this._modal.dismiss(this.calendar);
+            }
+        }
+        catch (error) {
+            this._message.error('COMMON.OPERATION_FAILED');
+        }
+        finally {
+            this._loading.hide();
+        }
     }
-    /**
-     * Close the component.
-     */
     close() {
-        this.modalCtrl.dismiss();
+        this._modal.dismiss();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", 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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: i3.IDEATranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: IDEACalendarCreationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.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      @if (!canChangeScope()) {\n        <ion-button [title]=\"'COMMON.CLOSE' | translate\" (click)=\"close()\">\n          <ion-icon name=\"close\" slot=\"icon-only\" />\n        </ion-button>\n      }\n      @if (canChangeScope()) {\n        <ion-button (click)=\"resetScope()\">\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\" />\n        </ion-button>\n      }\n    </ion-buttons>\n    <ion-title>\n      @if (!scopeIsSet()) {\n        <span>{{ 'IDEA_AGENDA.CALENDARS.ADD_A_CALENDAR' | translate }}</span>\n      }\n      @if (calendar.userId) {\n        <span>{{ 'IDEA_AGENDA.CALENDARS.PERSONAL_CALENDAR' | translate }}</span>\n      }\n      @if (calendar.teamId) {\n        <span>\n          {{ 'IDEA_AGENDA.CALENDARS.TEAM_CALENDAR' | translate: { team: tc.get('team').name } }}\n        </span>\n      }\n    </ion-title>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <!-- 1st STEP -->\n  @if (!scopeIsSet()) {\n    <ion-grid class=\"ion-padding choiceGrid\">\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\" />\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\" />\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  }\n  <!-- 2nd STEP -->\n  @if (scopeIsSet()) {\n    <ion-grid class=\"ion-padding choiceGrid\">\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        @if (!onlyExternalCalendars) {\n          <ion-col class=\"ion-text-center\" [size]=\"12\">\n            <ion-card class=\"step2\" [button]=\"true\" (click)=\"saveNewCalendar()\">\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-icon name=\"remove\" />\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        }\n        @for (s of SOURCES; track s) {\n          <ion-col class=\"ion-text-center\" [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)\" />\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        }\n      </ion-row>\n    </ion-grid>\n  }\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"], dependencies: [{ kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: i3.IDEATranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IDEACalendarCreationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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: () => [{ type: IDEACalendarsService }, { type: i2.ModalController }, { type: i3.IDEATinCanService }, { type: i3.IDEALoadingService }, { type: i3.IDEAMessageService }, { type: i3.IDEAAWSAPIService }, { type: i3.IDEATranslationsService }], propDecorators: { fixScope: [{
+            args: [{ selector: 'idea-calendar-creation', template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      @if (!canChangeScope()) {\n        <ion-button [title]=\"'COMMON.CLOSE' | translate\" (click)=\"close()\">\n          <ion-icon name=\"close\" slot=\"icon-only\" />\n        </ion-button>\n      }\n      @if (canChangeScope()) {\n        <ion-button (click)=\"resetScope()\">\n          <ion-icon name=\"arrow-back\" slot=\"icon-only\" />\n        </ion-button>\n      }\n    </ion-buttons>\n    <ion-title>\n      @if (!scopeIsSet()) {\n        <span>{{ 'IDEA_AGENDA.CALENDARS.ADD_A_CALENDAR' | translate }}</span>\n      }\n      @if (calendar.userId) {\n        <span>{{ 'IDEA_AGENDA.CALENDARS.PERSONAL_CALENDAR' | translate }}</span>\n      }\n      @if (calendar.teamId) {\n        <span>\n          {{ 'IDEA_AGENDA.CALENDARS.TEAM_CALENDAR' | translate: { team: tc.get('team').name } }}\n        </span>\n      }\n    </ion-title>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <!-- 1st STEP -->\n  @if (!scopeIsSet()) {\n    <ion-grid class=\"ion-padding choiceGrid\">\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\" />\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\" />\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  }\n  <!-- 2nd STEP -->\n  @if (scopeIsSet()) {\n    <ion-grid class=\"ion-padding choiceGrid\">\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        @if (!onlyExternalCalendars) {\n          <ion-col class=\"ion-text-center\" [size]=\"12\">\n            <ion-card class=\"step2\" [button]=\"true\" (click)=\"saveNewCalendar()\">\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-icon name=\"remove\" />\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        }\n        @for (s of SOURCES; track s) {\n          <ion-col class=\"ion-text-center\" [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)\" />\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        }\n      </ion-row>\n    </ion-grid>\n  }\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"] }]
+        }], propDecorators: { fixScope: [{
                 type: Input
             }], onlyExternalCalendars: [{
                 type: Input
@@ -1012,15 +862,15 @@ var CalendarScopes;
 })(CalendarScopes || (CalendarScopes = {}));
 
 class IDEAAgendaModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IDEAAgendaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: IDEAAgendaModule, declarations: [IDEAAgendaComponent, IDEACalendarComponent, IDEACalendarItemComponent, IDEACalendarCreationComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: IDEAAgendaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: IDEAAgendaModule, declarations: [IDEAAgendaComponent, IDEACalendarComponent, IDEACalendarItemComponent, IDEACalendarCreationComponent], imports: [CommonModule,
             FormsModule,
             IonicModule,
             IDEATranslationsModule,
             IDEAColorPickerModule,
             IDEACheckerModule,
             IDEAUserAvatarModule, i4.CalendarModule], exports: [IDEAAgendaComponent, IDEACalendarComponent, IDEACalendarItemComponent, IDEACalendarCreationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IDEAAgendaModule, providers: [{ provide: CalendarDateFormatter, useClass: CustomDateFormatter }, IDEACalendarsService], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: IDEAAgendaModule, providers: [{ provide: CalendarDateFormatter, useClass: CustomDateFormatter }, IDEACalendarsService], imports: [CommonModule,
             FormsModule,
             IonicModule,
             IDEATranslationsModule,
@@ -1029,7 +879,7 @@ class IDEAAgendaModule {
             IDEAUserAvatarModule,
             CalendarModule.forRoot({ provide: DateAdapter, useFactory: adapterFactory })] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: IDEAAgendaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: IDEAAgendaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [