@idea-ionic/uncommon 8.11.5 → 8.11.6

package/fesm2022/idea-ionic-uncommon.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { output, input, viewChild, Input, ChangeDetectionStrategy, Component, inject, Injectable, ChangeDetectorRef } from '@angular/core';
+import { output, input, viewChild, Input, ChangeDetectionStrategy, Component, inject, Injectable, signal, model } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { IonText, IonList, IonInput, IonItem, IonAccordion, IonAccordionGroup, Platform, IonButton, IonIcon, IonLabel, IonSpinner, IonCardContent, IonCard, PopoverController, IonAvatar, IonContent, IonGrid, IonRow, IonCol, AlertController, ModalController, IonFooter, IonButtons, IonTitle, IonToolbar, IonHeader, IonCardTitle, IonCardHeader, IonImg, IonTextarea, IonListHeader, IonFab, IonFabButton, IonBadge, IonSegmentButton, IonSegment } from '@ionic/angular/standalone';
@@ -535,17 +535,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  */
 class IDEAOfflineService {
     constructor() {
-        // get an instant status
-        this._isOffline = !navigator.onLine;
+        /**
+         * True/false if the platform is offline/online.
+         */
+        this._isOffline = signal(typeof navigator === 'undefined' ? false : !navigator.onLine, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_isOffline" }] : /* istanbul ignore next */ []));
         if (Network) {
             // set the basic listener for changes
-            this.listenerHandler = Network.addListener('networkStatusChange', status => (this._isOffline = !status.connected));
+            this.listenerHandler = Network.addListener('networkStatusChange', status => this._isOffline.set(!status.connected));
             // create the observable to subscribe to the network changes; note: it won't run until subscribed
             this.observable = new Observable(observer => {
                 // remove the basic listener add add one that supports a subscription
                 Network.removeAllListeners();
                 this.listenerHandler = Network.addListener('networkStatusChange', status => {
-                    this._isOffline = !status.connected;
+                    this._isOffline.set(!status.connected);
                     if (observer)
                         observer.next(status.connected);
                 });
@@ -562,13 +565,13 @@ class IDEAOfflineService {
      * Quickly check the connection status.
      */
     isOnline() {
-        return !this._isOffline;
+        return !this._isOffline();
     }
     /**
      * Quickly check the connection status.
      */
     isOffline() {
-        return this._isOffline;
+        return this._isOffline();
     }
     /**
      * Quickly check for online connection.
@@ -577,7 +580,7 @@ class IDEAOfflineService {
         if (!Network)
             return false;
         const status = await Network.getStatus();
-        this._isOffline = !status.connected;
+        this._isOffline.set(!status.connected);
         return status.connected;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -1017,14 +1020,11 @@ class IDEAOldAttachmentsComponent {
         this._message = inject(IDEAMessageService);
         this._tc = inject(IDEATinCanService);
         this._api = inject(IDEAAWSAPIService);
-        this._cd = inject(ChangeDetectorRef);
         this._offline = inject(IDEAOfflineService);
         this._translate = inject(IDEATranslationsService);
         /**
          * The team from which we want to load the resources. Default: try to guess current team.
          */
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
         this.team = null;
         /**
          * The path to the online API resource, as an array. Don't include the team. E.g. `['entities', entityId]`.
@@ -1034,12 +1034,11 @@ class IDEAOldAttachmentsComponent {
         /**
          * The array in which we want to add/remove attachments.
          */
-        this.attachments = input(null, /* @ts-ignore */
+        this.attachments = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
         /**
          * Regulate the mode (view/edit).
          */
-        // TODO: Skipped for migration because: This input is used in a control flow expression (e.g. `@if` or `*ngIf`) and migrating would break narrowing currently.
         this.editMode = false;
         /**
          * Show errors as reported from the parent component.
@@ -1054,7 +1053,8 @@ class IDEAOldAttachmentsComponent {
         /**
          * Stack of errors from the last upload.
          */
-        this.uploadErrors = [];
+        this.uploadErrors = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uploadErrors" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         // if the team isn't specified, try to guess it in the usual IDEA's paths
@@ -1074,7 +1074,7 @@ class IDEAOldAttachmentsComponent {
         document.getElementById('attachmentPicker').click();
     }
     addAttachmentFromFile(ev) {
-        this.uploadErrors = new Array();
+        this.uploadErrors.set(new Array());
         const files = ev.target ? ev.target.files : {};
         for (let i = 0; i < files.length; i++) {
             const file = files.item(i);
@@ -1112,27 +1112,27 @@ class IDEAOldAttachmentsComponent {
             content = await heic2any({ blob: content, toType: 'image/jpeg' });
         }
         const attachment = new Attachment({ name, format });
-        this.attachments().push(attachment);
+        this.attachments.update(list => [...(list ?? []), attachment]);
         try {
             const signedURL = await this._api.patchResource(this.requestURL, {
                 body: { action: 'ATTACHMENTS_PUT', attachmentId: attachment.attachmentId }
             });
             await this._api.rawRequest().put(signedURL.url, content).toPromise();
             attachment.attachmentId = signedURL.id;
+            // set a fresh array reference so the upload result (attachmentId) re-renders
+            this.attachments.update(list => (list ? [...list] : list));
         }
         catch (error) {
-            this.uploadErrors.push(name);
+            this.uploadErrors.update(errors => [...errors, name]);
             this.removeAttachment(attachment);
             this._message.error('IDEA_TEAMS.ATTACHMENTS.ERROR_UPLOADING_ATTACHMENT');
         }
-        finally {
-            this._cd.markForCheck(); // zoneless: re-check after the awaited upload settles
-        }
+    }
+    hideUploadError(err) {
+        this.uploadErrors.update(errors => errors.filter(e => e !== err));
     }
     removeAttachment(attachment) {
-        const index = this.attachments().indexOf(attachment);
-        if (index !== -1)
-            this.attachments().splice(index, 1);
+        this.attachments.update(list => (list ? list.filter(att => att !== attachment) : list));
     }
     async openAttachment(attachment) {
         try {
@@ -1162,7 +1162,7 @@ class IDEAOldAttachmentsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOldAttachmentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAOldAttachmentsComponent, isStandalone: true, selector: "idea-old-attachments", inputs: { team: { classPropertyName: "team", publicName: "team", isSignal: false, isRequired: false, transformFunction: null }, pathResource: { classPropertyName: "pathResource", publicName: "pathResource", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: false, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAOldAttachmentsComponent, isStandalone: true, selector: "idea-old-attachments", inputs: { team: { classPropertyName: "team", publicName: "team", isSignal: false, isRequired: false, transformFunction: null }, pathResource: { classPropertyName: "pathResource", publicName: "pathResource", isSignal: true, isRequired: false, transformFunction: null }, attachments: { classPropertyName: "attachments", publicName: "attachments", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: false, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachments: "attachmentsChange" }, ngImport: i0, template: `
     @for (att of attachments(); track att; let index = $index; let odd = $odd) {
       <ion-item
         class="attachments"
@@ -1219,7 +1219,7 @@ class IDEAOldAttachmentsComponent {
     <!----->
     @if (editMode) {
       <div>
-        @for (err of uploadErrors; track err) {
+        @for (err of uploadErrors(); track err) {
           <ion-item class="attachments" [lines]="lines()">
             <ion-icon name="alert-circle" slot="start" color="danger" />
             <ion-label color="danger">
@@ -1231,7 +1231,7 @@ class IDEAOldAttachmentsComponent {
               color="danger"
               fill="clear"
               [title]="'IDEA_TEAMS.ATTACHMENTS.HIDE_ERROR' | translate"
-              (click)="uploadErrors.splice(uploadErrors.indexOf(err), 1)"
+              (click)="hideUploadError(err)"
             >
               <ion-icon name="close" slot="icon-only" />
             </ion-button>
@@ -1321,7 +1321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     <!----->
     @if (editMode) {
       <div>
-        @for (err of uploadErrors; track err) {
+        @for (err of uploadErrors(); track err) {
           <ion-item class="attachments" [lines]="lines()">
             <ion-icon name="alert-circle" slot="start" color="danger" />
             <ion-label color="danger">
@@ -1333,7 +1333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
               color="danger"
               fill="clear"
               [title]="'IDEA_TEAMS.ATTACHMENTS.HIDE_ERROR' | translate"
-              (click)="uploadErrors.splice(uploadErrors.indexOf(err), 1)"
+              (click)="hideUploadError(err)"
             >
               <ion-icon name="close" slot="icon-only" />
             </ion-button>
@@ -1365,7 +1365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
   `, styles: [".attachments ion-button[slot=start],.attachments ion-icon[slot=start]{margin-right:10px}.attachments .loadingWarning{font-style:italic;font-size:.8em;color:var(--ion-color-medium)}.noAttachments{font-style:italic}.selectIcon{margin:0;padding-left:4px;font-size:.8em;color:var(--ion-color-medium)}.selectable{cursor:pointer}\n"] }]
         }], propDecorators: { team: [{
                 type: Input
-            }], pathResource: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathResource", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }], editMode: [{
+            }], pathResource: [{ type: i0.Input, args: [{ isSignal: true, alias: "pathResource", required: false }] }], attachments: [{ type: i0.Input, args: [{ isSignal: true, alias: "attachments", required: false }] }, { type: i0.Output, args: ["attachmentsChange"] }], editMode: [{
                 type: Input
             }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] } });
 /**
@@ -1388,9 +1388,14 @@ class IDEAAnnouncementComponent {
         this._env = inject(IDEAEnvironment);
         this._tc = inject(IDEATinCanService);
         this._storage = inject(IDEAStorageService);
-        this._cdr = inject(ChangeDetectorRef);
+        /**
+         * The color for the announcement card.
+         */
+        this.color = model('dark', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.htmlContent = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "htmlContent" }] : /* istanbul ignore next */ []));
         this.storageKey = (this._env.idea.project || 'app').concat('_LAST_ANNOUNCEMENT');
-        this.color = 'dark';
     }
     async ngOnInit() {
         // standard IDEA: the announcement is read in the Init Guard
@@ -1398,21 +1403,19 @@ class IDEAAnnouncementComponent {
         if (this.announcement && this.announcement.content) {
             const lastRead = await this._storage.get(this.storageKey);
             if (!lastRead || this.announcement.content !== lastRead)
-                this.htmlContent = mdToHtml(this.announcement.content);
-            this._cdr.markForCheck();
+                this.htmlContent.set(mdToHtml(this.announcement.content));
         }
     }
     async markAsRead() {
         await this._storage.set(this.storageKey, this.announcement.content);
-        this.htmlContent = null;
-        this._cdr.markForCheck();
+        this.htmlContent.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAAnnouncementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAAnnouncementComponent, isStandalone: true, selector: "idea-announcement", inputs: { color: "color" }, ngImport: i0, template: `
-    @if (htmlContent) {
-      <ion-card class="announcementCard" [color]="color">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAAnnouncementComponent, isStandalone: true, selector: "idea-announcement", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: `
+    @if (htmlContent()) {
+      <ion-card class="announcementCard" [color]="color()">
         <ion-card-content>
-          <p class="htmlContent" [innerHTML]="htmlContent"></p>
+          <p class="htmlContent" [innerHTML]="htmlContent()"></p>
           <p class="ion-text-right">
             <ion-button color="primary" (click)="markAsRead()">
               {{ 'COMMON.GOT_IT' | translate }}
@@ -1430,10 +1433,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     imports: [IDEATranslatePipe, IonButton, IonCardContent, IonCard],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    @if (htmlContent) {
-      <ion-card class="announcementCard" [color]="color">
+    @if (htmlContent()) {
+      <ion-card class="announcementCard" [color]="color()">
         <ion-card-content>
-          <p class="htmlContent" [innerHTML]="htmlContent"></p>
+          <p class="htmlContent" [innerHTML]="htmlContent()"></p>
           <p class="ion-text-right">
             <ion-button color="primary" (click)="markAsRead()">
               {{ 'COMMON.GOT_IT' | translate }}
@@ -1444,9 +1447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `
                 }]
-        }], ctorParameters: () => [], propDecorators: { color: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }, { type: i0.Output, args: ["colorChange"] }] } });
 
 /**
  * Pick a color from a defined set.
@@ -1853,12 +1854,16 @@ class IDEACalendarPickerComponent {
         this.timePicker = false;
         this.manualTimePicker = false;
         this.hideClearButton = false;
+        this.refDate = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "refDate" }] : /* istanbul ignore next */ []));
+        this.calendarGrid = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "calendarGrid" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         this.today = new Date();
         const inputDate = this.inputDate;
-        this.refDate = inputDate ? new Date(inputDate) : new Date(this.today);
-        this.selectedDate = new Date(this.refDate);
+        this.refDate.set(inputDate ? new Date(inputDate) : new Date(this.today));
+        this.selectedDate = new Date(this.refDate());
         this.hour = 12; // to endure timezones
         this.minute = 0;
         const manualTimePicker = this.manualTimePicker;
@@ -1872,7 +1877,7 @@ class IDEACalendarPickerComponent {
                 this.selectedDate.setMinutes(this.minute);
             }
         }
-        this.buildCalendarGrid(this.refDate);
+        this.buildCalendarGrid(this.refDate());
         this.hours = Array.from(Array(24).keys()).map(i => '0'.concat(i.toString()).slice(-2));
         this.minutes = Array.from(Array(12).keys()).map(i => '0'.concat((i * 5).toString()).slice(-2));
         // build the weekdays based on the current locale
@@ -1907,21 +1912,21 @@ class IDEACalendarPickerComponent {
         let haventFoundFirstDay = true;
         // index used to build the dates of the month, starting from the first one
         let index = 1;
-        this.calendarGrid = new Array();
+        const calendarGrid = new Array();
         for (let i = 0; i < 6; i++) {
-            this.calendarGrid[i] = new Array();
+            calendarGrid[i] = new Array();
             for (let j = 0; j < 7; j++) {
                 if (haventFoundFirstDay) {
                     if (this.getLocalisedDay(firstDateOfMonth) === j) {
                         // note: considers Sunday
                         haventFoundFirstDay = false;
-                        this.calendarGrid[i][j] = new Date(firstDateOfMonth);
+                        calendarGrid[i][j] = new Date(firstDateOfMonth);
                         // now the I've found the first date of the month I can fill the calendar
                         // the dates fromt the previous month, until there's space in the grid
                         for (let y = this.getLocalisedDay(firstDateOfMonth); y >= 0; y--) {
                             const d = new Date(firstDateOfMonth);
                             d.setDate(firstDateOfMonth.getDate() - y);
-                            this.calendarGrid[i][this.getLocalisedDay(firstDateOfMonth) - y] = d;
+                            calendarGrid[i][this.getLocalisedDay(firstDateOfMonth) - y] = d;
                         }
                     }
                 }
@@ -1929,24 +1934,37 @@ class IDEACalendarPickerComponent {
                     // fill the following dates until there's space in the grid
                     const d = new Date(firstDateOfMonth);
                     d.setDate(firstDateOfMonth.getDate() + index++);
-                    this.calendarGrid[i][j] = d;
+                    calendarGrid[i][j] = d;
                 }
             }
         }
+        this.calendarGrid.set(calendarGrid);
     }
     addYears(offset) {
-        this.refDate.setFullYear(this.refDate.getFullYear() + offset);
-        this.buildCalendarGrid(this.refDate);
+        this.refDate.update(d => {
+            const refDate = new Date(d);
+            refDate.setFullYear(refDate.getFullYear() + offset);
+            return refDate;
+        });
+        this.buildCalendarGrid(this.refDate());
     }
     setYear(year) {
         if (!year)
             return;
-        this.refDate.setFullYear(Number(year));
-        this.buildCalendarGrid(this.refDate);
+        this.refDate.update(d => {
+            const refDate = new Date(d);
+            refDate.setFullYear(Number(year));
+            return refDate;
+        });
+        this.buildCalendarGrid(this.refDate());
     }
     addMonths(offset) {
-        this.refDate.setMonth(this.refDate.getMonth() + offset);
-        this.buildCalendarGrid(this.refDate);
+        this.refDate.update(d => {
+            const refDate = new Date(d);
+            refDate.setMonth(refDate.getMonth() + offset);
+            return refDate;
+        });
+        this.buildCalendarGrid(this.refDate());
     }
     async showMonths() {
         const buttons = [];
@@ -1957,7 +1975,7 @@ class IDEACalendarPickerComponent {
                 type: 'radio',
                 label: month.toLocaleDateString(this._translate.getCurrentLang(), { month: 'long' }),
                 value: i.toString(),
-                checked: i === this.refDate.getMonth() + 1
+                checked: i === this.refDate().getMonth() + 1
             });
             month.setMonth(month.getMonth() + 1);
         }
@@ -1965,8 +1983,12 @@ class IDEACalendarPickerComponent {
         buttons.push({
             text: this._translate._('COMMON.SELECT'),
             handler: (m) => {
-                this.refDate.setMonth(parseInt(m, 10) - 1);
-                this.buildCalendarGrid(this.refDate);
+                this.refDate.update(d => {
+                    const refDate = new Date(d);
+                    refDate.setMonth(parseInt(m, 10) - 1);
+                    return refDate;
+                });
+                this.buildCalendarGrid(this.refDate());
             }
         });
         const alert = await this._alert.create({
@@ -2013,7 +2035,7 @@ class IDEACalendarPickerComponent {
         this._modal.dismiss();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEACalendarPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEACalendarPickerComponent, isStandalone: true, selector: "idea-calendar-picker", inputs: { inputDate: "inputDate", timePicker: "timePicker", manualTimePicker: "manualTimePicker", title: "title", hideClearButton: "hideClearButton", min: "min", max: "max" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\">\n      @if (!hideClearButton) {\n        <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.RESET' | translate\" (click)=\"save(true)\">\n          <ion-icon slot=\"icon-only\" name=\"arrow-undo\" />\n        </ion-button>\n      }\n      <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.CLOSE_WITHOUT_SAVING' | translate\" (click)=\"close()\">\n        <ion-icon slot=\"icon-only\" name=\"close\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-grid fixed class=\"ion-no-padding\">\n    <ion-row>\n      <h1 class=\"headerLabel\">{{ 'IDEA_UNCOMMON.CALENDAR.SET_DATE' | translate }}</h1>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\">\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"5\">\n        <ion-row class=\"ion-align-items-center ion-justify-content-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\">\n            <ion-input\n              type=\"text\"\n              [placeholder]=\"'IDEA_UNCOMMON.CALENDAR.YEAR' | translate\"\n              [value]=\"refDate.getFullYear()\"\n              (ionFocus)=\"$event.target.value = ''\"\n              (ionChange)=\"setYear($event?.target?.value)\"\n            >\n            </ion-input>\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"7\">\n        <ion-row class=\"ion-align-items-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\" (click)=\"showMonths()\">\n            {{ refDate | dateLocale: 'MMMM' }}\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\" class=\"headerLabel\">\n      @for (ddd of weekDays; track ddd) {\n        <ion-col class=\"ion-text-center ion-no-padding\">\n          {{ ddd }}\n        </ion-col>\n      }\n    </ion-row>\n    @for (row of calendarGrid; track row; let i = $index) {\n      <ion-row class=\"ion-align-items-center\">\n        @for (col of row; track col; let j = $index) {\n          <ion-col class=\"ion-text-center ion-no-padding\">\n            <ion-button\n              size=\"small\"\n              shape=\"round\"\n              [color]=\"\n                isSameDay(calendarGrid[i][j], today) || isSameDay(calendarGrid[i][j], selectedDate)\n                  ? 'primary'\n                  : isSameMonth(calendarGrid[i][j], refDate)\n                    ? 'dark'\n                    : 'medium'\n              \"\n              [fill]=\"\n                isSameDay(calendarGrid[i][j], selectedDate)\n                  ? 'solid'\n                  : isSameDay(calendarGrid[i][j], today)\n                    ? 'outline'\n                    : 'clear'\n              \"\n              [disabled]=\"!isDateSelectable(calendarGrid[i][j])\"\n              (click)=\"selectDate(calendarGrid[i][j])\"\n            >\n              {{ calendarGrid[i][j] | date: 'd' }}\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    }\n    @if (timePicker || manualTimePicker) {\n      <ion-row>\n        <h1 class=\"headerLabel\">\n          {{ 'IDEA_UNCOMMON.CALENDAR.SET_TIME' | translate }}\n        </h1>\n      </ion-row>\n    }\n    @if (timePicker) {\n      <ion-row class=\"ion-align-items-center\">\n        <ion-col class=\"ion-no-padding\" [size]=\"7\">\n          <ion-row>\n            @for (hour of hours; track hour) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"2\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameHour(hour) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameHour(hour) ? 'solid' : 'clear'\"\n                  (click)=\"selectHour(hour)\"\n                >\n                  {{ hour }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n        <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"1\"> : </ion-col>\n        <ion-col class=\"ion-no-padding\" [size]=\"4\">\n          <ion-row>\n            @for (minute of minutes; track minute) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"4\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameMinute(minute) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameMinute(minute) ? 'solid' : 'clear'\"\n                  (click)=\"selectMinute(minute)\"\n                >\n                  {{ minute }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n      </ion-row>\n    }\n    @if (manualTimePicker) {\n      <ion-row class=\"ion-align-items-center manualTimePicker\">\n        <ion-col class=\"ion-text-center\" [size]=\"12\">\n          <input type=\"number\" min=\"0\" max=\"23\" [value]=\"hour\" (change)=\"selectHour($event.target.value)\" />\n          <span>:</span>\n          <input type=\"number\" min=\"0\" max=\"59\" [value]=\"minute\" (change)=\"selectMinute($event.target.value)\" />\n        </ion-col>\n      </ion-row>\n    }\n  </ion-grid>\n</ion-content>\n<ion-footer>\n  <ion-toolbar color=\"ideaToolbar\" class=\"tappable\" (click)=\"save()\">\n    <ion-title class=\"ion-text-center\">\n      <ion-icon name=\"checkmark\" />\n    </ion-title>\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--background: var(--ion-color-white)}h1{margin:10px}.headerLabel{font-size:.7em;font-weight:700;text-transform:uppercase}ion-col,ion-button{font-size:.95em}ion-button{margin:3px 0}ion-footer ion-toolbar{--min-height: 40px}.tappable{cursor:pointer}.manualTimePicker{padding:20px}.manualTimePicker input[type=number],.manualTimePicker span{font-size:2.5em}.manualTimePicker input[type=number]{border:none;border-bottom:2px solid var(--ion-color-dark);text-align:center}.manualTimePicker span{padding-left:4px;padding-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "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", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: 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: IonRow, selector: "ion-row" }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: 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: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }, { kind: "pipe", type: IDEALocalizedDatePipe, name: "dateLocale" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEACalendarPickerComponent, isStandalone: true, selector: "idea-calendar-picker", inputs: { inputDate: "inputDate", timePicker: "timePicker", manualTimePicker: "manualTimePicker", title: "title", hideClearButton: "hideClearButton", min: "min", max: "max" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\">\n      @if (!hideClearButton) {\n        <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.RESET' | translate\" (click)=\"save(true)\">\n          <ion-icon slot=\"icon-only\" name=\"arrow-undo\" />\n        </ion-button>\n      }\n      <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.CLOSE_WITHOUT_SAVING' | translate\" (click)=\"close()\">\n        <ion-icon slot=\"icon-only\" name=\"close\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-grid fixed class=\"ion-no-padding\">\n    <ion-row>\n      <h1 class=\"headerLabel\">{{ 'IDEA_UNCOMMON.CALENDAR.SET_DATE' | translate }}</h1>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\">\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"5\">\n        <ion-row class=\"ion-align-items-center ion-justify-content-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\">\n            <ion-input\n              type=\"text\"\n              [placeholder]=\"'IDEA_UNCOMMON.CALENDAR.YEAR' | translate\"\n              [value]=\"refDate().getFullYear()\"\n              (ionFocus)=\"$event.target.value = ''\"\n              (ionChange)=\"setYear($event?.target?.value)\"\n            >\n            </ion-input>\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"7\">\n        <ion-row class=\"ion-align-items-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\" (click)=\"showMonths()\">\n            {{ refDate() | dateLocale: 'MMMM' }}\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\" class=\"headerLabel\">\n      @for (ddd of weekDays; track ddd) {\n        <ion-col class=\"ion-text-center ion-no-padding\">\n          {{ ddd }}\n        </ion-col>\n      }\n    </ion-row>\n    @for (row of calendarGrid(); track row; let i = $index) {\n      <ion-row class=\"ion-align-items-center\">\n        @for (col of row; track col; let j = $index) {\n          <ion-col class=\"ion-text-center ion-no-padding\">\n            <ion-button\n              size=\"small\"\n              shape=\"round\"\n              [color]=\"\n                isSameDay(calendarGrid()[i][j], today) || isSameDay(calendarGrid()[i][j], selectedDate)\n                  ? 'primary'\n                  : isSameMonth(calendarGrid()[i][j], refDate())\n                    ? 'dark'\n                    : 'medium'\n              \"\n              [fill]=\"\n                isSameDay(calendarGrid()[i][j], selectedDate)\n                  ? 'solid'\n                  : isSameDay(calendarGrid()[i][j], today)\n                    ? 'outline'\n                    : 'clear'\n              \"\n              [disabled]=\"!isDateSelectable(calendarGrid()[i][j])\"\n              (click)=\"selectDate(calendarGrid()[i][j])\"\n            >\n              {{ calendarGrid()[i][j] | date: 'd' }}\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    }\n    @if (timePicker || manualTimePicker) {\n      <ion-row>\n        <h1 class=\"headerLabel\">\n          {{ 'IDEA_UNCOMMON.CALENDAR.SET_TIME' | translate }}\n        </h1>\n      </ion-row>\n    }\n    @if (timePicker) {\n      <ion-row class=\"ion-align-items-center\">\n        <ion-col class=\"ion-no-padding\" [size]=\"7\">\n          <ion-row>\n            @for (hour of hours; track hour) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"2\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameHour(hour) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameHour(hour) ? 'solid' : 'clear'\"\n                  (click)=\"selectHour(hour)\"\n                >\n                  {{ hour }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n        <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"1\"> : </ion-col>\n        <ion-col class=\"ion-no-padding\" [size]=\"4\">\n          <ion-row>\n            @for (minute of minutes; track minute) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"4\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameMinute(minute) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameMinute(minute) ? 'solid' : 'clear'\"\n                  (click)=\"selectMinute(minute)\"\n                >\n                  {{ minute }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n      </ion-row>\n    }\n    @if (manualTimePicker) {\n      <ion-row class=\"ion-align-items-center manualTimePicker\">\n        <ion-col class=\"ion-text-center\" [size]=\"12\">\n          <input type=\"number\" min=\"0\" max=\"23\" [value]=\"hour\" (change)=\"selectHour($event.target.value)\" />\n          <span>:</span>\n          <input type=\"number\" min=\"0\" max=\"59\" [value]=\"minute\" (change)=\"selectMinute($event.target.value)\" />\n        </ion-col>\n      </ion-row>\n    }\n  </ion-grid>\n</ion-content>\n<ion-footer>\n  <ion-toolbar color=\"ideaToolbar\" class=\"tappable\" (click)=\"save()\">\n    <ion-title class=\"ion-text-center\">\n      <ion-icon name=\"checkmark\" />\n    </ion-title>\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--background: var(--ion-color-white)}h1{margin:10px}.headerLabel{font-size:.7em;font-weight:700;text-transform:uppercase}ion-col,ion-button{font-size:.95em}ion-button{margin:3px 0}ion-footer ion-toolbar{--min-height: 40px}.tappable{cursor:pointer}.manualTimePicker{padding:20px}.manualTimePicker input[type=number],.manualTimePicker span{font-size:2.5em}.manualTimePicker input[type=number]{border:none;border-bottom:2px solid var(--ion-color-dark);text-align:center}.manualTimePicker span{padding-left:4px;padding-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "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", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: 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: IonRow, selector: "ion-row" }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: 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: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }, { kind: "pipe", type: IDEALocalizedDatePipe, name: "dateLocale" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEACalendarPickerComponent, decorators: [{
             type: Component,
@@ -2034,7 +2056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         IonTitle,
                         IonToolbar,
                         IonHeader
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\">\n      @if (!hideClearButton) {\n        <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.RESET' | translate\" (click)=\"save(true)\">\n          <ion-icon slot=\"icon-only\" name=\"arrow-undo\" />\n        </ion-button>\n      }\n      <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.CLOSE_WITHOUT_SAVING' | translate\" (click)=\"close()\">\n        <ion-icon slot=\"icon-only\" name=\"close\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-grid fixed class=\"ion-no-padding\">\n    <ion-row>\n      <h1 class=\"headerLabel\">{{ 'IDEA_UNCOMMON.CALENDAR.SET_DATE' | translate }}</h1>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\">\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"5\">\n        <ion-row class=\"ion-align-items-center ion-justify-content-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\">\n            <ion-input\n              type=\"text\"\n              [placeholder]=\"'IDEA_UNCOMMON.CALENDAR.YEAR' | translate\"\n              [value]=\"refDate.getFullYear()\"\n              (ionFocus)=\"$event.target.value = ''\"\n              (ionChange)=\"setYear($event?.target?.value)\"\n            >\n            </ion-input>\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"7\">\n        <ion-row class=\"ion-align-items-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\" (click)=\"showMonths()\">\n            {{ refDate | dateLocale: 'MMMM' }}\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\" class=\"headerLabel\">\n      @for (ddd of weekDays; track ddd) {\n        <ion-col class=\"ion-text-center ion-no-padding\">\n          {{ ddd }}\n        </ion-col>\n      }\n    </ion-row>\n    @for (row of calendarGrid; track row; let i = $index) {\n      <ion-row class=\"ion-align-items-center\">\n        @for (col of row; track col; let j = $index) {\n          <ion-col class=\"ion-text-center ion-no-padding\">\n            <ion-button\n              size=\"small\"\n              shape=\"round\"\n              [color]=\"\n                isSameDay(calendarGrid[i][j], today) || isSameDay(calendarGrid[i][j], selectedDate)\n                  ? 'primary'\n                  : isSameMonth(calendarGrid[i][j], refDate)\n                    ? 'dark'\n                    : 'medium'\n              \"\n              [fill]=\"\n                isSameDay(calendarGrid[i][j], selectedDate)\n                  ? 'solid'\n                  : isSameDay(calendarGrid[i][j], today)\n                    ? 'outline'\n                    : 'clear'\n              \"\n              [disabled]=\"!isDateSelectable(calendarGrid[i][j])\"\n              (click)=\"selectDate(calendarGrid[i][j])\"\n            >\n              {{ calendarGrid[i][j] | date: 'd' }}\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    }\n    @if (timePicker || manualTimePicker) {\n      <ion-row>\n        <h1 class=\"headerLabel\">\n          {{ 'IDEA_UNCOMMON.CALENDAR.SET_TIME' | translate }}\n        </h1>\n      </ion-row>\n    }\n    @if (timePicker) {\n      <ion-row class=\"ion-align-items-center\">\n        <ion-col class=\"ion-no-padding\" [size]=\"7\">\n          <ion-row>\n            @for (hour of hours; track hour) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"2\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameHour(hour) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameHour(hour) ? 'solid' : 'clear'\"\n                  (click)=\"selectHour(hour)\"\n                >\n                  {{ hour }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n        <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"1\"> : </ion-col>\n        <ion-col class=\"ion-no-padding\" [size]=\"4\">\n          <ion-row>\n            @for (minute of minutes; track minute) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"4\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameMinute(minute) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameMinute(minute) ? 'solid' : 'clear'\"\n                  (click)=\"selectMinute(minute)\"\n                >\n                  {{ minute }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n      </ion-row>\n    }\n    @if (manualTimePicker) {\n      <ion-row class=\"ion-align-items-center manualTimePicker\">\n        <ion-col class=\"ion-text-center\" [size]=\"12\">\n          <input type=\"number\" min=\"0\" max=\"23\" [value]=\"hour\" (change)=\"selectHour($event.target.value)\" />\n          <span>:</span>\n          <input type=\"number\" min=\"0\" max=\"59\" [value]=\"minute\" (change)=\"selectMinute($event.target.value)\" />\n        </ion-col>\n      </ion-row>\n    }\n  </ion-grid>\n</ion-content>\n<ion-footer>\n  <ion-toolbar color=\"ideaToolbar\" class=\"tappable\" (click)=\"save()\">\n    <ion-title class=\"ion-text-center\">\n      <ion-icon name=\"checkmark\" />\n    </ion-title>\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--background: var(--ion-color-white)}h1{margin:10px}.headerLabel{font-size:.7em;font-weight:700;text-transform:uppercase}ion-col,ion-button{font-size:.95em}ion-button{margin:3px 0}ion-footer ion-toolbar{--min-height: 40px}.tappable{cursor:pointer}.manualTimePicker{padding:20px}.manualTimePicker input[type=number],.manualTimePicker span{font-size:2.5em}.manualTimePicker input[type=number]{border:none;border-bottom:2px solid var(--ion-color-dark);text-align:center}.manualTimePicker span{padding-left:4px;padding-right:4px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\">\n      @if (!hideClearButton) {\n        <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.RESET' | translate\" (click)=\"save(true)\">\n          <ion-icon slot=\"icon-only\" name=\"arrow-undo\" />\n        </ion-button>\n      }\n      <ion-button [title]=\"'IDEA_UNCOMMON.CALENDAR.CLOSE_WITHOUT_SAVING' | translate\" (click)=\"close()\">\n        <ion-icon slot=\"icon-only\" name=\"close\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-grid fixed class=\"ion-no-padding\">\n    <ion-row>\n      <h1 class=\"headerLabel\">{{ 'IDEA_UNCOMMON.CALENDAR.SET_DATE' | translate }}</h1>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\">\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"5\">\n        <ion-row class=\"ion-align-items-center ion-justify-content-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\">\n            <ion-input\n              type=\"text\"\n              [placeholder]=\"'IDEA_UNCOMMON.CALENDAR.YEAR' | translate\"\n              [value]=\"refDate().getFullYear()\"\n              (ionFocus)=\"$event.target.value = ''\"\n              (ionChange)=\"setYear($event?.target?.value)\"\n            >\n            </ion-input>\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addYears(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n      <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"7\">\n        <ion-row class=\"ion-align-items-center\">\n          <ion-col class=\"ion-text-right ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(-1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-back\" />\n            </ion-button>\n          </ion-col>\n          <ion-col class=\"ion-text-center ion-no-padding tappable\" [size]=\"6\" (click)=\"showMonths()\">\n            {{ refDate() | dateLocale: 'MMMM' }}\n          </ion-col>\n          <ion-col class=\"ion-text-left ion-no-padding\" [size]=\"3\">\n            <ion-button fill=\"clear\" color=\"dark\" (click)=\"addMonths(+1)\">\n              <ion-icon slot=\"icon-only\" name=\"chevron-forward\" />\n            </ion-button>\n          </ion-col>\n        </ion-row>\n      </ion-col>\n    </ion-row>\n    <ion-row style=\"margin-bottom: 8px\" class=\"headerLabel\">\n      @for (ddd of weekDays; track ddd) {\n        <ion-col class=\"ion-text-center ion-no-padding\">\n          {{ ddd }}\n        </ion-col>\n      }\n    </ion-row>\n    @for (row of calendarGrid(); track row; let i = $index) {\n      <ion-row class=\"ion-align-items-center\">\n        @for (col of row; track col; let j = $index) {\n          <ion-col class=\"ion-text-center ion-no-padding\">\n            <ion-button\n              size=\"small\"\n              shape=\"round\"\n              [color]=\"\n                isSameDay(calendarGrid()[i][j], today) || isSameDay(calendarGrid()[i][j], selectedDate)\n                  ? 'primary'\n                  : isSameMonth(calendarGrid()[i][j], refDate())\n                    ? 'dark'\n                    : 'medium'\n              \"\n              [fill]=\"\n                isSameDay(calendarGrid()[i][j], selectedDate)\n                  ? 'solid'\n                  : isSameDay(calendarGrid()[i][j], today)\n                    ? 'outline'\n                    : 'clear'\n              \"\n              [disabled]=\"!isDateSelectable(calendarGrid()[i][j])\"\n              (click)=\"selectDate(calendarGrid()[i][j])\"\n            >\n              {{ calendarGrid()[i][j] | date: 'd' }}\n            </ion-button>\n          </ion-col>\n        }\n      </ion-row>\n    }\n    @if (timePicker || manualTimePicker) {\n      <ion-row>\n        <h1 class=\"headerLabel\">\n          {{ 'IDEA_UNCOMMON.CALENDAR.SET_TIME' | translate }}\n        </h1>\n      </ion-row>\n    }\n    @if (timePicker) {\n      <ion-row class=\"ion-align-items-center\">\n        <ion-col class=\"ion-no-padding\" [size]=\"7\">\n          <ion-row>\n            @for (hour of hours; track hour) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"2\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameHour(hour) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameHour(hour) ? 'solid' : 'clear'\"\n                  (click)=\"selectHour(hour)\"\n                >\n                  {{ hour }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n        <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"1\"> : </ion-col>\n        <ion-col class=\"ion-no-padding\" [size]=\"4\">\n          <ion-row>\n            @for (minute of minutes; track minute) {\n              <ion-col class=\"ion-text-center ion-no-padding\" [size]=\"4\">\n                <ion-button\n                  size=\"small\"\n                  shape=\"round\"\n                  [color]=\"isSameMinute(minute) ? 'primary' : 'dark'\"\n                  [fill]=\"isSameMinute(minute) ? 'solid' : 'clear'\"\n                  (click)=\"selectMinute(minute)\"\n                >\n                  {{ minute }}\n                </ion-button>\n              </ion-col>\n            }\n          </ion-row>\n        </ion-col>\n      </ion-row>\n    }\n    @if (manualTimePicker) {\n      <ion-row class=\"ion-align-items-center manualTimePicker\">\n        <ion-col class=\"ion-text-center\" [size]=\"12\">\n          <input type=\"number\" min=\"0\" max=\"23\" [value]=\"hour\" (change)=\"selectHour($event.target.value)\" />\n          <span>:</span>\n          <input type=\"number\" min=\"0\" max=\"59\" [value]=\"minute\" (change)=\"selectMinute($event.target.value)\" />\n        </ion-col>\n      </ion-row>\n    }\n  </ion-grid>\n</ion-content>\n<ion-footer>\n  <ion-toolbar color=\"ideaToolbar\" class=\"tappable\" (click)=\"save()\">\n    <ion-title class=\"ion-text-center\">\n      <ion-icon name=\"checkmark\" />\n    </ion-title>\n  </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--background: var(--ion-color-white)}h1{margin:10px}.headerLabel{font-size:.7em;font-weight:700;text-transform:uppercase}ion-col,ion-button{font-size:.95em}ion-button{margin:3px 0}ion-footer ion-toolbar{--min-height: 40px}.tappable{cursor:pointer}.manualTimePicker{padding:20px}.manualTimePicker input[type=number],.manualTimePicker span{font-size:2.5em}.manualTimePicker input[type=number]{border:none;border-bottom:2px solid var(--ion-color-dark);text-align:center}.manualTimePicker span{padding-left:4px;padding-right:4px}\n"] }]
         }], propDecorators: { inputDate: [{
                 type: Input
             }], timePicker: [{
@@ -2055,7 +2077,6 @@ class IDEADateTimeComponent {
     constructor() {
         this._modal = inject(ModalController);
         this._translate = inject(IDEATranslationsService);
-        this._cdr = inject(ChangeDetectorRef);
         /**
          * The date to show/pick.
          */
@@ -2133,12 +2154,14 @@ class IDEADateTimeComponent {
         ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
         this.dateChange = output();
         this.iconSelect = output();
-        this.isOpening = false;
+        this.valueToDisplay = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueToDisplay" }] : /* istanbul ignore next */ []));
+        this.isOpening = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpening" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         this.langChangeSubscription = this._translate.onLangChange.subscribe(() => {
-            this.valueToDisplay = this.getValueToDisplay(this.date());
-            this._cdr.markForCheck();
+            this.valueToDisplay.set(this.getValueToDisplay(this.date()));
         });
     }
     ngOnDestroy() {
@@ -2147,12 +2170,12 @@ class IDEADateTimeComponent {
     }
     ngOnChanges(changes) {
         if (changes.date || changes.timePicker)
-            this.valueToDisplay = this.getValueToDisplay(this.date());
+            this.valueToDisplay.set(this.getValueToDisplay(this.date()));
     }
     async openCalendarPicker() {
-        if (this.disabled() || this.isOpening)
+        if (this.disabled() || this.isOpening())
             return;
-        this.isOpening = true;
+        this.isOpening.set(true);
         const modal = await this._modal.create({
             component: IDEACalendarPickerComponent,
             componentProps: {
@@ -2174,7 +2197,7 @@ class IDEADateTimeComponent {
             }
         });
         modal.present();
-        this.isOpening = false;
+        this.isOpening.set(false);
     }
     getValueToDisplay(date) {
         return !date
@@ -2197,7 +2220,7 @@ class IDEADateTimeComponent {
       [lines]="lines()"
       [title]="placeholder() || label() || ''"
       [button]="!disabled()"
-      [disabled]="isOpening"
+      [disabled]="isOpening()"
       [class.withLabel]="label()"
       (click)="openCalendarPicker()"
     >
@@ -2221,12 +2244,12 @@ class IDEADateTimeComponent {
         </ion-label>
       }
       <ion-label class="value" [class.selectable]="!disabled()">
-        @if (!valueToDisplay && !disabled()) {
+        @if (!valueToDisplay() && !disabled()) {
           <ion-text class="placeholder" [class.selectable]="!disabled()">
             {{ placeholder() }}
           </ion-text>
         }
-        {{ valueToDisplay }}
+        {{ valueToDisplay() }}
       </ion-label>
       @if (!disabled()) {
         <ion-icon slot="end" icon="caret-down" class="selectIcon" [class.selectable]="!disabled()" />
@@ -2243,7 +2266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       [lines]="lines()"
       [title]="placeholder() || label() || ''"
       [button]="!disabled()"
-      [disabled]="isOpening"
+      [disabled]="isOpening()"
       [class.withLabel]="label()"
       (click)="openCalendarPicker()"
     >
@@ -2267,12 +2290,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         </ion-label>
       }
       <ion-label class="value" [class.selectable]="!disabled()">
-        @if (!valueToDisplay && !disabled()) {
+        @if (!valueToDisplay() && !disabled()) {
           <ion-text class="placeholder" [class.selectable]="!disabled()">
             {{ placeholder() }}
           </ion-text>
         }
-        {{ valueToDisplay }}
+        {{ valueToDisplay() }}
       </ion-label>
       @if (!disabled()) {
         <ion-icon slot="end" icon="caret-down" class="selectIcon" [class.selectable]="!disabled()" />
@@ -2500,6 +2523,12 @@ class IDEAEchoPage {
         this._loading = inject(IDEALoadingService);
         this._API = inject(IDEAAWSAPIService);
         this._translate = inject(IDEATranslationsService);
+        this.content = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        this.htmlContent = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "htmlContent" }] : /* istanbul ignore next */ []));
+        this.success = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "success" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         const request = this._route.snapshot.paramMap.get('request') || this._route.snapshot.queryParams.request;
@@ -2532,15 +2561,15 @@ class IDEAEchoPage {
                 this.endExternalCalendarsIntegrationFlow(ExternalCalendarSources.GOOGLE, code, state);
                 break;
             default:
-                this.success = false;
-                this.content = this._translate._('IDEA_UNCOMMON.ECHO.INVALID_ACTION');
+                this.success.set(false);
+                this.content.set(this._translate._('IDEA_UNCOMMON.ECHO.INVALID_ACTION'));
                 break;
         }
     }
     maintenanceMode() {
         const announcement = this._tc.get('idea-announcement');
         if (announcement && announcement.content)
-            this.htmlContent = mdToHtml(announcement.content);
+            this.htmlContent.set(mdToHtml(announcement.content));
     }
     async followRegistrationLink(code, user) {
         try {
@@ -2554,12 +2583,12 @@ class IDEAEchoPage {
                     cognitoUserPoolClientId: this._env.aws.cognito.userPoolClientId
                 }
             });
-            this.success = true;
-            this.content = this._translate._('IDEA_UNCOMMON.ECHO.ACCOUNT_CONFIRMED');
+            this.success.set(true);
+            this.content.set(this._translate._('IDEA_UNCOMMON.ECHO.ACCOUNT_CONFIRMED'));
         }
         catch (error) {
-            this.success = false;
-            this.content = this._translate._('IDEA_UNCOMMON.ECHO.REQUEST_FAILED');
+            this.success.set(false);
+            this.content.set(this._translate._('IDEA_UNCOMMON.ECHO.REQUEST_FAILED'));
         }
         finally {
             this._loading.hide();
@@ -2569,12 +2598,12 @@ class IDEAEchoPage {
         try {
             await this._loading.show();
             await this._API.getResource('invitations', { idea: true, resourceId: code });
-            this.success = true;
-            this.content = this._translate._('IDEA_UNCOMMON.ECHO.TEAM_JOINED');
+            this.success.set(true);
+            this.content.set(this._translate._('IDEA_UNCOMMON.ECHO.TEAM_JOINED'));
         }
         catch (error) {
-            this.success = false;
-            this.content = this._translate._('IDEA_UNCOMMON.ECHO.REQUEST_FAILED');
+            this.success.set(false);
+            this.content.set(this._translate._('IDEA_UNCOMMON.ECHO.REQUEST_FAILED'));
         }
         finally {
             this._loading.hide();
@@ -2588,28 +2617,28 @@ class IDEAEchoPage {
                 resourceId: code,
                 params: { project: this._env.idea.project }
             });
-            this.success = true;
-            this.content = this._translate._('IDEA_UNCOMMON.ECHO.EMAIL_CHANGED');
+            this.success.set(true);
+            this.content.set(this._translate._('IDEA_UNCOMMON.ECHO.EMAIL_CHANGED'));
         }
         catch (error) {
-            this.success = false;
-            this.content = this._translate._('IDEA_UNCOMMON.ECHO.REQUEST_FAILED');
+            this.success.set(false);
+            this.content.set(this._translate._('IDEA_UNCOMMON.ECHO.REQUEST_FAILED'));
         }
         finally {
             this._loading.hide();
         }
     }
     endGitHubIntegrationFlow(success) {
-        this.success = success;
-        this.content = success
+        this.success.set(success);
+        this.content.set(success
             ? this._translate._('IDEA_UNCOMMON.ECHO.GITHUB_SOURCE_INTEGRATION_SUCCESS')
-            : this._translate._('IDEA_UNCOMMON.ECHO.GITHUB_SOURCE_INTEGRATION_ERROR');
+            : this._translate._('IDEA_UNCOMMON.ECHO.GITHUB_SOURCE_INTEGRATION_ERROR'));
     }
     endTrelloIntegrationFlow(token) {
-        this.success = Boolean(token);
-        this.content = token
+        this.success.set(Boolean(token));
+        this.content.set(token
             ? this._translate._('IDEA_UNCOMMON.ECHO.TRELLO_SOURCE_INTEGRATION_SUCCESS', { token })
-            : this._translate._('IDEA_UNCOMMON.ECHO.TRELLO_SOURCE_INTEGRATION_ERROR');
+            : this._translate._('IDEA_UNCOMMON.ECHO.TRELLO_SOURCE_INTEGRATION_ERROR'));
     }
     async endExternalCalendarsIntegrationFlow(service, code, calendarId) {
         try {
@@ -2618,12 +2647,12 @@ class IDEAEchoPage {
                 idea: true,
                 body: { action: 'SET_EXTERNAL_INTEGRATION', service, code, calendarId, project: this._env.idea.project }
             });
-            this.success = true;
-            this.content = this._translate._('IDEA_UNCOMMON.ECHO.EXTERNAL_CALENDARS_SOURCE_INTEGRATION_SUCCESS');
+            this.success.set(true);
+            this.content.set(this._translate._('IDEA_UNCOMMON.ECHO.EXTERNAL_CALENDARS_SOURCE_INTEGRATION_SUCCESS'));
         }
         catch (error) {
-            this.success = false;
-            this.content = this._translate._('IDEA_UNCOMMON.ECHO.EXTERNAL_CALENDARS_SOURCE_INTEGRATION_ERROR');
+            this.success.set(false);
+            this.content.set(this._translate._('IDEA_UNCOMMON.ECHO.EXTERNAL_CALENDARS_SOURCE_INTEGRATION_ERROR'));
         }
         finally {
             this._loading.hide();
@@ -2637,20 +2666,20 @@ class IDEAEchoPage {
           <ion-img [src]="'assets/icons/icon-auth.svg'" />
           <ion-card-header>
             <ion-card-title>
-              @if (success === true) {
+              @if (success() === true) {
                 <ion-icon testId="echoSuccess" color="success" name="checkmark" />
               }
-              @if (success === false) {
+              @if (success() === false) {
                 <ion-icon testId="echoFailure" color="danger" name="close" />
               }
             </ion-card-title>
           </ion-card-header>
           <ion-card-content class="selectable">
-            {{ content }}
-            @if (htmlContent) {
-              <div class="htmlContent" [innerHTML]="htmlContent"></div>
+            {{ content() }}
+            @if (htmlContent()) {
+              <div class="htmlContent" [innerHTML]="htmlContent()"></div>
             }
-            @if (success === false || success === true) {
+            @if (success() === false || success() === true) {
               <p class="youCanCloseMe">
                 <i>{{ 'IDEA_UNCOMMON.ECHO.YOU_CAN_CLOSE_THE_PAGE' | translate }}</i>
               </p>
@@ -2670,20 +2699,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
           <ion-img [src]="'assets/icons/icon-auth.svg'" />
           <ion-card-header>
             <ion-card-title>
-              @if (success === true) {
+              @if (success() === true) {
                 <ion-icon testId="echoSuccess" color="success" name="checkmark" />
               }
-              @if (success === false) {
+              @if (success() === false) {
                 <ion-icon testId="echoFailure" color="danger" name="close" />
               }
             </ion-card-title>
           </ion-card-header>
           <ion-card-content class="selectable">
-            {{ content }}
-            @if (htmlContent) {
-              <div class="htmlContent" [innerHTML]="htmlContent"></div>
+            {{ content() }}
+            @if (htmlContent()) {
+              <div class="htmlContent" [innerHTML]="htmlContent()"></div>
             }
-            @if (success === false || success === true) {
+            @if (success() === false || success() === true) {
               <p class="youCanCloseMe">
                 <i>{{ 'IDEA_UNCOMMON.ECHO.YOU_CAN_CLOSE_THE_PAGE' | translate }}</i>
               </p>
@@ -2938,6 +2967,26 @@ class IDEAOfflineDataService {
         this._translate = inject(IDEATranslationsService);
         this._offline = inject(IDEAOfflineService);
         this._API = inject(IDEAAWSAPIService);
+        /**
+         * True when running a synchronization.
+         */
+        this.synchronizing = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "synchronizing" }] : /* istanbul ignore next */ []));
+        /**
+         * The timestamp of the last synchronization.
+         */
+        this.lastSyncAt = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastSyncAt" }] : /* istanbul ignore next */ []));
+        /**
+         * True if an error happened in the last synchronization.
+         */
+        this.errorInLastSync = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errorInLastSync" }] : /* istanbul ignore next */ []));
+        /**
+         * True if the synchronisation is too vast and so require a manual action of the user.
+         */
+        this.requiresManualConfirmation = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requiresManualConfirmation" }] : /* istanbul ignore next */ []));
         this.queueAPIRequests = new Array();
         this.resources = new Array();
         this.cacheableResources = {};
@@ -2945,7 +2994,7 @@ class IDEAOfflineDataService {
         this._offline.subscribe(isOnline => {
             if (isOnline) {
                 // try a synchronization if needed or if the last one failed
-                if (this.errorInLastSync)
+                if (this.errorInLastSync())
                     this.synchronize();
                 else
                     this.synchronizeIfNeeded();
@@ -3013,8 +3062,8 @@ class IDEAOfflineDataService {
     loadLastSyncAt() {
         return new Promise(resolve => {
             this._storage.get(this.lastSyncKey).then((lastSyncAt) => {
-                this.lastSyncAt = lastSyncAt ? Number(lastSyncAt) : null;
-                resolve(this.lastSyncAt);
+                this.lastSyncAt.set(lastSyncAt ? Number(lastSyncAt) : null);
+                resolve(this.lastSyncAt());
             });
         });
     }
@@ -3022,7 +3071,7 @@ class IDEAOfflineDataService {
      * Update last sync at info in the local storage.
      */
     saveLastSyncAt(lastSyncAt) {
-        this.lastSyncAt = lastSyncAt;
+        this.lastSyncAt.set(lastSyncAt);
         return this._storage.set(this.lastSyncKey, lastSyncAt);
     }
     /**
@@ -3155,22 +3204,22 @@ class IDEAOfflineDataService {
                     cr.synchronizing = true;
                     const success = await this.syncResourceDeltaRecords(resource, delta.records[resource]);
                     if (!success)
-                        this.errorInLastSync = true;
+                        this.errorInLastSync.set(true);
                 }
             }));
             // if there were error of if there is nothing left to sync, we are done
-            if (this.errorInLastSync || !delta.next)
+            if (this.errorInLastSync() || !delta.next)
                 return done();
             // otherwise, get the next page of the delta and go recursive until we are done
             const params = { next: delta.next, limit: NUM_ELEMENTS_WITH_MANUAL_SYNC };
-            if (this.lastSyncAt)
-                params.since = this.lastSyncAt;
+            if (this.lastSyncAt())
+                params.since = this.lastSyncAt();
             const newDelta = await this._API.getResource(this.teamId ? `teams/${this.teamId}/delta` : 'delta', { params });
             this.syncDeltaRecords(newDelta, done);
         }
         catch (err) {
             // if something went wrong, stops the operation, since we need to make sure the entire flow is consistent
-            this.errorInLastSync = true;
+            this.errorInLastSync.set(true);
             return done();
         }
     }
@@ -3246,7 +3295,7 @@ class IDEAOfflineDataService {
                 return;
             this.loadLastSyncAt().then(() => this.loadQueueAPIRequest()
                 .then(() => {
-                if (this.queueAPIRequests.length || Date.now() > this.lastSyncAt + SYNC_EXPIRATION_INTERVAL)
+                if (this.queueAPIRequests.length || Date.now() > this.lastSyncAt() + SYNC_EXPIRATION_INTERVAL)
                     this.synchronize();
                 resolve();
             })
@@ -3259,11 +3308,11 @@ class IDEAOfflineDataService {
      */
     synchronize(manualConfirmation) {
         return new Promise((resolve, reject) => {
-            if (!this.isAllowed() || this.synchronizing)
+            if (!this.isAllowed() || this.synchronizing())
                 return resolve();
-            this.synchronizing = true;
-            this.errorInLastSync = false;
-            this.requiresManualConfirmation = false;
+            this.synchronizing.set(true);
+            this.errorInLastSync.set(false);
+            this.requiresManualConfirmation.set(false);
             // load the lastSyncAt information
             this.loadLastSyncAt().then(() => 
             // try to run all the pending API requests in the queue, i.e. uploading the offline resources changed
@@ -3273,21 +3322,21 @@ class IDEAOfflineDataService {
                 const now = Date.now();
                 // prepare a first "short" Delta request, to see if there is a lot of data to process
                 const params = { limit: NUM_ELEMENTS_WITHOUT_MANUAL_SYNC };
-                if (this.lastSyncAt)
-                    params.since = this.lastSyncAt;
+                if (this.lastSyncAt())
+                    params.since = this.lastSyncAt();
                 this._API
                     .getResource(this.teamId ? `teams/${this.teamId}/delta` : 'delta', { params })
                     .then((delta) => {
                     // decide if to proceed with the sync: in case there is another page, it requires a manual confirmation
                     if (delta.next && !manualConfirmation) {
-                        this.requiresManualConfirmation = true;
-                        this.synchronizing = false;
+                        this.requiresManualConfirmation.set(true);
+                        this.synchronizing.set(false);
                         return resolve();
                     }
                     // save the records in the delta and request possible new pages
                     this.syncDeltaRecords(delta, () => {
-                        if (this.errorInLastSync) {
-                            this.synchronizing = false;
+                        if (this.errorInLastSync()) {
+                            this.synchronizing.set(false);
                             resolve();
                         }
                         else {
@@ -3296,13 +3345,13 @@ class IDEAOfflineDataService {
                             // update the timestamp of last sync
                             this.saveLastSyncAt(now)
                                 .then(() => {
-                                this.synchronizing = false;
+                                this.synchronizing.set(false);
                                 resolve();
                             })
                                 .catch(() => {
                                 // we couldn't save the last sync info
-                                this.errorInLastSync = true;
-                                this.synchronizing = false;
+                                this.errorInLastSync.set(true);
+                                this.synchronizing.set(false);
                                 reject();
                             });
                         }
@@ -3310,15 +3359,15 @@ class IDEAOfflineDataService {
                 })
                     .catch(() => {
                     // we couldn't acquire new information (Delta)
-                    this.errorInLastSync = true;
-                    this.synchronizing = false;
+                    this.errorInLastSync.set(true);
+                    this.synchronizing.set(false);
                     reject();
                 });
             })
                 .catch(() => {
                 // we stop, since we don't want backend data to override local info not yet uploaded
-                this.errorInLastSync = true;
-                this.synchronizing = false;
+                this.errorInLastSync.set(true);
+                this.synchronizing.set(false);
                 reject();
             }));
         });
@@ -3366,13 +3415,13 @@ class IDEACacheableResourceComponent {
       @if (resource().error) {
         <ion-icon slot="end" name="alert-circle" color="danger" />
       }
-      @if (!resource().error && _offline.synchronizing && resource().synchronizing) {
+      @if (!resource().error && _offline.synchronizing() && resource().synchronizing) {
         <ion-spinner slot="end" name="dots" />
       }
-      @if (!resource().error && !resource().synchronizing && !_offline.requiresManualConfirmation) {
+      @if (!resource().error && !resource().synchronizing && !_offline.requiresManualConfirmation()) {
         <ion-icon slot="end" name="checkmark" color="success" />
       }
-      @if (!resource().error && !resource().synchronizing && _offline.requiresManualConfirmation) {
+      @if (!resource().error && !resource().synchronizing && _offline.requiresManualConfirmation()) {
         <ion-icon slot="end" name="pause" color="dark" />
       }
     </ion-item>
@@ -3390,13 +3439,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       @if (resource().error) {
         <ion-icon slot="end" name="alert-circle" color="danger" />
       }
-      @if (!resource().error && _offline.synchronizing && resource().synchronizing) {
+      @if (!resource().error && _offline.synchronizing() && resource().synchronizing) {
         <ion-spinner slot="end" name="dots" />
       }
-      @if (!resource().error && !resource().synchronizing && !_offline.requiresManualConfirmation) {
+      @if (!resource().error && !resource().synchronizing && !_offline.requiresManualConfirmation()) {
         <ion-icon slot="end" name="checkmark" color="success" />
       }
-      @if (!resource().error && !resource().synchronizing && _offline.requiresManualConfirmation) {
+      @if (!resource().error && !resource().synchronizing && _offline.requiresManualConfirmation()) {
         <ion-icon slot="end" name="pause" color="dark" />
       }
     </ion-item>
@@ -3472,7 +3521,7 @@ class IDEAOfflineManagerComponent {
         this._modal.dismiss();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAOfflineManagerComponent, isStandalone: true, selector: "idea-offline-manager", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"close()\">\n        <ion-icon name=\"close\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-title>\n      {{ 'IDEA_UNCOMMON.OFFLINE.OFFLINE_MANAGER' | translate }}\n    </ion-title>\n    <ion-buttons slot=\"end\">\n      <ion-button [title]=\"'IDEA_UNCOMMON.OFFLINE.ADVANCED_ACTIONS' | translate\" (click)=\"actions()\">\n        <ion-icon slot=\"icon-only\" name=\"ellipsis-vertical\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-list class=\"aList\">\n    @if (!_offline.synchronizing && _offline.requiresManualConfirmation) {\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_UNCOMMON.OFFLINE.HUGE_SYNC_NEED_MANUAL_CONFIRMATION' | translate }}</h2>\n        </ion-label>\n      </ion-list-header>\n    }\n    @if (!_offline.synchronizing) {\n      <ion-list-header>\n        <ion-label class=\"ion-text-wrap\">\n          <h3 class=\"lastSyncAt\">\n            {{ 'IDEA_UNCOMMON.OFFLINE.LAST_SYNC' | translate }}:\n            <ion-text>\n              {{\n                _offline.lastSyncAt\n                  ? (_offline.lastSyncAt | dateLocale: 'medium')\n                  : ('IDEA_UNCOMMON.OFFLINE.NEVER' | translate)\n              }}\n            </ion-text>\n          </h3>\n          @if (_offline.errorInLastSync) {\n            <p>\n              <ion-text color=\"danger\">\n                <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_DURING_LAST_SYNC' | translate }}</b>\n              </ion-text>\n            </p>\n          }\n        </ion-label>\n        <ion-button\n          size=\"small\"\n          fill=\"solid\"\n          [color]=\"_offline.errorInLastSync ? 'danger' : 'dark'\"\n          [disabled]=\"_offline.isOffline()\"\n          (click)=\"sync()\"\n        >\n          <ion-icon slot=\"start\" name=\"sync\" /> {{ 'IDEA_UNCOMMON.OFFLINE.SYNC_NOW' | translate }}\n        </ion-button>\n      </ion-list-header>\n    }\n  </ion-list>\n  @if (_offline.synchronizing) {\n    <ion-list class=\"aList\">\n      <ion-item>\n        <ion-label class=\"ion-text-center\">\n          <ion-spinner name=\"crescent\" color=\"primary\" />\n        </ion-label>\n      </ion-item>\n    </ion-list>\n  }\n  @if (_offline.useQueueAPIRequests) {\n    <ion-list class=\"aList\">\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD' | translate }}</h2>\n          <p>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD_QUEUE_REQUESTS_EXPLANATION' | translate }}</p>\n        </ion-label>\n      </ion-list-header>\n      @if (!_offline.queueAPIRequests.length) {\n        <ion-item>\n          <i>{{ 'IDEA_UNCOMMON.OFFLINE.NO_ELEMENTS_TO_UPLOAD' | translate }}</i>\n          <ion-icon slot=\"end\" size=\"small\" name=\"checkmark\" color=\"success\" />\n        </ion-item>\n      }\n      @for (r of _offline.queueAPIRequests; track r; let odd = $odd) {\n        <ion-item [class.oddItem]=\"odd\">\n          <ion-label class=\"ion-text-wrap\">\n            {{ r.description }}\n            @if (r.error) {\n              <p>\n                <ion-text color=\"danger\">\n                  <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_CODE' | translate }}: {{ r.error }}</b>\n                </ion-text>\n                <br />\n                {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_I' | translate }}<br />\n                {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_II' | translate }}<br />\n                {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_III' | translate }}\n              </p>\n            }\n          </ion-label>\n          @if (r.error) {\n            <ion-button\n              fill=\"clear\"\n              slot=\"end\"\n              color=\"danger\"\n              [title]=\"'IDEA_UNCOMMON.OFFLINE.CANCEL_REQUEST' | translate\"\n              (click)=\"deleteRequest(r)\"\n            >\n              <ion-icon slot=\"icon-only\" name=\"trash\" />\n            </ion-button>\n          }\n          @if (r.error) {\n            <ion-button\n              fill=\"clear\"\n              slot=\"end\"\n              color=\"medium\"\n              [title]=\"'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_LOG' | translate\"\n              (click)=\"downloadRequestLog(r)\"\n            >\n              <ion-icon slot=\"icon-only\" name=\"download\" />\n            </ion-button>\n          }\n          @if (_offline.synchronizing) {\n            <ion-spinner slot=\"end\" name=\"dots\" />\n          }\n        </ion-item>\n      }\n    </ion-list>\n  }\n  @if (_offline.getResources().length) {\n    <ion-list class=\"aList\">\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD' | translate }}</h2>\n          <p>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_RESOURCES_EXPLANATION' | translate }}</p>\n        </ion-label>\n      </ion-list-header>\n      @for (r of _offline.getResources(); track r) {\n        <idea-cacheable-resource [resource]=\"_offline.getCacheableResource(r)\" />\n      }\n    </ion-list>\n  }\n</ion-content>\n", styles: [".aList{max-width:500px;margin:0 auto}.aList ion-list-header{padding-right:10px}.aList ion-list-header h3.lastSyncAt{margin-top:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IDEACacheableResourceComponent, selector: "idea-cacheable-resource", inputs: ["resource"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: 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: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }, { kind: "pipe", type: IDEALocalizedDatePipe, name: "dateLocale" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAOfflineManagerComponent, isStandalone: true, selector: "idea-offline-manager", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"close()\">\n        <ion-icon name=\"close\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-title>\n      {{ 'IDEA_UNCOMMON.OFFLINE.OFFLINE_MANAGER' | translate }}\n    </ion-title>\n    <ion-buttons slot=\"end\">\n      <ion-button [title]=\"'IDEA_UNCOMMON.OFFLINE.ADVANCED_ACTIONS' | translate\" (click)=\"actions()\">\n        <ion-icon slot=\"icon-only\" name=\"ellipsis-vertical\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-list class=\"aList\">\n    @if (!_offline.synchronizing() && _offline.requiresManualConfirmation()) {\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_UNCOMMON.OFFLINE.HUGE_SYNC_NEED_MANUAL_CONFIRMATION' | translate }}</h2>\n        </ion-label>\n      </ion-list-header>\n    }\n    @if (!_offline.synchronizing()) {\n      <ion-list-header>\n        <ion-label class=\"ion-text-wrap\">\n          <h3 class=\"lastSyncAt\">\n            {{ 'IDEA_UNCOMMON.OFFLINE.LAST_SYNC' | translate }}:\n            <ion-text>\n              {{\n                _offline.lastSyncAt()\n                  ? (_offline.lastSyncAt() | dateLocale: 'medium')\n                  : ('IDEA_UNCOMMON.OFFLINE.NEVER' | translate)\n              }}\n            </ion-text>\n          </h3>\n          @if (_offline.errorInLastSync()) {\n            <p>\n              <ion-text color=\"danger\">\n                <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_DURING_LAST_SYNC' | translate }}</b>\n              </ion-text>\n            </p>\n          }\n        </ion-label>\n        <ion-button\n          size=\"small\"\n          fill=\"solid\"\n          [color]=\"_offline.errorInLastSync() ? 'danger' : 'dark'\"\n          [disabled]=\"_offline.isOffline()\"\n          (click)=\"sync()\"\n        >\n          <ion-icon slot=\"start\" name=\"sync\" /> {{ 'IDEA_UNCOMMON.OFFLINE.SYNC_NOW' | translate }}\n        </ion-button>\n      </ion-list-header>\n    }\n  </ion-list>\n  @if (_offline.synchronizing()) {\n    <ion-list class=\"aList\">\n      <ion-item>\n        <ion-label class=\"ion-text-center\">\n          <ion-spinner name=\"crescent\" color=\"primary\" />\n        </ion-label>\n      </ion-item>\n    </ion-list>\n  }\n  @if (_offline.useQueueAPIRequests) {\n    <ion-list class=\"aList\">\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD' | translate }}</h2>\n          <p>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD_QUEUE_REQUESTS_EXPLANATION' | translate }}</p>\n        </ion-label>\n      </ion-list-header>\n      @if (!_offline.queueAPIRequests.length) {\n        <ion-item>\n          <i>{{ 'IDEA_UNCOMMON.OFFLINE.NO_ELEMENTS_TO_UPLOAD' | translate }}</i>\n          <ion-icon slot=\"end\" size=\"small\" name=\"checkmark\" color=\"success\" />\n        </ion-item>\n      }\n      @for (r of _offline.queueAPIRequests; track r; let odd = $odd) {\n        <ion-item [class.oddItem]=\"odd\">\n          <ion-label class=\"ion-text-wrap\">\n            {{ r.description }}\n            @if (r.error) {\n              <p>\n                <ion-text color=\"danger\">\n                  <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_CODE' | translate }}: {{ r.error }}</b>\n                </ion-text>\n                <br />\n                {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_I' | translate }}<br />\n                {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_II' | translate }}<br />\n                {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_III' | translate }}\n              </p>\n            }\n          </ion-label>\n          @if (r.error) {\n            <ion-button\n              fill=\"clear\"\n              slot=\"end\"\n              color=\"danger\"\n              [title]=\"'IDEA_UNCOMMON.OFFLINE.CANCEL_REQUEST' | translate\"\n              (click)=\"deleteRequest(r)\"\n            >\n              <ion-icon slot=\"icon-only\" name=\"trash\" />\n            </ion-button>\n          }\n          @if (r.error) {\n            <ion-button\n              fill=\"clear\"\n              slot=\"end\"\n              color=\"medium\"\n              [title]=\"'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_LOG' | translate\"\n              (click)=\"downloadRequestLog(r)\"\n            >\n              <ion-icon slot=\"icon-only\" name=\"download\" />\n            </ion-button>\n          }\n          @if (_offline.synchronizing()) {\n            <ion-spinner slot=\"end\" name=\"dots\" />\n          }\n        </ion-item>\n      }\n    </ion-list>\n  }\n  @if (_offline.getResources().length) {\n    <ion-list class=\"aList\">\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD' | translate }}</h2>\n          <p>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_RESOURCES_EXPLANATION' | translate }}</p>\n        </ion-label>\n      </ion-list-header>\n      @for (r of _offline.getResources(); track r) {\n        <idea-cacheable-resource [resource]=\"_offline.getCacheableResource(r)\" />\n      }\n    </ion-list>\n  }\n</ion-content>\n", styles: [".aList{max-width:500px;margin:0 auto}.aList ion-list-header{padding-right:10px}.aList ion-list-header h3.lastSyncAt{margin-top:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IDEACacheableResourceComponent, selector: "idea-cacheable-resource", inputs: ["resource"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: 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: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "pipe", type: IDEATranslatePipe, name: "translate" }, { kind: "pipe", type: IDEALocalizedDatePipe, name: "dateLocale" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineManagerComponent, decorators: [{
             type: Component,
@@ -3494,7 +3543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         IonButton,
                         IonToolbar,
                         IonHeader
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"close()\">\n        <ion-icon name=\"close\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-title>\n      {{ 'IDEA_UNCOMMON.OFFLINE.OFFLINE_MANAGER' | translate }}\n    </ion-title>\n    <ion-buttons slot=\"end\">\n      <ion-button [title]=\"'IDEA_UNCOMMON.OFFLINE.ADVANCED_ACTIONS' | translate\" (click)=\"actions()\">\n        <ion-icon slot=\"icon-only\" name=\"ellipsis-vertical\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-list class=\"aList\">\n    @if (!_offline.synchronizing && _offline.requiresManualConfirmation) {\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_UNCOMMON.OFFLINE.HUGE_SYNC_NEED_MANUAL_CONFIRMATION' | translate }}</h2>\n        </ion-label>\n      </ion-list-header>\n    }\n    @if (!_offline.synchronizing) {\n      <ion-list-header>\n        <ion-label class=\"ion-text-wrap\">\n          <h3 class=\"lastSyncAt\">\n            {{ 'IDEA_UNCOMMON.OFFLINE.LAST_SYNC' | translate }}:\n            <ion-text>\n              {{\n                _offline.lastSyncAt\n                  ? (_offline.lastSyncAt | dateLocale: 'medium')\n                  : ('IDEA_UNCOMMON.OFFLINE.NEVER' | translate)\n              }}\n            </ion-text>\n          </h3>\n          @if (_offline.errorInLastSync) {\n            <p>\n              <ion-text color=\"danger\">\n                <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_DURING_LAST_SYNC' | translate }}</b>\n              </ion-text>\n            </p>\n          }\n        </ion-label>\n        <ion-button\n          size=\"small\"\n          fill=\"solid\"\n          [color]=\"_offline.errorInLastSync ? 'danger' : 'dark'\"\n          [disabled]=\"_offline.isOffline()\"\n          (click)=\"sync()\"\n        >\n          <ion-icon slot=\"start\" name=\"sync\" /> {{ 'IDEA_UNCOMMON.OFFLINE.SYNC_NOW' | translate }}\n        </ion-button>\n      </ion-list-header>\n    }\n  </ion-list>\n  @if (_offline.synchronizing) {\n    <ion-list class=\"aList\">\n      <ion-item>\n        <ion-label class=\"ion-text-center\">\n          <ion-spinner name=\"crescent\" color=\"primary\" />\n        </ion-label>\n      </ion-item>\n    </ion-list>\n  }\n  @if (_offline.useQueueAPIRequests) {\n    <ion-list class=\"aList\">\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD' | translate }}</h2>\n          <p>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD_QUEUE_REQUESTS_EXPLANATION' | translate }}</p>\n        </ion-label>\n      </ion-list-header>\n      @if (!_offline.queueAPIRequests.length) {\n        <ion-item>\n          <i>{{ 'IDEA_UNCOMMON.OFFLINE.NO_ELEMENTS_TO_UPLOAD' | translate }}</i>\n          <ion-icon slot=\"end\" size=\"small\" name=\"checkmark\" color=\"success\" />\n        </ion-item>\n      }\n      @for (r of _offline.queueAPIRequests; track r; let odd = $odd) {\n        <ion-item [class.oddItem]=\"odd\">\n          <ion-label class=\"ion-text-wrap\">\n            {{ r.description }}\n            @if (r.error) {\n              <p>\n                <ion-text color=\"danger\">\n                  <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_CODE' | translate }}: {{ r.error }}</b>\n                </ion-text>\n                <br />\n                {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_I' | translate }}<br />\n                {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_II' | translate }}<br />\n                {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_III' | translate }}\n              </p>\n            }\n          </ion-label>\n          @if (r.error) {\n            <ion-button\n              fill=\"clear\"\n              slot=\"end\"\n              color=\"danger\"\n              [title]=\"'IDEA_UNCOMMON.OFFLINE.CANCEL_REQUEST' | translate\"\n              (click)=\"deleteRequest(r)\"\n            >\n              <ion-icon slot=\"icon-only\" name=\"trash\" />\n            </ion-button>\n          }\n          @if (r.error) {\n            <ion-button\n              fill=\"clear\"\n              slot=\"end\"\n              color=\"medium\"\n              [title]=\"'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_LOG' | translate\"\n              (click)=\"downloadRequestLog(r)\"\n            >\n              <ion-icon slot=\"icon-only\" name=\"download\" />\n            </ion-button>\n          }\n          @if (_offline.synchronizing) {\n            <ion-spinner slot=\"end\" name=\"dots\" />\n          }\n        </ion-item>\n      }\n    </ion-list>\n  }\n  @if (_offline.getResources().length) {\n    <ion-list class=\"aList\">\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD' | translate }}</h2>\n          <p>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_RESOURCES_EXPLANATION' | translate }}</p>\n        </ion-label>\n      </ion-list-header>\n      @for (r of _offline.getResources(); track r) {\n        <idea-cacheable-resource [resource]=\"_offline.getCacheableResource(r)\" />\n      }\n    </ion-list>\n  }\n</ion-content>\n", styles: [".aList{max-width:500px;margin:0 auto}.aList ion-list-header{padding-right:10px}.aList ion-list-header h3.lastSyncAt{margin-top:6px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"ideaToolbar\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"close()\">\n        <ion-icon name=\"close\" slot=\"icon-only\" />\n      </ion-button>\n    </ion-buttons>\n    <ion-title>\n      {{ 'IDEA_UNCOMMON.OFFLINE.OFFLINE_MANAGER' | translate }}\n    </ion-title>\n    <ion-buttons slot=\"end\">\n      <ion-button [title]=\"'IDEA_UNCOMMON.OFFLINE.ADVANCED_ACTIONS' | translate\" (click)=\"actions()\">\n        <ion-icon slot=\"icon-only\" name=\"ellipsis-vertical\" />\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n<ion-content>\n  <ion-list class=\"aList\">\n    @if (!_offline.synchronizing() && _offline.requiresManualConfirmation()) {\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_UNCOMMON.OFFLINE.HUGE_SYNC_NEED_MANUAL_CONFIRMATION' | translate }}</h2>\n        </ion-label>\n      </ion-list-header>\n    }\n    @if (!_offline.synchronizing()) {\n      <ion-list-header>\n        <ion-label class=\"ion-text-wrap\">\n          <h3 class=\"lastSyncAt\">\n            {{ 'IDEA_UNCOMMON.OFFLINE.LAST_SYNC' | translate }}:\n            <ion-text>\n              {{\n                _offline.lastSyncAt()\n                  ? (_offline.lastSyncAt() | dateLocale: 'medium')\n                  : ('IDEA_UNCOMMON.OFFLINE.NEVER' | translate)\n              }}\n            </ion-text>\n          </h3>\n          @if (_offline.errorInLastSync()) {\n            <p>\n              <ion-text color=\"danger\">\n                <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_DURING_LAST_SYNC' | translate }}</b>\n              </ion-text>\n            </p>\n          }\n        </ion-label>\n        <ion-button\n          size=\"small\"\n          fill=\"solid\"\n          [color]=\"_offline.errorInLastSync() ? 'danger' : 'dark'\"\n          [disabled]=\"_offline.isOffline()\"\n          (click)=\"sync()\"\n        >\n          <ion-icon slot=\"start\" name=\"sync\" /> {{ 'IDEA_UNCOMMON.OFFLINE.SYNC_NOW' | translate }}\n        </ion-button>\n      </ion-list-header>\n    }\n  </ion-list>\n  @if (_offline.synchronizing()) {\n    <ion-list class=\"aList\">\n      <ion-item>\n        <ion-label class=\"ion-text-center\">\n          <ion-spinner name=\"crescent\" color=\"primary\" />\n        </ion-label>\n      </ion-item>\n    </ion-list>\n  }\n  @if (_offline.useQueueAPIRequests) {\n    <ion-list class=\"aList\">\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD' | translate }}</h2>\n          <p>{{ 'IDEA_UNCOMMON.OFFLINE.UPLOAD_QUEUE_REQUESTS_EXPLANATION' | translate }}</p>\n        </ion-label>\n      </ion-list-header>\n      @if (!_offline.queueAPIRequests.length) {\n        <ion-item>\n          <i>{{ 'IDEA_UNCOMMON.OFFLINE.NO_ELEMENTS_TO_UPLOAD' | translate }}</i>\n          <ion-icon slot=\"end\" size=\"small\" name=\"checkmark\" color=\"success\" />\n        </ion-item>\n      }\n      @for (r of _offline.queueAPIRequests; track r; let odd = $odd) {\n        <ion-item [class.oddItem]=\"odd\">\n          <ion-label class=\"ion-text-wrap\">\n            {{ r.description }}\n            @if (r.error) {\n              <p>\n                <ion-text color=\"danger\">\n                  <b>{{ 'IDEA_UNCOMMON.OFFLINE.ERROR_CODE' | translate }}: {{ r.error }}</b>\n                </ion-text>\n                <br />\n                {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_I' | translate }}<br />\n                {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_II' | translate }}<br />\n                {{ 'IDEA_UNCOMMON.OFFLINE.REQUEST_FAILED_EXPLANATION_III' | translate }}\n              </p>\n            }\n          </ion-label>\n          @if (r.error) {\n            <ion-button\n              fill=\"clear\"\n              slot=\"end\"\n              color=\"danger\"\n              [title]=\"'IDEA_UNCOMMON.OFFLINE.CANCEL_REQUEST' | translate\"\n              (click)=\"deleteRequest(r)\"\n            >\n              <ion-icon slot=\"icon-only\" name=\"trash\" />\n            </ion-button>\n          }\n          @if (r.error) {\n            <ion-button\n              fill=\"clear\"\n              slot=\"end\"\n              color=\"medium\"\n              [title]=\"'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_LOG' | translate\"\n              (click)=\"downloadRequestLog(r)\"\n            >\n              <ion-icon slot=\"icon-only\" name=\"download\" />\n            </ion-button>\n          }\n          @if (_offline.synchronizing()) {\n            <ion-spinner slot=\"end\" name=\"dots\" />\n          }\n        </ion-item>\n      }\n    </ion-list>\n  }\n  @if (_offline.getResources().length) {\n    <ion-list class=\"aList\">\n      <ion-list-header>\n        <ion-label>\n          <h2>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD' | translate }}</h2>\n          <p>{{ 'IDEA_UNCOMMON.OFFLINE.DOWNLOAD_RESOURCES_EXPLANATION' | translate }}</p>\n        </ion-label>\n      </ion-list-header>\n      @for (r of _offline.getResources(); track r) {\n        <idea-cacheable-resource [resource]=\"_offline.getCacheableResource(r)\" />\n      }\n    </ion-list>\n  }\n</ion-content>\n", styles: [".aList{max-width:500px;margin:0 auto}.aList ion-list-header{padding-right:10px}.aList ion-list-header h3.lastSyncAt{margin-top:6px}\n"] }]
         }] });
 
 class IDEAOfflineIndicatorComponent {
@@ -3540,7 +3589,8 @@ class IDEAOfflineIndicatorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: IDEAOfflineIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEAOfflineIndicatorComponent, isStandalone: true, selector: "idea-offline-indicator", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, edge: { classPropertyName: "edge", publicName: "edge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (
-      _platform.is('mobile') && (_offline.isOffline() || _offline.synchronizing || _offline.requiresManualConfirmation)
+      _platform.is('mobile') &&
+      (_offline.isOffline() || _offline.synchronizing() || _offline.requiresManualConfirmation())
     ) {
       <ion-fab [vertical]="vertical()" [horizontal]="horizontal()" [edge]="edge()">
         <ion-fab-button color="dark" size="small" (click)="showStatus()">
@@ -3549,11 +3599,11 @@ class IDEAOfflineIndicatorComponent {
             <ion-icon name="airplane" />
           }
           <!-- SYNCHRONISING -->
-          @if (_offline.isOnline() && _offline.synchronizing) {
+          @if (_offline.isOnline() && _offline.synchronizing()) {
             <ion-icon name="sync" />
           }
           <!-- NEED MANAL SYNCHRONISATION -->
-          @if (_offline.isOnline() && _offline.requiresManualConfirmation) {
+          @if (_offline.isOnline() && _offline.requiresManualConfirmation()) {
             <ion-icon name="pause" />
           }
         </ion-fab-button>
@@ -3569,7 +3619,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     @if (
-      _platform.is('mobile') && (_offline.isOffline() || _offline.synchronizing || _offline.requiresManualConfirmation)
+      _platform.is('mobile') &&
+      (_offline.isOffline() || _offline.synchronizing() || _offline.requiresManualConfirmation())
     ) {
       <ion-fab [vertical]="vertical()" [horizontal]="horizontal()" [edge]="edge()">
         <ion-fab-button color="dark" size="small" (click)="showStatus()">
@@ -3578,11 +3629,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             <ion-icon name="airplane" />
           }
           <!-- SYNCHRONISING -->
-          @if (_offline.isOnline() && _offline.synchronizing) {
+          @if (_offline.isOnline() && _offline.synchronizing()) {
             <ion-icon name="sync" />
           }
           <!-- NEED MANAL SYNCHRONISATION -->
-          @if (_offline.isOnline() && _offline.requiresManualConfirmation) {
+          @if (_offline.isOnline() && _offline.requiresManualConfirmation()) {
             <ion-icon name="pause" />
           }
         </ion-fab-button>
@@ -3597,8 +3648,12 @@ class IDEASentimentComponent {
         this._env = inject(IDEAEnvironment);
         this._API = inject(IDEAAWSAPIService);
         this._translate = inject(IDEATranslationsService);
-        this._cd = inject(ChangeDetectorRef);
         this._offline = inject(IDEAOfflineService);
+        /**
+         * The sentiment detected from the input text.
+         */
+        this.sentiment = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sentiment" }] : /* istanbul ignore next */ []));
         /**
          * The input text.
          */
@@ -3625,24 +3680,23 @@ class IDEASentimentComponent {
     }
     async detectSentiment(text) {
         if (!text || this._offline.isOffline())
-            this.sentiment = null;
+            this.sentiment.set(null);
         else {
             try {
                 const { sentiment } = await this._API.postResource('sentiment', {
                     idea: true,
                     body: { project: this._env.idea.project, language: this._translate.getCurrentLang(), text: this.text() }
                 });
-                this.sentiment = sentiment;
-                this.change.emit(this.sentiment);
+                this.sentiment.set(sentiment);
+                this.change.emit(this.sentiment());
             }
             catch (error) {
-                this.sentiment = null;
+                this.sentiment.set(null);
             }
         }
-        this._cd.markForCheck(); // zoneless: re-check after the awaited detection settles
     }
     getColorBySentiment(sentiment) {
-        sentiment = sentiment || this.sentiment;
+        sentiment = sentiment || this.sentiment();
         switch (sentiment) {
             case Sentiment.POSITIVE:
                 return 'success';
@@ -3660,17 +3714,17 @@ class IDEASentimentComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: IDEASentimentComponent, isStandalone: true, selector: "idea-sentiment", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, usesOnChanges: true, ngImport: i0, template: `
     @if (text() && _offline.isOnline()) {
       <ion-item [lines]="lines()" [color]="color()">
-        @if (!sentiment) {
+        @if (!sentiment()) {
           <ion-spinner slot="end" size="small" />
         }
-        @if (sentiment) {
+        @if (sentiment()) {
           <ion-badge
             slot="end"
             size="small"
             [color]="getColorBySentiment()"
-            [title]="'IDEA_UNCOMMON.SENTIMENT.RESULT_HINT' | translate: { sentiment: sentiment }"
+            [title]="'IDEA_UNCOMMON.SENTIMENT.RESULT_HINT' | translate: { sentiment: sentiment() }"
           >
-            {{ 'IDEA_UNCOMMON.SENTIMENT.RESULT.' + sentiment | translate }}
+            {{ 'IDEA_UNCOMMON.SENTIMENT.RESULT.' + sentiment() | translate }}
           </ion-badge>
         }
       </ion-item>
@@ -3686,17 +3740,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     template: `
     @if (text() && _offline.isOnline()) {
       <ion-item [lines]="lines()" [color]="color()">
-        @if (!sentiment) {
+        @if (!sentiment()) {
           <ion-spinner slot="end" size="small" />
         }
-        @if (sentiment) {
+        @if (sentiment()) {
           <ion-badge
             slot="end"
             size="small"
             [color]="getColorBySentiment()"
-            [title]="'IDEA_UNCOMMON.SENTIMENT.RESULT_HINT' | translate: { sentiment: sentiment }"
+            [title]="'IDEA_UNCOMMON.SENTIMENT.RESULT_HINT' | translate: { sentiment: sentiment() }"
           >
-            {{ 'IDEA_UNCOMMON.SENTIMENT.RESULT.' + sentiment | translate }}
+            {{ 'IDEA_UNCOMMON.SENTIMENT.RESULT.' + sentiment() | translate }}
           </ion-badge>
         }
       </ion-item>
@@ -3712,8 +3766,6 @@ class IDEAFromTimeToTimeComponent {
         /**
          * Whether we should start picking the time displaying the afternoon (PM) or the morning (AM, default).
          */
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
         this.period = Periods.AM;
         this.Segments = Segments;
         this.Periods = Periods;
@@ -3875,7 +3927,6 @@ class IDEATimeIntervalComponent {
     constructor() {
         this._modal = inject(ModalController);
         this._translate = inject(IDEATranslationsService);
-        this._cdr = inject(ChangeDetectorRef);
         /**
          * The time interval to set.
          */
@@ -3953,13 +4004,15 @@ class IDEATimeIntervalComponent {
          * On select (with the field disabled) event.
          */
         this.selectWhenDisabled = output();
-        this.isOpening = false;
+        this.valueToDisplay = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueToDisplay" }] : /* istanbul ignore next */ []));
+        this.isOpening = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpening" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         // when the language changes, set the locale
         this.langChangeSubscription = this._translate.onLangChange.subscribe(() => {
-            this.valueToDisplay = this.getValueToDisplay(this.timeInterval());
-            this._cdr.markForCheck();
+            this.valueToDisplay.set(this.getValueToDisplay(this.timeInterval()));
         });
     }
     ngOnDestroy() {
@@ -3968,7 +4021,7 @@ class IDEATimeIntervalComponent {
     }
     ngOnChanges(changes) {
         if (changes.timeInterval)
-            this.valueToDisplay = this.getValueToDisplay(changes.timeInterval.currentValue);
+            this.valueToDisplay.set(this.getValueToDisplay(changes.timeInterval.currentValue));
     }
     getValueToDisplay(timeInterval) {
         if (!timeInterval || !timeInterval.isSet())
@@ -3978,9 +4031,9 @@ class IDEATimeIntervalComponent {
         return ''.concat(this._translate._('IDEA_UNCOMMON.FTTT.FROM'), ' ', new Date(timeInterval.from).toLocaleTimeString(this._translate.getCurrentLang(), dateOpts), ' ', this._translate._('IDEA_UNCOMMON.FTTT.TO').toLowerCase(), ' ', new Date(timeInterval.to).toLocaleTimeString(this._translate.getCurrentLang(), dateOpts));
     }
     async pickTimeInterval() {
-        if (this.isOpening)
+        if (this.isOpening())
             return;
-        this.isOpening = true;
+        this.isOpening.set(true);
         const modal = await this._modal.create({
             component: IDEAFromTimeToTimeComponent,
             componentProps: {
@@ -3994,13 +4047,12 @@ class IDEATimeIntervalComponent {
         modal.onDidDismiss().then((res) => {
             // if the content changed, update the internal values and notify the parent component
             if (res.data === true || res.data === false) {
-                this.valueToDisplay = this.getValueToDisplay(this.timeInterval());
+                this.valueToDisplay.set(this.getValueToDisplay(this.timeInterval()));
                 this.select.emit();
-                this._cdr.markForCheck();
             }
         });
         modal.present();
-        this.isOpening = false;
+        this.isOpening.set(false);
     }
     doSelectWhenDisabled() {
         if (this.disabled())
@@ -4018,8 +4070,8 @@ class IDEATimeIntervalComponent {
       [color]="color()"
       [lines]="lines()"
       [button]="!disabled()"
-      [disabled]="isOpening"
-      [title]="placeholder() || valueToDisplay || ''"
+      [disabled]="isOpening()"
+      [title]="placeholder() || valueToDisplay() || ''"
       [class.withLabel]="label()"
       (click)="disabled() ? doSelectWhenDisabled() : pickTimeInterval()"
     >
@@ -4043,12 +4095,12 @@ class IDEATimeIntervalComponent {
         </ion-label>
       }
       <ion-label class="description" [class.selectable]="!disabled() || tappableWhenDisabled()">
-        @if (!valueToDisplay && !disabled()) {
+        @if (!valueToDisplay() && !disabled()) {
           <ion-text class="placeholder" [class.selectable]="!disabled()">
             {{ placeholder() }}
           </ion-text>
         }
-        {{ valueToDisplay }}
+        {{ valueToDisplay() }}
       </ion-label>
       @if (!disabled()) {
         <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled()" />
@@ -4064,8 +4116,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       [color]="color()"
       [lines]="lines()"
       [button]="!disabled()"
-      [disabled]="isOpening"
-      [title]="placeholder() || valueToDisplay || ''"
+      [disabled]="isOpening()"
+      [title]="placeholder() || valueToDisplay() || ''"
       [class.withLabel]="label()"
       (click)="disabled() ? doSelectWhenDisabled() : pickTimeInterval()"
     >
@@ -4089,12 +4141,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         </ion-label>
       }
       <ion-label class="description" [class.selectable]="!disabled() || tappableWhenDisabled()">
-        @if (!valueToDisplay && !disabled()) {
+        @if (!valueToDisplay() && !disabled()) {
           <ion-text class="placeholder" [class.selectable]="!disabled()">
             {{ placeholder() }}
           </ion-text>
         }
-        {{ valueToDisplay }}
+        {{ valueToDisplay() }}
       </ion-label>
       @if (!disabled()) {
         <ion-icon slot="end" name="caret-down" class="selectIcon" [class.selectable]="!disabled()" />
@@ -4339,6 +4391,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
 /**
  * To subscribe push notifications events.
+ *
+ * These are `Observable` streams fed by native Capacitor listeners (outside the Angular zone). On a
+ * zoneless consumer, render any state you derive from them reactively (signals or the `async` pipe);
+ * a plain field assigned inside `.subscribe(...)` won't schedule change detection.
  */
 class IDEAPushNotificationsService {
     constructor() {